@widgetic/design-system 0.5.22 → 0.5.24

package/dist/components/modals/Portal.svelte

@@ -1,124 +1,128 @@
 <!-- Portal component for mounting elements outside their normal DOM hierarchy -->
 <script lang="ts">
-    import { onMount, onDestroy } from 'svelte';
-    import { readable, type Readable } from 'svelte/store';
-    import { useOptionalTextDirection, type TextDirection } from '../textDirection.js';
+	import { onMount, onDestroy } from 'svelte';
+	import { readable, type Readable } from 'svelte/store';
+	import { useOptionalTextDirection, type TextDirection } from '../textDirection.js';
 
-    /**
-     * Component props
-     */
-    let defaultTarget: string = 'portal-element';
-    export let target: string | HTMLElement | undefined = defaultTarget;
-    export let clickThrough = false; // Whether to allow click events to pass through
-    // Class
-    let className = '';
-    export { className as class };
-    // Style prop
-    export let style = '';
-    export let clientWidth = 0;
-    export let clientHeight = 0;
+	/**
+	 * Component props
+	 */
+	let defaultTarget: string = 'portal-element';
+	export let target: string | HTMLElement | undefined = defaultTarget;
+	export let clickThrough = false; // Whether to allow click events to pass through
+	// Class
+	let className = '';
+	export { className as class };
+	// Style prop
+	export let style = '';
+	export let clientWidth = 0;
+	export let clientHeight = 0;
 
-    /**
-     * Local Variables
-     */
-    let host: HTMLElement | null = null; // host(target) container of the portal: parent target of the portal
-    let portal: HTMLElement; // root portal element
-    /** Only remove host on destroy if Portal created it (never remove editor portal slots). */
-    let hostCreatedByPortal = false;
-    // show logs
-    let showLogs = false;
+	/**
+	 * Local Variables
+	 */
+	let host: HTMLElement | null = null; // host(target) container of the portal: parent target of the portal
+	let portal: HTMLElement; // root portal element
+	/** Only remove host on destroy if Portal created it (never remove editor portal slots). */
+	let hostCreatedByPortal = false;
+	// show logs
+	let showLogs = false;
 
-    // The content leaves the element that carries the direction of its screen, and a pop-up in a layer of the page would read
-    // the direction of the page instead. When a screen above gave one, the portal says it again on its own element (and says
-    // nothing on a page whose screens never did, so the page's own `dir` stays).
-    const screenDirection: Readable<TextDirection | undefined> = useOptionalTextDirection() ?? readable<TextDirection | undefined>(undefined);
+	// The content leaves the element that carries the direction of its screen, and a pop-up in a layer of the page would read
+	// the direction of the page instead. When a screen above gave one, the portal says it again on its own element (and says
+	// nothing on a page whose screens never did, so the page's own `dir` stays).
+	const screenDirection: Readable<TextDirection | undefined> =
+		useOptionalTextDirection() ?? readable<TextDirection | undefined>(undefined);
 
