@melt-ui/svelte - npm Package Compare versions

Comparing version 0.61.2 to 0.61.3

dist/builders/dialog/create.js

@@ -144,3 +144,4 @@ import { createFocusTrap, useClickOutside, useEscapeKeydown, usePortal, } from '../../internal/actions/index.js';
                     immediate: false,
-                    escapeDeactivates: false,
+                    escapeDeactivates: true,
+                    clickOutsideDeactivates: true,
                     returnFocusOnDeactivate: false,
@@ -147,0 +148,0 @@ fallbackFocus: node,

dist/builders/popover/create.js

@@ -78,4 +78,12 @@ import { addMeltEventListener, builder, createElHelpers, derivedVisible, effect, getPortalDestination, handleFocus, isBrowser, isHTMLElement, kbd, noop, omit, overridable, removeScroll, styleToString, toWritableStores, executeCallbacks, } from '../../internal/helpers/index.js';
                                 returnFocusOnDeactivate: false,
+                                clickOutsideDeactivates: true,
+                                escapeDeactivates: true,
                             },
-                        clickOutside: $closeOnOutsideClick ? undefined : null,
+                        clickOutside: $closeOnOutsideClick
+                            ? {
+                                handler: () => {
+                                    handleClose();
+                                },
+                            }
+                            : null,
                         escapeKeydown: $closeOnEscape
@@ -82,0 +90,0 @@ ? {

dist/builders/slider/create.d.ts

@@ -7,6 +7,6 @@ /// <reference types="svelte" />
     elements: {
-        root: import("../../internal/helpers/index.js").ExplicitBuilderReturn<[import("svelte/store").Writable<boolean>, import("svelte/store").Writable<"horizontal" | "vertical">], import("svelte/action").Action<any, any, Record<never, any>>, ([$disabled, $orientation]: [boolean, "horizontal" | "vertical"]) => {
+        root: import("../../internal/helpers/index.js").ExplicitBuilderReturn<[import("svelte/store").Writable<boolean>, import("svelte/store").Writable<import("./types.js").SliderOrientation>], import("svelte/action").Action<any, any, Record<never, any>>, ([$disabled, $orientation]: [boolean, import("./types.js").SliderOrientation]) => {
             disabled: boolean | undefined;
             'aria-disabled': string | undefined;
-            'data-orientation': "horizontal" | "vertical";
+            'data-orientation': import("./types.js").SliderOrientation;
             style: string | undefined;
@@ -19,3 +19,3 @@ 'data-melt-id': string;
             subscribe(this: void, run: import("svelte/store").Subscriber<number[]>, invalidate?: import("svelte/store").Invalidator<number[]> | undefined): import("svelte/store").Unsubscriber;
-        }, import("svelte/store").Readable<(val: number) => number>, import("svelte/store").Writable<number>, import("svelte/store").Writable<number>, import("svelte/store").Writable<boolean>, import("svelte/store").Writable<"horizontal" | "vertical">], (node: HTMLElement) => MeltActionReturn<SliderEvents['thumb']>, ([$value, $position, $min, $max, $disabled, $orientation]: [number[], (val: number) => number, number, number, boolean, "horizontal" | "vertical"]) => () => {
+        }, import("svelte/store").Readable<(val: number) => number>, import("svelte/store").Writable<number>, import("svelte/store").Writable<number>, import("svelte/store").Writable<boolean>, import("svelte/store").Writable<import("./types.js").SliderOrientation>], (node: HTMLElement) => MeltActionReturn<SliderEvents['thumb']>, ([$value, $position, $min, $max, $disabled, $orientation]: [number[], (val: number) => number, number, number, boolean, import("./types.js").SliderOrientation]) => () => {
             readonly role: "slider";
@@ -33,3 +33,3 @@ readonly 'aria-valuemin': number;
             subscribe(this: void, run: import("svelte/store").Subscriber<number[]>, invalidate?: import("svelte/store").Invalidator<number[]> | undefined): import("svelte/store").Unsubscriber;
-        }, import("svelte/store").Writable<"horizontal" | "vertical">, import("svelte/store").Readable<(val: number) => number>], import("svelte/action").Action<any, any, Record<never, any>>, ([$value, $orientation, $position]: [number[], "horizontal" | "vertical", (val: number) => number]) => {
+        }, import("svelte/store").Writable<import("./types.js").SliderOrientation>, import("svelte/store").Readable<(val: number) => number>], import("svelte/action").Action<any, any, Record<never, any>>, ([$value, $orientation, $position]: [number[], import("./types.js").SliderOrientation, (val: number) => number]) => {
             style: string;
@@ -41,3 +41,3 @@ }, string>;
             subscribe(this: void, run: import("svelte/store").Subscriber<number[]>, invalidate?: import("svelte/store").Invalidator<number[]> | undefined): import("svelte/store").Unsubscriber;
