@sveltia/ui 0.25.3 → 0.25.5

package/dist/components/menu/menu-item.svelte

@@ -4,6 +4,7 @@
   @see https://w3c.github.io/aria/#menuitem
 -->
 <script>
+  import { onMount } from 'svelte';
   import Button from '../button/button.svelte';
   import Icon from '../icon/icon.svelte';
   import Popup from '../util/popup.svelte';
@@ -25,6 +26,9 @@
     endIcon: _endIcon,
     chevronIcon,
     items,
+    onmouseenter,
+    onmouseleave,
+    onclick,
     onChange,
     onSelect,
     ...restProps
@@ -32,6 +36,7 @@
   } = $props();
 
   let isPopupOpen = $state(false);
+  let isPopupHovered = $state(false);
 
   /**
    * Reference to the `<button>` element.
@@ -39,7 +44,17 @@
    */
   let buttonElement = $state();
 
+  /**
+   * Reference to the `<button>` element.
+   * @type {HTMLDialogElement | undefined}
+   */
+  let dialogElement = $state();
+
   const hasItems = $derived(role === 'menuitem' && !!items);
+
+  onMount(() => {
+    dialogElement = buttonElement?.closest('dialog') ?? undefined;
+  });
 </script>
 
 <div role="none" class="sui menuitem {className}" {hidden}>
@@ -51,15 +66,34 @@
     {disabled}
     aria-haspopup={hasItems ? 'menu' : undefined}
     aria-expanded={hasItems ? isPopupOpen : undefined}
