@ews-admin/global-design-system 1.30.0 → 1.32.0

package/src/components/PinCodeInput/PinCodeInput.tsx

@@ -0,0 +1,184 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { cn } from "../../utils";
+import type { PinCodeInputProps } from "./PinCodeInput.types";
+
+const MASK = "•";
+const onlyDigits = (text: string) => text.replace(/\D/g, "");
+
+/**
+ * Row of one-digit boxes for a PIN or a one-time code (desktop keyboards):
+ * typing moves to the next box, Backspace goes back, arrows move, pasting a
+ * code fills the boxes and `onComplete` fires once every box is filled.
+ */
+const PinCodeInput = ({
+  length = 4,
+  onComplete,
+  onChange,
+  masked = true,
+  autoComplete = "off",
+  autoFocus = true,
+  disabled = false,
+  invalid = false,
+  resetKey,
+  digitLabel,
+  groupLabel,
+  className,
+}: PinCodeInputProps) => {
+  const empty = useCallback(() => Array.from({ length }, () => ""), [length]);
+  const [digits, setDigits] = useState<string[]>(empty);
+  const digitsRef = useRef<string[]>(digits);
+  const inputs = useRef<Array<HTMLInputElement | null>>([]);
+
+  const focusBox = (index: number) => {
+    const input = inputs.current[Math.max(0, Math.min(index, length - 1))];
+    input?.focus();
+    input?.select();
+  };
+
+  const update = (next: string[]) => {
+    digitsRef.current = next;
+    setDigits(next);
+    const value = next.join("");
+    onChange?.(value);
+    if (value.length === length && next.every(Boolean)) onComplete(value);
+  };
+
+  /** Writes `chars` from box `start` on and focuses the box after them. */
+  const fill = (start: number, chars: string) => {
+    const next = [...digitsRef.current];
+    const written = chars.slice(0, length - start).split("");
+    written.forEach((char, offset) => {
+      next[start + offset] = char;
+    });
+    focusBox(start + written.length);
+    update(next);
+  };
+
+  // Clear the boxes when the caller asks for it.
+  useEffect(() => {
+    const cleared = empty();
+    digitsRef.current = cleared;
+    setDigits(cleared);
+  }, [resetKey, empty]);
+
+  // Focus the first empty box on mount, after a reset and once re-enabled.
+  useEffect(() => {
+    if (!autoFocus || disabled) return;
+    const firstEmpty = digitsRef.current.findIndex((digit) => !digit);
+    focusBox(firstEmpty === -1 ? length - 1 : firstEmpty);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [autoFocus, disabled, resetKey, length]);
+
+  const handleChange = (index: number, event: React.ChangeEvent<HTMLInputElement>) => {
+    if (disabled) return;
+    const { value, selectionStart } = event.target;
+    const typed = onlyDigits(value);
+    if (!typed) {
+      const next = [...digitsRef.current];
+      next[index] = "";
+      update(next);
+      return;
+    }
+    // A digit typed next to the one already in the box: keep the new one.
+    if (digitsRef.current[index] && value.length === 2) {
+      const inserted = value.charAt((selectionStart ?? value.length) - 1);
+      if (/\d/.test(inserted)) {
+        fill(index, inserted);
+        return;
+      }
+    }
+    // One digit, or a whole code (browser autofill of the one-time code).
+    fill(typed.length >= length ? 0 : index, typed);
+  };
+
+  const handleKeyDown = (index: number, event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (disabled) return;
+    switch (event.key) {
+      case "Backspace": {
+        event.preventDefault();
+        const next = [...digitsRef.current];
+        const target = next[index] ? index : Math.max(0, index - 1);
+        next[target] = "";
+        focusBox(target);
+        update(next);
+        return;
+      }
+      case "Delete": {
+        event.preventDefault();
+        const next = [...digitsRef.current];
+        next[index] = "";
+        update(next);
+        return;
+      }
+      case "ArrowLeft":
+        event.preventDefault();
+        focusBox(index - 1);
+        return;
+      case "ArrowRight":
+        event.preventDefault();
+        focusBox(index + 1);
+        return;
+      case "Home":
+        event.preventDefault();
+        focusBox(0);
+        return;
+      case "End":
+        event.preventDefault();
+        focusBox(length - 1);
+        return;
+    }
+  };
+
+  const handlePaste = (index: number, event: React.ClipboardEvent<HTMLInputElement>) => {
+    event.preventDefault();
+    if (disabled) return;
+    const pasted = onlyDigits(event.clipboardData.getData("text"));
+    if (!pasted) return;
+    fill(pasted.length >= length ? 0 : index, pasted);
+  };
+
+  return (
+    // Codes stay left-to-right in RTL locales.
+    <div
+      dir="ltr"
+      role="group"
+      aria-label={groupLabel}
+      data-testid="pin-code-input"
+      className={cn("flex justify-center gap-3", invalid && "animate-pin-shake", className)}
+    >
+      {digits.map((digit, index) => (
+        <input
+          key={index}
+          ref={(element) => {
+            inputs.current[index] = element;
+          }}
+          type="text"
+          inputMode="numeric"
+          pattern="[0-9]*"
+          autoComplete={index === 0 ? autoComplete : "off"}
+          autoCorrect="off"
+          spellCheck={false}
+          value={digit && masked ? MASK : digit}
+          disabled={disabled}
+          aria-label={digitLabel(index + 1, length)}
+          aria-invalid={invalid || undefined}
+          data-filled={!!digit}
+          onChange={(event) => handleChange(index, event)}
+          onKeyDown={(event) => handleKeyDown(index, event)}
+          onPaste={(event) => handlePaste(index, event)}
+          onFocus={(event) => event.target.select()}
+          className={cn(
+            "h-14 w-12 rounded-lg border bg-white text-center text-2xl font-medium text-ews-gray-900 outline-none",
+            "transition-colors focus:border-ews-primary focus:ring-2 focus:ring-ews-primary",
+            "disabled:cursor-not-allowed disabled:opacity-60",
+            invalid ? "border-ews-error" : digit ? "border-ews-primary" : "border-ews-gray-300",
+            disabled && digit && "animate-pulse",
+          )}
+        />
+      ))}
+    </div>
+  );
+};
+
+export type { PinCodeInputProps } from "./PinCodeInput.types";
+export { PinCodeInput };

package/src/components/PinCodeInput/PinCodeInput.types.ts

@@ -0,0 +1,25 @@
+export interface PinCodeInputProps {
+  /** Number of boxes (digits). Default 4. */
+  length?: number;
+  /** Called once every box is filled, with the full code. */
+  onComplete: (code: string) => void;
+  /** Called on every change of the typed value. */
+  onChange?: (value: string) => void;
+  /** Shows bullets instead of the typed digits (PIN). Default true. */
+  masked?: boolean;
+  /** `autocomplete` of the boxes, e.g. "one-time-code" for an SMS code. Default "off". */
+  autoComplete?: string;
+  /** Focuses the first empty box on mount, after a reset and when re-enabled. Default true. */
+  autoFocus?: boolean;
+  /** Ignores input (e.g. while the code is being checked). */
+  disabled?: boolean;
+  /** Shows the boxes in the error color and shakes them. */
+  invalid?: boolean;
+  /** Changing this value clears the boxes (e.g. after a wrong code). */
+  resetKey?: string | number;
+  /** Accessible label of each box, e.g. (1, 4) => "Digit 1 of 4". */
+  digitLabel: (position: number, total: number) => string;
+  /** Accessible label of the group of boxes. */
+  groupLabel?: string;
+  className?: string;
+}

package/src/components/PinCodeInput/index.ts

@@ -0,0 +1,2 @@
+export { PinCodeInput } from "./PinCodeInput";
+export type { PinCodeInputProps } from "./PinCodeInput";

package/src/hooks/index.ts

@@ -1,4 +1,5 @@
 export { useDebounce, useDebouncedCallback } from "./useDebounce";
+export { useMediaQuery } from "./useMediaQuery";
 export { useIdleLock } from "./useIdleLock";
 export type { UseIdleLockOptions, UseIdleLockResult } from "./useIdleLock";
 export { useSelectField } from "./useSelectField";

package/src/hooks/useMediaQuery.ts

@@ -0,0 +1,31 @@
+import { useEffect, useState } from "react";
+
+const matches = (query: string, fallback: boolean) =>
+  typeof window !== "undefined" && typeof window.matchMedia === "function"
+    ? window.matchMedia(query).matches
+    : fallback;
+
+/**
+ * Whether a CSS media query matches, updated when it changes. Returns
+ * `defaultValue` where `matchMedia` does not exist (server rendering, old
+ * test environments).
+ */
+export const useMediaQuery = (query: string, defaultValue = false): boolean => {
+  const [value, setValue] = useState(() => matches(query, defaultValue));
+
+  useEffect(() => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
+    const list = window.matchMedia(query);
+    const onChange = () => setValue(list.matches);
+    onChange();
+    // Safari < 14 only has addListener.
+    if (list.addEventListener) {
+      list.addEventListener("change", onChange);
+      return () => list.removeEventListener("change", onChange);
+    }
+    list.addListener(onChange);
+    return () => list.removeListener(onChange);
+  }, [query]);
+
+  return value;
+};

package/src/index.ts

@@ -58,6 +58,9 @@ export type { SecureLoaderProps } from "./components/SecureLoader";
 export { PinPad } from "./components/PinPad";
 export type { PinPadProps } from "./components/PinPad";
 
+export { PinCodeInput } from "./components/PinCodeInput";
+export type { PinCodeInputProps } from "./components/PinCodeInput";
+
 export { LockScreen } from "./components/LockScreen";
 export type {
   LockScreenMode,
@@ -109,6 +112,7 @@ export {
   useDebounce,
   useDebouncedCallback,
   useIdleLock,
+  useMediaQuery,
   useSelectField,
 } from "./hooks";
 export type {

package/src/types/assets.d.ts

@@ -0,0 +1,5 @@
+/** MED-1629: image imports resolve to a URL string (an inlined data URI in the Rollup build). */
+declare module "*.png" {
+  const src: string;
+  export default src;
+}