feat: OTP/PIN input component

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

@@ -16,6 +16,8 @@ export const arrowLeft = 'ArrowLeft' as const;
 export const arrowRight = 'ArrowRight' as const;
 export const arrowUp = 'ArrowUp' as const;
 export const arrowDown = 'ArrowDown' as const;
+export const backspaceKey = 'Backspace' as const;
+export const deleteKey = 'Delete' as const;
 export const enterKey = 'Enter' as const;
 export const spaceBar = ' ' as const;
 export const escapeKey = 'Escape' as const;

src/components/common/utils.spec.ts

@@ -428,6 +428,19 @@ export function simulateDoubleClick(node: Element): void {
   );
 }
 
+export function simulatePaste(node: Element, pastedText: string): void {
+  const clipboardData = new DataTransfer();
+  clipboardData.setData('text/plain', pastedText);
+
+  node.dispatchEvent(
+    new ClipboardEvent('paste', {
+      bubbles: true,
+      composed: true,
+      clipboardData,
+    })
+  );
+}
+
 /**
  * Returns an array of all Animation objects affecting this element or which are scheduled to do so in the future.
  * It can optionally return Animation objects for descendant elements too.