@melt-ui/svelte - npm Package Compare versions

Comparing version 0.86.0 to 0.86.1

dist/builders/menu/create.js

@@ -184,4 +184,8 @@ import { createSeparator } from '../index.js';
         action: (node) => {
-            rootActiveTrigger.set(node);
             applyAttrsIfDisabled(node);
+            rootActiveTrigger.update((p) => {
+                if (p)
+                    return p;
+                return node;
+            });
             const unsub = executeCallbacks(addMeltEventListener(node, 'click', (e) => {
@@ -215,6 +219,3 @@ const $rootOpen = rootOpen.get();
             return {
-                destroy() {
-                    unsub();
-                    rootActiveTrigger.set(null);
-                },
+                destroy: unsub,
             };
@@ -565,2 +566,12 @@ },
         const subIds = toWritableStores({ ...generateIds(menuIdParts), ...withDefaults.ids });
+        safeOnMount(() => {
+            /**
+             * Set active trigger on mount to handle controlled/forceVisible
+             * state.
+             */
+            const subTrigger = document.getElementById(subIds.trigger.get());
+            if (subTrigger) {
+                subActiveTrigger.set(subTrigger);
+            }
+        });
         const subIsVisible = derivedVisible({
@@ -639,4 +650,8 @@ open: subOpen,
                         e.preventDefault();
-                        $subActiveTrigger && handleRovingFocus($subActiveTrigger);
-                        subOpen.set(false);
+                        subOpen.update(() => {
+                            if ($subActiveTrigger) {
+                                handleRovingFocus($subActiveTrigger);
+                            }
+                            return false;
+                        });
                         return;
@@ -707,3 +722,7 @@ }
                 applyAttrsIfDisabled(node);
-                subActiveTrigger.set(node);
+                subActiveTrigger.update((p) => {
+                    if (p)
+                        return p;
+                    return node;
+                });
                 const unsubTimer = () => {
@@ -722,3 +741,12 @@ clearTimerStore(subOpenTimer);
                     handleRovingFocus(triggerEl);
-                    subOpen.set(true);
+                    if (!subOpen.get()) {
+                        subOpen.update((prev) => {
+                            const isAlreadyOpen = prev;
+                            if (!isAlreadyOpen) {
+                                subActiveTrigger.set(triggerEl);
+                                return !prev;
+                            }
+                            return prev;
+                        });
+                    }
                 }), addMeltEventListener(node, 'keydown', (e) => {
@@ -762,3 +790,6 @@ const $typed = typed.get();
                         subOpenTimer.set(window.setTimeout(() => {
-                            subOpen.set(true);
+                            subOpen.update(() => {
+                                subActiveTrigger.set(triggerEl);
+                                return true;
+                            });
                             clearTimerStore(subOpenTimer);
@@ -823,3 +854,2 @@ }, 100));
                     destroy() {
-                        subActiveTrigger.set(null);
                         unsubTimer();
@@ -902,2 +932,11 @@ unsubEvents();
     safeOnMount(() => {
+        /**
+         * We need to set the active trigger on mount to cover the
+         * case where the user sets the `open` store to `true` without
+         * clicking on the trigger.
+         */
+        const triggerEl = document.getElementById(rootIds.trigger.get());
+        if (isHTMLElement(triggerEl) && rootOpen.get()) {
+            rootActiveTrigger.set(triggerEl);
+        }
         const unsubs = [];
@@ -961,2 +1000,3 @@ const handlePointer = () => isUsingKeyboard.set(false);
                 prevFocusable.set(getPreviousFocusable(triggerEl));
+                rootActiveTrigger.set(triggerEl);
             }
@@ -963,0 +1003,0 @@ return isOpen;

dist/internal/actions/floating/action.d.ts

 import type { FloatingConfig } from './types.js';
 import { noop } from '../../helpers/index.js';
 import type { VirtualElement } from '@floating-ui/core';
+export declare function isVirtualElement(element: unknown): element is VirtualElement;
 export declare function useFloating(reference: HTMLElement | VirtualElement | undefined, floating: HTMLElement | undefined, opts?: FloatingConfig): {
     destroy: typeof noop;
 };

dist/internal/actions/floating/action.js

@@ -22,7 +22,11 @@ // Modified from Grail UI v0.9.6 (2023-06-10)
 const ALIGN_OPTIONS = ['start', 'center', 'end'];
+export function isVirtualElement(element) {
+    return isObject(element) && 'getBoundingClientRect' in element;
+}
 export function useFloating(reference, floating, opts = {}) {
-    if (!floating || !reference || opts === null)
+    if (!floating || !reference || opts === null) {
         return {
             destroy: noop,
         };
+    }
     const options = { ...defaultConfig, ...opts };
@@ -74,3 +78,3 @@ const arrowEl = floating.querySelector('[data-arrow=true]');
             return;
-        if (!isAttachedToDocument(reference))
+        if (!isVirtualElement(reference) && !isAttachedToDocument(reference))
             return;
@@ -77,0 +81,0 @@ const { placement, strategy } = options;

package.json

 {
   "name": "@melt-ui/svelte",
-  "version": "0.86.0",
+  "version": "0.86.1",
   "license": "MIT",
@@ -5,0 +5,0 @@ "repository": "github:melt-ui/melt-ui",

No alert changes

Improved metrics

Total package byte prevSize

1166206

increased by0.15%

Lines of code

25793

increased by0.17%

No dependency changes