@melt-ui/svelte - npm Package Compare versions

Comparing version 0.55.3 to 0.55.4

dist/builders/combobox/create.d.ts

@@ -80,3 +80,2 @@ /// <reference types="svelte" />
             readonly role: "option";
-            readonly style: string;
         }, string>;
@@ -83,0 +82,0 @@ menu: import("../../internal/helpers/index.js").ExplicitBuilderReturn<[import("svelte/store").Readable<boolean>], (node: HTMLElement) => MeltActionReturn<"pointerleave">, ([$isVisible]: [boolean]) => {

dist/builders/context-menu/create.d.ts

@@ -184,3 +184,4 @@ /// <reference types="svelte" />
         typeahead: import("svelte/store").Writable<boolean>;
+        disableTriggerRefocus?: import("svelte/store").Writable<boolean | undefined> | undefined;
     };
 };

dist/builders/context-menu/create.js

@@ -25,3 +25,3 @@ import { usePopper } from '../../internal/actions/index.js';
     const rootOptions = toWritableStores(withDefaults);
-    const { positioning, closeOnOutsideClick, portal, forceVisible, closeOnEscape } = rootOptions;
+    const { positioning, closeOnOutsideClick, portal, forceVisible, closeOnEscape, loop } = rootOptions;
     const openWritable = withDefaults.open ?? writable(withDefaults.defaultOpen);
@@ -62,9 +62,7 @@ const rootOpen = overridable(openWritable, withDefaults?.onOpenChange);
             return;
-        if (target.id === ids.trigger && isLeftClick(e)) {
+        const isClickInsideTrigger = target.closest(`#${ids.trigger}`) !== null;
+        if (!isClickInsideTrigger || isLeftClick(e)) {
             rootOpen.set(false);
             return;
         }
-        if (target.id !== ids.trigger && !target.closest(selector())) {
-            rootOpen.set(false);
-        }
     }
