react-core-ts 2.1.1 → 2.1.3

package/dist/styles/styles/components/treedropdown.css

@@ -0,0 +1,97 @@
+.qbs-tree-list-container {
+  display: flex;
+  flex-direction: column;
+}
+.qbs-tree-list-container-sub {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: 7px;
+}
+
+.qbs-tree-list-container-sub .no-children {
+  margin-left: 1.75rem; /* Corresponds to ml-7 in Tailwind */
+}
+.qbs-tree-list-container-sub-icon {
+  margin-top: 0.25rem; /* Corresponds to mt-1 in Tailwind */
+  cursor: pointer;
+  padding-top: 0.5rem; /* Corresponds to py-2 in Tailwind */
+  padding-bottom: 0.5rem;
+  transition: transform 0.3s ease; /* Smooth rotation transition */
+  color: #003c71;
+}
+
+.qbs-tree-list-container-sub-icon.expanded {
+  transform: rotate(90deg); /* Corresponds to rotate-90 in Tailwind */
+}
+.qbs-tree-list-container-sub-container {
+  display: flex;
+  gap: 15px; /* Corresponds to gap-2 in Tailwind */
+  padding: 0.5rem; /* Corresponds to p-2 in Tailwind */
+  flex-direction: row; /* Corresponds to flex-row in Tailwind */
+  width: 100%; /* Corresponds to w-full in Tailwind */
+  color: #3d414a;
+}
+.qbs-tree-list-container-sub-container-hideicon {
+  display: flex;
+  gap: 6px; /* Corresponds to gap-2 in Tailwind */
+  padding: 0.5rem; /* Corresponds to p-2 in Tailwind */
+  flex-direction: row; /* Corresponds to flex-row in Tailwind */
+  width: 100%; /* Corresponds to w-full in Tailwind */
+  color: #3d414a;
+}
+.qbs-tree-list-container-sub-container-hideicon:hover {
+  color: #003c71;
+  background-color: rgba(141, 194, 240, 0.15) !important;
+}
+.qbs-tree-list-container-sub-container:hover {
+  color: #003c71;
+  background-color: rgba(141, 194, 240, 0.15) !important;
+}
+.qbs-tree-list-container-sub-container.qbs-expanded-child {
+  color: #003c71;
+}
+.qbs-tree-list-container-sub-text.qbs-expanded-child {
+  color: #003c71;
+}
+.qbs-tree-list-container-sub-text:hover {
+  color: #003c71;
+  /* background-color: rgba(141, 194, 240, 0.15) !important; */
+}
+
+.qbs-tree-list-container-sub-container.checked,
+.qbs-tree-list-container-sub-container-hideicon.checked {
+  color: #003c71;
+  background-color: rgba(
+    141,
+    194,
+    240,
+    0.15
+  ) !important; /* Corresponds to bg-green-200 in Tailwind */
+}
+
+.marginLeft {
+  margin-left: 28px; /* Corresponds to ml-2 in Tailwind */
+}
+.lightmarginLeft {
+  margin-left: 19px; /* Corresponds to ml-2 in Tailwind */
+}
+.qbs-tree-list-container-sub- {
+  line-height: 18px; /* Corresponds to leading-[18px] in Tailwind */
+  font-size: 0.875rem; /* Corresponds to text-sm in Tailwind (14px) */
+}
+.qbs-tree-list-container-child {
+  margin-left: 1rem; /* Corresponds to ml-4 in Tailwind */
+  margin-top: 0.5rem; /* Corresponds to mt-2 in Tailwind */
+  display: flex; /* Corresponds to flex in Tailwind */
+  flex-direction: column; /* Corresponds to flex-col in Tailwind */
+  gap: 0.5rem; /* Corresponds to gap-2 in Tailwind */
+}
+.qbs-tree-list-container-sub-text {
+  line-height: 18px; /* Corresponds to leading-[18px] in Tailwind */
+  font-size: 14px; /* Corresponds to text-sm in Tailwind (14px) */
+  font-weight: 500;
+  letter-spacing: 0.28px;
+  font-family: 'Noto Sans';
+  /* color: #3d414a; */
+}

