@westpac/ui 0.29.0 → 0.30.0

package/dist/components/pass-code/pass-code.component.d.ts

@@ -1,2 +1,40 @@
-import { type PassCodeProps } from './pass-code.types.js';
-export declare function PassCode({ length, onComplete, className, ...props }: PassCodeProps): import("react/jsx-runtime").JSX.Element;
+import React from 'react';
+import { PassCodeRef } from './pass-code.types.js';
+export declare const PassCode: React.ForwardRefExoticComponent<{
+    length: number;
+    onBlur?: (index: number, event: React.FocusEvent<HTMLInputElement>) => void;
+    onChange?: (passcode: string[]) => void;
+    onComplete?: (passcode: string) => void;
+    type?: "numbers" | "letters" | "alphanumeric";
+    value?: string[];
+} & import("tailwind-variants").VariantProps<import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            input?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            input?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    base: string;
+    input: string;
+}, undefined, TVConfig<V, EV>, {
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            input?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    base: string;
+    input: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    base: string;
+    input: string;
+}, undefined, TVConfig<V, EV>, unknown, unknown, undefined>>> & Omit<React.HTMLAttributes<Element>, "onChange"> & React.RefAttributes<PassCodeRef>>;

package/dist/components/pass-code/pass-code.component.js

@@ -13,39 +13,65 @@ function _extends() {
     };
     return _extends.apply(this, arguments);
 }
-import React, { useCallback, useRef, useState } from 'react';
+import React, { forwardRef, useCallback, useImperativeHandle, useRef, useState } from 'react';
 import { Input } from '../index.js';
 import { styles as passCodeStyles } from './pass-code.styles.js';
