feat: change events to align with native browser behavior

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 → 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

packages/uui-color-picker/lib/UUIColorPickerEvents.ts → packages/uui-color-picker/lib/UUIColorPickerEvent.ts

@@ -7,4 +7,11 @@ export class UUIColorPickerChangeEvent extends UUIEvent<
   UUIColorPickerElement
 > {
   public static readonly CHANGE = 'change';
+
+  constructor(evName: string, eventInit: any | null = {}) {
+    super(evName, {
+      ...{ bubbles: true },
+      ...eventInit,
+    });
+  }
 }

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

@@ -1,2 +1,2 @@
 export * from './uui-color-picker.element';
-export * from './UUIColorPickerEvents';
+export * from './UUIColorPickerEvent';

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

@@ -33,7 +33,7 @@ import { UUIColorSwatchElement } from '@umbraco-ui/uui-color-swatch/lib';
 import { UUIPopoverElement } from '@umbraco-ui/uui-popover/lib';
 
 import { UUIInputElement } from '@umbraco-ui/uui-input/lib';
-import { UUIColorPickerChangeEvent } from './UUIColorPickerEvents';
+import { UUIColorPickerChangeEvent } from './UUIColorPickerEvent';
 import { LabelMixin } from '@umbraco-ui/uui-base/lib/mixins';
 
 const hasEyeDropper = 'EyeDropper' in window;

packages/uui-color-slider/lib/UUIColorSliderEvents.ts → packages/uui-color-slider/lib/UUIColorSliderEvent.ts

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

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

@@ -1,2 +1,2 @@
 export * from './uui-color-slider.element';
-export * from './UUIColorSliderEvents';
+export * from './UUIColorSliderEvent';

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

@@ -9,7 +9,7 @@ import {
   reverseNumberInRange,
 } from '@umbraco-ui/uui-base/lib/utils';
 
-import { UUIColorSliderEvent } from './UUIColorSliderEvents';
+import { UUIColorSliderEvent } from './UUIColorSliderEvent';
 import { LabelMixin } from '@umbraco-ui/uui-base/lib/mixins';
 
 export type UUIColorSliderOrientation = 'horizontal' | 'vertical';

packages/uui-color-swatches/lib/UUIColorSwatchesEvents.ts → packages/uui-color-swatches/lib/UUIColorSwatchesEvent.ts

@@ -4,4 +4,11 @@ import { UUIColorSwatchElement } from '@umbraco-ui/uui-color-swatch/lib/uui-colo
 
 export class UUIColorSwatchesEvent extends UUIEvent<{}, UUIColorSwatchElement> {
   public static readonly CHANGE = 'change';
+
+  constructor(evName: string, eventInit: any | null = {}) {
+    super(evName, {
+      ...{ bubbles: true },
+      ...eventInit,
+    });
+  }
 }

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

@@ -1,2 +1,2 @@
 export * from './uui-color-swatches.element';
-export * from './UUIColorSwatchesEvents';
+export * from './UUIColorSwatchesEvent';

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

@@ -5,7 +5,7 @@ import { css, html, LitElement, PropertyValueMap } from 'lit';
 import { property, queryAssignedElements } from 'lit/decorators.js';
 
 import { LabelMixin } from '@umbraco-ui/uui-base/lib/mixins';
-import { UUIColorSwatchesEvent } from './UUIColorSwatchesEvents';
+import { UUIColorSwatchesEvent } from './UUIColorSwatchesEvent';
 
 //TODO maybe implement multiple selection
 

packages/uui-combobox-list/lib/UUIComboboxListEvent.ts

