Fix: mounting each floating element into their own portal by default (#…

…1103) Co-authored-by: Hunter Johnston <64506580 [email protected]>
melt-ui · May 31, 2024 · 98a56e0 · 98a56e0
1 parent 463ab77
commit 98a56e0
Show file tree

Hide file tree

Showing 18 changed files with 32 additions and 18 deletions.
diff --git a/.changeset/itchy-scissors-vanish.md b/.changeset/itchy-scissors-vanish.md
@@ -0,0 1,5 @@
 ---
 '@melt-ui/svelte': minor
 ---
 
 Mount each floating element into their own portal by default now that stack handling has been improved
diff --git a/src/docs/constants.ts b/src/docs/constants.ts
@@ -41,7 41,7 @@ export const DESCRIPTIONS = {
  `Whether or not to close the ${name} when the user clicks outside of it.`,
  BUILDER: (name: string) => `The builder function used to create the ${name} component.`,
  PORTAL: (name = 'floating element') =>
- `The element or selector to render the ${name} into. Nested floating elements are automatically rendered into their parent if not specified. Pass in \`null\` to disable portalling.`,
  `The element or selector to render the ${name} into. Nested floating elements are automatically rendered into their own portal if not specified. Pass in \`null\` to disable portalling. Pass in \`undefined\` to use parent portal.`,
  FORCE_VISIBLE: (name = 'element') =>
  `Whether or not to force the ${name} to always be visible. This is useful for custom transitions and animations using conditional blocks.`,
  ON_CHANGE: (store: string) =>

diff --git a/src/lib/builders/context-menu/create.ts b/src/lib/builders/context-menu/create.ts
@@ -48,7 48,7 @@ const defaults = {
  preventScroll: true,
  escapeBehavior: 'close',
  closeOnOutsideClick: true,
- portal: undefined,
  portal: 'body',
  loop: false,
  dir: 'ltr',
  defaultOpen: false,

diff --git a/src/lib/builders/dialog/create.ts b/src/lib/builders/dialog/create.ts
@@ -43,7 43,7 @@ const defaults = {
  closeOnOutsideClick: true,
  role: 'dialog',
  defaultOpen: false,
- portal: undefined,
  portal: 'body',
  forceVisible: false,
  openFocus: undefined,
  closeFocus: undefined,

diff --git a/src/lib/builders/dialog/types.ts b/src/lib/builders/dialog/types.ts
@@ -2,6 2,7 @@ import type { ChangeFn, FocusProp, IdObj } from '$lib/internal/helpers/index.js'
 import type { BuilderReturn } from '$lib/internal/types.js';
 import type { Writable } from 'svelte/store';
 import type { DialogIdParts, createDialog } from './create.js';
 import type { PortalConfig } from '$lib/internal/actions/portal.js';
 import type { EscapeBehaviorType } from '$lib/internal/actions/index.js';
 export type { DialogComponentEvents } from './events.js';
 export type CreateDialogProps = {
@@ -70,7 71,7 @@ export type CreateDialogProps = {
  *
  * @default 'body'
  */
- portal?: HTMLElement | string | null;
  portal?: PortalConfig | null;
 
  /**
  * If true, the dialog will be visible regardless of the open state.

diff --git a/src/lib/builders/dropdown-menu/create.ts b/src/lib/builders/dropdown-menu/create.ts
@@ -13,7 13,7 @@ const defaults = {
  preventScroll: true,
  escapeBehavior: 'close',
  closeOnOutsideClick: true,
- portal: undefined,
  portal: 'body',
  loop: false,
  dir: 'ltr',
  defaultOpen: false,

diff --git a/src/lib/builders/link-preview/create.ts b/src/lib/builders/link-preview/create.ts
@@ -42,7 42,7 @@ const defaults = {
  arrowSize: 8,
  closeOnOutsideClick: true,
  forceVisible: false,
- portal: undefined,
  portal: 'body',
  escapeBehavior: 'close',
  onOutsideClick: undefined,
  preventTextSelectionOverflow: true,

diff --git a/src/lib/builders/link-preview/types.ts b/src/lib/builders/link-preview/types.ts
@@ -2,6 2,7 @@ import type {
  EscapeBehaviorType,
  FloatingConfig,
  InteractOutsideEvent,
  PortalConfig,
 } from '$lib/internal/actions/index.js';
 import type { ChangeFn, IdObj } from '$lib/internal/helpers/index.js';
 import type { BuilderReturn } from '$lib/internal/types.js';
@@ -109,7 110,7 @@ export type CreateLinkPreviewProps = {
  *
  * @default 'body'
  */
- portal?: HTMLElement | string | null;
  portal?: PortalConfig | null;
 
  /**
  * Optionally override the default ids we assign to the elements

diff --git a/src/lib/builders/listbox/create.ts b/src/lib/builders/listbox/create.ts
@@ -68,7 68,7 @@ const defaults = {
  preventScroll: true,
  escapeBehavior: 'close',
  forceVisible: false,
- portal: undefined,
  portal: 'body',
  builder: 'listbox',
  disabled: false,
  required: false,

diff --git a/src/lib/builders/listbox/types.ts b/src/lib/builders/listbox/types.ts
@@ -2,6 2,7 @@ import type {
  EscapeBehaviorType,
  FloatingConfig,
  InteractOutsideEvent,
  PortalConfig,
 } from '$lib/internal/actions/index.js';
 import type { ChangeFn, IdObj } from '$lib/internal/helpers/index.js';
 import type { BuilderReturn, WhenTrue } from '$lib/internal/types.js';
@@ -146,7 147,7 @@ export type CreateListboxProps<
  *
  * @default 'body'
  */
- portal?: HTMLElement | string | null;
  portal?: PortalConfig | null;
 
  /**
  * Whether the menu content should be displayed even if it is not open.

diff --git a/src/lib/builders/menu/create.ts b/src/lib/builders/menu/create.ts
@@ -73,7 73,7 @@ const defaults = {
  preventScroll: true,
  escapeBehavior: 'close',
  closeOnOutsideClick: true,
- portal: undefined,
  portal: 'body',
  loop: false,
  dir: 'ltr',
  defaultOpen: false,

diff --git a/src/lib/builders/menu/types.ts b/src/lib/builders/menu/types.ts
@@ -2,6 2,7 @@ import type {
  EscapeBehaviorType,
  FloatingConfig,
  InteractOutsideEvent,
  PortalConfig,
 } from '$lib/internal/actions/index.js';
 import type { TextDirection } from '$lib/internal/types.js';
 import type { ChangeFn, FocusProp, IdObj } from '$lib/internal/helpers/index.js';
@@ -60,7 61,7 @@ export type _CreateMenuProps = {
  *
  * @default 'body'
  */
- portal?: HTMLElement | string | null;
  portal?: PortalConfig | null;
 
  /**
  * Whether or not to close the menu when a click occurs outside of it.

diff --git a/src/lib/builders/menubar/create.ts b/src/lib/builders/menubar/create.ts
@@ -100,7 100,7 @@ export function createMenubar(props?: CreateMenubarProps) {
  loop: false,
  escapeBehavior: 'close',
  closeOnOutsideClick: true,
- portal: undefined,
  portal: 'body',
  forceVisible: false,
  defaultOpen: false,
  typeahead: true,

diff --git a/src/lib/builders/popover/create.ts b/src/lib/builders/popover/create.ts
@@ -40,7 40,7 @@ const defaults = {
  preventScroll: false,
  onOpenChange: undefined,
  closeOnOutsideClick: true,
- portal: undefined,
  portal: 'body',
  forceVisible: false,
  openFocus: undefined,
  closeFocus: undefined,

diff --git a/src/lib/builders/popover/types.ts b/src/lib/builders/popover/types.ts
@@ -2,6 2,7 @@ import type {
  EscapeBehaviorType,
  FloatingConfig,
  InteractOutsideEvent,
  PortalConfig,
 } from '$lib/internal/actions/index.js';
 import type { ChangeFn, FocusProp, IdObj } from '$lib/internal/helpers/index.js';
 import type { BuilderReturn } from '$lib/internal/types.js';
@@ -95,7 96,7 @@ export type CreatePopoverProps = {
  *
  * @default 'body'
  */
- portal?: HTMLElement | string | null;
  portal?: PortalConfig | null;
 
  /**
  * Whether the menu content should be displayed even if it is not open.

diff --git a/src/lib/builders/tooltip/create.ts b/src/lib/builders/tooltip/create.ts
@@ -43,7 43,7 @@ const defaults = {
  openDelay: 1000,
  closeDelay: 0,
  forceVisible: false,
- portal: undefined,
  portal: 'body',
  escapeBehavior: 'close',
  disableHoverableContent: false,
  group: undefined,

diff --git a/src/lib/builders/tooltip/types.ts b/src/lib/builders/tooltip/types.ts
@@ -1,4 1,8 @@
-import type { EscapeBehaviorType, FloatingConfig } from '$lib/internal/actions/index.js';
 import type {
  EscapeBehaviorType,
  FloatingConfig,
  PortalConfig,
 } from '$lib/internal/actions/index.js';
 import type { ChangeFn, IdObj } from '$lib/internal/helpers/index.js';
 import type { BuilderReturn } from '$lib/internal/types.js';
 import type { Writable } from 'svelte/store';
@@ -37,7 41,7 @@ export type CreateTooltipProps = {
  *
  * @default 'body'
  */
- portal?: HTMLElement | string | null;
  portal?: PortalConfig | null;
 
  /**
  * Optionally override the default ids we assign to the elements

diff --git a/src/lib/internal/actions/portal.ts b/src/lib/internal/actions/portal.ts
@@ -13,7 13,7 @@ export const usePortal = ((el, target = 'body') => {
  };
  }
 
- async function update(newTarget: HTMLElement | string | undefined) {
  async function update(newTarget: PortalConfig) {
  target = newTarget;
  if (typeof target === 'string') {
  targetEl = document.querySelector(target);