-export function PassCode({ length , onComplete , className , ...props }) {
-    const [passcode, setPasscode] = useState(Array.from({
+export const PassCode = forwardRef(({ length , value , onChange , onComplete , className , type ='alphanumeric' , onBlur , ...props }, ref)=>{
+    const [internalPasscode, setInternalPasscode] = useState(Array.from({
         length
-    }).map(()=>undefined));
+    }).map(()=>''));
+    const passcode = value ? value : internalPasscode;
     const inputRefs = useRef([]);
     const styles = passCodeStyles({});
+    useImperativeHandle(ref, ()=>{
+        return {
+            focus: ()=>{
+                var _inputRefs_current_;
+                (_inputRefs_current_ = inputRefs.current[0]) === null || _inputRefs_current_ === void 0 ? void 0 : _inputRefs_current_.focus();
+            },
+            clear: ()=>{
+                setInternalPasscode(Array.from({
+                    length
+                }).map(()=>''));
+            }
+        };
+    });
     const handleChange = useCallback((index, event)=>{
-        const value = event.target.value.slice(-1);
-        const newPasscode = [
-            ...passcode.slice(0, index),
-            value,
-            ...passcode.slice(index + 1)
-        ];
-        setPasscode(newPasscode);
-        if (index < length - 1 && value !== '') {
-            var _inputRefs_current_;
-            (_inputRefs_current_ = inputRefs.current[index + 1]) === null || _inputRefs_current_ === void 0 ? void 0 : _inputRefs_current_.focus();
-        }
-        if (newPasscode.filter((passcode)=>!passcode).length === 0) {
-            onComplete(newPasscode.join(''));
+        const inputValue = event.target.value.slice(-1);
+        if (type === 'numbers' && /^\d$/.test(inputValue) || type === 'letters' && /^[a-zA-Z]$/.test(inputValue) || type === 'alphanumeric' && /^[a-zA-Z0-9]$/.test(inputValue)) {
+            const newPasscode = [
+                ...passcode.slice(0, index),
+                inputValue,
+                ...passcode.slice(index + 1)
+            ];
+            if (onChange) {
+                onChange(newPasscode);
+            } else {
+                setInternalPasscode(newPasscode);
+            }
+            if (index < length - 1 && inputValue !== '') {
+                var _inputRefs_current_;
+                (_inputRefs_current_ = inputRefs.current[index + 1]) === null || _inputRefs_current_ === void 0 ? void 0 : _inputRefs_current_.focus();
+            }
+            if (newPasscode.filter((passcode)=>!passcode).length === 0 && onComplete) {
+                onComplete(newPasscode.join(''));
+            }
         }
     }, [
         passcode,
         length,
-        onComplete
+        onChange,
+        onComplete,
+        type
     ]);
     const handlePaste = useCallback((index, event)=>{
         event.preventDefault();
         const pastedData = event.clipboardData.getData('text');
-        const validData = pastedData.slice(0, length - index).split('');
+        const validData = pastedData.slice(0, length - index).split('').filter((char)=>{
+            if (type === 'numbers') return /^\d$/.test(char);
+            if (type === 'letters') return /^[a-zA-Z]$/.test(char);
+            return /^[a-zA-Z0-9]$/.test(char);
+        });
         const previousSlice = passcode.slice(0, index);
         const afterSlice = passcode.slice(index);
         const newPasscode = [
@@ -55,24 +81,34 @@ export function PassCode({ length , onComplete , className , ...props }) {
                 ...afterSlice.slice(validData.length)
             ]
         ].slice(0, length);
-        setPasscode(newPasscode);
-        if (newPasscode.filter((passcode)=>!passcode).length === 0) {
+        if (onChange) {
+            onChange(newPasscode);
+        } else {
+            setInternalPasscode(newPasscode);
+        }
+        if (newPasscode.filter((passcode)=>!passcode).length === 0 && onComplete) {
             onComplete(newPasscode.join(''));
         }
     }, [
+        passcode,
         length,
+        onChange,
         onComplete,
-        passcode
+        type
     ]);
     const handleKeyDown = useCallback((index, event)=>{
-        if (event.key === 'Backspace' && index > 0) {
+        if (event.key === 'Backspace') {
             event.preventDefault();
             const newPasscode = [
                 ...passcode.slice(0, index),
-                undefined,
+                '',
                 ...passcode.slice(index + 1)
             ];
-            setPasscode(newPasscode);
+            if (onChange) {
+                onChange(newPasscode);
+            } else {
+                setInternalPasscode(newPasscode);
+            }
             const previousInput = inputRefs.current[index - 1];
             const currentInput = inputRefs.current[index];
             if (previousInput) {
@@ -83,7 +119,8 @@ export function PassCode({ length , onComplete , className , ...props }) {
             }
         }
     }, [
-        passcode
+        passcode,
+        onChange
     ]);
     const handleFocus = useCallback((index)=>{
         var _inputRefs_current_index;
@@ -91,20 +128,32 @@ export function PassCode({ length , onComplete , className , ...props }) {
     }, [
         inputRefs
     ]);
+    const handleBlur = useCallback((index, event)=>{
+        if (onBlur) {
+            onBlur(index, event);
+        }
+    }, [
+        onBlur
+    ]);
     return React.createElement("div", _extends({}, props, {
         className: styles.base({
             className
         })
-    }), passcode.map((digit, index)=>React.createElement(Input, {
+    }), Array.from({
+        length
+    }).map((_, index)=>React.createElement(Input, {
             size: "large",
             key: index,
-            value: digit,
+            value: passcode[index] || '',
             onChange: (e)=>handleChange(index, e),
             onPaste: (e)=>handlePaste(index, e),
             onKeyDown: (e)=>handleKeyDown(index, e),
             onFocus: ()=>handleFocus(index),
+            onBlur: (e)=>handleBlur(index, e),
             ref: (input)=>inputRefs.current[index] = input,
             className: styles.input({}),
-            "aria-label": `Passcode digit ${index + 1}`
+            "aria-label": `Passcode digit ${index + 1}`,
+            inputMode: type === 'numbers' ? 'numeric' : 'text'
         })));
-}
+});
+PassCode.displayName = 'PassCode';

package/dist/components/pass-code/pass-code.types.d.ts

@@ -1,7 +1,39 @@
-import { HTMLAttributes } from 'react';
+import { FocusEvent, HTMLAttributes } from 'react';
 import { type VariantProps } from 'tailwind-variants';
 import { styles } from './pass-code.styles.js';
 export type PassCodeProps = {
+    /**
+     * Number of passcode inputs
+     */
     length: number;
-    onComplete: (passcode: string) => void;
-} & VariantProps<typeof styles> & HTMLAttributes<Element>;
+    /**
+     * Callback when the input is blurred
+     */
+    onBlur?: (index: number, event: FocusEvent<HTMLInputElement>) => void;
+    /**
+     * Callback when the input value changes
+     */
+    onChange?: (passcode: string[]) => void;
+    /**
+     * Callback when the passcode is completely typed
+     */
+    onComplete?: (passcode: string) => void;
+    /**
+     * Type of passcode input
+     */
+    type?: 'numbers' | 'letters' | 'alphanumeric';
+    /**
+     * Value of the passcode input
+     */
+    value?: string[];
+} & VariantProps<typeof styles> & Omit<HTMLAttributes<Element>, 'onChange'>;
+export type PassCodeRef = {
+    /**
+     * Clear the passcode input, for non-controlled component only
+     */
+    clear: () => void;
+    /**
+     * Focus on the first input
+     */
+    focus: () => void;
+};

package/dist/css/westpac-ui.css

@@ -3964,6 +3964,9 @@ body {
 .w-\[33\%\] {
   width: 33%;
 }
+.w-\[350px\] {
+  width: 350px;
+}
 .w-\[36\.2ex\] {
   width: 36.2ex;
 }

package/dist/css/westpac-ui.min.css

@@ -3964,6 +3964,9 @@ body {
 .w-\[33\%\] {
   width: 33%;
 }
+.w-\[350px\] {
+  width: 350px;
+}
 .w-\[36\.2ex\] {
   width: 36.2ex;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@westpac/ui",
-  "version": "0.29.0",
+  "version": "0.30.0",
   "license": "MIT",
   "sideEffects": false,
   "type": "module",
@@ -257,9 +257,9 @@
     "typescript": "^5.5.4",
     "vite": "^5.2.12",
     "vitest": "^0.30.1",
-    "@westpac/ts-config": "~0.0.0",
+    "@westpac/eslint-config": "~0.4.0",
     "@westpac/test-config": "~0.0.0",
-    "@westpac/eslint-config": "~0.4.0"
+    "@westpac/ts-config": "~0.0.0"
   },
   "dependencies": {
     "@duetds/date-picker": "~1.4.0",

package/src/components/pass-code/pass-code.component.tsx

@@ -1,97 +1,157 @@
+/* eslint-disable sonarjs/cognitive-complexity */
 'use client';
 
-import React, { ChangeEvent, ClipboardEvent, KeyboardEvent, useCallback, useRef, useState } from 'react';
+import React, {
+  ChangeEvent,
+  ClipboardEvent,
+  FocusEvent,
+  KeyboardEvent,
+  forwardRef,
+  useCallback,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react';
 
 import { Input } from '../index.js';
 
 import { styles as passCodeStyles } from './pass-code.styles.js';
-import { type PassCodeProps } from './pass-code.types.js';
+import { PassCodeProps, PassCodeRef } from './pass-code.types.js';
 
-export function PassCode({ length, onComplete, className, ...props }: PassCodeProps) {
-  const [passcode, setPasscode] = useState<(string | undefined)[]>(Array.from({ length }).map(() => undefined));
-  const inputRefs = useRef<Array<HTMLInputElement | null>>([]);
+export const PassCode = forwardRef<PassCodeRef, PassCodeProps>(
+  ({ length, value, onChange, onComplete, className, type = 'alphanumeric', onBlur, ...props }, ref) => {
+    const [internalPasscode, setInternalPasscode] = useState<string[]>(Array.from({ length }).map(() => ''));
+    const passcode = value ? value : internalPasscode;
+    const inputRefs = useRef<Array<HTMLInputElement | null>>([]);
 
-  const styles = passCodeStyles({});
+    const styles = passCodeStyles({});
 
-  const handleChange = useCallback(
-    (index: number, event: ChangeEvent<HTMLInputElement>) => {
-      const value = event.target.value.slice(-1);
+    useImperativeHandle(ref, () => ({
+      focus: () => {
+        inputRefs.current[0]?.focus();
+      },
+      clear: () => {
+        setInternalPasscode(Array.from({ length }).map(() => ''));
+      },
+    }));
 
-      // Update the passcode state
-      const newPasscode = [...passcode.slice(0, index), value, ...passcode.slice(index + 1)];
-      setPasscode(newPasscode);
+    const handleChange = useCallback(
+      (index: number, event: ChangeEvent<HTMLInputElement>) => {
+        const inputValue = event.target.value.slice(-1);
+        if (
+          (type === 'numbers' && /^\d$/.test(inputValue)) ||
+          (type === 'letters' && /^[a-zA-Z]$/.test(inputValue)) ||
+          (type === 'alphanumeric' && /^[a-zA-Z0-9]$/.test(inputValue))
+        ) {
+          const newPasscode = [...passcode.slice(0, index), inputValue, ...passcode.slice(index + 1)];
+          if (onChange) {
+            onChange(newPasscode);
+          } else {
+            setInternalPasscode(newPasscode);
+          }
 
-      // Move to the next input if available
-      if (index < length - 1 && value !== '') {
-        inputRefs.current[index + 1]?.focus();
-      }
-
-      // Call onComplete when passcode is complete
-      if (newPasscode.filter(passcode => !passcode).length === 0) {
-        onComplete(newPasscode.join(''));
-      }
-    },
-    [passcode, length, onComplete],
-  );
-
-  const handlePaste = useCallback(
-    (index: number, event: ClipboardEvent<HTMLInputElement>) => {
-      event.preventDefault();
-      const pastedData = event.clipboardData.getData('text');
-      const validData = pastedData.slice(0, length - index).split('');
-      const previousSlice = passcode.slice(0, index);
-      const afterSlice = passcode.slice(index);
-      const newPasscode = [...previousSlice, ...[...validData, ...afterSlice.slice(validData.length)]].slice(0, length);
-      setPasscode(newPasscode);
-      if (newPasscode.filter(passcode => !passcode).length === 0) {
-        onComplete(newPasscode.join(''));
-      }
-    },
-    [length, onComplete, passcode],
-  );
+          // Move to the next input if available
+          if (index < length - 1 && inputValue !== '') {
+            inputRefs.current[index + 1]?.focus();
+          }
+          if (newPasscode.filter(passcode => !passcode).length === 0 && onComplete) {
+            onComplete(newPasscode.join(''));
+          }
+        }
+      },
+      [passcode, length, onChange, onComplete, type],
+    );
 
-  const handleKeyDown = useCallback(
-    (index: number, event: KeyboardEvent<HTMLInputElement>) => {
-      if (event.key === 'Backspace' && index > 0) {
+    const handlePaste = useCallback(
+      (index: number, event: ClipboardEvent<HTMLInputElement>) => {
         event.preventDefault();
-        const newPasscode = [...passcode.slice(0, index), undefined, ...passcode.slice(index + 1)];
-        setPasscode(newPasscode);
-        const previousInput = inputRefs.current[index - 1];
-        const currentInput = inputRefs.current[index];
-        if (previousInput) {
-          previousInput.focus();
+        const pastedData = event.clipboardData.getData('text');
+        const validData = pastedData
+          .slice(0, length - index)
+          .split('')
+          .filter(char => {
+            if (type === 'numbers') return /^\d$/.test(char);
+            if (type === 'letters') return /^[a-zA-Z]$/.test(char);
+            return /^[a-zA-Z0-9]$/.test(char);
+          });
+        const previousSlice = passcode.slice(0, index);
+        const afterSlice = passcode.slice(index);
+        const newPasscode = [...previousSlice, ...[...validData, ...afterSlice.slice(validData.length)]].slice(
+          0,
+          length,
+        );
+        if (onChange) {
+          onChange(newPasscode);
+        } else {
+          setInternalPasscode(newPasscode);
+        }
+        if (newPasscode.filter(passcode => !passcode).length === 0 && onComplete) {
+          onComplete(newPasscode.join(''));
         }
-        if (currentInput) {
-          currentInput.value = '';
+      },
+      [passcode, length, onChange, onComplete, type],
+    );
+
+    const handleKeyDown = useCallback(
+      (index: number, event: KeyboardEvent<HTMLInputElement>) => {
+        if (event.key === 'Backspace') {
+          event.preventDefault();
+          const newPasscode = [...passcode.slice(0, index), '', ...passcode.slice(index + 1)];
+          if (onChange) {
+            onChange(newPasscode);
+          } else {
+            setInternalPasscode(newPasscode);
+          }
+          const previousInput = inputRefs.current[index - 1];
+          const currentInput = inputRefs.current[index];
+          if (previousInput) {
+            previousInput.focus();
+          }
+          if (currentInput) {
+            currentInput.value = '';
+          }
+        }
+      },
+      [passcode, onChange],
+    );
+
+    const handleFocus = useCallback(
+      (index: number) => {
+        inputRefs.current[index]?.select();
+      },
+      [inputRefs],
+    );
+
+    const handleBlur = useCallback(
+      (index: number, event: FocusEvent<HTMLInputElement>) => {
+        if (onBlur) {
+          onBlur(index, event);
         }
-      }
-    },
-    [passcode],
-  );
+      },
+      [onBlur],
+    );
 
-  const handleFocus = useCallback(
-    (index: number) => {
-      inputRefs.current[index]?.select();
-    },
-    [inputRefs],
-  );
+    return (
+      <div {...props} className={styles.base({ className })}>
+        {Array.from({ length }).map((_, index) => (
+          <Input
+            size="large"
+            key={index}
+            value={passcode[index] || ''}
+            onChange={e => handleChange(index, e)}
+            onPaste={e => handlePaste(index, e)}
+            onKeyDown={e => handleKeyDown(index, e)}
+            onFocus={() => handleFocus(index)}
+            onBlur={e => handleBlur(index, e)}
+            ref={input => (inputRefs.current[index] = input)}
+            className={styles.input({})}
+            aria-label={`Passcode digit ${index + 1}`}
+            inputMode={type === 'numbers' ? 'numeric' : 'text'}
+          />
+        ))}
+      </div>
+    );
+  },
+);
 
-  return (
-    <div {...props} className={styles.base({ className })}>
-      {passcode.map((digit, index) => (
-        <Input
-          size="large"
-          key={index}
-          value={digit}
-          onChange={e => handleChange(index, e)}
-          onPaste={e => handlePaste(index, e)}
-          onKeyDown={e => handleKeyDown(index, e)}
-          onFocus={() => handleFocus(index)}
-          ref={input => (inputRefs.current[index] = input)}
-          className={styles.input({})}
-          aria-label={`Passcode digit ${index + 1}`}
-        />
-      ))}
-    </div>
-  );
-}
+PassCode.displayName = 'PassCode';

package/src/components/pass-code/pass-code.types.ts

@@ -1,10 +1,46 @@
-import { HTMLAttributes } from 'react';
+import { FocusEvent, HTMLAttributes } from 'react';
 import { type VariantProps } from 'tailwind-variants';
 
 import { styles } from './pass-code.styles.js';
 
 export type PassCodeProps = {
+  /**
+   * Number of passcode inputs
+   */
   length: number;
-  onComplete: (passcode: string) => void;
+  /**
+   * Callback when the input is blurred
+   */
+  onBlur?: (index: number, event: FocusEvent<HTMLInputElement>) => void;
+  /**
+   * Callback when the input value changes
+   */
+  onChange?: (passcode: string[]) => void;
+  /**
+   * Callback when the passcode is completely typed
+   */
+  onComplete?: (passcode: string) => void;
+  /**
+   * Type of passcode input
+   */
+  type?: 'numbers' | 'letters' | 'alphanumeric';
+  /**
+   * Value of the passcode input
+   */
+  value?: string[];
 } & VariantProps<typeof styles> &
-  HTMLAttributes<Element>;
+  Omit<HTMLAttributes<Element>, 'onChange'>;
+
+/*
+ * Passcode input ref used to access the passcode input functions via useImperativeHandle hook
+ */
+export type PassCodeRef = {
+  /**
+   * Clear the passcode input, for non-controlled component only
+   */
+  clear: () => void;
+  /**
+   * Focus on the first input
+   */
+  focus: () => void;
+};