-        }, import("svelte/store").Writable<number>, import("svelte/store").Writable<number>, import("svelte/store").Writable<number>, import("svelte/store").Writable<"horizontal" | "vertical">], import("svelte/action").Action<any, any, Record<never, any>>, ([$ticks, $value, $min, $max, $step, $orientation]: [number, number[], number, number, number, "horizontal" | "vertical"]) => () => {
+        }, import("svelte/store").Writable<number>, import("svelte/store").Writable<number>, import("svelte/store").Writable<number>, import("svelte/store").Writable<import("./types.js").SliderOrientation>], import("svelte/action").Action<any, any, Record<never, any>>, ([$ticks, $value, $min, $max, $step, $orientation]: [number, number[], number, number, number, import("./types.js").SliderOrientation]) => () => {
             'data-bounded': boolean | undefined;
@@ -57,3 +57,3 @@ style: string;
         disabled: import("svelte/store").Writable<boolean>;
-        orientation: import("svelte/store").Writable<"horizontal" | "vertical">;
+        orientation: import("svelte/store").Writable<import("./types.js").SliderOrientation>;
         max: import("svelte/store").Writable<number>;
@@ -60,0 +60,0 @@ min: import("svelte/store").Writable<number>;

dist/builders/slider/create.js

@@ -92,3 +92,5 @@ import { addEventListener, addMeltEventListener, ariaDisabledAttr, builder, createElHelpers, disabledAttr, effect, executeCallbacks, getElementByMeltId, isBrowser, isHTMLElement, kbd, omit, overridable, snapValueToStep, styleToString, toWritableStores, } from '../../internal/helpers/index.js';
                 'data-orientation': $orientation,
-                style: $disabled ? undefined : 'touch-action: none;',
+                style: $disabled
+                    ? undefined
+                    : `touch-action: ${$orientation === 'horizontal' ? 'pan-y' : 'pan-x'}`,
                 'data-melt-id': meltIds.root,
@@ -323,16 +325,12 @@ };
         };
