@melt-ui/svelte - npm Package Compare versions

Comparing version 0.8.1 to 0.8.2

dist/builders/dialog/index.js

@@ -36,7 +36,2 @@ import { createFocusTrap, usePortal } from '../../internal/actions';
     const overlay = elementDerived([open, options], ([$open, $options], { attach }) => {
-        if ($options.closeOnOutsideClick) {
-            attach('click', () => {
-                open.set(false);
-            });
-        }
         if ($options.closeOnEscape) {
@@ -59,3 +54,3 @@ attach('keydown', (e) => {
     });
-    const content = elementDerived(open, ($open, { addAction }) => {
+    const content = elementDerived([open, options], ([$open, $options], { addAction }) => {
         if ($open) {
@@ -65,3 +60,9 @@ const { useFocusTrap } = createFocusTrap({
                 escapeDeactivates: false,
-                allowOutsideClick: true,
+                allowOutsideClick: (e) => {
+                    e.preventDefault();
+                    if ($options.closeOnOutsideClick) {
+                        open.set(false);
+                    }
+                    return false;
+                },
                 returnFocusOnDeactivate: false,
@@ -68,0 +69,0 @@ });

dist/builders/select/index.d.ts

@@ -17,2 +17,3 @@ import type { FloatingConfig } from '../../internal/actions';
     disabled?: boolean;
+    selected?: string | number;
 };
@@ -34,2 +35,3 @@ export declare function createSelect(args?: CreateSelectArgs): {
         style: string;
+        id: string;
         'aria-labelledby': string;
@@ -40,4 +42,4 @@ } & {
     open: import("svelte/store").Writable<boolean>;
-    option: import("svelte/store").Readable<(args_0: {
-        value: string;
+    option: import("svelte/store").Readable<(args: string | number | {
+        value: string | number;
     }) => {
@@ -51,3 +53,3 @@ role: string;
     }>;
-    selected: import("svelte/store").Writable<string | null>;
+    selected: import("svelte/store").Writable<string | number | null>;
     selectedText: import("svelte/store").Writable<string | null>;
@@ -58,3 +60,3 @@ arrow: import("svelte/store").Readable<{
     }>;
-    isSelected: import("svelte/store").Readable<(value: string) => boolean>;
+    isSelected: import("svelte/store").Readable<(value: string | number) => boolean>;
     options: import("svelte/store").Writable<{
@@ -65,3 +67,4 @@ positioning?: FloatingConfig | undefined;
         disabled?: boolean | undefined;
+        selected?: string | number | undefined;
     }>;
 };

dist/builders/select/index.js

 import { usePopper } from '../../internal/actions/popper';
 import { debounce, effect, elementDerived, elementMultiDerived, getElementByMeltId, isBrowser, kbd, styleToString, uuid, } from '../../internal/helpers';
 import { sleep } from '../../internal/helpers/sleep';
+import { tick } from 'svelte';
 import { derived, writable } from 'svelte/store';
@@ -18,3 +19,3 @@ const defaults = {
     const open = writable(false);
-    const selected = writable(null);
+    const selected = writable(withDefaults.selected ?? null);
     const selectedText = writable(null);
@@ -41,2 +42,3 @@ const activeTrigger = writable(null);
             }),
+            id: ids.menu,
             'aria-labelledby': ids.trigger,
@@ -79,7 +81,6 @@ };
     const option = elementMultiDerived([selected], ([$selected], { attach }) => {
-        return ({ value }) => {
-            attach('click', (e) => {
-                const el = e.currentTarget;
+        return (args) => {
+            const value = typeof args === 'object' ? args.value : args;
+            attach('click', () => {
                 selected.set(value);
-                selectedText.set(el.innerText);
                 open.set(false);
@@ -89,11 +90,8 @@ });
                 if (e.key === kbd.ENTER || e.key === kbd.SPACE) {
-                    e.stopPropagation();
-                    e.stopImmediatePropagation();
-                    const el = e.currentTarget;
+                    e.preventDefault();
                     selected.set(value);
-                    selectedText.set(el.innerText);
                     open.set(false);
                 }
             });
-            attach('mouseover', (e) => {
+            attach('mousemove', (e) => {
                 const el = e.currentTarget;
@@ -189,4 +187,19 @@ el.focus();
     });
-    const isSelected = derived([selected], ([$selected]) => (value) => $selected === value);
+    effect([menu], ([$menu]) => {
+        tick().then(() => {
+            const menuEl = getElementByMeltId($menu['data-melt-id']);
+            if (!menuEl)
+                return;
+            const selectedOption = menuEl.querySelector('[role=option][data-selected]');
+            if (selectedOption) {
+                selectedText.set(selectedOption.innerText);
+            }
+        });
+    });
+    const isSelected = derived([selected], ([$selected]) => {
+        return (value) => {
+            return $selected === value;
+        };
+    });
     return { trigger, menu, open, option, selected, selectedText, arrow, isSelected, options };
 }

package.json

 {
   "name": "@melt-ui/svelte",
-  "version": "0.8.1",
+  "version": "0.8.2",
   "license": "MIT",
@@ -5,0 +5,0 @@ "exports": {

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

126882

increased by0.48%

Lines of code

3319

increased by0.51%

No dependency changes