@johly/bits-ui 2.18.1

package/dist/bits/popover/components/popover-content-static.svelte

@@ -0,0 +1,104 @@
+<script lang="ts">
+	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import type { PopoverContentStaticProps } from "../types.js";
+	import { PopoverContentState } from "../popover.svelte.js";
+	import PopperLayer from "../../utilities/popper-layer/popper-layer.svelte";
+	import { noop } from "../../../internal/noop.js";
+	import { createId } from "../../../internal/create-id.js";
+	import { getFloatingContentCSSVars } from "../../../internal/floating-svelte/floating-utils.svelte.js";
+	import PopperLayerForceMount from "../../utilities/popper-layer/popper-layer-force-mount.svelte";
+
+	const uid = $props.id();
+
+	let {
+		child,
+		children,
+		ref = $bindable(null),
+		id = createId(uid),
+		forceMount = false,
+		onCloseAutoFocus = noop,
+		onEscapeKeydown = noop,
+		onInteractOutside = noop,
+		trapFocus = true,
+		preventScroll = false,
+		style,
+		...restProps
+	}: PopoverContentStaticProps = $props();
+
+	const contentState = PopoverContentState.create({
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v)
+		),
+		onInteractOutside: boxWith(() => onInteractOutside),
+		onEscapeKeydown: boxWith(() => onEscapeKeydown),
+		customAnchor: boxWith(() => null),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, contentState.props));
+</script>
+
+{#if forceMount}
+	<PopperLayerForceMount
+		{...mergedProps}
+		{...contentState.popperProps}
+		ref={contentState.opts.ref}
+		isStatic
+		enabled={contentState.root.opts.open.current}
+		{id}
+		{trapFocus}
+		{preventScroll}
+		loop
+		forceMount={true}
+		{onCloseAutoFocus}
+		shouldRender={contentState.shouldRender}
+	>
+		{#snippet popper({ props })}
+			{@const finalProps = mergeProps(
+				props,
+				{
+					style: getFloatingContentCSSVars("popover"),
+				},
+				{ style }
+			)}
+			{#if child}
+				{@render child({ props: finalProps, ...contentState.snippetProps })}
+			{:else}
+				<div {...finalProps}>
+					{@render children?.()}
+				</div>
+			{/if}
+		{/snippet}
+	</PopperLayerForceMount>
+{:else if !forceMount}
+	<PopperLayer
+		{...mergedProps}
+		{...contentState.popperProps}
+		ref={contentState.opts.ref}
+		isStatic
+		open={contentState.root.opts.open.current}
+		{id}
+		{trapFocus}
+		{preventScroll}
+		loop
+		forceMount={false}
+		{onCloseAutoFocus}
+		shouldRender={contentState.shouldRender}
+	>
+		{#snippet popper({ props })}
+			{@const finalProps = mergeProps(
+				props,
+				{ style: getFloatingContentCSSVars("popover") },
+				{ style }
+			)}
+			{#if child}
+				{@render child({ props: finalProps, ...contentState.snippetProps })}
+			{:else}
+				<div {...finalProps}>
+					{@render children?.()}
+				</div>
+			{/if}
+		{/snippet}
+	</PopperLayer>
+{/if}

package/dist/bits/popover/components/popover-content-static.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { PopoverContentStaticProps } from "../types.js";
+declare const PopoverContentStatic: import("svelte").Component<PopoverContentStaticProps, {}, "ref">;
+type PopoverContentStatic = ReturnType<typeof PopoverContentStatic>;
+export default PopoverContentStatic;

package/dist/bits/popover/components/popover-content.svelte

@@ -0,0 +1,121 @@
+<script lang="ts">
+	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import type { PopoverContentProps } from "../types.js";
+	import { PopoverContentState } from "../popover.svelte.js";
+	import PopperLayer from "../../utilities/popper-layer/popper-layer.svelte";
+	import { noop } from "../../../internal/noop.js";
+	import { createId } from "../../../internal/create-id.js";
+	import { getFloatingContentCSSVars } from "../../../internal/floating-svelte/floating-utils.svelte.js";
+	import PopperLayerForceMount from "../../utilities/popper-layer/popper-layer-force-mount.svelte";
+
+	const uid = $props.id();
+
+	let {
+		child,
+		children,
+		ref = $bindable(null),
+		id = createId(uid),
+		forceMount = false,
+		onOpenAutoFocus = noop,
+		onCloseAutoFocus = noop,
+		onEscapeKeydown = noop,
+		onInteractOutside = noop,
+		trapFocus = true,
+		preventScroll = false,
+		customAnchor = null,
+		style,
+		...restProps
+	}: PopoverContentProps = $props();
+
+	const contentState = PopoverContentState.create({
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v)
+		),
+		onInteractOutside: boxWith(() => onInteractOutside),
+		onEscapeKeydown: boxWith(() => onEscapeKeydown),
+		customAnchor: boxWith(() => customAnchor),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, contentState.props));
+
+	// respect user's trapFocus setting, but disable when hover-opened without interaction
+	const effectiveTrapFocus = $derived(trapFocus && contentState.shouldTrapFocus);
+
+	// prevent auto-focus when opened via hover until user interacts
+	function handleOpenAutoFocus(e: Event) {
+		if (!contentState.shouldTrapFocus) {
+			e.preventDefault();
+		}
+		onOpenAutoFocus(e);
+	}
+</script>
+
+{#if forceMount}
+	<PopperLayerForceMount
+		{...mergedProps}
+		{...contentState.popperProps}
+		ref={contentState.opts.ref}
+		enabled={contentState.root.opts.open.current}
+		{id}
+		trapFocus={effectiveTrapFocus}
+		{preventScroll}
+		loop
+		forceMount={true}
+		{customAnchor}
+		onOpenAutoFocus={handleOpenAutoFocus}
+		{onCloseAutoFocus}
+		shouldRender={contentState.shouldRender}
+	>
+		{#snippet popper({ props, wrapperProps })}
+			{@const finalProps = mergeProps(
+				props,
+				{ style: getFloatingContentCSSVars("popover") },
+				{ style }
+			)}
+			{#if child}
+				{@render child({ props: finalProps, wrapperProps, ...contentState.snippetProps })}
+			{:else}
+				<div {...wrapperProps}>
+					<div {...finalProps}>
+						{@render children?.()}
+					</div>
+				</div>
+			{/if}
+		{/snippet}
+	</PopperLayerForceMount>
+{:else if !forceMount}
+	<PopperLayer
+		{...mergedProps}
+		{...contentState.popperProps}
+		ref={contentState.opts.ref}
+		open={contentState.root.opts.open.current}
+		{id}
+		trapFocus={effectiveTrapFocus}
+		{preventScroll}
+		loop
+		forceMount={false}
+		{customAnchor}
+		onOpenAutoFocus={handleOpenAutoFocus}
+		{onCloseAutoFocus}
+		shouldRender={contentState.shouldRender}
+	>
+		{#snippet popper({ props, wrapperProps })}
+			{@const finalProps = mergeProps(
+				props,
+				{ style: getFloatingContentCSSVars("popover") },
+				{ style }
+			)}
+			{#if child}
+				{@render child({ props: finalProps, wrapperProps, ...contentState.snippetProps })}
+			{:else}
+				<div {...wrapperProps}>
+					<div {...finalProps}>
+						{@render children?.()}
+					</div>
+				</div>
+			{/if}
+		{/snippet}
+	</PopperLayer>
+{/if}

package/dist/bits/popover/components/popover-content.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { PopoverContentProps } from "../types.js";
+declare const PopoverContent: import("svelte").Component<PopoverContentProps, {}, "ref">;
+type PopoverContent = ReturnType<typeof PopoverContent>;
+export default PopoverContent;

package/dist/bits/popover/components/popover-overlay.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import { PopoverOverlayState } from "../popover.svelte.js";
+	import type { PopoverOverlayProps } from "../types.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
+
+	let {
+		id = createId(uid),
+		forceMount = false,
+		child,
+		children,
+		ref = $bindable(null),
+		...restProps
+	}: PopoverOverlayProps = $props();
+
+	const overlayState = PopoverOverlayState.create({
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v)
+		),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, overlayState.props));
+</script>
+
+{#if overlayState.shouldRender || forceMount}
+	{#if child}
+		{@render child({ props: mergeProps(mergedProps), ...overlayState.snippetProps })}
+	{:else}
+		<div {...mergeProps(mergedProps)}>
+			{@render children?.(overlayState.snippetProps)}
+		</div>
+	{/if}
+{/if}

package/dist/bits/popover/components/popover-overlay.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { PopoverOverlayProps } from "../types.js";
+declare const PopoverOverlay: import("svelte").Component<PopoverOverlayProps, {}, "ref">;
+type PopoverOverlay = ReturnType<typeof PopoverOverlay>;
+export default PopoverOverlay;

package/dist/bits/popover/components/popover-trigger.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import type { PopoverTriggerProps } from "../types.js";
+	import { PopoverTriggerState } from "../popover.svelte.js";
+	import { createId } from "../../../internal/create-id.js";
+	import FloatingLayerAnchor from "../../utilities/floating-layer/components/floating-layer-anchor.svelte";
+
+	const uid = $props.id();
+
+	let {
+		children,
+		child,
+		id = createId(uid),
+		ref = $bindable(null),
+		type = "button",
+		disabled = false,
+		openOnHover = false,
+		openDelay = 700,
+		closeDelay = 300,
+		...restProps
+	}: PopoverTriggerProps = $props();
+
+	const triggerState = PopoverTriggerState.create({
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v)
+		),
+		disabled: boxWith(() => Boolean(disabled)),
+		openOnHover: boxWith(() => openOnHover),
+		openDelay: boxWith(() => openDelay),
+		closeDelay: boxWith(() => closeDelay),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, triggerState.props, { type }));
+</script>
+
+<FloatingLayerAnchor {id} ref={triggerState.opts.ref}>
+	{#if child}
+		{@render child({ props: mergedProps })}
+	{:else}
+		<button {...mergedProps}>
+			{@render children?.()}
+		</button>
+	{/if}
+</FloatingLayerAnchor>

package/dist/bits/popover/components/popover-trigger.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { PopoverTriggerProps } from "../types.js";
+declare const PopoverTrigger: import("svelte").Component<PopoverTriggerProps, {}, "ref">;
+type PopoverTrigger = ReturnType<typeof PopoverTrigger>;
+export default PopoverTrigger;

package/dist/bits/popover/components/popover.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { boxWith } from "svelte-toolbelt";
+	import type { PopoverRootProps } from "../types.js";
+	import { PopoverRootState } from "../popover.svelte.js";
+	import FloatingLayer from "../../utilities/floating-layer/components/floating-layer.svelte";
+	import { noop } from "../../../internal/noop.js";
+
+	let {
+		open = $bindable(false),
+		onOpenChange = noop,
+		onOpenChangeComplete = noop,
+		children,
+	}: PopoverRootProps = $props();
+
+	PopoverRootState.create({
+		open: boxWith(
+			() => open,
+			(v) => {
+				open = v;
+				onOpenChange(v);
+			}
+		),
+		onOpenChangeComplete: boxWith(() => onOpenChangeComplete),
+	});
+</script>
+
+<FloatingLayer>
+	{@render children?.()}
+</FloatingLayer>

package/dist/bits/popover/components/popover.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const Popover: import("svelte").Component<import("../types.js").PopoverRootPropsWithoutHTML, {}, "open">;
+type Popover = ReturnType<typeof Popover>;
+export default Popover;

package/dist/bits/popover/exports.d.ts

@@ -0,0 +1,9 @@
+export { default as Root } from "./components/popover.svelte";
+export { default as Arrow } from "./components/popover-arrow.svelte";
+export { default as Content } from "./components/popover-content.svelte";
+export { default as ContentStatic } from "./components/popover-content-static.svelte";
+export { default as Trigger } from "./components/popover-trigger.svelte";
+export { default as Close } from "./components/popover-close.svelte";
+export { default as Portal } from "../utilities/portal/portal.svelte";
+export { default as Overlay } from "./components/popover-overlay.svelte";
+export type { PopoverRootProps as RootProps, PopoverArrowProps as ArrowProps, PopoverContentProps as ContentProps, PopoverContentStaticProps as ContentStaticProps, PopoverTriggerProps as TriggerProps, PopoverCloseProps as CloseProps, PopoverPortalProps as PortalProps, PopoverOverlayProps as OverlayProps, } from "./types.js";

package/dist/bits/popover/exports.js

@@ -0,0 +1,8 @@
+export { default as Root } from "./components/popover.svelte";
+export { default as Arrow } from "./components/popover-arrow.svelte";
+export { default as Content } from "./components/popover-content.svelte";
+export { default as ContentStatic } from "./components/popover-content-static.svelte";
+export { default as Trigger } from "./components/popover-trigger.svelte";
+export { default as Close } from "./components/popover-close.svelte";
+export { default as Portal } from "../utilities/portal/portal.svelte";
+export { default as Overlay } from "./components/popover-overlay.svelte";

package/dist/bits/popover/index.d.ts

@@ -0,0 +1 @@
+export * as Popover from "./exports.js";

package/dist/bits/popover/index.js

@@ -0,0 +1 @@
+export * as Popover from "./exports.js";

package/dist/bits/popover/popover.svelte.d.ts

@@ -0,0 +1,148 @@
+import { type ReadableBoxedValues, type WritableBoxedValues, DOMContext } from "svelte-toolbelt";
+import type { BitsFocusEvent, BitsKeyboardEvent, BitsMouseEvent, BitsPointerEvent, OnChangeFn, RefAttachment, WithRefOpts } from "../../internal/types.js";
+import type { Measurable } from "../../internal/floating-svelte/types.js";
+import { PresenceManager } from "../../internal/presence-manager.svelte.js";
+interface PopoverRootStateOpts extends WritableBoxedValues<{
+    open: boolean;
+}>, ReadableBoxedValues<{
+    onOpenChangeComplete: OnChangeFn<boolean>;
+}> {
+}
+export declare class PopoverRootState {
+    #private;
+    static create(opts: PopoverRootStateOpts): PopoverRootState;
+    readonly opts: PopoverRootStateOpts;
+    contentNode: HTMLElement | null;
+    contentPresence: PresenceManager;
+    triggerNode: HTMLElement | null;
+    overlayNode: HTMLElement | null;
+    overlayPresence: PresenceManager;
+    openedViaHover: boolean;
+    hasInteractedWithContent: boolean;
+    hoverCooldown: boolean;
+    closeDelay: number;
+    constructor(opts: PopoverRootStateOpts);
+    setDomContext(ctx: DOMContext): void;
+    toggleOpen(): void;
+    handleClose(): void;
+    handleHoverOpen(): void;
+    handleHoverClose(): void;
+    handleDelayedHoverClose(): void;
+    cancelDelayedClose(): void;
+    markInteraction(): void;
+}
+interface PopoverTriggerStateOpts extends WithRefOpts, ReadableBoxedValues<{
+    disabled: boolean;
+    openOnHover: boolean;
+    openDelay: number;
+    closeDelay: number;
+}> {
+}
+export declare class PopoverTriggerState {
+    #private;
+    static create(opts: PopoverTriggerStateOpts): PopoverTriggerState;
+    readonly opts: PopoverTriggerStateOpts;
+    readonly root: PopoverRootState;
+    readonly attachment: RefAttachment;
+    readonly domContext: DOMContext;
+    constructor(opts: PopoverTriggerStateOpts, root: PopoverRootState);
+    onpointerenter(e: BitsPointerEvent): void;
+    onpointerleave(e: BitsPointerEvent): void;
+    onclick(e: BitsMouseEvent): void;
+    onkeydown(e: BitsKeyboardEvent): void;
+    readonly props: {
+        readonly id: string;
+        readonly "aria-haspopup": "dialog";
+        readonly "aria-expanded": "true" | "false";
+        readonly "data-state": "open" | "closed";
+        readonly "aria-controls": string | undefined;
+        readonly disabled: boolean;
+        readonly onkeydown: (e: BitsKeyboardEvent) => void;
+        readonly onclick: (e: BitsMouseEvent) => void;
+        readonly onpointerenter: (e: BitsPointerEvent) => void;
+        readonly onpointerleave: (e: BitsPointerEvent) => void;
+    };
+}
+interface PopoverContentStateOpts extends WithRefOpts, ReadableBoxedValues<{
+    onInteractOutside: (e: PointerEvent) => void;
+    onEscapeKeydown: (e: KeyboardEvent) => void;
+    customAnchor: string | HTMLElement | null | Measurable;
+}> {
+}
+export declare class PopoverContentState {
+    static create(opts: PopoverContentStateOpts): PopoverContentState;
+    readonly opts: PopoverContentStateOpts;
+    readonly root: PopoverRootState;
+    readonly attachment: RefAttachment;
+    constructor(opts: PopoverContentStateOpts, root: PopoverRootState);
+    onpointerdown(_: BitsPointerEvent): void;
+    onfocusin(e: BitsFocusEvent): void;
+    onpointerenter(e: BitsPointerEvent): void;
+    onpointerleave(e: BitsPointerEvent): void;
+    onInteractOutside: (e: PointerEvent) => void;
+    onEscapeKeydown: (e: KeyboardEvent) => void;
+    get shouldRender(): boolean;
+    get shouldTrapFocus(): boolean;
+    readonly snippetProps: {
+        open: boolean;
+    };
+    readonly props: {
+        readonly style: {
+            readonly pointerEvents: "auto";
+            readonly contain: "layout style";
+        };
+        readonly onpointerdown: (_: BitsPointerEvent) => void;
+        readonly onfocusin: (e: BitsFocusEvent) => void;
+        readonly onpointerenter: (e: BitsPointerEvent) => void;
+        readonly onpointerleave: (e: BitsPointerEvent) => void;
+        readonly "data-starting-style"?: "";
+        readonly "data-ending-style"?: "";
+        readonly id: string;
+        readonly tabindex: -1;
+        readonly "data-state": "open" | "closed";
+    };
+    readonly popperProps: {
+        onInteractOutside: (e: PointerEvent) => void;
+        onEscapeKeydown: (e: KeyboardEvent) => void;
+    };
+}
+interface PopoverCloseStateOpts extends WithRefOpts {
+}
+export declare class PopoverCloseState {
+    static create(opts: PopoverCloseStateOpts): PopoverCloseState;
+    readonly opts: PopoverCloseStateOpts;
+    readonly root: PopoverRootState;
+    readonly attachment: RefAttachment;
+    constructor(opts: PopoverCloseStateOpts, root: PopoverRootState);
+    onclick(_: BitsPointerEvent): void;
+    onkeydown(e: BitsKeyboardEvent): void;
+    readonly props: {
+        readonly id: string;
+        readonly onclick: (_: BitsPointerEvent) => void;
+        readonly onkeydown: (e: BitsKeyboardEvent) => void;
+        readonly type: "button";
+    };
+}
+interface PopoverOverlayStateOpts extends WithRefOpts {
+}
+export declare class PopoverOverlayState {
+    static create(opts: PopoverOverlayStateOpts): PopoverOverlayState;
+    readonly opts: PopoverOverlayStateOpts;
+    readonly root: PopoverRootState;
+    readonly attachment: RefAttachment;
+    constructor(opts: PopoverOverlayStateOpts, root: PopoverRootState);
+    get shouldRender(): boolean;
+    readonly snippetProps: {
+        open: boolean;
+    };
+    readonly props: {
+        readonly "data-starting-style"?: "";
+        readonly "data-ending-style"?: "";
+        readonly id: string;
+        readonly style: {
+            readonly pointerEvents: "auto";
+        };
+        readonly "data-state": "open" | "closed";
+    };
+}
+export {};