refactor(keybinding controller): Default options refactoring (#1815)

Author: rkaraivanov

src/components/accordion/accordion.ts

@@ -54,10 +54,7 @@ export default class IgcAccordionComponent extends LitElement {
 
     addSafeEventListener(this, 'igcOpening' as any, this.handlePanelOpening);
 
-    addKeybindings(this, {
-      skip: this.skipKeybinding,
-      bindingDefaults: { preventDefault: true },
-    })
+    addKeybindings(this, { skip: this.skipKeybinding })
       .set(homeKey, () =>
         this.getPanelHeader(first(this.enabledPanels)).focus()
       )

src/components/calendar/days-view/days-view.ts

@@ -140,11 +140,7 @@ export default class IgcDaysViewComponent extends EventEmitterMixin<
     super();
 
     addThemingController(this, all);
-
-    addKeybindings(this, {
-      bindingDefaults: { preventDefault: true },
-    }).setActivateHandler(this.handleInteraction);
-
+    addKeybindings(this).setActivateHandler(this.handleInteraction);
     addSafeEventListener(this, 'click', this.handleInteraction);
   }
 

src/components/calendar/months-view/months-view.ts

@@ -86,11 +86,7 @@ export default class IgcMonthsViewComponent extends EventEmitterMixin<
     super();
 
     addThemingController(this, all);
-
-    addKeybindings(this, {
-      bindingDefaults: { preventDefault: true },
-    }).setActivateHandler(this.handleInteraction);
-
+    addKeybindings(this).setActivateHandler(this.handleInteraction);
     addSafeEventListener(this, 'click', this.handleInteraction);
   }
 

src/components/calendar/years-view/years-view.ts

@@ -67,11 +67,7 @@ export default class IgcYearsViewComponent extends EventEmitterMixin<
     super();
 
     addThemingController(this, all);
-
-    addKeybindings(this, {
-      bindingDefaults: { preventDefault: true },
-    }).setActivateHandler(this.handleInteraction);
-
+    addKeybindings(this).setActivateHandler(this.handleInteraction);
     addSafeEventListener(this, 'click', this.handleInteraction);
   }
 

src/components/carousel/carousel.ts

@@ -338,7 +338,6 @@ export default class IgcCarouselComponent extends EventEmitterMixin<
 
     addKeybindings(this, {
       ref: this._indicatorsContainerRef,
-      bindingDefaults: { preventDefault: true },
     })
       .set(arrowLeft, this._handleArrowLeft)
       .set(arrowRight, this._handleArrowRight)
