Refactor event typing

packages/js-example-app/src/index.js

@@ -53,7 +53,7 @@ blrButton.addEventListener('blrBlur', () => {
   addLog('blr-text-button blurred');
 });
 
-blrCheckbox.addEventListener('blrChange', (e) => {
+blrCheckbox.addEventListener('blrCheckedChange', (e) => {
   addLog('blr-checkbox changed: ' + e.detail.checkedState);
 });
 
@@ -65,7 +65,7 @@ blrCheckbox.addEventListener('blrBlur', () => {
   addLog('blr-checkbox blurred');
 });
 
-blrSelect.addEventListener('blrChange', () => {
+blrSelect.addEventListener('blrSelectedValueChange', () => {
   addLog('blr-select changed');
 });
 
@@ -77,7 +77,7 @@ blrTextInput.addEventListener('blrBlur', () => {
   addLog('blr-text-input blurred');
 });
 
-blrTextInput.addEventListener('blrChange', () => {
+blrTextInput.addEventListener('blrTextValueChange', () => {
   addLog('blr-text-input changed');
 });
 
@@ -94,5 +94,5 @@ blrTextArea.addEventListener('blrChange', () => {
 });
 
 blrTextArea.addEventListener('blrSelect', () => {
-  addLog('blr-textarea selected',);
+  addLog('blr-textarea selected');
 });

packages/ui-library/src/components/checkbox/index.ts

@@ -13,7 +13,26 @@ import { checkboxLight, checkboxDark } from './index.css';
 import { BlrFormCaptionGroupRenderFunction } from '../form-caption-group/renderFunction';
 import { BlrFormCaptionRenderFunction } from '../form-caption/renderFunction';
 import { BlrFormLabelInlineRenderFunction } from '../form-label/form-label-inline/renderFunction';
-
+import {
+  BlrBlurEvent,
+  BlrFocusEvent,
+  BlrCheckedChangeEvent,
+  createBlrCheckedChangeEvent,
+  createBlrBlurEvent,
+  createBlrFocusEvent,
+} from '../../globals/events';
+
+export type BlrCheckboxEventHandlers = {
+  blrFocus?: (event: BlrFocusEvent) => void;
+  blrBlur?: (event: BlrBlurEvent) => void;
+  blrCheckedChange?: (event: BlrCheckedChangeEvent) => void;
+};
+
+/**
+ * @fires blrFocus Checkbox received focus
+ * @fires blrBlur Checkbox lost focus
+ * @fires blrCheckedChange Checkbox state changed (event.checkState)
+ */
 export class BlrCheckbox extends LitElement {
   static styles = [];
 
@@ -41,11 +60,6 @@ export class BlrCheckbox extends LitElement {
 
   @property() size?: FormSizesType = 'md';
 
-  // these are not triggered directly but allows us to map it internally and bve typesafe
-  @property() blrFocus?: () => void;
-  @property() blrBlur?: () => void;
-  @property() blrChange?: () => void;
-
   @property() theme: ThemeType = 'Light';
 
   @state() protected currentCheckedState: boolean | undefined = this.checked;
@@ -69,10 +83,9 @@ export class BlrCheckbox extends LitElement {
       this.currentIndeterminateState = false;
 
       this.dispatchEvent(
-        new CustomEvent('blrChange', {
-          bubbles: true,
-          composed: true,
-          detail: { originalEvent: event, checkedState: this.currentCheckedState },
+        createBlrCheckedChangeEvent({
+          originalEvent: event,
+          checkedState: this.currentCheckedState,
         })
       );
     }
@@ -84,23 +97,15 @@ export class BlrCheckbox extends LitElement {
     if (!this.disabled && !this.readonly) {
       this.focused = true;
 
-      this.dispatchEvent(
-        new CustomEvent('blrFocus', { bubbles: true, composed: true, detail: { originalEvent: event } })
-      );
+      this.dispatchEvent(createBlrFocusEvent({ originalEvent: event }));
     }
   };
 
   protected handleBlur = (event: FocusEvent) => {
     if (!this.disabled && !this.readonly) {
       this.focused = false;
 
-      this.dispatchEvent(
-        new CustomEvent('blrBlur', {
-          bubbles: true,
-          composed: true,
-          detail: { originalEvent: event },
-        })
-      );
+      this.dispatchEvent(createBlrBlurEvent({ originalEvent: event }));
     }
   };
 
@@ -313,4 +318,4 @@ if (!customElements.get(TAG_NAME)) {
   customElements.define(TAG_NAME, BlrCheckbox);
 }
 
-export type BlrCheckboxType = Omit<BlrCheckbox, keyof LitElement>;
+export type BlrCheckboxType = Omit<BlrCheckbox, keyof LitElement> & BlrCheckboxEventHandlers;

packages/ui-library/src/components/icon-button/index.ts

@@ -13,7 +13,26 @@ import { determineLoaderVariant } from '../../utils/determine-loader-variant';
 import { getComponentConfigToken } from '../../utils/get-component-config-token';
 import { BlrIconRenderFunction } from '../icon/renderFunction';
 import { BlrLoaderRenderFunction } from '../loader/renderFunction';
-
+import {
+  BlrBlurEvent,
+  BlrClickEvent,
+  BlrFocusEvent,
+  createBlrBlurEvent,
+  createBlrClickEvent,
+  createBlrFocusEvent,
+} from '../../globals/events';
+
+export type BlrIconButtonEventHandlers = {
+  blrFocus?: (event: BlrFocusEvent) => void;
+  blrBlur?: (event: BlrBlurEvent) => void;
+  blrClick?: (event: BlrClickEvent) => void;
+};
+
+/**
+ * @fires blrFocus Button received focus
+ * @fires blrBlur Button lost focus
+ * @fires blrClick Button was clicked
+ */
 export class BlrIconButton extends LitElement {
   static styles = [styleCustom];
 
@@ -27,36 +46,25 @@ export class BlrIconButton extends LitElement {
 
   @property() theme: ThemeType = 'Light';
 
-  // these are not triggered directly but allows us to map it internally and bve typesafe
-  @property() blrFocus?: () => void;
-  @property() blrBlur?: () => void;
-  @property() blrClick?: () => void;
-
   @state() protected focused = false;
 
-  protected handleFocus = (event: Event) => {
+  protected handleFocus = (event: FocusEvent) => {
     if (!this.disabled) {
       this.focused = true;
-      this.dispatchEvent(
-        new CustomEvent('blrFocus', { bubbles: true, composed: true, detail: { originalEvent: event } })
-      );
+      this.dispatchEvent(createBlrFocusEvent({ originalEvent: event }));
     }
   };
 
-  protected handleBlur = (event: Event) => {
+  protected handleBlur = (event: FocusEvent) => {
     if (!this.disabled) {
       this.focused = false;
-      this.dispatchEvent(
-        new CustomEvent('blrBlur', { bubbles: true, composed: true, detail: { originalEvent: event } })
-      );
+      this.dispatchEvent(createBlrBlurEvent({ originalEvent: event }));
     }
   };
 
-  protected handleClick = (event: Event) => {
+  protected handleClick = (event: MouseEvent | KeyboardEvent) => {
     if (!this.disabled) {
-      this.dispatchEvent(
-        new CustomEvent('blrClick', { bubbles: true, composed: true, detail: { originalEvent: event } })
-      );
+      this.dispatchEvent(createBlrClickEvent({ originalEvent: event }));
     }
   };
 
@@ -140,4 +148,4 @@ if (!customElements.get(TAG_NAME)) {
   customElements.define(TAG_NAME, BlrIconButton);
 }
 
-export type BlrIconButtonType = Omit<BlrIconButton, keyof LitElement>;
+export type BlrIconButtonType = Omit<BlrIconButton, keyof LitElement> & BlrIconButtonEventHandlers;

packages/ui-library/src/components/icon/index.ts

@@ -9,7 +9,15 @@ import { until } from 'lit-html/directives/until.js';
 import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';
 import { TAG_NAME } from './renderFunction';
 import { ThemeType } from '../../foundation/_tokens-generated/index.themes';
+import { BlrClickEvent, createBlrClickEvent } from '../../globals/events';
 
+export type BlrIconEventHandlers = {
+  blrClick?: (event: BlrClickEvent) => void;
+};
+
+/**
+ * @fires blrClick Icon was clicked
+ */
 export class BlrIcon extends LitElement {
   static styles = [styleCustom];
 
@@ -20,13 +28,8 @@ export class BlrIcon extends LitElement {
   @property() theme: ThemeType = 'Light';
   @property() classMap?: DirectiveResult<typeof ClassMapDirective>;
 
-  // these are not triggered directly but allows us to map it internally and bve typesafe
-  @property() blrClick?: () => void;
-
-  protected handleClick = (event: Event) => {
-    this.dispatchEvent(
-      new CustomEvent('blrClick', { bubbles: true, composed: true, detail: { originalEvent: event } })
-    );
+  protected handleClick = (event: MouseEvent | KeyboardEvent) => {
+    this.dispatchEvent(createBlrClickEvent({ originalEvent: event }));
   };
 
   protected render() {
@@ -74,4 +77,4 @@ if (!customElements.get(TAG_NAME)) {
   customElements.define(TAG_NAME, BlrIcon);
 }
 
-export type BlrIconType = Partial<Omit<BlrIcon, keyof LitElement>>;
+export type BlrIconType = Partial<Omit<BlrIcon, keyof LitElement>> & BlrIconEventHandlers;

packages/ui-library/src/components/select/index.ts

@@ -15,7 +15,15 @@ import { TAG_NAME } from './renderFunction';
 import { BlrFormCaptionGroupRenderFunction } from '../form-caption-group/renderFunction';
 import { BlrFormCaptionRenderFunction } from '../form-caption/renderFunction';
 import { BlrFormLabelRenderFunction } from '../form-label/renderFunction';
+import { BlrSelectedValueChangeEvent, createBlrSelectedValueChangeEvent } from '../../globals/events';
 
+export type BlrSelectEventHandlers = {
+  blrSelectedValueChange?: (event: BlrSelectedValueChangeEvent) => void;
+};
+
+/**
+ * @fires blrSelectedValueChange Selected value changed
+ */
 export class BlrSelect extends LitElement {
   static styles = [styleCustom];
 
@@ -41,8 +49,6 @@ export class BlrSelect extends LitElement {
 
   @property() theme: ThemeType = 'Light';
 
-  @property() blrChange?: () => void;
-
   @state() protected isFocused = false;
 
   protected _optionElements: Element[] | undefined;
@@ -63,13 +69,7 @@ export class BlrSelect extends LitElement {
   }
 
   protected handleChange(event: Event) {
-    this.dispatchEvent(
-      new CustomEvent('blrChange', {
-        bubbles: true,
-        composed: true,
-        detail: { originalEvent: event },
-      })
-    );
+    this.dispatchEvent(createBlrSelectedValueChangeEvent({ originalEvent: event }));
   }
 
   protected renderIcon(classes: DirectiveResult<typeof ClassMapDirective>) {
@@ -210,4 +210,4 @@ if (!customElements.get(TAG_NAME)) {
   customElements.define(TAG_NAME, BlrSelect);
 }
 
-export type BlrSelectType = Omit<BlrSelect, keyof LitElement>;
+export type BlrSelectType = Omit<BlrSelect, keyof LitElement> & BlrSelectEventHandlers;

packages/ui-library/src/components/text-button/index.ts

@@ -19,7 +19,26 @@ import { getComponentConfigToken } from '../../utils/get-component-config-token'
 import { BlrIconRenderFunction } from '../icon/renderFunction';
 import { BlrLoaderRenderFunction } from '../loader/renderFunction';
 import { TAG_NAME } from './renderFunction';
-
+import {
+  BlrBlurEvent,
+  BlrClickEvent,
+  BlrFocusEvent,
+  createBlrBlurEvent,
+  createBlrClickEvent,
+  createBlrFocusEvent,
+} from '../../globals/events';
+
+export type BlrTextButtonEventHandlers = {
+  blrFocus?: (event: BlrFocusEvent) => void;
+  blrBlur?: (event: BlrBlurEvent) => void;
+  blrClick?: (event: BlrClickEvent) => void;
+};
+
+/**
+ * @fires blrFocus Button received focus
+ * @fires blrBlur Button lost focus
+ * @fires blrClick Button was clicked
+ */
 export class BlrTextButton extends LitElement {
   static styles = [styleCustom];
 
@@ -34,38 +53,27 @@ export class BlrTextButton extends LitElement {
   @property() size?: ActionSizesType = 'md';
   @property() buttonDisplay?: ButtonDisplayType = 'inline-block';
 
-  // these are not triggered directly but allows us to map it internally and bve typesafe
-  @property() blrFocus?: () => void;
-  @property() blrBlur?: () => void;
-  @property() blrClick?: () => void;
-
   @property() theme: ThemeType = 'Light';
 
   @state() protected focused = false;
 
-  protected handleFocus = (event: Event) => {
+  protected handleFocus = (event: FocusEvent) => {
     if (!this.disabled) {
       this.focused = true;
-      this.dispatchEvent(
-        new CustomEvent('blrFocus', { bubbles: true, composed: true, detail: { originalEvent: event } })
-      );
+      this.dispatchEvent(createBlrFocusEvent({ originalEvent: event }));
     }
   };
 
-  protected handleBlur = (event: Event) => {
+  protected handleBlur = (event: FocusEvent) => {
     if (!this.disabled) {
       this.focused = false;
-      this.dispatchEvent(
-        new CustomEvent('blrBlur', { bubbles: true, composed: true, detail: { originalEvent: event } })
-      );
+      this.dispatchEvent(createBlrBlurEvent({ originalEvent: event }));
     }
   };
 
-  protected handleClick = (event: Event) => {
+  protected handleClick = (event: MouseEvent | KeyboardEvent) => {
     if (!this.disabled) {
-      this.dispatchEvent(
-        new CustomEvent('blrClick', { bubbles: true, composed: true, detail: { originalEvent: event } })
-      );
+      this.dispatchEvent(createBlrClickEvent({ originalEvent: event }));
     }
   };
 
@@ -177,4 +185,4 @@ if (!customElements.get(TAG_NAME)) {
   customElements.define(TAG_NAME, BlrTextButton);
 }
 
-export type BlrTextButtonType = Omit<BlrTextButton, keyof LitElement>;
+export type BlrTextButtonType = Omit<BlrTextButton, keyof LitElement> & BlrTextButtonEventHandlers;

packages/ui-library/src/components/text-input/index.stories.ts

@@ -226,10 +226,10 @@ export default {
       },
     },
     // Events
-    blrChange: {
-      name: 'blrChange',
+    blrTextValueChange: {
+      name: 'blrTextValueChange',
       description: 'Fires when the value changes.',
-      action: 'blrChange',
+      action: 'blrTextValueChange',
       table: {
         category: 'Events',
       },
@@ -379,7 +379,7 @@ const argTypesToDisable = [
   'errorIcon',
   'arialabel',
   'name',
-  'blrChange',
+  'blrTextValueChange',
   'blrSelect',
   'blrFocus',
   'blrBlur',