Rename 'unselect' event to 'deselect' (#497)

nielslyngsoe · web-flow · commit f7c9fff60921 · 2023-05-23T13:15:12.000Z
diff --git a/packages/uui-base/lib/events/UUISelectableEvent.ts b/packages/uui-base/lib/events/UUISelectableEvent.ts
@@ -3,7 +3,7 @@ import { UUIEvent } from './UUIEvent';
 
 export class UUISelectableEvent extends UUIEvent<{}, SelectableMixinInterface> {
   public static readonly SELECTED = 'selected';
-  public static readonly UNSELECTED = 'unselected';
+  public static readonly DESELECTED = 'deselected';
 
   constructor(evName: string, eventInit: any | null = {}) {
     super(evName, {
diff --git a/packages/uui-base/lib/mixins/SelectableMixin.ts b/packages/uui-base/lib/mixins/SelectableMixin.ts
@@ -7,7 +7,7 @@ type Constructor<T = {}> = new (...args: any[]) => T;
 
 export declare class SelectableMixinInterface extends LitElement {
   selectable: boolean;
-  unselectable: boolean;
+  deselectable: boolean;
   selected: boolean;
   selectableTarget: EventTarget;
 }
@@ -24,7 +24,7 @@ export const SelectableMixin = <T extends Constructor<LitElement>>(
 ) => {
   /**
    * @fires {UUISelectableEvent} selected - fires when the media card is selected
-   * @fires {UUISelectableEvent} unselected - fires when the media card is unselected
+   * @fires {UUISelectableEvent} deselected - fires when the media card is deselected
    */
   class SelectableMixinClass extends superClass {
     private _selectable = false;
@@ -45,7 +45,7 @@ export const SelectableMixin = <T extends Constructor<LitElement>>(
       this.requestUpdate('selected', oldVal);
     }
 
-    protected unselectable = true;
+    protected deselectable = true;
 
     /**
      * Attribute applied when the element is selected.
@@ -79,9 +79,9 @@ export const SelectableMixin = <T extends Constructor<LitElement>>(
       this.selected = true;
     }
 
-    private _unselect() {
-      if (!this.unselectable) return;
-      const selectEvent = new UUISelectableEvent(UUISelectableEvent.UNSELECTED);
+    private _deselect() {
+      if (!this.deselectable) return;
+      const selectEvent = new UUISelectableEvent(UUISelectableEvent.DESELECTED);
       this.dispatchEvent(selectEvent);
       if (selectEvent.defaultPrevented) return;
 
@@ -95,10 +95,10 @@ export const SelectableMixin = <T extends Constructor<LitElement>>(
     }
 
     private _toggleSelect() {
-      if (this.unselectable === false) {
+      if (this.deselectable === false) {
         this._select();
       } else {
-        this.selected ? this._unselect() : this._select();
+        this.selected ? this._deselect() : this._select();
       }
     }
   }
diff --git a/packages/uui-card-content-node/lib/uui-card-content-node.test.ts b/packages/uui-card-content-node/lib/uui-card-content-node.test.ts
@@ -110,16 +110,16 @@ describe('UUICardContentNodeElement', () => {
       });
     });
 
-    describe('unselect', () => {
-      it('emits a unselected event when preselected', async () => {
+    describe('deselect', () => {
+      it('emits a deselected event when preselected', async () => {
         element.selectable = true;
         element.selected = true;
         await elementUpdated(element);
-        const listener = oneEvent(element, UUISelectableEvent.UNSELECTED);
+        const listener = oneEvent(element, UUISelectableEvent.DESELECTED);
         element.click();
         const event = await listener;
         expect(event).to.exist;
-        expect(event.type).to.equal(UUISelectableEvent.UNSELECTED);
+        expect(event.type).to.equal(UUISelectableEvent.DESELECTED);
         expect(element.selected).to.be.false;
       });
     });
diff --git a/packages/uui-card-media/lib/uui-card-media.test.ts b/packages/uui-card-media/lib/uui-card-media.test.ts
@@ -98,16 +98,16 @@ describe('UUICardMediaElement', () => {
       });
     });
 
-    describe('unselect', () => {
-      it('emits a unselected event when preselected', async () => {
+    describe('deselect', () => {
+      it('emits a deselected event when preselected', async () => {
         element.selectable = true;
         element.selected = true;
         await elementUpdated(element);
-        const listener = oneEvent(element, UUISelectableEvent.UNSELECTED);
+        const listener = oneEvent(element, UUISelectableEvent.DESELECTED);
         element.click();
         const event = await listener;
         expect(event).to.exist;
-        expect(event.type).to.equal(UUISelectableEvent.UNSELECTED);
+        expect(event.type).to.equal(UUISelectableEvent.DESELECTED);
         expect(element.selected).to.be.false;
       });
     });
diff --git a/packages/uui-card-user/lib/uui-card-user.test.ts b/packages/uui-card-user/lib/uui-card-user.test.ts
@@ -95,16 +95,16 @@ describe('UUICardUserElement', () => {
       });
     });
 
-    describe('unselect', () => {
-      it('emits a unselected event when preselected', async () => {
+    describe('deselect', () => {
+      it('emits a deselected event when preselected', async () => {
         element.selectable = true;
         element.selected = true;
         await elementUpdated(element);
-        const listener = oneEvent(element, UUISelectableEvent.UNSELECTED);
+        const listener = oneEvent(element, UUISelectableEvent.DESELECTED);
         element.click();
         const event = await listener;
         expect(event).to.exist;
-        expect(event.type).to.equal(UUISelectableEvent.UNSELECTED);
+        expect(event.type).to.equal(UUISelectableEvent.DESELECTED);
         expect(element.selected).to.be.false;
       });
     });
diff --git a/packages/uui-color-swatch/lib/uui-color-swatch.element.ts b/packages/uui-color-swatch/lib/uui-color-swatch.element.ts
@@ -282,7 +282,7 @@ export class UUIColorSwatchElement extends LabelMixin(
     if (changedProperties.has('disabled')) {
       if (this.selectable) {
         this.selectable = !this.disabled;
-        this.unselectable = !this.disabled;
+        this.deselectable = !this.disabled;
       }
     }
     if (
diff --git a/packages/uui-color-swatches/lib/uui-color-swatches.element.ts b/packages/uui-color-swatches/lib/uui-color-swatches.element.ts
@@ -59,7 +59,7 @@ export class UUIColorSwatchesElement extends LabelMixin('label', LitElement) {
   constructor() {
     super();
     this.addEventListener(UUISelectableEvent.SELECTED, this._onSelected);
-    this.addEventListener(UUISelectableEvent.UNSELECTED, this._onUnselected);
+    this.addEventListener(UUISelectableEvent.DESELECTED, this._onDeselected);
   }
 
   connectedCallback() {
@@ -112,7 +112,7 @@ export class UUIColorSwatchesElement extends LabelMixin('label', LitElement) {
     this.dispatchEvent(new UUIColorSwatchesEvent(UUIColorSwatchesEvent.CHANGE));
   };
 
-  private _onUnselected = (event: Event) => {
+  private _onDeselected = (event: Event) => {
     const target = event.target as UUIColorSwatchElement;
     if (!this.swatches.includes(target)) return;
 
diff --git a/packages/uui-combobox-list/lib/uui-combobox-list-option.element.ts b/packages/uui-combobox-list/lib/uui-combobox-list-option.element.ts
@@ -146,7 +146,7 @@ export class UUIComboboxListOptionElement extends SelectableMixin(
   constructor() {
     super();
     this.selectable = true;
-    this.unselectable = false;
+    this.deselectable = false;
   }
 
   render() {
diff --git a/packages/uui-combobox-list/lib/uui-combobox-list.element.ts b/packages/uui-combobox-list/lib/uui-combobox-list.element.ts
@@ -113,15 +113,15 @@ export class UUIComboboxListElement extends LitElement {
     }
 
     this.addEventListener(UUISelectableEvent.SELECTED, this._onSelected);
-    this.addEventListener(UUISelectableEvent.UNSELECTED, this._onUnselected);
+    this.addEventListener(UUISelectableEvent.DESELECTED, this._onDeselected);
   }
 
   disconnectedCallback(): void {
     super.disconnectedCallback();
     document.removeEventListener('keydown', this._onKeyDown);
 
     this.removeEventListener(UUISelectableEvent.SELECTED, this._onSelected);
-    this.removeEventListener(UUISelectableEvent.UNSELECTED, this._onUnselected);
+    this.removeEventListener(UUISelectableEvent.DESELECTED, this._onDeselected);
   }
 
   private _updateSelection() {
@@ -169,7 +169,7 @@ export class UUIComboboxListElement extends LitElement {
 
     this.dispatchEvent(new UUIComboboxListEvent(UUIComboboxListEvent.CHANGE));
   };
-  private _onUnselected = (e: Event) => {
+  private _onDeselected = (e: Event) => {
     const el = e.composedPath()[0] as UUIComboboxListOptionElement;
     if (this._activeElement === el) {
       this._activeElement = undefined;
diff --git a/packages/uui-menu-item/lib/uui-menu-item.test.ts b/packages/uui-menu-item/lib/uui-menu-item.test.ts
@@ -103,22 +103,22 @@ describe('UUIMenuItemElement', () => {
       });
     });
 
-    describe('unselect', async () => {
-      it('emits a cancelable unselected event when preselected', async () => {
+    describe('deselect', async () => {
+      it('emits a cancelable deselected event when preselected', async () => {
         element.selectable = true;
         element.selected = true;
         await elementUpdated(element);
         const labelElement = element.shadowRoot!.querySelector(
           '#label-button'
         ) as HTMLElement;
-        element.addEventListener(UUISelectableEvent.UNSELECTED, e => {
+        element.addEventListener(UUISelectableEvent.DESELECTED, e => {
           e.preventDefault();
         });
-        const listener = oneEvent(element, UUISelectableEvent.UNSELECTED);
+        const listener = oneEvent(element, UUISelectableEvent.DESELECTED);
         labelElement.click();
         const event = await listener;
         expect(event).to.exist;
-        expect(event.type).to.equal(UUISelectableEvent.UNSELECTED);
+        expect(event.type).to.equal(UUISelectableEvent.DESELECTED);
         expect(element.selected).to.be.true;
       });
     });
diff --git a/packages/uui-ref-node-data-type/lib/uui-ref-node-data-type.element.ts b/packages/uui-ref-node-data-type/lib/uui-ref-node-data-type.element.ts
@@ -7,7 +7,7 @@ import { property } from 'lit/decorators.js';
  *  @element uui-ref-node-data-type
  *  @fires {UUIRefEvent} open - fires when the ref title is clicked
  *  @fires {UUIRefEvent} selected - fires when the ref is selected
- *  @fires {UUIRefEvent} unselected - fires when the ref is unselected
+ *  @fires {UUIRefEvent} deselected - fires when the ref is deselected
  *  @description - Component for displaying a reference to a Data Type node.
  */
 
diff --git a/packages/uui-ref-node-document-type/lib/uui-ref-node-document-type.element.ts b/packages/uui-ref-node-document-type/lib/uui-ref-node-document-type.element.ts
@@ -7,7 +7,7 @@ import { property } from 'lit/decorators.js';
  *  @element uui-ref-node-document-type
  *  @fires {UUIRefEvent} open - fires when the ref title is clicked
  *  @fires {UUIRefEvent} selected - fires when the ref is selected
- *  @fires {UUIRefEvent} unselected - fires when the ref is unselected
+ *  @fires {UUIRefEvent} deselected - fires when the ref is deselected
  *  @description - Component for displaying a reference to a Content type(Document Type, Media Type, Element Type etc.) node.
  */
 
diff --git a/packages/uui-ref-node-form/lib/uui-ref-node-form.element.ts b/packages/uui-ref-node-form/lib/uui-ref-node-form.element.ts
@@ -5,7 +5,7 @@ import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
  *  @element uui-ref-node-form
  *  @fires {UUIRefEvent} open - fires when the ref title is clicked
  *  @fires {UUIRefEvent} selected - fires when the ref is selected
- *  @fires {UUIRefEvent} unselected - fires when the ref is unselected
+ *  @fires {UUIRefEvent} deselected - fires when the ref is deselected
  *  @description - Component for displaying a reference to a form node.
  */
 
diff --git a/packages/uui-ref-node-member/lib/uui-ref-node-member.element.ts b/packages/uui-ref-node-member/lib/uui-ref-node-member.element.ts
@@ -7,7 +7,7 @@ import { property } from 'lit/decorators.js';
  *  @element uui-ref-node-member
  *  @fires {UUIRefEvent} open - fires when the ref title is clicked
  *  @fires {UUIRefEvent} selected - fires when the ref is selected
- *  @fires {UUIRefEvent} unselected - fires when the ref is unselected
+ *  @fires {UUIRefEvent} deselected - fires when the ref is deselected
  *  @description - Component for displaying a reference to a Member node.
  */
 
diff --git a/packages/uui-ref-node-package/lib/uui-ref-node-package.element.ts b/packages/uui-ref-node-package/lib/uui-ref-node-package.element.ts
@@ -7,7 +7,7 @@ import { property } from 'lit/decorators.js';
  *  @element uui-ref-node-package
  *  @fires {UUIRefEvent} open - fires when the ref title is clicked
  *  @fires {UUIRefEvent} selected - fires when the ref is selected
- *  @fires {UUIRefEvent} unselected - fires when the ref is unselected
+ *  @fires {UUIRefEvent} deselected - fires when the ref is deselected
  *  @description - Component for displaying a reference to a Package node.
  */
 
diff --git a/packages/uui-ref-node-user/lib/uui-ref-node-user.element.ts b/packages/uui-ref-node-user/lib/uui-ref-node-user.element.ts
@@ -7,7 +7,7 @@ import { property } from 'lit/decorators.js';
  *  @element uui-ref-node-user
  *  @fires {UUIRefEvent} open - fires when the ref title is clicked
  *  @fires {UUIRefEvent} selected - fires when the ref is selected
- *  @fires {UUIRefEvent} unselected - fires when the ref is unselected
+ *  @fires {UUIRefEvent} deselected - fires when the ref is deselected
  *  @description - Component for displaying a reference to a user node.
  */
 
diff --git a/packages/uui-ref-node/lib/uui-ref-node.element.ts b/packages/uui-ref-node/lib/uui-ref-node.element.ts
@@ -8,7 +8,7 @@ import { property, state } from 'lit/decorators.js';
  *  @element uui-ref-node
  *  @fires {UUIRefEvent} open - fires when the ref title is clicked
  *  @fires {UUIRefEvent} selected - fires when the ref is selected
- *  @fires {UUIRefEvent} unselected - fires when the ref is unselected
+ *  @fires {UUIRefEvent} deselected - fires when the ref is deselected
  *  @description - Component for displaying a reference to a generic node.
  *  @slot - for content
  *  @slot icon - for an icon
diff --git a/packages/uui-ref/lib/uui-ref.element.ts b/packages/uui-ref/lib/uui-ref.element.ts
@@ -11,7 +11,7 @@ import { UUIRefEvent } from './UUIRefEvent';
  *  @element uui-ref
  *  @fires {UUIRefEvent} open - fires when the ref is opened
  *  @fires {UUISelectableEvent} selected - fires when the ref is selected
- *  @fires {UUISelectableEvent} unselected - fires when the ref is unselected
+ *  @fires {UUISelectableEvent} deselected - fires when the ref is deselected
  *  @description - Base ref component to be extended by specific ref elements. Does not have a tag.
  */
 
diff --git a/packages/uui-table/lib/uui-table-advanced-example.ts b/packages/uui-table/lib/uui-table-advanced-example.ts
@@ -107,7 +107,7 @@ export class UUITableWithSelectionExampleElement extends LitElement {
     this._selection = [...this._selection, item.key];
     this._selectionMode = this._selection.length > 0;
   }
-  private _unselectRowHandler(item: TableItem) {
+  private _deselectRowHandler(item: TableItem) {
     this._selection = this._selection.filter(
       selectionKey => selectionKey !== item.key
     );
@@ -237,7 +237,7 @@ export class UUITableWithSelectionExampleElement extends LitElement {
       ?select-only=${this._selectionMode}
       ?selected=${this._isSelected(item.key)}
       @selected=${() => this._selectRowHandler(item)}
-      @unselected=${() => this._unselectRowHandler(item)}>
+      @deselected=${() => this._deselectRowHandler(item)}>
       <uui-table-cell>
         <uui-icon name="wand" style="font-size: 20px;"></uui-icon>
         <uui-checkbox

Original file line number	Diff line number	Diff line change
`@@ -282,7 +282,7 @@ export class UUIColorSwatchElement extends LabelMixin(`
`282`	`282`	`if (changedProperties.has('disabled')) {`
`283`	`283`	`if (this.selectable) {`
`284`	`284`	`this.selectable = !this.disabled;`
`285`		`- this.unselectable = !this.disabled;`
	`285`	`+ this.deselectable = !this.disabled;`
`286`	`286`	`}`
`287`	`287`	`}`
`288`	`288`	`if (`
Original file line number	Diff line number	Diff line change
`@@ -146,7 +146,7 @@ export class UUIComboboxListOptionElement extends SelectableMixin(`
`146`	`146`	`constructor() {`
`147`	`147`	`super();`
`148`	`148`	`this.selectable = true;`
`149`		`- this.unselectable = false;`
	`149`	`+ this.deselectable = false;`
`150`	`150`	`}`
`151`	`151`
`152`	`152`	`render() {`