package/dist/styles/styles/global.css

@@ -0,0 +1,8 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@import './components/autocomplete.css';
+@import './components/treedropdown.css';
+@import './components/selectedautocomplete.css';
+@import './components/tooltip.css';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-core-ts",
-  "version": "2.1.1",
+  "version": "2.1.3",
   "description": "React Components",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/AutoComplete.tsx

@@ -1,4 +1,11 @@
-import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import React, {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react';
 
 import { AutoSuggestionInputProps } from './commontypes';
 import { useSuggestions } from './utilities/autosuggestions';
@@ -43,7 +50,7 @@ const AutoComplete = forwardRef<HTMLInputElement, AutoSuggestionInputProps>(
       notDataMessage,
       onFocus,
     },
-    ref
+    ref,
   ) => {
     const dropdownRef = useRef<HTMLDivElement>(null);
     // State Hooks Section
@@ -94,16 +101,17 @@ const AutoComplete = forwardRef<HTMLInputElement, AutoSuggestionInputProps>(
       inputValue,
       isMultiple,
       setNextPage,
-      selectedItems
+      selectedItems,
       // nextBlock
     );
 
     // Handling the selection of a suggestion
     const handleSuggestionClick = useCallback((suggestion: ValueProps) => {
+      isSelectingRef.current = true;
       if (isMultiple) {
         setSelectedItems((prev) => {
           const isAdded = prev.some(
-            (item) => item[descId] === suggestion[descId]
+            (item) => item[descId] === suggestion[descId],
           );
           if (isAdded) {
             return prev.filter((item) => item[descId] !== suggestion[descId]);
@@ -134,7 +142,7 @@ const AutoComplete = forwardRef<HTMLInputElement, AutoSuggestionInputProps>(
         } else {
           setSelectedItems((prev) => {
             return prev.filter(
-              (item, i) => item[descId] !== suggestion[descId]
+              (item, i) => item[descId] !== suggestion[descId],
             );
           });
         }
@@ -156,7 +164,15 @@ const AutoComplete = forwardRef<HTMLInputElement, AutoSuggestionInputProps>(
       setInputValue(value ?? '');
     }, [value]);
 
+    const isSelectingRef = useRef(false);
+
     const selectExactMatchFromSuggestions = () => {
+      // If user is clicking on dropdown, don't execute exact match logic
+      if (isSelectingRef.current) {
+        isSelectingRef.current = false;
+        return;
+      }
+
       if (!inputValue) {
         return;
       }
@@ -260,15 +276,15 @@ const AutoComplete = forwardRef<HTMLInputElement, AutoSuggestionInputProps>(
       type,
       desc,
       selected,
-      async
+      async,
     );
     const isSelected = (
       item: ValueProps,
-      selectedItems: ValueProps[] | string
+      selectedItems: ValueProps[] | string,
     ): boolean => {
       if (Array.isArray(selectedItems)) {
         return selectedItems.some(
-          (selectedItem) => selectedItem[desc] === item[desc]
+          (selectedItem) => selectedItem[desc] === item[desc],
         );
       } else {
         return item[desc] === selectedItems;
@@ -353,14 +369,26 @@ const AutoComplete = forwardRef<HTMLInputElement, AutoSuggestionInputProps>(
                 : searchValue || inputValue
             }
             onChange={handleChange}
-            onBlur={() => {
-              handleBlur();
-              selectExactMatchFromSuggestions();
+            onBlur={(e) => {
+              // Delay to allow click events on dropdown to process first
+              setTimeout(() => {
+                // Check if focus moved to dropdown or if user is selecting
+                const relatedTarget = e.relatedTarget as Node;
+                if (
+                  dropdownRef.current &&
+                  relatedTarget &&
+                  dropdownRef.current.contains(relatedTarget)
+                ) {
+                  return; // Focus moved to dropdown, don't execute exact match
+                }
+                handleBlur();
+                selectExactMatchFromSuggestions();
+              }, 200);
             }}
             onFocus={onFocus}
             onClick={() => handleOnClick()}
             className={generateClassName()}
-            placeholder={selectedItems?.length > 0 ? '' : placeholder ?? ''}
+            placeholder={selectedItems?.length > 0 ? '' : (placeholder ?? '')}
             readOnly={
               readOnly || type === 'custom_select' || type == 'auto_suggestion'
             }
@@ -469,6 +497,10 @@ const AutoComplete = forwardRef<HTMLInputElement, AutoSuggestionInputProps>(
                         className={`qbs-autocomplete-suggestions-item ${
                           isSelected(suggestion, selected) ? 'is-selected' : ''
                         }`}
+                        onMouseDown={(e) => {
+                          e.preventDefault(); // Prevent input blur before click
+                          isSelectingRef.current = true;
+                        }}
                         onClick={() => handleSuggestionClick(suggestion)}
                         data-testid={suggestion[desc]}
                       >
@@ -523,7 +555,7 @@ const AutoComplete = forwardRef<HTMLInputElement, AutoSuggestionInputProps>(
         )}
       </div>
     );
-  }
+  },
 );
 
 export default React.memo(AutoComplete);

package/src/ReactAutoComplete.tsx

@@ -106,6 +106,7 @@ const ModernAutoComplete: React.FC<AutoSuggestionInputProps> = ({
   const [selectedIndex, setSelectedIndex] = useState(0);
   const itemRefs = useRef<(HTMLLIElement | null)[]>([]);
   const scrollContainerRef = useRef<HTMLUListElement | null>(null);
+  const isSelectingRef = useRef(false);
   const [dropPosition, setDropPosition] = useState<any>({
     top: 0,
     left: 0,
@@ -329,6 +330,7 @@ const ModernAutoComplete: React.FC<AutoSuggestionInputProps> = ({
     setIsDisabled(disabled);
   }, [disabled]);
   const handleSuggestionClick = (suggestion: valueProps, index: number) => {
+    isSelectingRef.current = true;
     onChange({
       ...suggestion,
       id: suggestion?.id,
@@ -338,6 +340,10 @@ const ModernAutoComplete: React.FC<AutoSuggestionInputProps> = ({
     if (type !== 'custom_select') setInputValue(suggestion.name);
     setDropOpen(false);
     setSelectedIndex(index);
+    // Reset flag after a short delay to allow blur handler to check it
+    setTimeout(() => {
+      isSelectingRef.current = false;
+    }, 100);
   };
   const handleOpen = (e: any) => {
     if (!suggestions || suggestions?.length === 0) {
@@ -490,6 +496,12 @@ const ModernAutoComplete: React.FC<AutoSuggestionInputProps> = ({
   //   return 'bottom'
   // }
   const selectExactMatchFromSuggestions = () => {
+    // If user is clicking on dropdown, don't execute exact match logic
+    if (isSelectingRef.current) {
+      isSelectingRef.current = false;
+      return;
+    }
+
     if (!inputValue) {
       return;
     }
@@ -630,7 +642,40 @@ const ModernAutoComplete: React.FC<AutoSuggestionInputProps> = ({
 
         case 'Enter':
           e.preventDefault();
-          handleSuggestionClick(filteredData[selectedIndex], selectedIndex);
+          if (filteredData[selectedIndex]) {
+            handleSuggestionClick(filteredData[selectedIndex], selectedIndex);
+          }
+          break;
+
+        case 'Tab':
+          // Tab should check for exact match first, then select highlighted item if no exact match
+          if (inputValue && filteredData && filteredData.length > 0) {
+            const normalizedInput = inputValue.toString().trim().toLowerCase();
+            const exactMatchIndex = filteredData.findIndex((item: valueProps) => {
+              const name = item?.name?.toString().trim().toLowerCase();
+              const label = item?.label?.toString().trim().toLowerCase();
+              return name === normalizedInput || label === normalizedInput;
+            });
+
+            if (exactMatchIndex >= 0) {
+              // Exact match found - select it
+              isSelectingRef.current = true;
+              handleSuggestionClick(filteredData[exactMatchIndex], exactMatchIndex);
+            } else if (filteredData[selectedIndex]) {
+              // No exact match but has highlighted item - select highlighted item
+              isSelectingRef.current = true;
+              handleSuggestionClick(filteredData[selectedIndex], selectedIndex);
+            } else {
+              // No exact match and no highlighted item - trigger invalid value action
+              onChange({ id: undefined, name: inputValue, from: 4 });
+              setInputValue('');
+            }
+          } else if (inputValue && (!filteredData || filteredData.length === 0)) {
+            // No suggestions available - trigger invalid value action
+            onChange({ id: undefined, name: inputValue, from: 4 });
+            setInputValue('');
+          }
+          // Don't prevent default - allow Tab to move focus
           break;
 
         case 'Escape':
@@ -682,6 +727,10 @@ const ModernAutoComplete: React.FC<AutoSuggestionInputProps> = ({
                     }  cursor-pointer p-1  text-xxs ps-3.5 pl-[10px] qbs-autocomplete-suggections-items`}
                     key={suggestion?.id}
                     data-testid={suggestion.name}
+                    onMouseDown={(e) => {
+                      e.preventDefault(); // Prevent input blur before click
+                      isSelectingRef.current = true;
+                    }}
                     onClick={() => handleSuggestionClick(suggestion, index)}
                     tabIndex={index}
                     ref={(el) => (itemRefs.current[index] = el)}
@@ -821,9 +870,25 @@ const ModernAutoComplete: React.FC<AutoSuggestionInputProps> = ({
               type="text"
               readOnly={readOnly ?? type === 'custom_select'}
               value={inputValue ? inputValue : ''}
-              onBlur={() => {
-                handleClearInputValue();
-                selectExactMatchFromSuggestions();
+              onBlur={(e) => {
+                // Check immediately if user is selecting (Tab or click)
+                const wasSelecting = isSelectingRef.current;
+                
+                // Delay to allow click events on dropdown to process first
+                setTimeout(() => {
+                  // Check if focus moved to dropdown or if user is selecting
+                  const relatedTarget = e.relatedTarget as Node;
+                  if (
+                    wasSelecting ||
+                    (dropdownref.current &&
+                      relatedTarget &&
+                      dropdownref.current.contains(relatedTarget))
+                  ) {
+                    return; // User selected an item or focus moved to dropdown, don't execute exact match
+                  }
+                  handleClearInputValue();
+                  selectExactMatchFromSuggestions();
+                }, 200);
               }}
               autoComplete="off"
               disabled={disabled}

package/src/ReactAutoCompleteDropdown.tsx

@@ -109,6 +109,8 @@ const ModernAutoCompleteDropdown: React.FC<AutoSuggestionInputProps> = ({
   const itemRefs = useRef<(HTMLLIElement | null)[]>([]);
   const scrollContainerRef = useRef<HTMLUListElement | null>(null);
   const [refetchData, setRefetchData] = useState(false);
+
+  const isSelectingRef = useRef(false);
   const [dropPosition, setDropPosition] = useState<any>({
     top: 0,
     left: 0,
@@ -337,6 +339,7 @@ const ModernAutoCompleteDropdown: React.FC<AutoSuggestionInputProps> = ({
     setIsDisabled(disabled);
   }, [disabled]);
   const handleSuggestionClick = (suggestion: valueProps, index: number) => {
+    isSelectingRef.current = true;
     onChange({
       ...suggestion,
       id: suggestion?.id,
@@ -346,6 +349,10 @@ const ModernAutoCompleteDropdown: React.FC<AutoSuggestionInputProps> = ({
     if (type !== 'custom_select') setInputValue(suggestion.name);
     setDropOpen(false);
     setSelectedIndex(index);
+    // Reset flag after a short delay to allow blur handler to check it
+    setTimeout(() => {
+      isSelectingRef.current = false;
+    }, 100);
   };
   const handleOpen = (e: any) => {
     if (!suggestions || suggestions?.length === 0) handleDropData();
@@ -512,6 +519,12 @@ const ModernAutoCompleteDropdown: React.FC<AutoSuggestionInputProps> = ({
   //   return 'bottom'
   // }
   const selectExactMatchFromSuggestions = () => {
+    // If user is clicking on dropdown, don't execute exact match logic
+    if (isSelectingRef.current) {
+      isSelectingRef.current = false;
+      return;
+    }
+
     if (!inputValue) {
       return;
     }
@@ -652,7 +665,40 @@ const ModernAutoCompleteDropdown: React.FC<AutoSuggestionInputProps> = ({
 
         case 'Enter':
           e.preventDefault();
-          handleSuggestionClick(filteredData[selectedIndex], selectedIndex);
+          if (filteredData[selectedIndex]) {
+            handleSuggestionClick(filteredData[selectedIndex], selectedIndex);
+          }
+          break;
+
+        case 'Tab':
+          // Tab should check for exact match first, then select highlighted item if no exact match
+          if (inputValue && filteredData && filteredData.length > 0) {
+            const normalizedInput = inputValue.toString().trim().toLowerCase();
+            const exactMatchIndex = filteredData.findIndex((item: valueProps) => {
+              const name = item?.name?.toString().trim().toLowerCase();
+              const label = item?.label?.toString().trim().toLowerCase();
+              return name === normalizedInput || label === normalizedInput;
+            });
+
+            if (exactMatchIndex >= 0) {
+              // Exact match found - select it
+              isSelectingRef.current = true;
+              handleSuggestionClick(filteredData[exactMatchIndex], exactMatchIndex);
+            } else if (filteredData[selectedIndex]) {
+              // No exact match but has highlighted item - select highlighted item
+              isSelectingRef.current = true;
+              handleSuggestionClick(filteredData[selectedIndex], selectedIndex);
+            } else {
+              // No exact match and no highlighted item - trigger invalid value action
+              onChange({ id: undefined, name: inputValue, from: 4 });
+              setInputValue('');
+            }
+          } else if (inputValue && (!filteredData || filteredData.length === 0)) {
+            // No suggestions available - trigger invalid value action
+            onChange({ id: undefined, name: inputValue, from: 4 });
+            setInputValue('');
+          }
+          // Don't prevent default - allow Tab to move focus
           break;
 
         case 'Escape':
@@ -704,6 +750,10 @@ const ModernAutoCompleteDropdown: React.FC<AutoSuggestionInputProps> = ({
                     }  cursor-pointer p-1  text-xxs ps-3.5 pl-[10px] qbs-autocomplete-suggections-items`}
                     key={suggestion?.id}
                     data-testid={suggestion.name}
+                    onMouseDown={(e) => {
+                      e.preventDefault(); // Prevent input blur before click
+                      isSelectingRef.current = true;
+                    }}
                     onClick={() => handleSuggestionClick(suggestion, index)}
                     tabIndex={index}
                     ref={(el) => (itemRefs.current[index] = el)}
@@ -844,9 +894,25 @@ const ModernAutoCompleteDropdown: React.FC<AutoSuggestionInputProps> = ({
               type="text"
               readOnly={readOnly ?? type === 'custom_select'}
               value={inputValue ? inputValue : ''}
-              onBlur={() => {
-                handleClearInputValue();
-                selectExactMatchFromSuggestions();
+              onBlur={(e) => {
+                // Check immediately if user is selecting (Tab or click)
+                const wasSelecting = isSelectingRef.current;
+                
+                // Delay to allow click events on dropdown to process first
+                setTimeout(() => {
+                  // Check if focus moved to dropdown or if user is selecting
+                  const relatedTarget = e.relatedTarget as Node;
+                  if (
+                    wasSelecting ||
+                    (dropdownref.current &&
+                      relatedTarget &&
+                      dropdownref.current.contains(relatedTarget))
+                  ) {
+                    return; // User selected an item or focus moved to dropdown, don't execute exact match
+                  }
+                  handleClearInputValue();
+                  selectExactMatchFromSuggestions();
+                }, 200);
               }}
               autoComplete="off"
               disabled={disabled}