gbs-add-block 0.0.55 → 0.0.57

package/README.md

@@ -1,4 +1,4 @@
-# GBS Building Blocks 2.0 (v0.0.55)
+# GBS Building Blocks 2.0 (v0.0.56)
 
 Latest and upgraded version of GBS building blocks with headless UI and removed dependencies.
 
@@ -6,7 +6,7 @@ Latest and upgraded version of GBS building blocks with headless UI and removed
 
 For detailed documentation on usage and props, Please visit: [Building Block Documentation v2.0](https://blackmax-designs.gitbook.io/building-block-v2.0)
 
-## What's New 🎉 (Ver 0.0.55)
+## What's New 🎉 (Ver 0.0.56)
 
 - Updated for more general installation methods
 - Fixed bug in Framework detection for more accuracy

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gbs-add-block",
-  "version": "0.0.55",
+  "version": "0.0.57",
   "description": "React Component Library",
   "files": [
     "index.js",

package/source/components/datepicker/index.tsx

@@ -54,10 +54,6 @@ export const DatePicker = ({
     hasMounted,
   } = useDatePickerState(selectedDateValue || null);
 
-  useEffect(() => {
-    console.log("selectedDateValue", selectedDate);
-  }, [selectedDate]);
-
   const { prevMonth, nextMonth } = useYearMonthNavigation(
     currentMonth,
     currentYear,
@@ -124,13 +120,13 @@ export const DatePicker = ({
   }
 
   return (
-    <div className="relative inline-block w-full dark:bg-black" ref={dateRef}>
+    <div className="relative inline-block w-full" ref={dateRef}>
       <button
         type="button"
         onClick={toggleDatepicker}
         className={`${
           error ? primary["error-border"] : "border"
-        } p-2 rounded-lg w-full flex items-center gap-2 dark:text-white ${
+        } p-2 rounded-lg w-full flex items-center gap-2 dark:text-white dark:bg-black ${
           disabled ? "opacity-50 cursor-not-allowed" : ""
         }`}
         disabled={disabled}
@@ -243,7 +239,7 @@ export const DatePicker = ({
                       onClick={() => selectYearMonth(currentYear, index)}
                       className={`w-full text-left p-2 cursor-pointer rounded hover:bg-gray-200 transition duration-150 ease-in-out ${
                         index === currentMonth
-                          ? "bg-black text-white hover:bg-blue-600"
+                          ? "bg-black text-white dark:bg-zinc-500"
                           : ""
                       }`}
                     >
@@ -262,7 +258,7 @@ export const DatePicker = ({
                       onClick={() => selectYearMonth(year, currentMonth)}
                       className={`w-full text-left p-2 cursor-pointer rounded hover:bg-gray-200 transition duration-150 ease-in-out ${
                         year === currentYear
-                          ? "bg-black text-white hover:bg-blue-600"
+                          ? "bg-black text-white dark:bg-zinc-500"
                           : ""
                       }`}
                     >
@@ -302,7 +298,7 @@ export const DatePicker = ({
                     disabled={isDisabled}
                     className={`text-center p-1 w-8 h-8 cursor-pointer rounded-md hover:bg-gray-200 transition duration-150 ease-in-out ${
                       isSelected
-                        ? "bg-black text-white hover:bg-gray-800 dark:bg-white"
+                        ? "bg-black text-white hover:bg-gray-800 dark:bg-zinc-500"
                         : ""
                     } ${
                       isDisabled

package/source/components/input/index.tsx

@@ -50,9 +50,29 @@ export const Input = ({
     if (e.key === "Backspace" && otpValues[index] === "" && index > 0) {
       inputRefs.current[index - 1]?.focus();
     } else if (e.key === "ArrowLeft" && index > 0) {
+      e.preventDefault();
       inputRefs.current[index - 1]?.focus();
+      setTimeout(() => {
+        if (inputRefs.current[index - 1]) {
+          const inputEl = inputRefs.current[index - 1];
+          if (inputEl) {
+            const length = inputEl.value.length;
+            inputEl.setSelectionRange(length, length);
+          }
+        }
+      }, 0);
     } else if (e.key === "ArrowRight" && index < OTPLength - 1) {
+      e.preventDefault();
       inputRefs.current[index + 1]?.focus();
+      setTimeout(() => {
+        if (inputRefs.current[index + 1]) {
+          const inputEl = inputRefs.current[index + 1];
+          if (inputEl) {
+            const length = inputEl.value.length;
+            inputEl.setSelectionRange(length, length);
+          }
+        }
+      }, 0);
     }
   };