react-core-ts 1.9.5 → 1.9.7

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": "1.9.5",
+  "version": "1.9.7",
   "description": "React Components",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/AutoCompleteWithSelectedList.tsx

@@ -115,7 +115,6 @@ const AutoCompleteWithSelectedList = forwardRef<
     const [refetchData, setRefetchData] = useState(false);
     const [allDataLoaded, setAllDataLoaded] = useState(false);
 
-
     let originalOverflow = '';
     let hasScrollbar = false;
 
@@ -148,7 +147,12 @@ const AutoCompleteWithSelectedList = forwardRef<
 
           setSelHeight(defaultHeight);
         } else if (spaceAbove >= dropdownHeight) {
-          const sHeight = tabInlineSearch ? 73 : 113;
+          let sHeight = tabInlineSearch ? 73 : 113;
+          sHeight =
+            sHeight -
+            (filteredData?.length > 0 && enableSelectAll && isMultiple
+              ? 32
+              : 0);
           dropLevelRef.current = 'top';
           dropdownPosition.top =
             inputRect.top +
@@ -214,10 +218,18 @@ const AutoCompleteWithSelectedList = forwardRef<
           setSelectedItems((prev) => {
             const isAdded =
               prev && prev.length > 0
-                ? prev.some((item) => item[descId] === suggestion[descId])
+                ? prev.some(
+                    (item) =>
+                      item[descId]?.toString().toLowerCase() ===
+                      suggestion[descId]?.toString().toLowerCase()
+                  )
                 : false;
             if (isAdded) {
-              return prev.filter((item) => item[descId] !== suggestion[descId]);
+              return prev.filter(
+                (item) =>
+                  item[descId]?.toString().toLowerCase() !==
+                  suggestion[descId]?.toString().toLowerCase()
+              );
             } else {
               return [...prev, suggestion];
             }
@@ -257,7 +269,9 @@ const AutoCompleteWithSelectedList = forwardRef<
         } else {
           setSelectedItems((prev) => {
             return prev.filter(
-              (item, i) => item[descId] !== suggestion[descId]
+              (item, i) =>
+                item[descId]?.toString().toLowerCase() !==
+                suggestion[descId]?.toString().toLowerCase()
             );
           });
         }
@@ -299,7 +313,7 @@ const AutoCompleteWithSelectedList = forwardRef<
       const trimStart = value.trimStart();
       setSearchValue(trimStart);
       handleChangeWithDebounce(trimStart);
-      setAllDataLoaded(false)
+      setAllDataLoaded(false);
     };
 
     const handleClear = () => {
@@ -319,6 +333,7 @@ const AutoCompleteWithSelectedList = forwardRef<
       setShowAllSelected(false);
       setSearchValue('');
       if (isMultiple) onChange([]);
+      if (async) resetSuggections?.();
       else onChange({ [descId]: '', [desc]: '' });
     };
 
@@ -333,18 +348,6 @@ const AutoCompleteWithSelectedList = forwardRef<
       });
     };
 