@@ -134,3 +132,3 @@ const isVisible = derivedVisible({
                 if (FIRST_LAST_KEYS.includes(e.key)) {
-                    handleMenuNavigation(e);
+                    handleMenuNavigation(e, get(loop));
                 }
@@ -137,0 +135,0 @@ /**

dist/builders/dropdown-menu/create.d.ts

@@ -177,3 +177,4 @@ /// <reference types="svelte" />
         typeahead: import("svelte/store").Writable<boolean>;
+        disableTriggerRefocus?: import("svelte/store").Writable<boolean | undefined> | undefined;
     };
 };

dist/builders/dropdown-menu/create.js

@@ -33,3 +33,3 @@ import { overridable, toWritableStores } from '../../internal/helpers/index.js';
         prevFocusable,
-        disableTriggerRefocus: true,
+        disableTriggerRefocus: props?.disableTriggerRefocus ?? false,
         selector: 'dropdown-menu',
@@ -36,0 +36,0 @@ removeScroll: true,

dist/builders/listbox/create.d.ts

@@ -47,3 +47,2 @@ /// <reference types="svelte" />
             readonly role: "option";
-            readonly style: string;
         }, string>;
@@ -50,0 +49,0 @@ menu: import("../../internal/helpers/index.js").ExplicitBuilderReturn<[Readable<boolean>], (node: HTMLElement) => MeltActionReturn<ListboxEvents['menu']>, ([$isVisible]: [boolean]) => {

dist/builders/listbox/create.js

@@ -425,3 +425,2 @@ import { useEscapeKeydown, usePopper } from '../../internal/actions/index.js';
                 role: 'option',
-                style: styleToString({ cursor: props.disabled ? 'default' : 'pointer' }),
             };
@@ -428,0 +427,0 @@ },

dist/builders/menu/create.d.ts

@@ -197,3 +197,3 @@ /// <reference types="svelte" />
  */
-export declare function handleMenuNavigation(e: KeyboardEvent): void;
+export declare function handleMenuNavigation(e: KeyboardEvent, loop?: boolean): void;
 export type Point = {
@@ -200,0 +200,0 @@ x: number;

dist/builders/menu/create.js

@@ -30,3 +30,3 @@ import { createSeparator } from '../index.js';
     const { name, selector } = createElHelpers(opts.selector);
-    const { preventScroll, arrowSize, positioning, closeOnEscape, closeOnOutsideClick, portal, forceVisible, typeahead, } = opts.rootOptions;
+    const { preventScroll, arrowSize, positioning, closeOnEscape, closeOnOutsideClick, portal, forceVisible, typeahead, loop, } = opts.rootOptions;
     const rootOpen = opts.rootOpen;
@@ -130,3 +130,3 @@ const rootActiveTrigger = opts.rootActiveTrigger;
                 if (FIRST_LAST_KEYS.includes(e.key)) {
-                    handleMenuNavigation(e);
+                    handleMenuNavigation(e, get(loop) ?? false);
                 }
@@ -581,3 +581,3 @@ /**
                         e.stopImmediatePropagation();
-                        handleMenuNavigation(e);
+                        handleMenuNavigation(e, get(loop) ?? false);
                         return;
@@ -900,3 +900,3 @@ }
         }
-        if (!$rootOpen && $rootActiveTrigger) {
+        if (!$rootOpen && $rootActiveTrigger && opts.disableTriggerRefocus === false) {
             handleRovingFocus($rootActiveTrigger);
@@ -920,2 +920,5 @@ }
                 // Focus on active trigger trigger
+                if (opts.disableTriggerRefocus) {
+                    return;
+                }
                 handleRovingFocus($rootActiveTrigger);
@@ -1182,3 +1185,3 @@ }
  */
-export function handleMenuNavigation(e) {
+export function handleMenuNavigation(e, loop) {
     e.preventDefault();
@@ -1207,7 +1210,17 @@ // currently focused menu item
         case kbd.ARROW_DOWN:
-            nextIndex = currentIndex < candidateNodes.length - 1 ? currentIndex + 1 : currentIndex;
+            if (loop) {
+                nextIndex = currentIndex < candidateNodes.length - 1 ? currentIndex + 1 : 0;
+            }
+            else {
+                nextIndex = currentIndex < candidateNodes.length - 1 ? currentIndex + 1 : currentIndex;
+            }
             break;
         case kbd.ARROW_UP:
-            nextIndex =
-                currentIndex < 0 ? candidateNodes.length - 1 : currentIndex > 0 ? currentIndex - 1 : 0;
+            if (loop) {
+                nextIndex = currentIndex > 0 ? currentIndex - 1 : candidateNodes.length - 1;
+            }
+            else {
+                nextIndex =
+                    currentIndex < 0 ? candidateNodes.length - 1 : currentIndex > 0 ? currentIndex - 1 : 0;
+            }
             break;
@@ -1214,0 +1227,0 @@ case kbd.HOME:

dist/builders/menu/types.d.ts

@@ -89,2 +89,8 @@ import type { FloatingConfig } from '../../internal/actions/index.js';
     typeahead?: boolean;
+    /**
+     * Whether to disable the functionality that the trigger element is refocused when the menu is closed.
+     *
+     * @type {boolean}
+     */
+    disableTriggerRefocus?: boolean;
 };
@@ -91,0 +97,0 @@ export type _CreateSubmenuProps = Pick<_CreateMenuProps, 'arrowSize' | 'positioning'> & {

dist/builders/menubar/create.d.ts

@@ -199,2 +199,3 @@ /// <reference types="svelte" />
                 typeahead: import("svelte/store").Writable<boolean>;
+                disableTriggerRefocus?: import("svelte/store").Writable<boolean | undefined> | undefined;
             };
@@ -201,0 +202,0 @@ };

dist/builders/select/create.d.ts

@@ -40,3 +40,2 @@ /// <reference types="svelte" />
             readonly role: "option";
-            readonly style: string;
         }, string>;
@@ -43,0 +42,0 @@ menu: import("../../internal/helpers/index.js").ExplicitBuilderReturn<[import("svelte/store").Readable<boolean>], (node: HTMLElement) => import("../../internal/types.js").MeltActionReturn<"pointerleave">, ([$isVisible]: [boolean]) => {

dist/builders/switch/create.d.ts

@@ -17,4 +17,4 @@ /// <reference types="svelte" />
             readonly role: "switch";
-            readonly 'aria-checked': boolean;
-            readonly 'aria-required': boolean;
+            readonly 'aria-checked': "true" | "false";
+            readonly 'aria-required': "true" | undefined;
         }, string>;
@@ -21,0 +21,0 @@ input: import("../../internal/helpers/index.js").ExplicitBuilderReturn<[{

dist/builders/switch/create.js

@@ -32,4 +32,4 @@ import { addMeltEventListener, builder, createElHelpers, disabledAttr, kbd, omit, overridable, styleToString, toWritableStores, } from '../../internal/helpers/index.js';
                 role: 'switch',
-                'aria-checked': $checked,
-                'aria-required': $required,
+                'aria-checked': $checked ? 'true' : 'false',
+                'aria-required': $required ? 'true' : undefined,
             };
@@ -36,0 +36,0 @@ },

dist/builders/table-of-contents/events.d.ts

@@ -1,2 +0,2 @@
-import type { GroupedEvents, MeltComponentEvents } from "../../internal/types";
+import type { GroupedEvents, MeltComponentEvents } from '../../internal/types';
 export declare const tableOfContentsEvents: {
@@ -3,0 +3,0 @@ item: readonly ["click"];

dist/builders/table-of-contents/events.js

 export const tableOfContentsEvents = {
-    item: ['click']
+    item: ['click'],
 };

dist/builders/toggle-group/create.d.ts

@@ -22,3 +22,4 @@ /// <reference types="svelte" />
             readonly 'data-value': string;
-            readonly 'aria-pressed': boolean;
+            readonly 'aria-pressed': boolean | undefined;
+            readonly 'aria-checked': boolean | undefined;
             readonly type: "button";
@@ -25,0 +26,0 @@ readonly role: "radio" | undefined;

dist/builders/toggle-group/create.js

@@ -40,2 +40,4 @@ import { addMeltEventListener, builder, createElHelpers, disabledAttr, executeCallbacks, getElemDirection, handleRovingFocus, isHTMLElement, kbd, noop, omit, overridable, toWritableStores, } from '../../internal/helpers/index.js';
                 const pressed = Array.isArray($value) ? $value.includes(itemValue) : $value === itemValue;
+                const isSingle = $type === 'single';
+                const isMultiple = $type === 'multiple' || $type === undefined;
                 return {
@@ -48,5 +50,6 @@ disabled: disabledAttr(disabled),
                     'data-value': itemValue,
-                    'aria-pressed': pressed,
+                    'aria-pressed': isMultiple ? pressed : undefined,
+                    'aria-checked': isSingle ? pressed : undefined,
                     type: 'button',
-                    role: $type === 'single' ? 'radio' : undefined,
+                    role: isSingle ? 'radio' : undefined,
                     tabindex: pressed ? 0 : -1,
@@ -53,0 +56,0 @@ };

dist/builders/toolbar/create.d.ts

@@ -45,3 +45,4 @@ /// <reference types="svelte" />
                     readonly 'data-state': "on" | "off";
-                    readonly 'aria-pressed': boolean;
+                    readonly 'aria-checked': boolean | undefined;
+                    readonly 'aria-pressed': boolean | undefined;
                     readonly type: "button";
@@ -48,0 +49,0 @@ readonly role: "radio" | undefined;

dist/builders/toolbar/create.js

@@ -90,2 +90,4 @@ import { addMeltEventListener, builder, createElHelpers, disabledAttr, executeCallbacks, handleRovingFocus, isHTMLElement, kbd, overridable, toWritableStores, } from '../../internal/helpers/index.js';
                     const pressed = Array.isArray($value) ? $value.includes(itemValue) : $value === itemValue;
+                    const isSingle = $type === 'single';
+                    const isMultiple = $type === 'multiple';
                     return {
@@ -98,5 +100,6 @@ disabled: disabledAttr(disabled),
                         'data-state': pressed ? 'on' : 'off',
-                        'aria-pressed': pressed,
+                        'aria-checked': isSingle ? pressed : undefined,
+                        'aria-pressed': isMultiple ? pressed : undefined,
                         type: 'button',
-                        role: $type === 'single' ? 'radio' : undefined,
+                        role: isSingle ? 'radio' : undefined,
                         'data-melt-toolbar-item': '',
@@ -103,0 +106,0 @@ };

dist/builders/tooltip/create.js

@@ -224,6 +224,3 @@ import { addEventListener, addMeltEventListener, builder, createElHelpers, effect, executeCallbacks, generateId, getPortalDestination, isBrowser, isTouch, kbd, makeHullFromElements, noop, omit, overridable, pointInPolygon, styleToString, toWritableStores, } from '../../internal/helpers/index.js';
                 return;
-            if (isMouseInTooltipArea) {
-                openTooltip('pointer');
-            }
-            else {
+            if (!isMouseInTooltipArea) {
                 closeTooltip();
@@ -230,0 +227,0 @@ }

dist/internal/helpers/rovingFocus.js

@@ -18,4 +18,6 @@ import { isBrowser, isHTMLElement } from './is.js';
     currentFocusedElement.tabIndex = -1;
-    nextElement.tabIndex = 0;
-    sleep(1).then(() => nextElement.focus());
+    if (nextElement) {
+        nextElement.tabIndex = 0;
+        sleep(1).then(() => nextElement.focus());
+    }
 }
@@ -22,0 +24,0 @@ function getFocusableElements() {

package.json

 {
   "name": "@melt-ui/svelte",
-  "version": "0.55.3",
+  "version": "0.55.4",
   "license": "MIT",
@@ -54,3 +54,3 @@ "repository": "github:melt-ui/melt-ui",
     "@melt-ui/pp": "0.1.0",
-    "@playwright/test": "^1.36.0",
+    "@playwright/test": "^1.39.0",
     "@storybook/addon-essentials": "^7.3.2",
@@ -65,2 +65,3 @@ "@storybook/addon-interactions": "^7.3.2",
     "@sveltejs/adapter-auto": "^2.1.0",
+    "@sveltejs/adapter-static": "^2.0.3",
     "@sveltejs/adapter-vercel": "^3.0.2",
@@ -96,2 +97,3 @@ "@sveltejs/kit": "^1.22.3",
     "lucide-svelte": "^0.263.0",
+    "pagefind": "^1.0.3",
     "postcss": "^8.4.27",
@@ -152,4 +154,6 @@ "postcss-load-config": "^4.0.1",
     "pw:ui": "pnpm exec playwright test --ui",
-    "changeset": "changeset"
+    "changeset": "changeset",
+    "pagefind": "node ./scripts/pagefind.js",
+    "pre-deploy": "pnpm run build && pnpm run pagefind"
   }
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

613408

increased by0.26%

Lines of code

14041

increased by0.16%

Worsened metrics

Dev dependency count

79

increased by2.6%

No dependency changes