@@ -347,12 +346,10 @@ export default class IgcCarouselComponent extends EventEmitterMixin<
 
     addKeybindings(this, {
       ref: this._prevButtonRef,
-      bindingDefaults: { preventDefault: true },
     }).setActivateHandler(this._handleNavigationInteractionPrevious);
 
     addKeybindings(this, {
       ref: this._nextButtonRef,
-      bindingDefaults: { preventDefault: true },
     }).setActivateHandler(this._handleNavigationInteractionNext);
 
     createMutationController(this, {

src/components/common/controllers/key-bindings.ts

@@ -1,7 +1,12 @@
 import type { ReactiveController, ReactiveControllerHost } from 'lit';
 import type { Ref } from 'lit/directives/ref.js';
 import { createAbortHandle } from '../abort-handler.js';
-import { asArray, findElementFromEventPath, isFunction } from '../util.js';
+import {
+  asArray,
+  findElementFromEventPath,
+  isFunction,
+  toMerged,
+} from '../util.js';
 
 //#region Keys and modifiers
 
@@ -179,6 +184,7 @@ class KeyBindingController implements ReactiveController {
 
   private static readonly _defaultOptions: KeyBindingControllerOptions = {
     skip: ['input', 'textarea', 'select'],
+    bindingDefaults: { preventDefault: true },
   };
 
   private readonly _host: ReactiveControllerHost & Element;
@@ -209,7 +215,10 @@ class KeyBindingController implements ReactiveController {
   ) {
     this._host = host;
     this._ref = options?.ref;
-    this._options = { ...KeyBindingController._defaultOptions, ...options };
+    this._options = toMerged(
+      KeyBindingController._defaultOptions,
+      options ?? {}
+    );
 
     if (Array.isArray(this._options.skip)) {
       this._skipSelector = this._options.skip.join(',');
@@ -343,7 +352,10 @@ class KeyBindingController implements ReactiveController {
   ) {
     const { keys, modifiers } = parseKeys(key);
     const combination = createCombinationKey(keys, modifiers);
-    const options = { ...this._options?.bindingDefaults, ...bindingOptions };
+    const options = toMerged(
+      this._options.bindingDefaults!,
+      bindingOptions ?? {}
+    );
 
     for (const each of [...keys, ...modifiers]) {
       this._allowedKeys.add(each);

src/components/common/util.ts

@@ -262,6 +262,29 @@ export function isObject(value: unknown): value is object {
   return value != null && typeof value === 'object';
 }
 
+export function isPlainObject(
+  value: unknown
+): value is Record<PropertyKey, unknown> {
+  if (!isObject(value)) {
+    return false;
+  }
+
+  const proto = Object.getPrototypeOf(value) as typeof Object.prototype | null;
+
+  const hasObjectPrototype =
+    proto === null ||
+    proto === Object.prototype ||
+    Object.getPrototypeOf(proto) === null;
+
+  return hasObjectPrototype
+    ? Object.prototype.toString.call(value) === '[object Object]'
+    : false;
+}
+
+function isUnsafeProperty(key: PropertyKey) {
+  return key === '__proto__' || key === 'constructor' || key === 'prototype';
+}
+
 export function isEventListenerObject(x: unknown): x is EventListenerObject {
   return isObject(x) && 'handleEvent' in x;
 }
@@ -501,5 +524,60 @@ export function setStyles(
   element: HTMLElement,
   styles: Partial<CSSStyleDeclaration>
 ): void {
-  Object.assign(element.style, styles);
+  merge(element.style, styles);
+}
+
+/**
+ * Merges the properties of `source` into `target` performing a recursive deep merge over POJOs and arrays.
+ *
+ * @remarks
+ * This function mutates the `target` object.
+ * If that is not the desired outcome, see {@link toMerged} for another approach.
+ */
+export function merge<
+  T extends Record<PropertyKey, any>,
+  S extends Record<PropertyKey, any>,
+>(target: T, source: S): T & S {
+  const sourceKeys = Object.keys(source) as Array<keyof S>;
+  const length = sourceKeys.length;
+
+  for (let i = 0; i < length; i++) {
+    const key = sourceKeys[i];
+
+    if (isUnsafeProperty(key)) {
+      continue;
+    }
+
+    const sourceValue = source[key];
+    const targetValue = target[key];
+
+    if (Array.isArray(sourceValue)) {
+      if (Array.isArray(targetValue)) {
+        target[key] = merge(targetValue, sourceValue);
+      } else {
+        target[key] = merge([], sourceValue);
+      }
+    } else if (isPlainObject(sourceValue)) {
+      if (isPlainObject(targetValue)) {
+        target[key] = merge(targetValue, sourceValue);
+      } else {
+        target[key] = merge({}, sourceValue);
+      }
+    } else if (targetValue === undefined || sourceValue !== undefined) {
+      target[key] = sourceValue;
+    }
+  }
+
+  return target;
+}
+
+/**
+ * Just like {@link merge} but it does not mutate the `target` object instead
+ * mutating a structured clone of it.
+ */
+export function toMerged<
+  T extends Record<PropertyKey, any>,
+  S extends Record<PropertyKey, any>,
+>(target: T, source: S): T & S {
+  return merge(structuredClone(target), source);
 }

src/components/date-picker/date-picker.ts

@@ -461,7 +461,6 @@ export default class IgcDatePickerComponent extends FormAssociatedRequiredMixin(
 
     addKeybindings(this, {
       skip: () => this.disabled || this.readOnly,
-      bindingDefaults: { preventDefault: true },
     })
       .set([altKey, arrowDown], this.handleAnchorClick)
       .set([altKey, arrowUp], this._onEscapeKey)

src/components/date-range-picker/date-range-picker.ts

@@ -579,7 +579,6 @@ export default class IgcDateRangePickerComponent extends FormAssociatedRequiredM
 
     addKeybindings(this, {
       skip: () => this.disabled || this.readOnly,
-      bindingDefaults: { preventDefault: true },
     })
       .set([altKey, arrowDown], this.handleAnchorClick)
       .set([altKey, arrowUp], this._onEscapeKey)

src/components/date-time-input/date-time-input.ts

@@ -281,7 +281,7 @@ export default class IgcDateTimeInputComponent extends EventEmitterMixin<
 
     addKeybindings(this, {
       skip: () => this.readOnly,
-      bindingDefaults: { preventDefault: true, triggers: ['keydownRepeat'] },
+      bindingDefaults: { triggers: ['keydownRepeat'] },
     })
       .set([ctrlKey, ';'], this.setToday)
       .set(arrowUp, this.keyboardSpin.bind(this, 'up'))