feat: change events to align with native browser behavior (#476)

* remove bubbles and composed from UUIEvent

* list events

* UUIButtonInlineCreateEvent

* all change events

* inner-slot-change

* UUIFileDropzoneEvent

* Icon + MenuItem

* UUIToastNotificationEvent

* UUIFormControlEvent not composed

* added missing imports

* change into a MarkDown table

* Cancelable Selectable Event

* update dropzone story to accept props and log actions

---------

Co-authored-by: Jacob Overgaard <[email protected]>

Author: nielslyngsoe

docs/EVENTS.md

@@ -0,0 +1,37 @@
+# Events
+
+**Change in version 1.3.0**
+In version 1.3.0 the events Bubbles and Composed properties has changed, here is a list of events and the change of them:
+
+| Name                      | Bubbles | Composed | Description                                                                         |
+| ------------------------- | ------- | -------- | ----------------------------------------------------------------------------------- |
+| UUIEvent                  | No      | No       | No longer bubbles or composed by default.                                           |
+| UUIFormControlEvent       | Yes     | No       | No longer composed.                                                                 |
+| UUISelectableEvent        | Yes     | No       | No longer composed.                                                                 |
+| UUIBooleanInputEvent      | Yes     | No       | No longer composed.                                                                 |
+| UUIButtonInlineEvent      | Yes     | Yes      | Not affected.                                                                       |
+| UUICardEvent              | No      | No       | No longer bubbles or composed.                                                      |
+| UUIColorAreaEvent(s)      | Yes     | No       | No longer composed.                                                                 |
+| UUIColorPickerEvent(s)    | Yes     | No       | No longer composed.                                                                 |
+| UUIColorSliderEvent(s)    | Yes     | No       | No longer composed.                                                                 |
+| UUIColorSwatchesEvent(s)  | Yes     | No       | No longer composed.                                                                 |
+| UUIComboboxEvent          | Yes     | No       | No longer composed.                                                                 |
+| UUIComboboxListEvent      | Yes     | No       | The event name 'slot-change' is changed to 'inner-slot-change'. No longer composed. |
+| UUIFileDropzoneEvent(s)   | Yes     | No       | The event name 'file-change' is changed to 'change'. No longer composed.            |
+| UUIIconRequestEvent       | Yes     | Yes      | Not affected.                                                                       |
+| UUIInputEvent             | Yes     | No       | No longer composed.                                                                 |
+| UUIMenuItemEvent          | No      | No       | No longer bubbles or composed.                                                      |
+| UUIPaginationEvent        | Yes     | No       | No longer composed.                                                                 |
+| UUIPopoverEvent           | No      | No       | No longer bubbles or composed.                                                      |
+| UUIRadioEvent             | Yes     | No       | No longer composed.                                                                 |
+| UUIRadioGroupEvent        | Yes     | No       | No longer composed.                                                                 |
+| UUIRangeSliderEvent       | Yes     | No       | No longer composed.                                                                 |
+| UUIRefEvent               | No      | No       | No longer bubbles or composed.                                                      |
+| UUISelectEvent            | Yes     | No       | No longer composed.                                                                 |
+| UUISliderEvent(s)         | Yes     | No       | No longer composed.                                                                 |
+| UUITabEvent               | No      | No       | No one is dispatching this class.                                                   |
+| UUITabGroupEvent          | No      | No       | No one is dispatching this class.                                                   |
+| UUITextAreaEvent          | Yes     | No       | No longer composed.                                                                 |
+| UUIToastNotificationEvent | No      | No       | No longer bubbles or composed.                                                      |
+
+Also notice events files previously named with a 's' in the end is no longer named this way, they are without the 's' now. (notice only affects direct paths)

packages/uui-base/lib/events/UUIEvent.ts

@@ -2,10 +2,6 @@
  * Umbraco UI implementation of native DOM CustomEvent that propagates out of Shadow DOM context.
  */
 
-const DefaultInit = {
-  composed: true,
-  bubbles: true,
-};
 export class UUIEvent<
   DetailType extends Record<string, any> = Record<string, any>,
   EventTargetType extends EventTarget | null = EventTarget | null
@@ -14,10 +10,7 @@ export class UUIEvent<
   readonly target!: EventTargetType;
 
   constructor(evName: string, eventInit: any | null = {}) {
-    super(evName, {
-      ...DefaultInit,
-      ...eventInit,
-    });
+    super(evName, { ...eventInit });
     this.detail = eventInit.detail || {};
   }
 }

packages/uui-base/lib/events/UUISelectableEvent.ts

