qlu-20-ui-library 1.10.15 → 1.10.16

package/dist/types/components/OTP/index.js

@@ -15,61 +15,84 @@ const OTPComponent = ({ length = 6, isDisable = false, error = false, onOTPChang
         });
     }, [inputValues]);
     //this function is to handle the onPaste event for an input field
-    const handlePaste = (event) => {
+    const handlePaste = (index, event) => {
+        event.preventDefault();
         const pastedText = event.clipboardData?.getData("text") || "";
-        setOtp(pastedText);
-        // Update the input values character by character
-        const characters = pastedText.split("");
-        characters.slice(0, 6).forEach((char, index) => {
-            if (inputRefs.current[index]) {
-                inputRefs.current[index].value = char;
-                setInputValues((prevValues) => {
-                    const updatedValues = [...prevValues];
-                    updatedValues[index] = char;
-                    return updatedValues;
-                });
+        // Filter to only numeric characters
+        const numericOnly = pastedText.replace(/\D/g, "");
+        const characters = numericOnly.split("").slice(0, length - index);
+        // Update input values and field values starting from the current index
+        const updatedInputValues = [...inputValues];
+        const updatedFieldValues = [...fieldValues];
+        characters.forEach((char, charIndex) => {
+            const targetIndex = index + charIndex;
+            if (targetIndex < length) {
+                updatedInputValues[targetIndex] = char;
+                updatedFieldValues[targetIndex] = char;
+                if (inputRefs.current[targetIndex]) {
+                    inputRefs.current[targetIndex].value = char;
+                }
             }
         });
-    };
-    const handlePasteChange = (event, index) => {
-        const updatedValues = [...inputValues];
-        updatedValues[index] = event.target.value;
-        setInputValues(updatedValues);
-    };
-    //sending cursor to last field after pasting OTP
-    useEffect(() => {
-        if (inputRefs.current[5] && inputRefs.current[5].value !== "") {
-            inputRefs.current[5].focus();
+        // Clear remaining fields after the pasted content
+        const endIndex = Math.min(index + characters.length, length);
+        for (let i = endIndex; i < length; i++) {
+            updatedInputValues[i] = "";
+            updatedFieldValues[i] = "";
+            if (inputRefs.current[i]) {
+                inputRefs.current[i].value = "";
+            }
+        }
+        setInputValues(updatedInputValues);
+        setFieldValues(updatedFieldValues);
+        const completeOTP = updatedFieldValues.join("");
+        setOtp(completeOTP);
+        // Trigger completion callback if all fields are filled
+        if (updatedFieldValues.every((val) => val !== "") && onOTPComplete) {
+            onOTPComplete(completeOTP);
         }
-        else if (inputRefs.current[0].value == "") {
-            inputRefs.current[0].focus();
+        // Focus the last filled field or next empty field
+        const nextEmptyIndex = updatedFieldValues.findIndex((val) => val === "");
+        const focusIndex = nextEmptyIndex === -1 ? length - 1 : Math.min(nextEmptyIndex, length - 1);
+        if (inputRefs.current[focusIndex]) {
+            inputRefs.current[focusIndex].focus();
         }
-    }, [inputValues[5]]);
+    };
     const handleInput = (index, event) => {
         const value = event.target.value;
+        // Extract only the last character if multiple characters are entered
+        const lastChar = value.slice(-1);
         if (value.length === 0) {
+            // Clear the field
             event.target.value = "";
-            setOtp((prev) => prev.slice(0, index) + prev.slice(index + 1));
-            setFieldValues((prev) => {
+            setInputValues((prev) => {
                 const updatedValues = [...prev];
                 updatedValues[index] = "";
                 return updatedValues;
             });
-        }
-        else if (/^\d$/.test(value)) {
-            event.target.value = value;
-            setOtp((prev) => prev.slice(0, index) + value + prev.slice(index + 1));
             setFieldValues((prev) => {
                 const updatedValues = [...prev];
-                updatedValues[index] = value;
+                updatedValues[index] = "";
                 return updatedValues;
             });
-            if (fieldValues.filter((val) => val !== "").length + 1 === length &&
-                onOTPComplete) {
-                fieldValues[index] = value;
-                const completeOTP = fieldValues.join("");
+            setOtp((prev) => prev.slice(0, index) + prev.slice(index + 1));
+        }
+        else if (/^\d$/.test(lastChar)) {
+            // Only allow numeric input
+            event.target.value = lastChar;
+            const updatedInputValues = [...inputValues];
+            const updatedFieldValues = [...fieldValues];
+            updatedInputValues[index] = lastChar;
+            updatedFieldValues[index] = lastChar;
+            setInputValues(updatedInputValues);
+            setFieldValues(updatedFieldValues);
+            const completeOTP = updatedFieldValues.join("");
+            setOtp(completeOTP);
+            // Check if OTP is complete and trigger callback
+            if (updatedFieldValues.every((val) => val !== "") && onOTPComplete) {
                 onOTPComplete(completeOTP);
             }
+            // Move to next field if not the last one
             if (index < length - 1) {
                 inputRefs.current[index + 1].focus();
             }
@@ -77,30 +100,45 @@ const OTPComponent = ({ length = 6, isDisable = false, error = false, onOTPChang
                 event.target.blur();
             }
         }
+        else {
+            // Invalid input - reset to previous value
+            event.target.value = inputValues[index] || "";
+        }
     };
     const handleBackspace = (index, event) => {
-        if (event.key === "Backspace" &&
-            index > 0 &&
-            event.currentTarget.value === "") {
-            event.preventDefault();
-            event.currentTarget.value = "";
-            setOtp((prev) => prev.slice(0, index - 1) + prev.slice(index));
-            setFieldValues((prev) => {
-                const updatedValues = [...prev];
-                updatedValues[index - 1] = "";
-                return updatedValues;
-            });
-            inputRefs.current[index - 1].focus();
+        if (event.key === "Backspace") {
+            if (event.currentTarget.value === "" && index > 0) {
+                // If current field is empty, move to previous and clear it
+                event.preventDefault();
+                const updatedInputValues = [...inputValues];
+                const updatedFieldValues = [...fieldValues];
+                updatedInputValues[index - 1] = "";
+                updatedFieldValues[index - 1] = "";
+                setInputValues(updatedInputValues);
+                setFieldValues(updatedFieldValues);
+                setOtp((prev) => prev.slice(0, index - 1) + prev.slice(index));
+                if (inputRefs.current[index - 1]) {
+                    inputRefs.current[index - 1].value = "";
+                    inputRefs.current[index - 1].focus();
+                }
+            }
+            // If current field has value, let the default behavior clear it
+            // The handleInput will handle the state update
         }
     };
+    const handleClick = (event) => {
+        // Select all text when clicking on an input for easy clearing
+        event.currentTarget.select();
+    };
+    const handleFocus = (event) => {
+        // Select all text on focus for easy clearing
+        event.currentTarget.select();
+    };
     useEffect(() => {
         if (onOTPChange) {
             onOTPChange(otp);
         }
     }, [otp]);
-    return (_jsx("div", { className: "otp-container", children: Array.from({ length }).map((_, index) => (_jsx("input", { autoComplete: "off", disabled: isDisable, type: "text", maxLength: 1, className: `otp-box ${error ? "error" : ""}`, ref: (ref) => (inputRefs.current[index] = ref), onChange: (event) => {
-                handleInput(index, event);
-                handlePasteChange(event, index);
-            }, onKeyDown: (event) => handleBackspace(index, event), onPaste: index === 0 ? handlePaste : undefined }, index))) }));
+    return (_jsx("div", { className: "otp-container", children: Array.from({ length }).map((_, index) => (_jsx("input", { autoComplete: "off", disabled: isDisable, type: "text", inputMode: "numeric", pattern: "[0-9]*", maxLength: 1, className: `otp-box ${error ? "error" : ""}`, ref: (ref) => (inputRefs.current[index] = ref), onChange: (event) => handleInput(index, event), onKeyDown: (event) => handleBackspace(index, event), onClick: handleClick, onFocus: handleFocus, onPaste: (event) => handlePaste(index, event) }, index))) }));
 };
 export default OTPComponent;

package/dist/types/components/ToggleComponent/index.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
+import clsx from "clsx";
 import "./style.scss";
 const ToggleComponent = ({ initialState, onClick, sizeVariant = "base", isDisabled = false, dataCy, }) => {
     const [isOn, setIsOn] = useState(initialState);
@@ -12,6 +13,6 @@ const ToggleComponent = ({ initialState, onClick, sizeVariant = "base", isDisabl
         setIsOn(!isOn);
         onClick();
     };
-    return (_jsx("div", { className: `${sizeVariant === "sm" ? "smSizeToggle" : "toggle"} ${isOn ? "on" : "off"}`, onClick: handleToggle, "data-cy": dataCy, children: _jsx("div", { className: sizeVariant === "sm" ? "smSizeToggle-switch" : "toggle-switch" }) }));
+    return (_jsx("div", { className: clsx(sizeVariant === "sm" ? "smSizeToggle" : "toggle", isOn ? "on" : "off", isDisabled && "disabled"), onClick: handleToggle, "data-cy": dataCy, children: _jsx("div", { className: sizeVariant === "sm" ? "smSizeToggle-switch" : "toggle-switch" }) }));
 };
 export default ToggleComponent;

package/dist/types/stories/OTP.stories.d.ts

@@ -1,5 +1,5 @@
-import type { StoryObj, Meta } from '@storybook/react-vite';
-import OTPComponent from '../components/OTP';
+import type { StoryObj, Meta } from "@storybook/react-vite";
+import OTPComponent from "../components/OTP";
 declare const meta: Meta<typeof OTPComponent>;
 export default meta;
 type OTPComponentProps = StoryObj<typeof OTPComponent>;

package/dist/types/stories/OTP.stories.js

@@ -1,7 +1,17 @@
-import OTPComponent from '../components/OTP';
+import OTPComponent from "../components/OTP";
+// Mock function to replace @storybook/test fn() for Storybook 9.x compatibility
+const fn = () => {
+    const spy = (...args) => {
+        spy.calls.push(args);
+        spy.callCount++;
+    };
+    spy.calls = [];
+    spy.callCount = 0;
+    return spy;
+};
 const meta = {
     title: "Input/OTPInputField",
-    component: OTPComponent
+    component: OTPComponent,
 };
 export default meta;
 export const NavBar = {
@@ -9,6 +19,7 @@ export const NavBar = {
         length: 6,
         error: false,
         isDisable: false,
-        onOTPComplete: (value) => alert(value)
+        onOTPChange: fn(),
+        onOTPComplete: (value) => alert(value),
     },
 };

package/dist/types/stories/ToggleComponent.stories.d.ts

@@ -1,5 +1,5 @@
-import type { StoryObj, Meta } from '@storybook/react-vite';
-import ToggleComponent from '../components/ToggleComponent';
+import type { StoryObj, Meta } from "@storybook/react-vite";
+import ToggleComponent from "../components/ToggleComponent";
 declare const meta: Meta<typeof ToggleComponent>;
 export default meta;
 type ToggleComponentProps = StoryObj<typeof ToggleComponent>;

package/dist/types/stories/ToggleComponent.stories.js

@@ -1,9 +1,11 @@
-import ToggleComponent from '../components/ToggleComponent';
+import ToggleComponent from "../components/ToggleComponent";
 const meta = {
-    title: 'Button/ToggleComponent',
+    title: "Button/ToggleComponent",
     component: ToggleComponent,
 };
 export default meta;
 export const Primary = {
-    args: {},
+    args: {
+        isDisabled: true,
+    },
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qlu-20-ui-library",
-  "version": "1.10.15",
+  "version": "1.10.16",
   "type": "module",
   "scripts": {
     "dev": "vite",