-    useEffect(() => {
-      if (isInitialRender) {
-        setIsInitialRender(false);
-      } else {
-        onChange(selectedItems);
-      }
-
-      adjustDropdownPosition();
-      setTimeout(() => {
-        adjustDropdownPosition();
-      }, 200);
-    }, [selectedItems]);
     const uniqueDropArrowId = `${name}-drop-arrow-selected-list-icon`;
     useEffect(() => {
       const handleClickOutside = (event: any) => {
@@ -412,6 +415,19 @@ const AutoCompleteWithSelectedList = forwardRef<
       matchFromStart
     );
 
+    useEffect(() => {
+      if (isInitialRender) {
+        setIsInitialRender(false);
+      } else {
+        onChange(selectedItems);
+      }
+
+      adjustDropdownPosition();
+      setTimeout(() => {
+        adjustDropdownPosition();
+      }, 200);
+    }, [selectedItems, filteredData]);
+
     useEffect(() => {
       // Handle keyboard navigation
       const handleKeyDown = (e: any) => {
@@ -477,10 +493,19 @@ const AutoCompleteWithSelectedList = forwardRef<
     ): boolean => {
       if (Array.isArray(selectedItems)) {
         return selectedItems.some(
-          (selectedItem) => selectedItem[desc] === item[desc] || selectedItem[descId] === item[descId]
+          (selectedItem) =>
+            selectedItem[desc]?.toString().toLowerCase() ===
+              item[desc]?.toString().toLowerCase() ||
+            selectedItem[descId]?.toString().toLowerCase() ===
+              item[descId]?.toString().toLowerCase()
         );
       } else {
-        return item[desc] === selectedItems || item[descId] === selectedItems;
+        return (
+          item[desc]?.toString().toLowerCase() ===
+            selectedItems?.toString().toLowerCase() ||
+          item[descId]?.toString().toLowerCase() ===
+            selectedItems?.toString().toLowerCase()
+        );
       }
     };
 
@@ -680,14 +705,21 @@ const AutoCompleteWithSelectedList = forwardRef<
         if (selectAll) {
           setSelectedItems((prev) =>
             prev.filter(
-              (item) => !filteredData.some((f) => f[descId] === item[descId])
+              (item) =>
+                !filteredData.some(
+                  (f) =>
+                    f[descId]?.toString().toLowerCase() ===
+                    item[descId]?.toString().toLowerCase()
+                )
             )
           );
         } else {
           filteredData.map((suggestion: ValueProps) =>
             setSelectedItems((prev) => {
               const isAdded = prev.some(
-                (item) => item[descId] === suggestion[descId]
+                (item) =>
+                  item[descId]?.toString().toLowerCase() ===
+                  suggestion[descId]?.toString().toLowerCase()
               );
               if (isAdded) {
                 return prev;
@@ -705,11 +737,11 @@ const AutoCompleteWithSelectedList = forwardRef<
         if (autoDropdown && (inputValue === '' || inputValue.trim() === '')) {
           handlePickSuggestions('*', 1);
           setRefetchData(false);
-          setAllDataLoaded(true)
+          setAllDataLoaded(true);
         } else if (!refetchData && inputValue !== '') {
           handlePickSuggestions(inputValue, 1);
           setRefetchData(true);
-          setAllDataLoaded(false)
+          setAllDataLoaded(false);
         }
       }
     };
@@ -718,7 +750,11 @@ const AutoCompleteWithSelectedList = forwardRef<
       const allSelected =
         filteredData.length > 0 &&
         filteredData.every((item) =>
-          selectedItems.some((s) => s[descId] === item[descId])
+          selectedItems.some(
+            (s) =>
+              s[descId]?.toString().toLowerCase() ===
+              item[descId]?.toString().toLowerCase()
+          )
         );
 
       setSelectAll(allSelected);

package/src/ExpandableAutoComplete.tsx

@@ -14,7 +14,7 @@ import InputActions from './components/InputActions';
 import { useSuggestions } from './utilities/autosuggestions';
 import { debounce } from './utilities/debounce';
 import { deepEqual } from './utilities/deepEqual';
-import { default as Tooltip } from './utilities/expandableTootltip';
+import { default as Tooltip } from './utilities/NewTooltip';
 import { filterSuggestions } from './utilities/filterSuggestions';
 import { AllDropArrow, Search, Spinner } from './utilities/icons';
 
@@ -108,11 +108,16 @@ const ExpandableAutoComplete = forwardRef<
         const spaceBelow = window.innerHeight - inputRect.bottom;
         const spaceAbove = inputRect.top + window.scrollY;
 
-        const dropdownHeight = 275; // Assume a fixed height or calculate based on content
+        let dropdownHeight = 275; // Assume a fixed height or calculate based on content
         if (spaceBelow >= dropdownHeight) {
           dropdownPosition.top =
             inputRect.top + window.scrollY + inputRect.height;
         } else {
+          dropdownHeight =
+            dropdownHeight +
+            (filteredData?.length > 0 && enableSelectAll && isMultiple
+              ? 32
+              : 0);
           dropdownPosition.top =
             inputRect.top + window.scrollY - dropdownHeight + 73;
         }
@@ -123,15 +128,6 @@ const ExpandableAutoComplete = forwardRef<
       }
     };
 
-    useEffect(() => {
-      window.addEventListener('resize', adjustDropdownPosition);
-      adjustDropdownPosition();
-
-      return () => {
-        window.removeEventListener('resize', adjustDropdownPosition);
-      };
-    }, [dropOpen, selectedItems]);
-
     const { suggestions, isLoading, handlePickSuggestions } = useSuggestions(
       getData,
       data,
@@ -154,10 +150,16 @@ const ExpandableAutoComplete = forwardRef<
           setFocusedIndex(idx);
           setSelectedItems((prev) => {
             const isAdded = prev.some(
-              (item) => item[descId] === suggestion[descId]
+              (item) =>
+                item[descId]?.toString().toLowerCase() ===
+                suggestion[descId]?.toString().toLowerCase()
             );
             if (isAdded) {
-              return prev.filter((item) => item[descId] !== suggestion[descId]);
+              return prev.filter(
+                (item) =>
+                  item[descId]?.toString().toLowerCase() !==
+                  suggestion[descId]?.toString().toLowerCase()
+              );
             } else {
               return [...prev, suggestion];
             }
@@ -196,7 +198,9 @@ const ExpandableAutoComplete = forwardRef<
         } else {
           setSelectedItems((prev) => {
             return prev.filter(
-              (item, i) => item[descId] !== suggestion[descId]
+              (item, i) =>
+                item[descId]?.toString().toLowerCase() !==
+                suggestion[descId]?.toString().toLowerCase()
             );
           });
         }
@@ -327,6 +331,15 @@ const ExpandableAutoComplete = forwardRef<
       matchFromStart
     );
 
+    useEffect(() => {
+      window.addEventListener('resize', adjustDropdownPosition);
+      adjustDropdownPosition();
+
+      return () => {
+        window.removeEventListener('resize', adjustDropdownPosition);
+      };
+    }, [dropOpen, selectedItems, filteredData]);
+
     useEffect(() => {
       // Handle keyboard navigation
       const handleKeyDown = (e: any) => {
@@ -391,10 +404,19 @@ const ExpandableAutoComplete = forwardRef<
     ): boolean => {
       if (Array.isArray(selectedItems)) {
         return selectedItems.some(
-          (selectedItem) => selectedItem[desc] === item[desc] || selectedItem[descId] === item[descId]
+          (selectedItem) =>
+            selectedItem[desc]?.toString().toLowerCase() ===
+              item[desc]?.toString().toLowerCase() ||
+            selectedItem[descId]?.toString().toLowerCase() ===
+              item[descId]?.toString().toLowerCase()
         );
       } else {
-        return item[desc] === selectedItems || item[descId] === selectedItems;
+        return (
+          item[desc]?.toString().toLowerCase() ===
+            selectedItems?.toString().toLowerCase() ||
+          item[descId]?.toString().toLowerCase() ===
+            selectedItems?.toString().toLowerCase()
+        );
       }
     };
 
@@ -441,14 +463,21 @@ const ExpandableAutoComplete = forwardRef<
         if (selectAll) {
           setSelectedItems((prev) =>
             prev.filter(
-              (item) => !filteredData.some((f) => f[descId] === item[descId])
+              (item) =>
+                !filteredData.some(
+                  (f) =>
+                    f[descId]?.toString().toLowerCase() ===
+                    item[descId]?.toString().toLowerCase()
+                )
             )
           );
         } else {
           filteredData.map((suggestion: ValueProps) =>
             setSelectedItems((prev) => {
               const isAdded = prev.some(
-                (item) => item[descId] === suggestion[descId]
+                (item) =>
+                  item[descId]?.toString().toLowerCase() ===
+                  suggestion[descId]?.toString().toLowerCase()
               );
               if (isAdded) {
                 return prev;
@@ -480,7 +509,11 @@ const ExpandableAutoComplete = forwardRef<
       const allSelected =
         filteredData.length > 0 &&
         filteredData.every((item) =>
-          selectedItems.some((s) => s[descId] === item[descId])
+          selectedItems.some(
+            (s) =>
+              s[descId]?.toString().toLowerCase() ===
+              item[descId]?.toString().toLowerCase()
+          )
         );
 
       setSelectAll(allSelected);