melt-ui · TGlide · Apr 21, 2024 · Mar 30, 2024 · Mar 30, 2024 · Mar 30, 2024
diff --git a/.changeset/rude-snakes-allow.md b/.changeset/rude-snakes-allow.md
@@ -0,0 1,5 @@
 ---
 '@melt-ui/svelte': minor
 ---
 
 Fixed escape keydown behavior by using stacks to correctly handle nested floating elements
diff --git a/.changeset/witty-games-beg.md b/.changeset/witty-games-beg.md
@@ -0,0 1,5 @@
 ---
 '@melt-ui/svelte': minor
 ---
 
 Changed `closeOnEscape` builder prop to `escapeBehavior` to provide even further fine-grained control over escape behavior in builders (closes #1142)
diff --git a/src/docs/constants.ts b/src/docs/constants.ts
@@ -13,6 13,17 @@ export const SEE = {
  },
 };
 
 const createBulletsHTML = (bullets: string[]) => {
  return bullets.map((bullet) => `<li>${bullet}</li>`).join('');
 };
 
 const ESCAPE_BEHAVIOR_BULLETS = (name: string) => [
  `\`close\`: Closes the ${name} immediately.`,
  `\`ignore\`: Prevents the ${name} from closing and also blocks the parent element from closing in response to the Escape key.`,
  `\`defer-otherwise-close\`: Delegates the action to the parent element. If no parent is found, it closes the element.`,
  `\`defer-otherwise-ignore\`: Delegates the action to the parent element. If no parent is found, nothing is done.`,
 ];
 
 export const DESCRIPTIONS = {
  FLOATING_CONFIG:
  'A configuration object which determines how the floating element is positioned relative to the trigger.',
@@ -22,8 33,10 @@ export const DESCRIPTIONS = {
  ON_SELECT:
  'A callback which is called when the item is selected. To prevent the default behavior, call `e.preventDefault()` in the callback.',
  LOOP: 'Whether or not the focus should loop back to the first item when the last item is reached.',
- CLOSE_ON_ESCAPE: (name = 'element') =>
- `Whether or not to close the ${name} when the escape key is pressed.`,
  ESCAPE_BEHAVIOR: (name = 'element') =>
  `Defines how the ${name} reacts when the Escape key is pressed. ${createBulletsHTML(
  ESCAPE_BEHAVIOR_BULLETS(name)
  )}`,
  CLOSE_ON_CLICK_OUTSIDE: (name = 'element') =>
  `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.`,
@@ -83,11 96,11 @@ export const PROPS = {
  description: DESCRIPTIONS.PORTAL(args.name ?? 'floating element'),
  default: args.default ?? 'body',
  }),
- CLOSE_ON_ESCAPE: (args: PropArgs = {}): Prop => ({
- name: 'closeOnEscape',
- type: 'boolean',
- description: DESCRIPTIONS.CLOSE_ON_ESCAPE(args.name ?? 'floating element'),
- default: args.default ?? 'true',
  ESCAPE_BEHAVIOR: (args: PropArgs = {}): Prop => ({
  name: 'escapeBehavior',
  type: '"close" | "ignore" | "defer-otherwise-close" | "defer-otherwise-ignore"',
  description: DESCRIPTIONS.ESCAPE_BEHAVIOR(args.name ?? 'floating element'),
  default: args.default ?? "'close'",
  }),
  CLOSE_ON_OUTSIDE_CLICK: (args: PropArgs = {}): Prop => ({
  name: 'closeOnOutsideClick',

diff --git a/src/docs/content/builders/dialog.md b/src/docs/content/builders/dialog.md
@@ -99,11 99,11 @@ const {
 ### Disable Close on Escape
 
 By default, pressing the escape key will close the dialog. You can disable this behavior by setting
-the `closeOnEscape` builder prop to `false`.
 the `escapeBehavior` builder prop to `ignore`.
 
 ```ts {2}
 const dialog = createDialog({
- closeOnEscape: false
  escapeBehavior: 'ignore'
 })
 ```
 

diff --git a/src/docs/data/builders/combobox.ts b/src/docs/data/builders/combobox.ts
@@ -18,7 18,7 @@ const OPTION_PROPS = [
  },
  PROPS.LOOP,
  PROPS.CLOSE_ON_OUTSIDE_CLICK,
- PROPS.CLOSE_ON_ESCAPE,
  PROPS.ESCAPE_BEHAVIOR,
  PROPS.PREVENT_SCROLL,
  PROPS.PREVENT_TEXT_SELECTION_OVERFLOW,
  PROPS.PORTAL,

diff --git a/src/docs/data/builders/dialog.ts b/src/docs/data/builders/dialog.ts
@@ -16,7 16,7 @@ const OPTION_PROPS = [
  description: 'The `role` attribute of the dialog element.',
  },
  PROPS.PREVENT_SCROLL,
- PROPS.CLOSE_ON_ESCAPE,
  PROPS.ESCAPE_BEHAVIOR,
  PROPS.CLOSE_ON_OUTSIDE_CLICK,
  PROPS.PORTAL,
  PROPS.FORCE_VISIBLE,

diff --git a/src/docs/data/builders/link-preview.ts b/src/docs/data/builders/link-preview.ts
@@ -24,7 24,7 @@ const OPTION_PROPS = [
  PROPS.POSITIONING({ default: "placement: 'bottom'" }),
  PROPS.ARROW_SIZE,
  PROPS.CLOSE_ON_OUTSIDE_CLICK,
- PROPS.CLOSE_ON_ESCAPE,
  PROPS.ESCAPE_BEHAVIOR,
  PROPS.PREVENT_TEXT_SELECTION_OVERFLOW,
  PROPS.FORCE_VISIBLE,
  PROPS.PORTAL,

diff --git a/src/docs/data/builders/menu.ts b/src/docs/data/builders/menu.ts
@@ -17,7 17,7 @@ export const menuBuilderProps = [
  PROPS.ARROW_SIZE,
  PROPS.DIR,
  PROPS.PREVENT_SCROLL,
- PROPS.CLOSE_ON_ESCAPE,
  PROPS.ESCAPE_BEHAVIOR,
  PROPS.PREVENT_TEXT_SELECTION_OVERFLOW,
  PROPS.PORTAL,
  PROPS.CLOSE_ON_OUTSIDE_CLICK,
@@ -39,7 39,7 @@ export const menuBuilderOptions = [
  PROPS.ARROW_SIZE,
  PROPS.DIR,
  PROPS.PREVENT_SCROLL,
- PROPS.CLOSE_ON_ESCAPE,
  PROPS.ESCAPE_BEHAVIOR,
  PROPS.PREVENT_TEXT_SELECTION_OVERFLOW,
  PROPS.PORTAL,
  PROPS.CLOSE_ON_OUTSIDE_CLICK,

diff --git a/src/docs/data/builders/menubar.ts b/src/docs/data/builders/menubar.ts
@@ -7,7 7,7 @@ import { builder as dropdownBuilder } from './dropdown-menu.js';
 import type { BuilderData } from './index.js';
 import { getMenuSchemas, getMenuTriggerDataAttrs } from './menu.js';
 
-const OPTION_PROPS = [PROPS.CLOSE_ON_ESCAPE, PROPS.LOOP, PROPS.PREVENT_SCROLL];
 const OPTION_PROPS = [PROPS.ESCAPE_BEHAVIOR, PROPS.LOOP, PROPS.PREVENT_SCROLL];
 const BUILDER_NAME = 'menubar';
 
 const builder = builderSchema(BUILDER_NAME, {

diff --git a/src/docs/data/builders/popover.ts b/src/docs/data/builders/popover.ts
@@ -22,7 22,7 @@ const OPTION_PROPS = [
  description: 'Whether to disable the focus trap.',
  },
  PROPS.ARROW_SIZE,
- PROPS.CLOSE_ON_ESCAPE,
  PROPS.ESCAPE_BEHAVIOR,
  PROPS.CLOSE_ON_OUTSIDE_CLICK,
  PROPS.PREVENT_SCROLL,
  PROPS.PREVENT_TEXT_SELECTION_OVERFLOW,

diff --git a/src/docs/data/builders/select.ts b/src/docs/data/builders/select.ts
@@ -19,7 19,7 @@ const OPTION_PROPS = [
  PROPS.ARROW_SIZE,
  PROPS.PREVENT_SCROLL,
  PROPS.LOOP,
- PROPS.CLOSE_ON_ESCAPE,
  PROPS.ESCAPE_BEHAVIOR,
  PROPS.CLOSE_ON_OUTSIDE_CLICK,
  PROPS.PREVENT_TEXT_SELECTION_OVERFLOW,
  PROPS.PORTAL,

diff --git a/src/docs/data/builders/tooltip.ts b/src/docs/data/builders/tooltip.ts
@@ -16,7 16,7 @@ import type { BuilderData } from './index.js';
 const OPTION_PROPS = [
  PROPS.POSITIONING({ default: "position: 'top'" }),
  PROPS.ARROW_SIZE,
- PROPS.CLOSE_ON_ESCAPE,
  PROPS.ESCAPE_BEHAVIOR,
  PROPS.FORCE_VISIBLE,
  PROPS.PORTAL,
  {

diff --git a/src/lib/builders/combobox/create.ts b/src/lib/builders/combobox/create.ts
@@ -1,4 1,3 @@
-import { useEscapeKeydown } from '$lib/internal/actions/index.js';
 import {
  addEventListener,
  addMeltEventListener,
@@ -9,7 8,6 @@ import {
  isContentEditable,
  isHTMLInputElement,
  kbd,
- noop,
  omit,
 } from '$lib/internal/helpers/index.js';
 import type { MeltActionReturn } from '$lib/internal/types.js';
@@ -71,24 69,12 @@ export function createCombobox<
  })
  );
 
- let unsubEscapeKeydown = noop;
-
- const escape = useEscapeKeydown(node, {
- handler: () => {
- listbox.helpers.closeMenu();
- },
- });
- if (escape && escape.destroy) {
- unsubEscapeKeydown = escape.destroy;
- }
-
  const { destroy } = listbox.elements.trigger(node);
 
  return {
  destroy() {
  destroy?.();
  unsubscribe();
- unsubEscapeKeydown();
  },
  };
  },

diff --git a/src/lib/builders/context-menu/create.ts b/src/lib/builders/context-menu/create.ts
@@ -46,7 46,7 @@ const defaults = {
  placement: 'bottom-start',
  },
  preventScroll: true,
- closeOnEscape: true,
  escapeBehavior: 'close',
  closeOnOutsideClick: true,
  portal: undefined,
  loop: false,
@@ -72,7 72,7 @@ export function createContextMenu(props?: CreateContextMenuProps) {
  closeOnOutsideClick,
  portal,
  forceVisible,
- closeOnEscape,
  escapeBehavior,
  loop,
  preventTextSelectionOverflow,
  } = rootOptions;
@@ -149,15 149,8 @@ export function createContextMenu(props?: CreateContextMenuProps) {
  let unsubPopper = noop;
 
  const unsubDerived = effect(
- [isVisible, rootActiveTrigger, positioning, closeOnOutsideClick, portal, closeOnEscape],
- ([
- $isVisible,
- $rootActiveTrigger,
- $positioning,
- $closeOnOutsideClick,
- $portal,
- $closeOnEscape,
- ]) => {
  [isVisible, rootActiveTrigger, positioning, closeOnOutsideClick, portal],
  ([$isVisible, $rootActiveTrigger, $positioning, $closeOnOutsideClick, $portal]) => {
  unsubPopper();
  if (!$isVisible || !$rootActiveTrigger) return;
  tick().then(() => {
@@ -177,7 170,7 @@ export function createContextMenu(props?: CreateContextMenuProps) {
  shouldCloseOnInteractOutside: handleClickOutside,
  },
  portal: getPortalDestination(node, $portal),
- escapeKeydown: $closeOnEscape ? undefined : null,
  escapeKeydown: { behaviorType: escapeBehavior },
  preventTextSelectionOverflow: { enabled: preventTextSelectionOverflow },
  },
  }).destroy;

diff --git a/src/lib/builders/date-picker/create.ts b/src/lib/builders/date-picker/create.ts
@@ -25,7 25,7 @@ const defaults = {
  positioning: {
  placement: 'bottom',
  },
- closeOnEscape: true,
  escapeBehavior: 'close',
  closeOnOutsideClick: true,
  onOutsideClick: undefined,
  preventScroll: false,
@@ -77,7 77,7 @@ export function createDatePicker(props?: CreateDatePickerProps) {
  defaultOpen: withDefaults.defaultOpen,
  open: withDefaults.open,
  disableFocusTrap: withDefaults.disableFocusTrap,
- closeOnEscape: withDefaults.closeOnEscape,
  escapeBehavior: withDefaults.escapeBehavior,
  preventScroll: withDefaults.preventScroll,
  onOpenChange: withDefaults.onOpenChange,
  closeOnOutsideClick: withDefaults.closeOnOutsideClick,

diff --git a/src/lib/builders/date-range-picker/create.ts b/src/lib/builders/date-range-picker/create.ts
@@ -25,7 25,7 @@ const defaults = {
  positioning: {
  placement: 'bottom',
  },
- closeOnEscape: true,
  escapeBehavior: 'close',
  closeOnOutsideClick: true,
  preventScroll: false,
  forceVisible: false,
@@ -61,7 61,7 @@ export function createDateRangePicker(props?: CreateDateRangePickerProps) {
  defaultOpen: withDefaults.defaultOpen,
  open: withDefaults.open,
  disableFocusTrap: withDefaults.disableFocusTrap,
- closeOnEscape: withDefaults.closeOnEscape,
  escapeBehavior: withDefaults.escapeBehavior,
  preventScroll: withDefaults.preventScroll,
  onOpenChange: withDefaults.onOpenChange,
  closeOnOutsideClick: withDefaults.closeOnOutsideClick,

diff --git a/src/lib/builders/dialog/create.ts b/src/lib/builders/dialog/create.ts
@@ -39,7 39,7 @@ const { name } = createElHelpers<DialogParts>('dialog');
 
 const defaults = {
  preventScroll: true,
- closeOnEscape: true,
  escapeBehavior: 'close',
  closeOnOutsideClick: true,
  role: 'dialog',
  defaultOpen: false,
@@ -60,7 60,7 @@ export function createDialog(props?: CreateDialogProps) {
 
  const {
  preventScroll,
- closeOnEscape,
  escapeBehavior,
  closeOnOutsideClick,
  role,
  portal,
@@ -135,26 135,6 @@ export function createDialog(props?: CreateDialogProps) {
  'data-state': $open ? 'open' : 'closed',
  } as const;
  },
- action: (node: HTMLElement) => {
- let unsubEscapeKeydown = noop;
-
- if (closeOnEscape.get()) {
- const escapeKeydown = useEscapeKeydown(node, {
- handler: () => {
- handleClose();
- },
- });
- if (escapeKeydown && escapeKeydown.destroy) {
- unsubEscapeKeydown = escapeKeydown.destroy;
- }
- }
-
- return {
- destroy() {
- unsubEscapeKeydown();
- },
- };
- },
  });
 
  const content = makeElement(name('content'), {
@@ -174,13 154,13 @@ export function createDialog(props?: CreateDialogProps) {
  },
 
  action: (node: HTMLElement) => {
- let unsubModal = noop;
  let unsubEscape = noop;
  let unsubModal = noop;
  let unsubFocusTrap = noop;
 
  const unsubDerived = effect(
- [isVisible, closeOnOutsideClick, closeOnEscape],
- ([$isVisible, $closeOnOutsideClick, $closeOnEscape]) => {
  [isVisible, closeOnOutsideClick],
  ([$isVisible, $closeOnOutsideClick]) => {
  unsubModal();
  unsubEscape();
  unsubFocusTrap();
@@ -198,7 178,7 @@ export function createDialog(props?: CreateDialogProps) {
 
  unsubEscape = useEscapeKeydown(node, {
  handler: handleClose,
- enabled: $closeOnEscape,
  behaviorType: escapeBehavior,
  }).destroy;
 
  unsubFocusTrap = useFocusTrap(node, { fallbackFocus: node }).destroy;

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 { EscapeBehaviorType } from '$lib/internal/actions/index.js';
 export type { DialogComponentEvents } from './events.js';
 export type CreateDialogProps = {
  /**
@@ -13,11 14,15 @@ export type CreateDialogProps = {
  preventScroll?: boolean;
 
  /**
- * If true, the dialog will close when the user presses the escape key.
  * Escape behavior type.
  * `close`: Closes the element immediately.
  * `defer-otherwise-close`: Delegates the action to the parent element. If no parent is found, it closes the element.
  * `defer-otherwise-ignore`: Delegates the action to the parent element. If no parent is found, nothing is done.
  * `ignore`: Prevents the element from closing and also blocks the parent element from closing in response to the Escape key.
  *
- * @default true
  * @defaultValue `close`
  */
- closeOnEscape?: boolean;
  escapeBehavior?: EscapeBehaviorType;
 
  /**
  * If true, the dialog will close when the user clicks outside of it.

diff --git a/src/lib/builders/dropdown-menu/create.ts b/src/lib/builders/dropdown-menu/create.ts
@@ -11,7 11,7 @@ const defaults = {
  placement: 'bottom',
  },
  preventScroll: true,
- closeOnEscape: true,
  escapeBehavior: 'close',
  closeOnOutsideClick: true,
  portal: undefined,
  loop: false,