fluent-svelte-extra 1.7.2 → 1.7.4

package/ContextMenu/ContextMenu.svelte

@@ -4,8 +4,8 @@
 import { externalMouseEvents, arrowNavigation } from "../internal";
 import { tabbable } from "tabbable";
 import MenuFlyoutSurface from "../MenuFlyout/MenuFlyoutSurface.svelte";
-/** Controls if the flyout will be closed when clicking a standard variant item. Only applies if `closable` is set to `true`. */
-export let closeOnSelect = true;
+/** Controls if the flyout will be closed when clicking a standard variant item. Set to `false` by default. */
+export let closeOnSelect = false;
 /** The current visibility state of the context menu. */
 export let open = false;
 /** Obtains a bound DOM reference to the content wrapper element. */
@@ -58,11 +58,13 @@ function mountMenu(node) {
         destroy: () => node.remove()
     };
 }
-setContext("closeFlyout", event => {
-    dispatch("select");
-    if (closeOnSelect)
-        open = false;
-});
+if (closeOnSelect) {
+    setContext("closeFlyout", () => {
+        dispatch("select");
+        if (closeOnSelect)
+            open = false;
+    });
+}
 </script>
 
 <svelte:window on:keydown={handleEscapeKey} />

package/GridView/GridViewItem.svelte

@@ -1,4 +1,6 @@
 <script >import Checkbox from "../Checkbox/Checkbox.svelte";
+import { createEventDispatcher } from "svelte";
+const dispatch = createEventDispatcher();
 /** Indicates the selected state of the grid view item. */
 export let selected = false;
 export let singleSelect = false;
@@ -14,7 +16,10 @@ function setSelected(value) {
 <div class="grid-view-item" class:selected {...$$restProps}>
 	{#if !singleSelect}
 		<div class="item-checkbox">
-			<Checkbox bind:checked={selected}></Checkbox>
+			<Checkbox
+				bind:checked={selected}
+				on:change={() => dispatch("change", { selected: !selected })}
+			></Checkbox>
 		</div>
 	{/if}
 

package/GridView/GridViewItem.svelte.d.ts

@@ -6,6 +6,8 @@ declare const __propDef: {
         singleSelect?: boolean;
     };
     events: {
+        change: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {

package/MenuFlyout/MenuFlyoutItem.svelte

@@ -1,6 +1,6 @@
 <script >import { createEventDispatcher, getContext } from "svelte";
 import { get_current_component } from "svelte/internal";
-import { arrowNavigation, uid, createEventForwarder } from "../internal";
+import { arrowNavigation, uid, createEventForwarder, conditionalEvent } from "../internal";
 import { tabbable } from "tabbable";
 import MenuFlyoutSurface from "../MenuFlyout/MenuFlyoutSurface.svelte";
 import TextBlock from "../TextBlock/TextBlock.svelte";
@@ -67,6 +67,8 @@ function handleKeyDown(event) {
         else if (open && key === "ArrowLeft") {
             event.stopPropagation();
             open = false;
+            if (closeFlyout && !cascading)
+                closeFlyout(event);
             element.focus();
         }
     }
@@ -79,7 +81,7 @@ function handleMouseEnter() {
             open = true;
     }, 500);
 }
-function handleMouseLeave() {
+function handleMouseLeave(e) {
     subMenuQueue.close = true;
     subMenuQueue.open = false;
     setTimeout(() => {
@@ -109,6 +111,13 @@ function handleMouseLeave() {
 		on:mouseleave={handleMouseLeave}
 		on:keydown={handleKeyDown}
 		on:click
+		use:conditionalEvent={{
+			condition: closeFlyout,
+			event: "click",
+			callback: e => {
+				if (!cascading) closeFlyout(e);
+			}
+		}}
 		{...$$restProps}
 	>
 		<slot name="icon" />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fluent-svelte-extra",
-  "version": "1.7.2",
+  "version": "1.7.4",
   "description": "A faithful implementation of Microsoft's Fluent Design System in Svelte.",
   "homepage": "https://github.com/OpenAnime/fluent-svelte-extra",
   "license": "MIT",