@insymetri/styleguide 0.1.91 → 0.1.92

package/dist/IIPopover/IIPopover.svelte

@@ -24,6 +24,27 @@
 		triggerClass?: string
 		/** Strip the default surface (background, border, radius, shadow) — for content that renders its own. */
 		unstyled?: boolean
+		/**
+		 * Fired when a pointer interaction starts outside the popover. Call
+		 * `event.preventDefault()` to keep the popover open. Interactions inside one of
+		 * the styleguide's own portaled menus (IIDropdownInput, IIMenu…) are already
+		 * kept — see `keepOpenForNestedMenus`.
+		 */
+		onInteractOutside?: (event: PointerEvent) => void
+		/**
+		 * Position the content against this element (or selector) instead of the
+		 * trigger — e.g. a settings panel that should sit beside the whole card its gear
+		 * button lives in. Clicks on the anchor don't count as outside interactions.
+		 */
+		customAnchor?: HTMLElement | string | null
+		/**
+		 * Whether the popover dismisses itself. Default `true`: a click outside or Escape
+		 * closes it, as a menu should. Set `false` for a panel that owns the screen for a
+		 * while and holds work in progress — a live call, a form mid-edit — where a stray
+		 * click elsewhere in the app should not throw it away. It can then be closed only
+		 * by its own trigger or by whoever owns `open`.
+		 */
+		dismissable?: boolean
 	}
 
 	let {
@@ -38,11 +59,36 @@
 		class: className,
 		triggerClass,
 		unstyled = false,
+		onInteractOutside,
+		customAnchor = null,
+		dismissable = true,
 	}: Props = $props()
 
 	const surfaceClasses = unstyled
 		? ''
 		: 'bg-dropdown-bg border border-dropdown-border rounded-10 shadow-dropdown'
+
+	// The menu components (IIDropdownInput, IIMenu, …) portal their list to <body>,
+	// so to bits-ui a click on one of their options is a click OUTSIDE this popover:
+	// it dismissed the popover on pointerdown, unmounting the content — and the
+	// option along with it — before the click could land. A dropdown inside a popover
+	// therefore never changed its value. Every portaled menu marks its list with
+	// `data-menu-content`; an interaction starting there is ours, so keep the popover
+	// open and let the option's own click do its job.
+	function keepOpenForNestedMenus(event: PointerEvent) {
+		const target = event.target
+		if (!dismissable || (target instanceof Element && target.closest('[data-menu-content]'))) {
+			event.preventDefault()
+		}
+		onInteractOutside?.(event)
+	}
+
+	// bits-ui closes on Escape unless the handler defaults it away. A non-dismissable
+	// panel has to opt out of that too, or Escape would still throw away the very work
+	// the outside-click guard above is protecting.
+	function keepOpenOnEscape(event: KeyboardEvent) {
+		if (!dismissable) event.preventDefault()
+	}
 </script>
 
 <Popover.Root bind:open {onOpenChange}>
@@ -62,6 +108,9 @@
 			{side}
 			{align}
 			{sideOffset}
