@westpac/ui 1.0.0 → 1.1.1

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

@@ -5,6 +5,7 @@ export declare const PassCode: React.ForwardRefExoticComponent<{
     onBlur?: (index: number, event: FocusEvent<HTMLInputElement>) => void;
     onChange?: (passcode: string[]) => void;
     onComplete?: (passcode: string) => void;
+    onPasteComplete?: (passcode: string) => void;
     type?: "numbers" | "letters" | "alphanumeric";
     value?: string[];
 } & import("tailwind-variants").VariantProps<import("tailwind-variants").TVReturnType<{

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

@@ -2,7 +2,7 @@
 import React, { forwardRef, useCallback, useImperativeHandle, useRef, useState } from 'react';
 import { Input } from '../index.js';
 import { styles as passCodeStyles } from './pass-code.styles.js';
-export const PassCode = forwardRef(({ length, value, onChange, onComplete, className, type = 'alphanumeric', onBlur, ...props }, ref)=>{
+export const PassCode = forwardRef(({ length, value, onChange, onComplete, onPasteComplete, className, type = 'alphanumeric', onBlur, ...props }, ref)=>{
     const [internalPasscode, setInternalPasscode] = useState(Array.from({
         length
     }).map(()=>''));
@@ -70,14 +70,19 @@ export const PassCode = forwardRef(({ length, value, onChange, onComplete, class
         } else {
             setInternalPasscode(newPasscode);
         }
-        if (newPasscode.filter((passcode)=>!passcode).length === 0 && onComplete) {
-            onComplete(newPasscode.join(''));
+        if (newPasscode.filter((passcode)=>!passcode).length === 0) {
+            if (onPasteComplete) {
+                onPasteComplete(newPasscode.join(''));
+            } else if (onComplete) {
+                onComplete(newPasscode.join(''));
+            }
         }
     }, [
         passcode,
         length,
         onChange,
         onComplete,
+        onPasteComplete,
         type
     ]);
     const handleKeyDown = useCallback((index, event)=>{

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

@@ -18,6 +18,10 @@ export type PassCodeProps = {
      * Callback when the passcode is completely typed
      */
     onComplete?: (passcode: string) => void;
+    /**
+     * Callback when the passcode is completely pasted
+     */
+    onPasteComplete?: (passcode: string) => void;
     /**
      * Type of passcode input
      */

package/dist/css/westpac-ui.css

@@ -181,6 +181,9 @@
   .relative {
     position: relative;
   }
+  .static {
+    position: static;
+  }
   .sticky {
     position: sticky;
   }

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

@@ -181,6 +181,9 @@
   .relative {
     position: relative;
   }
+  .static {
+    position: static;
+  }
   .sticky {
     position: sticky;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@westpac/ui",
-  "version": "1.0.0",
+  "version": "1.1.1",
   "license": "MIT",
   "sideEffects": false,
   "type": "module",
@@ -254,9 +254,9 @@
     "vite": "^7.1.12",
     "vitest": "^3.2.4",
     "@westpac/eslint-config": "~1.1.0",
-    "@westpac/style-config": "~1.0.0",
-    "@westpac/test-config": "~0.0.0",
-    "@westpac/ts-config": "~0.0.0"
+    "@westpac/style-config": "~1.0.1",
+    "@westpac/ts-config": "~0.0.0",
+    "@westpac/test-config": "~0.0.0"
   },
   "dependencies": {
     "@internationalized/date": "~3.10.0",

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

@@ -18,7 +18,10 @@ import { styles as passCodeStyles } from './pass-code.styles.js';
 import { PassCodeProps, PassCodeRef } from './pass-code.types.js';
 
 export const PassCode = forwardRef<PassCodeRef, PassCodeProps>(
-  ({ length, value, onChange, onComplete, className, type = 'alphanumeric', onBlur, ...props }, ref) => {
+  (
+    { length, value, onChange, onComplete, onPasteComplete, className, type = 'alphanumeric', onBlur, ...props },
+    ref,
+  ) => {
     const [internalPasscode, setInternalPasscode] = useState<string[]>(Array.from({ length }).map(() => ''));
     const passcode = value ? value : internalPasscode;
     const inputRefs = useRef<(HTMLInputElement | null)[]>([]);
@@ -84,11 +87,15 @@ export const PassCode = forwardRef<PassCodeRef, PassCodeProps>(
         } else {
           setInternalPasscode(newPasscode);
         }
-        if (newPasscode.filter(passcode => !passcode).length === 0 && onComplete) {
-          onComplete(newPasscode.join(''));
+        if (newPasscode.filter(passcode => !passcode).length === 0) {
+          if (onPasteComplete) {
+            onPasteComplete(newPasscode.join(''));
+          } else if (onComplete) {
+            onComplete(newPasscode.join(''));
+          }
         }
       },
-      [passcode, length, onChange, onComplete, type],
+      [passcode, length, onChange, onComplete, onPasteComplete, type],
     );
 
     const handleKeyDown = useCallback(

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

@@ -20,6 +20,10 @@ export type PassCodeProps = {
    * Callback when the passcode is completely typed
    */
   onComplete?: (passcode: string) => void;
+  /**
+   * Callback when the passcode is completely pasted
+   */
+  onPasteComplete?: (passcode: string) => void;
   /**
    * Type of passcode input
    */