@@ -3,7 +3,7 @@ import { UUIComboboxListElement } from './uui-combobox-list.element';
 
 export class UUIComboboxListEvent extends UUIEvent<UUIComboboxListElement> {
   public static readonly CHANGE: string = 'change';
-  public static readonly SLOT_CHANGE: string = 'slot-change';
+  public static readonly INNER_SLOT_CHANGE: string = 'inner-slot-change';
 
   constructor(evName: string, eventInit: any | null = {}) {
     super(evName, {

packages/uui-combobox-list/lib/uui-combobox-list.element.ts

@@ -151,7 +151,7 @@ export class UUIComboboxListElement extends LitElement {
 
     this._updateSelection();
     this.dispatchEvent(
-      new UUIComboboxListEvent(UUIComboboxListEvent.SLOT_CHANGE)
+      new UUIComboboxListEvent(UUIComboboxListEvent.INNER_SLOT_CHANGE)
     );
   };
 

packages/uui-combobox/lib/UUIComboboxEvent.ts

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

packages/uui-combobox/lib/uui-combobox.element.ts

@@ -213,7 +213,7 @@ export class UUIComboboxElement extends FormControlMixin(LitElement) {
         this._onChange
       );
       this._comboboxList.addEventListener(
-        UUIComboboxListEvent.SLOT_CHANGE,
+        UUIComboboxListEvent.INNER_SLOT_CHANGE,
         this._onSlotChange
       );
 
@@ -262,9 +262,7 @@ export class UUIComboboxElement extends FormControlMixin(LitElement) {
     }
   };
 
-  private _onChange = (e: Event) => {
-    e.stopImmediatePropagation();
-
+  private _onChange = () => {
     this.value = this._comboboxList?.value || '';
     this.search = this.value ? this.search : '';
 

packages/uui-file-dropzone/lib/UUIFileDropzoneEvents.ts → packages/uui-file-dropzone/lib/UUIFileDropzoneEvent.ts

@@ -5,5 +5,12 @@ export class UUIFileDropzoneEvent extends UUIEvent<
   { files: File[] },
   UUIFileDropzoneElement
 > {
-  public static readonly FILE_CHANGE: string = 'file-change';
+  public static readonly CHANGE: string = 'change';
+
+  constructor(evName: string, eventInit: any | null = {}) {
+    super(evName, {
+      ...{ bubbles: true },
+      ...eventInit,
+    });
+  }
 }

packages/uui-file-dropzone/lib/index.ts

@@ -1,2 +1,2 @@
 export * from './uui-file-dropzone.element';
-export * from './UUIFileDropzoneEvents';
+export * from './UUIFileDropzoneEvent';

packages/uui-file-dropzone/lib/uui-file-dropzone.element.ts

@@ -1,13 +1,13 @@
 import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
 import { css, html, LitElement } from 'lit';
 import { query, property } from 'lit/decorators.js';
-import { UUIFileDropzoneEvent } from './UUIFileDropzoneEvents';
+import { UUIFileDropzoneEvent } from './UUIFileDropzoneEvent';
 import { LabelMixin } from '@umbraco-ui/uui-base/lib/mixins';
 import { demandCustomElement } from '@umbraco-ui/uui-base/lib/utils';
 
 /**
  * @element uui-file-dropzone
- *  @fires {UUIFileDropzoneEvent} file-change - fires when the a file has been selected.
+ *  @fires {UUIFileDropzoneEvent} change - fires when the a file has been selected.
  *  @slot - For the content of the dropzone
  *  @description - Dropzone for file upload. Supports native browsing and drag n drop.
  */
@@ -62,10 +62,14 @@ export class UUIFileDropzoneElement extends LabelMixin('', LitElement) {
   private _dropzone!: HTMLElement;
 
   /**
-   * Accepted filetypes. Will allow all types if empty.
+   * Comma-separated list of accepted filetypes. Will allow all types if empty.
    * @type {string}
    * @attr
    * @default false
+   * @examples [
+   *   "image/png,image/jpeg,image/gif",
+   *   "gif,png,jpg,jpeg",
+   * ]
    */
   @property({ type: String })
   public accept: string = '';
@@ -212,7 +216,7 @@ export class UUIFileDropzoneElement extends LabelMixin('', LitElement) {
       }
 
       this.dispatchEvent(
-        new UUIFileDropzoneEvent(UUIFileDropzoneEvent.FILE_CHANGE, {
+        new UUIFileDropzoneEvent(UUIFileDropzoneEvent.CHANGE, {
           detail: { files: result },
         })
       );
@@ -238,7 +242,7 @@ export class UUIFileDropzoneElement extends LabelMixin('', LitElement) {
     const files = this._input.files ? Array.from(this._input.files) : [];
 
     this.dispatchEvent(
-      new UUIFileDropzoneEvent(UUIFileDropzoneEvent.FILE_CHANGE, {
+      new UUIFileDropzoneEvent(UUIFileDropzoneEvent.CHANGE, {
         detail: { files: files },
       })
     );