+			{customAnchor}
+			onInteractOutside={keepOpenForNestedMenus}
+			onEscapeKeydown={keepOpenOnEscape}
 			class={cn(
 				surfaceClasses,
 				'z-16 animate-slide-in motion-reduce:animate-none',

package/dist/IIPopover/IIPopover.svelte.d.ts

@@ -21,6 +21,27 @@ type Props = {
     triggerClass?: string;
     /** Strip the default surface (background, border, radius, shadow) — for content that renders its own. */
     unstyled?: boolean;
+    /**
+     * Fired when a pointer interaction starts outside the popover. Call
+     * `event.preventDefault()` to keep the popover open. Interactions inside one of
+     * the styleguide's own portaled menus (IIDropdownInput, IIMenu…) are already
+     * kept — see `keepOpenForNestedMenus`.
+     */
+    onInteractOutside?: (event: PointerEvent) => void;
+    /**
+     * Position the content against this element (or selector) instead of the
+     * trigger — e.g. a settings panel that should sit beside the whole card its gear
+     * button lives in. Clicks on the anchor don't count as outside interactions.
+     */
+    customAnchor?: HTMLElement | string | null;
+    /**
+     * Whether the popover dismisses itself. Default `true`: a click outside or Escape
+     * closes it, as a menu should. Set `false` for a panel that owns the screen for a
+     * while and holds work in progress — a live call, a form mid-edit — where a stray
+     * click elsewhere in the app should not throw it away. It can then be closed only
+     * by its own trigger or by whoever owns `open`.
+     */
+    dismissable?: boolean;
 };
 declare const IIPopover: import("svelte").Component<Props, {}, "open">;
 type IIPopover = ReturnType<typeof IIPopover>;

package/dist/IIPopover/IIPopoverNestedMenuProof.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import IIPopover from './IIPopover.svelte'
+	import {IIButton} from '../IIButton'
+	import {IIDropdownInput} from '../IIDropdownInput'
+
+	// Fixture for the play test: a menu-style input inside a popover. Its option
+	// list portals to <body>, so choosing an option used to read as an outside
+	// click and dismiss the popover before the choice registered.
+	let open = $state(false)
+	let device = $state('')
+</script>
+
+<IIPopover bind:open>
+	{#snippet trigger()}
+		<IIButton variant="secondary" size="sm">Audio settings</IIButton>
+	{/snippet}
+	{#snippet content()}
+		<div class="p-12 w-240 flex flex-col gap-8">
+			<p class="text-small text-secondary">Speaker</p>
+			<IIDropdownInput
+				items={[
+					{label: 'System Default', value: ''},
+					{label: 'Headset', value: 'headset'},
+					{label: 'Desk speakers', value: 'desk'},
+				]}
+				bind:value={device}
+				class="w-full"
+			/>
+			<p class="text-small text-body" data-testid="chosen">Chosen: {device || 'default'}</p>
+		</div>
+	{/snippet}
+</IIPopover>

package/dist/IIPopover/IIPopoverNestedMenuProof.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const IIPopoverNestedMenuProof: import("svelte").Component<Record<string, never>, {}, "">;
+type IIPopoverNestedMenuProof = ReturnType<typeof IIPopoverNestedMenuProof>;
+export default IIPopoverNestedMenuProof;

package/dist/IIPopover/IIPopoverNonDismissableProof.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import IIPopover from './IIPopover.svelte'
+	import {IIButton} from '../IIButton'
+
+	// Fixture for the play test: a panel that must survive a click elsewhere in the app
+	// and an Escape press, and close only from its own trigger.
+	let open = $state(false)
+</script>
+
+<div class="flex flex-col gap-16">
+	<IIPopover bind:open dismissable={false}>
+		{#snippet trigger()}
+			<IIButton variant="secondary" size="sm">{open ? 'Collapse panel' : 'Open panel'}</IIButton>
+		{/snippet}
+		{#snippet content()}
+			<div class="p-12 w-200">
+				<p class="text-small text-body">Work in progress.</p>
+			</div>
+		{/snippet}
+	</IIPopover>
+	<button type="button" data-testid="elsewhere" class="text-small text-secondary">Somewhere else</button>
+</div>

package/dist/IIPopover/IIPopoverNonDismissableProof.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const IIPopoverNonDismissableProof: import("svelte").Component<Record<string, never>, {}, "">;
+type IIPopoverNonDismissableProof = ReturnType<typeof IIPopoverNonDismissableProof>;
+export default IIPopoverNonDismissableProof;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@insymetri/styleguide",
-	"version": "0.1.91",
+	"version": "0.1.92",
 	"description": "Insymetri shared UI component library built with Svelte 5",
 	"type": "module",
 	"scripts": {