-    onmouseenter={() => {
+    onmouseenter={(event) => {
       if (hasItems) {
-        isPopupOpen = true;
+        window.setTimeout(() => {
+          isPopupOpen = true;
+        }, 200);
       }
+
+      onmouseenter?.(event);
     }}
-    onmouseleave={() => {
+    onmouseleave={(event) => {
       if (hasItems) {
-        isPopupOpen = false;
+        window.setTimeout(() => {
+          if (!isPopupHovered) {
+            isPopupOpen = false;
+          }
+        }, 200);
       }
+
+      onmouseleave?.(event);
+    }}
+    onclick={(event) => {
+      if (hasItems) {
+        event.preventDefault();
+        event.stopPropagation();
+        isPopupOpen = !isPopupOpen;
+      }
+
+      onclick?.(event);
     }}
     {onChange}
     {onSelect}
@@ -89,8 +123,14 @@
       {@render _endIcon?.()}
     {/snippet}
   </Button>
-  {#if hasItems}
-    <Popup anchor={buttonElement} position="right-top" bind:open={isPopupOpen}>
+  {#if hasItems && buttonElement && dialogElement}
+    <Popup
+      anchor={buttonElement}
+      parentDialogElement={dialogElement}
+      position="right-top"
+      bind:open={isPopupOpen}
+      bind:hovered={isPopupHovered}
+    >
       <Menu>
         {@render items?.()}
       </Menu>

package/dist/components/util/popup.svelte

@@ -13,12 +13,15 @@
    * @typedef {object} Props
    * @property {string} [class] - The `class` attribute on the content element.
    * @property {boolean} [open] - Whether to open the popup.
+   * @property {boolean} [hovered] - Whether the content is hovered.
    * @property {HTMLElement} [anchor] - A reference to the anchor element that opens the popup.
    * Typically a `<button>`.
    * @property {HTMLElement} [content] - A reference to the content element.
    * @property {import('../../typedefs').PopupPosition} [position] - Where to show the popup.
-   * @property {HTMLElement} [positionBaseElement] - The base element of
-   * {@link position}. If omitted, this will be {@link anchor}.
+   * @property {HTMLElement} [positionBaseElement] - The base element of {@link position}. If
+   * omitted, this will be {@link anchor}.
+   * @property {HTMLDialogElement} [parentDialogElement] - A reference to a dialog element that is
+   * already displayed. This should be provided for a nested popup.
    * @property {boolean} [touchOptimized] - Whether to show the popup at the center of the screen on
    * mobile/tablet and ignore the defined dropdown `position`.
    * @property {import('svelte').Snippet} [children] - Primary slot content.
@@ -32,12 +35,14 @@
   let {
     /* eslint-disable prefer-const */
     open = $bindable(false),
+    hovered = $bindable(false),
     content = $bindable(undefined),
     class: className,
     showBackdrop = false,
     anchor,
     position = 'bottom-left',
     positionBaseElement = undefined,
+    parentDialogElement = undefined,
     touchOptimized = false,
     children,
     onOpen,
@@ -68,7 +73,7 @@
   let contentType = $state();
   /**
    * Style to be applied to the content.
-   * @type {import('svelte/store').Writable<any>}
+   * @type {import('svelte/store').Writable<Record<string, any>>}
    */
   let style = writable({
     inset: undefined,
@@ -77,20 +82,21 @@
     height: undefined,
   });
 
+  /**
+   * @type {{ style: import('svelte/store').Writable<Record<string, any>>, open:
+   * import('svelte/store').Writable<boolean>, checkPosition: () => void } | undefined}
+   */
+  let popupInstance = undefined;
+  let hoveredTimeout = 0;
+
   /**
    * Initialize the popup.
    */
   const init = () => {
-    let openStore = writable(false);
-
-    ({ style, open: openStore } = activatePopup(
-      anchor,
-      dialogElement,
-      position,
-      positionBaseElement,
-    ));
+    popupInstance = activatePopup(anchor, dialogElement, position, positionBaseElement);
 
-    openStore.subscribe((_open) => {
+    style = popupInstance.style;
+    popupInstance.open.subscribe((_open) => {
       open = _open;
     });
 
@@ -98,12 +104,25 @@
     initialized = true;
   };
 
+  $effect(() => {
+    if (parentDialogElement && !dialogElement && content) {
+      dialogElement = parentDialogElement;
+      dialogElement.append(content);
+    }
+  });
+
   $effect(() => {
     if (anchor && dialogElement && !initialized) {
       init();
     }
   });
 
+  $effect(() => {
+    if (parentDialogElement && open) {
+      popupInstance?.checkPosition();
+    }
+  });
+
   const touch = $derived(touchOptimized && touchEnabled);
 
   onMount(() => {
@@ -111,38 +130,10 @@
   });
 </script>
 
-<Modal
-  {...restProps}
-  bind:dialog={dialogElement}
-  role="none"
-  class="popup"
-  bind:open
-  showBackdrop={showBackdrop ?? touch}
-  lightDismiss={true}
-  keepContent={true}
-  onOpen={async (event) => {
-    onOpen?.(event);
-
-    await sleep(100);
-
-    if (!content) {
-      return;
-    }
-
-    const target = /** @type {HTMLElement} */ (
-      content.querySelector('[tabindex]:not([aria-disabled="true"])')
-    );
-
-    if (target) {
-      target.focus();
-    } else {
-      content.tabIndex = -1;
-      content.focus();
-    }
-  }}
->
+{#snippet contentWrapper()}
   <div
     bind:this={content}
+    hidden={!open}
     role="none"
     class="content {className} {contentType}"
     class:touch
@@ -152,10 +143,63 @@
     style:max-width={$style.maxWidth}
     style:max-height={$style.height}
     style:visibility={$style.inset ? undefined : 'hidden'}
+    onmouseenter={() => {
+      hovered = true;
+
+      if (parentDialogElement) {
+        window.clearTimeout(hoveredTimeout);
+      }
+    }}
+    onmouseleave={() => {
+      hovered = false;
+
+      if (parentDialogElement) {
+        hoveredTimeout = window.setTimeout(() => {
+          open = false;
+        }, 200);
+      }
+    }}
   >
     {@render children?.()}
   </div>
-</Modal>
+{/snippet}
+
+{#if parentDialogElement}
+  {@render contentWrapper()}
+{:else}
+  <Modal
+    {...restProps}
+    bind:dialog={dialogElement}
+    role="none"
+    class="popup"
+    bind:open
+    showBackdrop={showBackdrop ?? touch}
+    lightDismiss={true}
+    keepContent={true}
+    onOpen={async (event) => {
+      onOpen?.(event);
+
+      await sleep(100);
+
+      if (!content) {
+        return;
+      }
+
+      const target = /** @type {HTMLElement} */ (
+        content.querySelector('[tabindex]:not([aria-disabled="true"])')
+      );
+
+      if (target) {
+        target.focus();
+      } else {
+        content.tabIndex = -1;
+        content.focus();
+      }
+    }}
+  >
+    {@render contentWrapper()}
+  </Modal>
+{/if}
 
 <style>.content {
   position: absolute;

package/dist/components/util/popup.svelte.d.ts

@@ -13,6 +13,10 @@ declare const Popup: import("svelte").Component<import("../../typedefs").ModalPr
      * - Whether to open the popup.
      */
     open?: boolean | undefined;
+    /**
+     * - Whether the content is hovered.
+     */
+    hovered?: boolean | undefined;
     /**
      * - A reference to the anchor element that opens the popup.
      * Typically a `<button>`.
@@ -27,10 +31,15 @@ declare const Popup: import("svelte").Component<import("../../typedefs").ModalPr
      */
     position?: import("../../typedefs").PopupPosition | undefined;
     /**
-     * - The base element of
-     * {@link position}. If omitted, this will be {@link anchor}.
+     * - The base element of {@link position}. If
+     * omitted, this will be {@link anchor}.
      */
     positionBaseElement?: HTMLElement | undefined;
+    /**
+     * - A reference to a dialog element that is
+     * already displayed. This should be provided for a nested popup.
+     */
+    parentDialogElement?: HTMLDialogElement | undefined;
     /**
      * - Whether to show the popup at the center of the screen on
      * mobile/tablet and ignore the defined dropdown `position`.
@@ -48,7 +57,7 @@ declare const Popup: import("svelte").Component<import("../../typedefs").ModalPr
      * - Custom `Open` event handler.
      */
     onOpen?: ((event: CustomEvent) => void) | undefined;
-} & Record<string, any>, {}, "open" | "content">;
+} & Record<string, any>, {}, "open" | "hovered" | "content">;
 type Props = {
     /**
      * - The `class` attribute on the content element.
@@ -58,6 +67,10 @@ type Props = {
      * - Whether to open the popup.
      */
     open?: boolean | undefined;
+    /**
+     * - Whether the content is hovered.
+     */
+    hovered?: boolean | undefined;
     /**
      * - A reference to the anchor element that opens the popup.
      * Typically a `<button>`.
@@ -72,10 +85,15 @@ type Props = {
      */
     position?: import("../../typedefs").PopupPosition | undefined;
     /**
-     * - The base element of
-     * {@link position}. If omitted, this will be {@link anchor}.
+     * - The base element of {@link position}. If
+     * omitted, this will be {@link anchor}.
      */
     positionBaseElement?: HTMLElement | undefined;
+    /**
+     * - A reference to a dialog element that is
+     * already displayed. This should be provided for a nested popup.
+     */
+    parentDialogElement?: HTMLDialogElement | undefined;
     /**
      * - Whether to show the popup at the center of the screen on
      * mobile/tablet and ignore the defined dropdown `position`.

package/dist/services/popup.svelte.js

@@ -89,11 +89,9 @@ class Popup {
           ? `${Math.round(intersectionRect.left)}px`
           : 'auto';
 
-      const anchorPopup = /** @type {HTMLElement} */ (this.anchorElement.closest('.popup'));
-
       const style = {
         inset: [top, right, bottom, left].join(' '),
-        zIndex: anchorPopup ? Number(anchorPopup.style.zIndex) + 1 : 1000,
+        zIndex: 1000,
         minWidth: `${Math.round(intersectionRect.width)}px`,
         maxWidth: position.endsWith('-left')
           ? `${Math.round(rootBounds.width - intersectionRect.left - 8)}px`

package/dist/typedefs.d.ts

@@ -467,6 +467,18 @@ export type KeyboardEventHandlers = {
     onkeypress?: ((event: KeyboardEvent) => void) | undefined;
 };
 export type MouseEventHandlers = {
+    /**
+     * - `mouseenter` event handler.
+     */
+    onmouseenter?: ((event: MouseEvent) => void) | undefined;
+    /**
+     * - `mouseleave` event handler.
+     */
+    onmouseleave?: ((event: MouseEvent) => void) | undefined;
+    /**
+     * - `mouseover` event handler.
+     */
+    onmouseover?: ((event: MouseEvent) => void) | undefined;
     /**
      * - `mousedown` event handler.
      */

package/dist/typedefs.js

@@ -164,6 +164,9 @@
 
 /**
  * @typedef {object} MouseEventHandlers
+ * @property {(event: MouseEvent) => void} [onmouseenter] - `mouseenter` event handler.
+ * @property {(event: MouseEvent) => void} [onmouseleave] - `mouseleave` event handler.
+ * @property {(event: MouseEvent) => void} [onmouseover] - `mouseover` event handler.
  * @property {(event: MouseEvent) => void} [onmousedown] - `mousedown` event handler.
  * @property {(event: MouseEvent) => void} [onmouseup] - `mouseup` event handler.
  * @property {(event: MouseEvent) => void} [onclick] - `click` event handler.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.25.3",
+  "version": "0.25.5",
   "license": "MIT",
   "type": "module",
   "repository": {
@@ -48,13 +48,13 @@
   "devDependencies": {
     "@playwright/test": "^1.51.0",
     "@sveltejs/adapter-auto": "^4.0.0",
-    "@sveltejs/kit": "^2.18.0",
+    "@sveltejs/kit": "^2.19.0",
     "@sveltejs/package": "^2.3.10",
     "@sveltejs/vite-plugin-svelte": "5.0.3",
     "cspell": "^8.17.5",
     "eslint": "^8.57.1",
     "eslint-config-airbnb-base": "^15.0.0",
-    "eslint-config-prettier": "^10.0.2",
+    "eslint-config-prettier": "^10.1.1",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jsdoc": "^50.6.3",
     "eslint-plugin-svelte": "^2.46.1",
@@ -66,7 +66,7 @@
     "stylelint": "^16.15.0",
     "stylelint-config-recommended-scss": "^14.1.0",
     "stylelint-scss": "^6.11.1",
-    "svelte": "5.22.5",
+    "svelte": "5.22.6",
     "svelte-check": "^4.1.5",
     "svelte-i18n": "^4.0.1",
     "svelte-preprocess": "^6.0.3",