-    onMount(() => {
-        // if(showLogs) console.log('DS Portal target:', target);
-        // If target is an HTML element, use it directly
-        if (target instanceof HTMLElement) {
-            // if(showLogs) console.log('DS Portal target is an HTML element:', target);
-            host = target;
-        } else {
-            const targetId = (target || defaultTarget).replace(/^#/, '');
-            // Prefer id (props-editor-file-browser-portal), then class, then body fallback
-            host = document.getElementById(targetId) as HTMLElement | null;
-            if (!host) {
-                host = document.querySelector(`.${targetId}`) as HTMLElement | null;
-            }
-            // Never adopt the portal's own subtree as its host.
-            //
-            // A caller may name a target after a class that the *portalled content*
-            // also carries (e.g. target `app-header-widget-picker` for a dropdown
-            // whose root div has that same class, so outside-click detection can
-            // find it). The slot is already rendered inside `portal` when onMount
-            // runs, so the class lookup above can return that inner div. Moving
-            // `portal` into it then throws
-            // "HierarchyRequestError: The new child element contains the parent".
-            // Anything equal to, inside, or containing `portal` is not a host.
-            if (host && (host === portal || portal?.contains(host) || host.contains(portal))) {
-                host = null;
-            }
-            // if(showLogs) console.log('DS Portal host:', host, 'target:', target);
+	onMount(() => {
+		// if(showLogs) console.log('DS Portal target:', target);
+		// If target is an HTML element, use it directly
+		if (target instanceof HTMLElement) {
+			// if(showLogs) console.log('DS Portal target is an HTML element:', target);
+			host = target;
+		} else {
+			const targetId = (target || defaultTarget).replace(/^#/, '');
+			// Prefer id (props-editor-file-browser-portal), then class, then body fallback
+			host = document.getElementById(targetId) as HTMLElement | null;
+			if (!host) {
+				host = document.querySelector(`.${targetId}`) as HTMLElement | null;
+			}
+			// Never adopt the portal's own subtree as its host.
+			//
+			// A caller may name a target after a class that the *portalled content*
+			// also carries (e.g. target `app-header-widget-picker` for a dropdown
+			// whose root div has that same class, so outside-click detection can
+			// find it). The slot is already rendered inside `portal` when onMount
+			// runs, so the class lookup can return that inner div. Moving
+			// `portal` into it then throws
+			// "HierarchyRequestError: The new child element contains the parent".
+			// Anything equal to, inside, or containing `portal` is not a host.
+			if (host && (host === portal || portal?.contains(host) || host.contains(portal))) {
+				host = null;
+			}
+			// if(showLogs) console.log('DS Portal host:', host, 'target:', target);
 
-            // Create host container if it doesn't exist
-            if (!host) {
-                hostCreatedByPortal = true;
-                host = document.createElement('div');
-                host.classList.add(targetId);
-                host.id = targetId;
-                document.body.appendChild(host);
-            }
-        }
+			// Create host container if it doesn't exist
+			if (!host) {
+				hostCreatedByPortal = true;
+				host = document.createElement('div');
+				host.classList.add(targetId);
+				host.id = targetId;
+				document.body.appendChild(host);
+			}
+		}
 
-        // if(showLogs) console.log('DS Portal target:', target, 'host:', host, 'portal:', portal);
+		// if(showLogs) console.log('DS Portal target:', target, 'host:', host, 'portal:', portal);
 
-        // Move the portal content to the host
-        if (portal && host) host.appendChild(portal);
-    });
+		// Move the portal content to the host
+		if (portal && host) host.appendChild(portal);
+	});
 
-    onDestroy(() => {
-        // Additional cleanup on component destroy
-        if (portal && host && host.contains(portal)) {
-            host.removeChild(portal);
-        }
-        // Only remove hosts Portal created on body — never delete editor portal slots
-        if (hostCreatedByPortal && host?.parentNode) {
-            host.remove();
-        }
-    });
+	onDestroy(() => {
+		const portalEl = portal;
+		const hostEl = host;
+		// Remove as soon as Svelte tears this Portal down (after global outros on portalled content have finished).
+		// Deferring removal with setTimeout left detached DOM on screen at full opacity after transitions were torn down.
+		if (portalEl && hostEl && hostEl.contains(portalEl)) {
+			hostEl.removeChild(portalEl);
+		}
+		if (hostCreatedByPortal && hostEl?.parentNode) {
+			hostEl.remove();
+		}
+	});
 </script>
 
 <!-- Portal Container -->
-<div bind:this={portal} 
-    class="{className ? `${className} ` : ''}portal-contents{clickThrough ? ' click-through' : ''}" 
-    dir={$screenDirection}
-    style={style}
-    bind:clientWidth
-    bind:clientHeight
+<div
+	bind:this={portal}
+	class="{className ? `${className} ` : ''}portal-contents{clickThrough ? ' click-through' : ''}"
+	dir={$screenDirection}
+	{style}
+	bind:clientWidth
+	bind:clientHeight
 >
-    <slot />
+	<slot />
 </div>
 
 <style>
-    /* Use contents to prevent extra DOM nesting */
-    .portal-contents {
-        position: absolute;
-        top: 0;
-        inset-inline-start: 0;
-        width: 100%;
-        height: 100%;
-        z-index: 99999999;
-        pointer-events: none;
-    }
+	/* Use contents to prevent extra DOM nesting */
+	.portal-contents {
+		position: absolute;
+		top: 0;
+		inset-inline-start: 0;
+		width: 100%;
+		height: 100%;
+		z-index: 99999999;
+		pointer-events: none;
+	}
 
-    :global(.portal-contents > *) {
-        pointer-events: auto;
-    }
+	:global(.portal-contents > *) {
+		pointer-events: auto;
+	}
 
-    /* Click through styles */
-    :global(.portal-contents.click-through),
-    :global(.portal-contents.click-through *) {
-        pointer-events: none !important;
-    }
-</style>
+	/* Click through styles */
+	:global(.portal-contents.click-through),
+	:global(.portal-contents.click-through *) {
+		pointer-events: none !important;
+	}
+</style>

package/dist/components/modals/README.md

@@ -23,8 +23,8 @@ The `ActionModal` component is a reusable confirmation modal that can be used ac
 | `confirmLabel` | string | `'Confirm'` | Label for the confirm button |
 | `cancelLabel` | string | `'Cancel'` | Label for the cancel button |
 | `closeLabel` | string | `'Close modal'` | The words a screen reader says for the close button |
-| `width` | string | `'410px'` | Width of the modal |
-| `height` | string | `'168px'` | Height of the modal |
+| `width` | string | `'400px'` | Width of the modal (the Figma Dialog width) |
+| `height` | string | `'168px'` | Kept for backwards compatibility: the modal is as tall as its content |
 | `modalId` | string | `'delete-confirmation-modal'` | ID for targeting the modal |
 | `modalType` | string | `'deleteConfirmation'` | Type for the modal (for backwards compatibility) |
 | `modalData` | any | `null` | Data for the modal (for backwards compatibility) |
@@ -99,6 +99,20 @@ You can provide custom title and message for specific contexts:
 />
 ``` 
 
+## BaseModal: the frame of a dialog
+
+`BaseModal` is the card (backdrop, 24px radius, border, enter and leave motion) that the other dialogs sit in. It is
+portalled into `target`, so the dim backdrop covers that part of the page and nothing else.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `open` | boolean | `false` | Bindable. Closing it dispatches `close`. |
+| `title` | string | | The title row: a page heading and the close button. |
+| `titlePadding` | `'small' \| 'large'` | `'large'` | Space under the title row (8px or 16px). |
+| `width`, `height` | string | `'808px'`, `'500px'` | Size of the card. The height follows the content (and eases with `animateSize`). |
+| `bare` | boolean | `false` | No title row, no close button, no padding: the content draws all of it, edge to edge. The File Browser's search dialog is one (the search field is its top row). It closes with Escape or a click on the backdrop. |
+| `closeLabel` | string | `'Close modal'` | The words a screen reader says for the close button. |
+
 ## Words in another language
 
 Every word a visitor can see or hear is a prop with an English default, so a page that shows the components in