@@ -7,7 +7,7 @@ export class UUISelectableEvent extends UUIEvent<{}, SelectableMixinInterface> {
 
   constructor(evName: string, eventInit: any | null = {}) {
     super(evName, {
-      ...{ bubbles: true },
+      ...{ bubbles: true, cancelable: true },
       ...eventInit,
     });
   }

packages/uui-base/lib/mixins/SelectableMixin.ts

@@ -73,14 +73,20 @@ export const SelectableMixin = <T extends Constructor<LitElement>>(
 
     private _select() {
       if (!this.selectable) return;
+      const selectEvent = new UUISelectableEvent(UUISelectableEvent.SELECTED);
+      this.dispatchEvent(selectEvent);
+      if (selectEvent.defaultPrevented) return;
+
       this.selected = true;
-      this.dispatchEvent(new UUISelectableEvent(UUISelectableEvent.SELECTED));
     }
 
     private _unselect() {
       if (!this.unselectable) return;
+      const selectEvent = new UUISelectableEvent(UUISelectableEvent.UNSELECTED);
+      this.dispatchEvent(selectEvent);
+      if (selectEvent.defaultPrevented) return;
+
       this.selected = false;
-      this.dispatchEvent(new UUISelectableEvent(UUISelectableEvent.UNSELECTED));
     }
 
     private _handleClick(e: Event) {

packages/uui-boolean-input/lib/UUIBooleanInputEvent.ts

@@ -3,4 +3,11 @@ import { UUIBooleanInputElement } from './uui-boolean-input.element';
 
 export class UUIBooleanInputEvent extends UUIEvent<{}, UUIBooleanInputElement> {
   public static readonly CHANGE: string = 'change';
+
+  constructor(evName: string, eventInit: any | null = {}) {
+    super(evName, {
+      ...{ bubbles: true },
+      ...eventInit,
+    });
+  }
 }

packages/uui-boolean-input/lib/uui-boolean-input.test.ts

@@ -1,6 +1,6 @@
 /* eslint-disable lit/no-invalid-html */
 /* eslint-disable lit/binding-positions */
-import '.';
+import { UUIBooleanInputEvent, UUIBooleanInputElement } from '.';
 
 import {
   defineCE,
@@ -13,8 +13,6 @@ import {
 } from '@open-wc/testing';
 import { html as litHTMLLiteral } from 'lit';
 
-import { UUIBooleanInputElement } from './uui-boolean-input.element';
-
 const tagName = defineCE(
   class BooleanInputTestElement extends UUIBooleanInputElement {
     renderCheckbox() {
@@ -76,12 +74,16 @@ describe('UUIBooleanInputElement', () => {
     await elementUpdated(element);
     expect(input?.checked).to.equal(true);
   });
-
-  it('emits an event when the input changes', async () => {
-    let clicked = false;
-    element.addEventListener('change', () => (clicked = true));
+  it('emits an change event when the input changes', async () => {
+    const listener = oneEvent(element, UUIBooleanInputEvent.CHANGE);
     label.click();
-    expect(clicked).to.equal(true);
+
+    const event = await listener;
+    expect(event).to.exist;
+    expect(event.type).to.equal(UUIBooleanInputEvent.CHANGE);
+    expect(event.bubbles).to.be.true;
+    expect(event.composed).to.be.false;
+    expect(event!.target).to.equal(element);
   });
 });
 

packages/uui-button-inline-create/lib/UUIButtonInlineCreateEvent.ts

@@ -6,4 +6,11 @@ export class UUIButtonInlineCreateEvent extends UUIEvent<
   UUIButtonInlineCreateElement
 > {
   public static readonly CLICK: string = 'click';
+
+  constructor(evName: string, eventInit: any | null = {}) {
+    super(evName, {
+      ...{ bubbles: true, composed: true },
+      ...eventInit,
+    });
+  }
 }

packages/uui-color-area/lib/UUIColorAreaEvents.ts renamed to packages/uui-color-area/lib/UUIColorAreaEvent.ts

@@ -3,4 +3,11 @@ import { UUIColorAreaElement } from './uui-color-area.element';
 
 export class UUIColorAreaEvent extends UUIEvent<{}, UUIColorAreaElement> {
   public static readonly CHANGE = 'change';
+
+  constructor(evName: string, eventInit: any | null = {}) {
+    super(evName, {
+      ...{ bubbles: true },
+      ...eventInit,
+    });
+  }
 }

packages/uui-color-area/lib/index.ts

@@ -1,2 +1,2 @@
 export * from './uui-color-area.element';
-export * from './UUIColorAreaEvents';
+export * from './UUIColorAreaEvent';

packages/uui-color-area/lib/uui-color-area.element.ts

@@ -9,7 +9,7 @@ import { drag, clamp } from '@umbraco-ui/uui-base/lib/utils';
 
 import { styleMap } from 'lit/directives/style-map.js';
 
-import { UUIColorAreaEvent } from './UUIColorAreaEvents';
+import { UUIColorAreaEvent } from './UUIColorAreaEvent';
 
 /**
  * @element uui-color-area