react-core-ts 1.4.10 → 1.4.12

package/src/ReactAutoComplete.tsx

@@ -25,7 +25,7 @@ interface AutoSuggestionInputProps {
   className?: string;
   autoFocus?: boolean;
   required?: boolean;
-
+  shortCode?: string
   hideClear?: boolean;
   value?: valueProps;
   onChange: (value?: valueProps) => void;
@@ -62,6 +62,7 @@ const ModernAutoComplete: React.FC<AutoSuggestionInputProps> = ({
   required = false,
   autoFocus,
   name,
+  shortCode = '',
   fullWidth,
   placeholder,
   id,
@@ -98,6 +99,9 @@ const ModernAutoComplete: React.FC<AutoSuggestionInputProps> = ({
   const dropdownref = useRef<HTMLDivElement>(null);
   const dropBtnRef = useRef<HTMLButtonElement>(null);
   const timerRef = useRef<number>(0); // To fix the no results found issue on second type
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const itemRefs = useRef<(HTMLLIElement | null)[]>([]);
+  const scrollContainerRef = useRef<HTMLUListElement | null>(null);
   const [dropPosition, setDropPosition] = useState<any>({
     top: 0,
     left: 0,
@@ -306,7 +310,7 @@ const ModernAutoComplete: React.FC<AutoSuggestionInputProps> = ({
   useEffect(() => {
     setIsDisabled(disabled);
   }, [disabled]);
-  const handleSuggestionClick = (suggestion: valueProps) => {
+  const handleSuggestionClick = (suggestion: valueProps, index: number) => {
     onChange({
       ...suggestion,
       id: suggestion?.id,
@@ -315,6 +319,7 @@ const ModernAutoComplete: React.FC<AutoSuggestionInputProps> = ({
     });
     if (type !== 'custom_select') setInputValue(suggestion.name);
     setDropOpen(false);
+    setSelectedIndex(index);
   };
   const handleOpen = (e: any) => {
     if (!suggestions || suggestions?.length === 0) handleDropData();
@@ -330,6 +335,7 @@ const ModernAutoComplete: React.FC<AutoSuggestionInputProps> = ({
 
   useEffect(() => {
     if (!insideOpen) {
+      setSelectedIndex(0);
       window.addEventListener('scroll', handleScroll);
 
       const mainElement = document.querySelector('main');
@@ -357,6 +363,53 @@ const ModernAutoComplete: React.FC<AutoSuggestionInputProps> = ({
     }
   }, [dropOpen]);
 
+   // Handle keyboard navigation
+   const handleKeyDown = (e: any) => {
+    if (!dropOpen) return;
+
+    const atBottom = selectedIndex === filteredData.length - 1;
+    const atTop = selectedIndex === 0;
+
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        if (itemRefs.current && scrollContainerRef.current) {
+          if (!atBottom) {
+            scrollContainerRef.current.scrollTop += itemRefs.current[selectedIndex]?.offsetHeight || 50; 
+          } else {
+            scrollContainerRef.current.scrollTop = 0; 
+          }
+        }
+        setSelectedIndex((prev) => (prev + 1) % filteredData?.length);
+        break;
+
+      case "ArrowUp":
+        e.preventDefault();
+        if (itemRefs.current && scrollContainerRef.current) {
+          if (!atTop) {
+            scrollContainerRef.current.scrollTop -= itemRefs.current[selectedIndex]?.offsetHeight || 50; 
+          } else {
+            scrollContainerRef.current.scrollTop = 0; 
+          }
+        }
+        setSelectedIndex((prev) => (prev - 1 + filteredData?.length) % filteredData?.length);
+        break;
+
+      case "Enter":
+        e.preventDefault();
+        handleSuggestionClick(filteredData[selectedIndex], selectedIndex);
+        break;
+
+      case "Escape":
+        e.preventDefault();
+        setDropOpen(false);
+        break;
+
+      default:
+        break;
+    }
+  };
+
   const handleClear = () => {
     setDropOpen(false);
     setInputValue('');
@@ -461,7 +514,10 @@ const ModernAutoComplete: React.FC<AutoSuggestionInputProps> = ({
   //   return 'bottom'
   // }
   const filteredData =
-    inputValue !== '*' && inputValue !== '' && type !== 'custom_select' && !noLocalFilter
+    inputValue !== '*' &&
+    inputValue !== '' &&
+    type !== 'custom_select' &&
+    !noLocalFilter
       ? suggestions?.filter((item: valueProps) =>
           checkIncludes(
             item.name,
@@ -527,6 +583,12 @@ const ModernAutoComplete: React.FC<AutoSuggestionInputProps> = ({
       return () => clearTimeout(timer);
     } else {
       setShowNoResults(false);
+      if(filteredData?.length > 0 && !isLoading) {
+        window.addEventListener("keydown", handleKeyDown);
+        return(() => {
+          window.removeEventListener("keydown", handleKeyDown);
+        })
+      }
     }
   }, [inputValue, filteredData, isLoading, timerRef.current]);
 
@@ -536,6 +598,7 @@ const ModernAutoComplete: React.FC<AutoSuggestionInputProps> = ({
         <ul
           className="autocomplete-suggections absolute h-auto max-h-40 overflow-auto w-full bg-white shadow-gray-300 shadow-md border border-grey-light py-1.5 z-50  mt-9"
           style={dropPosition}
+          ref={scrollContainerRef}
         >
           {filteredData?.length > 0 ? (
             <>
@@ -545,12 +608,18 @@ const ModernAutoComplete: React.FC<AutoSuggestionInputProps> = ({
                     value?.id === suggestion?.id
                       ? 'bg-blue-navy text-white'
                       : 'hover:bg-table-hover'
-                  } cursor-pointer p-1  text-xxs ps-3.5 pl-[10px]`}
+                  } ${index === selectedIndex ? "is-selected" : ""} cursor-pointer p-1  text-xxs ps-3.5 pl-[10px] qbs-autocomplete-suggections-items`}
                   key={suggestion?.id}
                   data-testid={suggestion.name}
-                  onClick={() => handleSuggestionClick(suggestion)}
+                  onClick={() => handleSuggestionClick(suggestion, index)}
+                  tabIndex={index}
+                  ref={(el) => (itemRefs.current[index] = el)}
                 >
-                  {suggestion?.label ? suggestion?.label : suggestion.name}
+                  <span>
+                    {suggestion?.label ? suggestion?.label : suggestion.name} 
+                  </span>
+
+                  {shortCode && suggestion?.[shortCode] && <span className='short-code'>{suggestion?.[shortCode]}</span>}
                 </li>
               ))}
             </>
@@ -636,6 +705,9 @@ const ModernAutoComplete: React.FC<AutoSuggestionInputProps> = ({
 
   return (
     <div
+      id={
+        id ? `autocomplete-container-${id}` : `autocomplete-container-${name}`
+      }
       className={` flex-grow  ${fullWidth ? 'w-full' : 'w-auto'}`}
       ref={dropdownref}
     >
@@ -665,13 +737,16 @@ const ModernAutoComplete: React.FC<AutoSuggestionInputProps> = ({
             onMouseLeave={() => handleMouseLeave()}
           >
             <input
-              id={id}
               type="text"
               readOnly={readOnly ?? type === 'custom_select'}
               value={inputValue ? inputValue : ''}
               onBlur={handleClearInputValue}
+              autoComplete="off"
               disabled={disabled}
               ref={inputRef}
+              id={
+                id ? `custom-autocomplete-${id}` : `custom-autocomplete-${name}`
+              }
               data-testid="custom-autocomplete"
               // onBlur={() => {
               // setInputValue("")
@@ -732,6 +807,7 @@ const ModernAutoComplete: React.FC<AutoSuggestionInputProps> = ({
                   className=" text-table-bodyColor text-[#667085]"
                   aria-label="close"
                   type="button"
+                  id="autocomplete-close-icon"
                 >
                   <CustomIcons name="close" type="large-m" />
                 </button>
@@ -745,12 +821,16 @@ const ModernAutoComplete: React.FC<AutoSuggestionInputProps> = ({
                   className=" text-[#667085] focus-visible:outline-slate-100"
                   data-testid="drop-arrow"
                   type="button"
+                  id="autocomplete-drop-icon"
                   ref={dropBtnRef}
                 >
                   {!dropOpen ? (
                     <DropArrow uniqueDropArrowId="drop-arrow-icon" />
                   ) : (
-                    <DropArrow className="rotate-180" uniqueDropArrowId="drop-arrow-icon" />
+                    <DropArrow
+                      className="rotate-180"
+                      uniqueDropArrowId="drop-arrow-icon"
+                    />
                   )}
                 </button>
               )}

package/src/ReactCheckbox.tsx

@@ -1,6 +1,6 @@
-import { CheckboxProps } from './commontypes'
 import React from 'react'
 
+import { CheckboxProps } from './commontypes'
 import CustomIcons from './components/customIcons'
 
 const Checkbox: React.FC<CheckboxProps> = ({
@@ -32,7 +32,7 @@ const Checkbox: React.FC<CheckboxProps> = ({
   return (
     <div
       className={`text-common font-normal text-grey-secondary flex items-center justify-start gap-2.5 ${
-        disabled ? " opacity-70" : ""
+        disabled ? ' opacity-70' : ''
       } `}
     >
       <div>
@@ -41,9 +41,10 @@ const Checkbox: React.FC<CheckboxProps> = ({
             type="checkbox"
             disabled={disabled}
             name={name}
+            autoComplete="off"
             className="border-none outline-none invisible "
             data-testid="app-common-checkbox"
-            id={id}
+            id={id ? `input-check-${id}` : `input-check-${name}`}
             value={value}
             checked={checked}
             onChange={handleChange}
@@ -51,7 +52,7 @@ const Checkbox: React.FC<CheckboxProps> = ({
 
           <div
             className={`absolute top-[2px] left-0 text-text-primary ${propsClassName}  ${
-              disabled ? "cursor-not-allowed" : "cursor-pointer"
+              disabled ? 'cursor-not-allowed' : 'cursor-pointer'
             }`}
           >
             {checked ? (

package/src/ReactOTPInput.tsx

@@ -146,23 +146,27 @@ const OTPInput: React.FC<OTPInputProps> = ({
         </div>
       )}
       <div className="flex flex-col w-fit">
-        <div className="flex gap-x-5 ">
+        <div
+          className="flex gap-x-5 "
+          id={id ? `input-otp-${id}` : `input-otp-${name}`}
+        >
           {Array(BoxLength)
-            .fill("")
+            .fill('')
             .map((_, index) => (
               <input
                 key={index}
                 name={name}
                 id={id}
                 type="text"
+                autoComplete="off"
                 value={otp[index]}
                 onChange={(e) => handleChange(e, index)}
                 onKeyDown={(e) => handleKeyDown(e, index)}
                 onPaste={handlePaste}
                 ref={(el) => (inputRefs.current[index] = el)}
                 maxLength={1}
-                onFocus={(e) => (e.target.style.borderColor = "#667085")}
-                onBlur={(e) => (e.target.style.borderColor = "#D0D5DD")}
+                onFocus={(e) => (e.target.style.borderColor = '#667085')}
+                onBlur={(e) => (e.target.style.borderColor = '#D0D5DD')}
                 className="w-[54px] h-10 text-center text-lg  border border-[#D0D5DD] focus:border-[#667085] transition-colors duration-200 outline-none rounded-sm"
               />
             ))}
@@ -171,7 +175,7 @@ const OTPInput: React.FC<OTPInputProps> = ({
           <p className="text-common text-[#475467]">Didn't receive a code? </p>
           <span
             className={`text-common text-[#003C71] ml-2  ${
-              !isTimerCompleted ? "cursor-not-allowed" : "cursor-pointer"
+              !isTimerCompleted ? 'cursor-not-allowed' : 'cursor-pointer'
             }`}
             onClick={handleResend}
           >

package/src/ReactRadioButton.tsx

@@ -36,13 +36,14 @@ const Radio: React.FC<RadioProps> = ({
         >
           <input
             type="radio"
+            autoComplete="off"
             checked={checked}
             disabled={disabled}
+            id={id ? `input-button-${id}` : `input-button-${name}`}
             ref={radioRef}
             name={name}
             data-testid="app-common-radio"
             value={value}
-            id={id}
             onChange={onChange}
           />
           <span className="radio"></span>

package/src/ReactTextArea.tsx

@@ -187,7 +187,7 @@ const ModernTextArea: React.FC<TextAreaProps> = ({
         <div className={`flex relative ${fullwidth ? 'w-full' : 'w-auto'}`}>
           <div className="relative w-full">
             <textarea
-              id={id}
+              id={id ? `input-textarea-${id}` : `input-textarea-${name}`}
               ref={inputRef}
               disabled={isDisabled}
               data-testid="textarea"

package/src/ReactTextField.tsx

@@ -294,6 +294,7 @@ const TextField: React.FC<TextFieldProps> = ({
                 type={type}
                 // id={frmid+id}
                 ref={inputRef}
+                id={id ? `input-${id}` : `input-${name}`}
                 disabled={isDisabled}
                 // step={step}
                 min={min}

package/src/commontypes.ts

@@ -77,6 +77,7 @@ export interface AutoSuggestionInputProps {
     filterKey?: any;
     filterValue?: any;
   };
+  shortCode?: string
 }
 export interface IconsProps {
   name: any;

package/src/components/DropdownList.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 
 type ValueProps = {
   idx: number;
@@ -11,6 +11,9 @@ type ValueProps = {
   singleSelect?: boolean;
   desc: string;
   hideCheckbox?: boolean;
+  shortCode?: string
+  focusedIndex?: number
+  setItemRef?: (index: number, ref: HTMLDivElement | null) => void
 };
 const DropdownList: React.FC<ValueProps> = ({
   idx,
@@ -23,13 +26,19 @@ const DropdownList: React.FC<ValueProps> = ({
   singleSelect,
   desc,
   hideCheckbox = false,
+  shortCode = '',
+  focusedIndex = 0,
+  setItemRef
 }) => {
+  
   return (
     <div
       key={idx.toString()}
+      ref={(el) => setItemRef?.(idx, el)}  // Properly store each ref
       className={`qbs-autocomplete-listitem-container ${
         (isMultiple || singleSelect) && 'qbs-autocomplete-checkbox-container'
-      } ${isSelected(suggestion, selected) ? 'is-selected' : ''}`}
+      } ${isSelected(suggestion, selected) ? 'is-selected' : ''} ${idx === focusedIndex ? "is-selected" : ""}`}
+      tabIndex={idx}
     >
       {(isMultiple || singleSelect) && !hideCheckbox && (
         <div className="qbs-autocomplete-checkbox">
@@ -65,6 +74,7 @@ const DropdownList: React.FC<ValueProps> = ({
       >
         {suggestion[desc]}
       </div>
+      {shortCode && suggestion?.[shortCode] && <div className='short-code'>{suggestion?.[shortCode]}</div>}
     </div>
   );
 };

package/src/dummyAutoCompleteWithSelectedList.tsx

@@ -1,11 +1,4 @@
-import React, {
-  forwardRef,
-  useCallback,
-  useEffect,
-  useImperativeHandle,
-  useRef,
-  useState,
-} from 'react';
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
 
 import { AutoSuggestionInputProps, TabPops, ValueProps } from './commontypes';
@@ -568,6 +561,7 @@ const AutoCompleteWithSelectedList = forwardRef<
           >
             <input
               id={id}
+              autoComplete="off"
               ref={inputRef}
               type="text"
               value={
@@ -642,6 +636,7 @@ const AutoCompleteWithSelectedList = forwardRef<
                           onChange={handleSuggestionChange}
                           value={searchValue}
                           placeholder="Search"
+                          autoComplete="off"
                           ref={inputSearchRef}
                         />
                       </div>

package/src/styles/components/autocomplete.css

@@ -463,6 +463,8 @@ span.dropdown-search-icon {
   padding: 6px 8px;
   display: flex;
   align-items: flex-start;
+  outline: none; 
+  box-shadow: none;
 }
 
 .qbs-autocomplete-checkbox-container .qbs-autocomplete-suggestions-item {
@@ -628,3 +630,26 @@ span.dropdown-search-icon {
   margin-left: -5px;
   border-color: transparent transparent #000 transparent;
 }
+
+.autocomplete-suggections .qbs-autocomplete-suggections-items {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+  outline: none; 
+  box-shadow: none;
+}
+
+.qbs-autocomplete-suggections-items.is-selected {
+  background-color: #f1f5f9;
+}
+
+.autocomplete-suggections .qbs-autocomplete-suggections-items .short-code, 
+.qbs-autocomplete-listitem-container .short-code{
+  font-size: 12px;
+  background: #f0f0f0;
+  padding: 4px 8px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  white-space: nowrap;
+}