@crowdstrike/glide-core 0.30.1 → 0.31.0

package/dist/menu.js

@@ -54,7 +54,7 @@ let Menu = class Menu extends LitElement {
         // `#onComponentFocusOut()` to decide if Menu should close. Also used in
         // `#onTargetAndDefaultSlotKeyDown()` to decide if we need to move focus.
         this.#hasVoiceOverMovedFocusToOptionsOrAnOption = false;
-        // Set in `#onTargetSlotMouseUp()`. Used in `#onDocumentClick()` to guard against
+        // Set in `#onDefaultSlotMouseUp()`. Used in `#onDocumentClick()` to guard against
         // Menu closing when any number of things that are not an Option are clicked. Those
         // "click" events will be retargeted to Menu's host the moment they bubble out of
         // Menu. So checking in `#onDocumentClick()` if the click's `event.target` came
@@ -67,8 +67,8 @@ let Menu = class Menu extends LitElement {
         // used in `connectedCallback()` to guard against listening for document clicks for
         // sub-Menus.
         this.#isSubMenuOpen = false;
-        // Set in `#onTargetSlotMouseUp()` and `#onDocumentClick()`. Used in
-        // `#onDocumentClick()`:
+        // Similar situation as with `isDefaultSlotClick`. Set in `#onTargetSlotClick()`
+        // and `#onDocumentClick()`. Used in `#onDocumentClick()`:
         //
         // 1. Menu is open.
         // 2. User clicks Menu's target.
@@ -76,19 +76,9 @@ let Menu = class Menu extends LitElement {
         // 4. `#onTargetSlotClick()` sets `open` to true`.
         // 5. Menu never closes.
         //
-        // Setting `#isTargetSlotMouseUp` to `true` in `#onTargetSlotMouseUp()` gives
+        // Setting `#isTargetSlotClick` to `true` in `#onTargetSlotClick()` gives
         // `#onDocumentClick()` the information it needs to not set `open` to `false`.
-        //
-        // The normal approach would be to set an `#isTargetSlotClick` property in
-        // `#onTargetSlotClick()`. But `#onDocumentClick()` listens for "click" events in
-        // their capture phase. So `#onDocumentClick()` would be called before
-        // `#onTargetSlotClick()`.
-        //
-        // Note too that `#onDocumentClick()` sets `#isTargetSlotMouseUp` to `false`
-        // instead of `#onTargetSlotClick()` doing it. That's so `#isTargetSlotMouseUp`
-        // is set to `false` even if the user mouses down on Menu's target then moves the
-        // mouse outside of Menu before mousing up.
-        this.#isTargetSlotMouseUp = false;
+        this.#isTargetSlotClick = false;
         this.#localize = new LocalizeController(this);
         this.#targetSlotElementRef = createRef();
         // An arrow function field instead of a method so `this` is closed over and set to
@@ -98,8 +88,8 @@ let Menu = class Menu extends LitElement {
                 this.#isDefaultSlotClick = false;
                 return;
             }
-            if (this.#isTargetSlotMouseUp) {
-                this.#isTargetSlotMouseUp = false;
+            if (this.#isTargetSlotClick) {
+                this.#isTargetSlotClick = false;
                 return;
             }
             if (this.#optionsElement) {
@@ -175,20 +165,7 @@ let Menu = class Menu extends LitElement {
         // easier to understand because developers don't have to think about sub-Menus when
         // looking at `#onDocumentClick()`.
         if (!this.#isSubMenu) {
-            // 1. The consumer has a "click" handler on an element that isn't Menu's target.
-            // 2. The user clicks that element.
-            // 3. The handler is called. It sets `open` to `true`.
-            // 4. The "click" bubbles up and is handled by `#onDocumentClick()`.
-            // 5. `#onDocumentClick()` sets `open` to `false` because the click came from
-            //    outside Menu.
-            // 6. Menu is opened then immediately closed and so never opens.
-            //
-            // `capture` ensures `#onDocumentClick()` is called before #3, so that `open` set
-            // `true` in the consumer's handler isn't overwritten by `#onDocumentClick()`
-            // handler setting it to `false`.
-            document.addEventListener('click', this.#onDocumentClick, {
-                capture: true,
-            });
+            document.addEventListener('click', this.#onDocumentClick);
         }
     }
     createRenderRoot() {
@@ -197,9 +174,7 @@ let Menu = class Menu extends LitElement {
     }
     disconnectedCallback() {
         super.disconnectedCallback();
-        document.removeEventListener('click', this.#onDocumentClick, {
-            capture: true,
-        });
+        document.removeEventListener('click', this.#onDocumentClick);
     }
     firstUpdated() {
         if (this.#optionsElement && this.#targetElement) {
@@ -293,7 +268,6 @@ let Menu = class Menu extends LitElement {
           name="target"
           @click=${this.#onTargetSlotClick}
           @keydown=${this.#onTargetAndDefaultSlotKeyDown}
-          @mouseup=${this.#onTargetSlotMouseUp}
           @input=${this.#onTargetSlotInput}
           @slotchange=${this.#onTargetSlotChange}
           ${assertSlot([Element])}
@@ -341,7 +315,7 @@ let Menu = class Menu extends LitElement {
     // `#onComponentFocusOut()` to decide if Menu should close. Also used in
     // `#onTargetAndDefaultSlotKeyDown()` to decide if we need to move focus.
     #hasVoiceOverMovedFocusToOptionsOrAnOption;
-    // Set in `#onTargetSlotMouseUp()`. Used in `#onDocumentClick()` to guard against
+    // Set in `#onDefaultSlotMouseUp()`. Used in `#onDocumentClick()` to guard against
     // Menu closing when any number of things that are not an Option are clicked. Those
     // "click" events will be retargeted to Menu's host the moment they bubble out of
     // Menu. So checking in `#onDocumentClick()` if the click's `event.target` came
@@ -354,8 +328,8 @@ let Menu = class Menu extends LitElement {
     // used in `connectedCallback()` to guard against listening for document clicks for
     // sub-Menus.
     #isSubMenuOpen;
-    // Set in `#onTargetSlotMouseUp()` and `#onDocumentClick()`. Used in
-    // `#onDocumentClick()`:
+    // Similar situation as with `isDefaultSlotClick`. Set in `#onTargetSlotClick()`
+    // and `#onDocumentClick()`. Used in `#onDocumentClick()`:
     //
     // 1. Menu is open.
     // 2. User clicks Menu's target.
@@ -363,19 +337,9 @@ let Menu = class Menu extends LitElement {
     // 4. `#onTargetSlotClick()` sets `open` to true`.
     // 5. Menu never closes.
     //
-    // Setting `#isTargetSlotMouseUp` to `true` in `#onTargetSlotMouseUp()` gives
+    // Setting `#isTargetSlotClick` to `true` in `#onTargetSlotClick()` gives
     // `#onDocumentClick()` the information it needs to not set `open` to `false`.
-    //
-    // The normal approach would be to set an `#isTargetSlotClick` property in
-    // `#onTargetSlotClick()`. But `#onDocumentClick()` listens for "click" events in
-    // their capture phase. So `#onDocumentClick()` would be called before
-    // `#onTargetSlotClick()`.
-    //
-    // Note too that `#onDocumentClick()` sets `#isTargetSlotMouseUp` to `false`
-    // instead of `#onTargetSlotClick()` doing it. That's so `#isTargetSlotMouseUp`
-    // is set to `false` even if the user mouses down on Menu's target then moves the
-    // mouse outside of Menu before mousing up.
-    #isTargetSlotMouseUp;
+    #isTargetSlotClick;
     #localize;
     #offset;
     // Used in various situations to reactivate the previously active Option.
@@ -1117,6 +1081,7 @@ let Menu = class Menu extends LitElement {
         }
     }
     #onTargetSlotClick(event) {
+        this.#isTargetSlotClick = true;
         const closestOption = event.target instanceof Element &&
             event.target.closest('glide-core-option');
         const isSubMenuTarget = event.target instanceof Element && Boolean(closestOption);
@@ -1179,9 +1144,6 @@ let Menu = class Menu extends LitElement {
     #onTargetSlotInput() {
         this.open = true;
     }
-    #onTargetSlotMouseUp() {
-        this.#isTargetSlotMouseUp = true;
-    }
     #show() {
         this.#cleanUpFloatingUi?.();
         if (this.#previouslyActiveOption &&

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crowdstrike/glide-core",
-  "version": "0.30.1",
+  "version": "0.31.0",
   "description": "A Web Component design system",
   "author": "CrowdStrike UX Team",
   "license": "Apache-2.0",