-        const pointerDown = (e) => {
-            if (e.button !== 0)
+        const pointerMove = (e) => {
+            if (!get(isActive))
                 return;
+            e.preventDefault();
+            e.stopPropagation();
             const sliderEl = getElementByMeltId($root['data-melt-id']);
-            const closestThumb = getClosestThumb(e);
-            if (!closestThumb || !sliderEl)
+            const closestThumb = get(activeThumb);
+            if (!sliderEl || !closestThumb)
                 return;
-            const target = e.target;
-            if (!isHTMLElement(target) || !sliderEl.contains(target))
-                return;
-            e.preventDefault();
-            activeThumb.set(closestThumb);
             closestThumb.thumb.focus();
-            isActive.set(true);
             if ($orientation === 'horizontal') {
@@ -347,23 +345,27 @@ const { left, right } = sliderEl.getBoundingClientRect();
         };
-        const pointerUp = () => {
-            isActive.set(false);
-        };
-        const pointerMove = (e) => {
-            if (!get(isActive))
+        const pointerDown = (e) => {
+            if (e.button !== 0)
                 return;
             const sliderEl = getElementByMeltId($root['data-melt-id']);
-            const closestThumb = get(activeThumb);
-            if (!sliderEl || !closestThumb)
+            const closestThumb = getClosestThumb(e);
+            if (!closestThumb || !sliderEl)
                 return;
+            const target = e.target;
+            if (!isHTMLElement(target) || !sliderEl.contains(target)) {
+                return;
+            }
+            e.preventDefault();
+            activeThumb.set(closestThumb);
             closestThumb.thumb.focus();
-            if ($orientation === 'horizontal') {
-                const { left, right } = sliderEl.getBoundingClientRect();
-                applyPosition(e.clientX, closestThumb.index, left, right);
-            }
-            else {
-                const { top, bottom } = sliderEl.getBoundingClientRect();
-                applyPosition(e.clientY, closestThumb.index, bottom, top);
-            }
+            isActive.set(true);
+            pointerMove(e);
         };
-        const unsub = executeCallbacks(addEventListener(document, 'pointerdown', pointerDown), addEventListener(document, 'pointerup', pointerUp), addEventListener(document, 'pointerleave', pointerUp), addEventListener(document, 'pointermove', pointerMove));
+        const pointerUp = () => {
+            isActive.set(false);
+        };
+        const unsub = executeCallbacks();
+        addEventListener(document, 'pointerdown', pointerDown),
+            addEventListener(document, 'pointerup', pointerUp),
+            addEventListener(document, 'pointerleave', pointerUp),
+            addEventListener(document, 'pointermove', pointerMove);
         return () => {
@@ -370,0 +372,0 @@ unsub();

dist/builders/slider/types.d.ts

@@ -6,2 +6,3 @@ import type { ChangeFn } from '../../internal/helpers/index.js';
 export type { SliderComponentEvents } from './events.js';
+export type SliderOrientation = 'horizontal' | 'vertical';
 export type CreateSliderProps = {
@@ -48,3 +49,3 @@ /**
      */
-    orientation?: 'horizontal' | 'vertical';
+    orientation?: SliderOrientation;
     /**
@@ -51,0 +52,0 @@ * When `true`, prevents the user from interacting with the slider.

dist/internal/helpers/focus.d.ts

@@ -7,3 +7,3 @@ export type FocusTarget = string | HTMLElement | SVGElement | null;
 };
-export declare function handleFocus(args: HandleFocusArgs): void;
+export declare function handleFocus(args: HandleFocusArgs): Promise<void>;
 export {};

dist/internal/helpers/focus.js

 import { isFunction, isHTMLElement, sleep } from './index.js';
-export function handleFocus(args) {
+import { tick } from 'svelte';
+export async function handleFocus(args) {
     const { prop, defaultEl } = args;
-    sleep(1).then(() => {
-        if (prop === undefined) {
-            defaultEl?.focus();
+    await Promise.all([sleep(1), tick]);
+    if (prop === undefined) {
+        defaultEl?.focus();
+        return;
+    }
+    const returned = isFunction(prop) ? prop(defaultEl) : prop;
+    if (typeof returned === 'string') {
+        // Get el by selector, focus it
+        const el = document.querySelector(returned);
+        if (!isHTMLElement(el))
             return;
-        }
-        const returned = isFunction(prop) ? prop(defaultEl) : prop;
-        if (typeof returned === 'string') {
-            // Get el by selector, focus it
-            const el = document.querySelector(returned);
-            if (!isHTMLElement(el))
-                return;
-            el.focus();
-        }
-        else if (isHTMLElement(returned)) {
-            // Focus it
-            returned.focus();
-        }
-    });
+        el.focus();
+    }
+    else if (isHTMLElement(returned)) {
+        // Focus it
+        returned.focus();
+    }
 }

package.json

 {
   "name": "@melt-ui/svelte",
-  "version": "0.61.2",
+  "version": "0.61.3",
   "license": "MIT",
@@ -82,2 +82,3 @@ "repository": "github:melt-ui/melt-ui",
     "@vitest/coverage-v8": "^0.33.0",
+    "@vitest/ui": "^0.34.6",
     "autoprefixer": "^10.4.14",
@@ -105,4 +106,2 @@ "clsx": "^1.2.1",
     "publint": "^0.1.12",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
     "rehype-pretty-code": "^0.10.0",
@@ -109,0 +108,0 @@ "rehype-rewrite": "^3.0.6",

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

1011585

increased by0.04%

Dev dependency count

78

decreased by-1.27%

Lines of code

22874

increased by0.05%

No dependency changes