react-core-ts 1.9.4 → 1.9.6

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,7 +1,6 @@
 {
   "name": "react-core-ts",
-
-  "version": "1.9.4",
+  "version": "1.9.6",
   "description": "React Components",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/AutoCompleteWithSelectedList.tsx

@@ -15,7 +15,7 @@ import { useSuggestions } from './utilities/autosuggestions';
 import { debounce } from './utilities/debounce';
 import { deepEqual } from './utilities/deepEqual';
 import { filterSuggestions } from './utilities/filterSuggestions';
-import { DropArrow, Search, Spinner } from './utilities/icons';
+import { AllDropArrow, DropArrow, Search, Spinner } from './utilities/icons';
 import { default as Tooltip } from './utilities/NewTooltip';
 
 const AutoCompleteWithSelectedList = forwardRef<
@@ -70,7 +70,9 @@ const AutoCompleteWithSelectedList = forwardRef<
       shortCode = '',
       labelCode = '',
       tabInlineSearch = true,
-      matchFromStart = false
+      matchFromStart = false,
+      autoDropdown = false,
+      enableSelectAll = false,
     },
     ref
   ) => {
@@ -101,6 +103,7 @@ const AutoCompleteWithSelectedList = forwardRef<
     const inputRef = useRef(null);
     const dropRef = useRef(null);
     const inputSearchRef = useRef(null);
+    const dropBtnRef = useRef<HTMLButtonElement>(null);
     useImperativeHandle(ref, () => inputRef.current);
     const [dropdownStyle, setDropdownStyle] = useState({
       top: 0,
@@ -108,6 +111,10 @@ const AutoCompleteWithSelectedList = forwardRef<
       width: 200,
     });
 
+    const [selectAll, setSelectAll] = useState(false);
+    const [refetchData, setRefetchData] = useState(false);
+    const [allDataLoaded, setAllDataLoaded] = useState(false);
+
     let originalOverflow = '';
     let hasScrollbar = false;
 
@@ -140,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 +
@@ -291,6 +303,7 @@ const AutoCompleteWithSelectedList = forwardRef<
       const trimStart = value.trimStart();
       setSearchValue(trimStart);
       handleChangeWithDebounce(trimStart);
+      setAllDataLoaded(false);
     };
 
     const handleClear = () => {
@@ -310,6 +323,7 @@ const AutoCompleteWithSelectedList = forwardRef<
       setShowAllSelected(false);
       setSearchValue('');
       if (isMultiple) onChange([]);
+      if (async) resetSuggections?.();
       else onChange({ [descId]: '', [desc]: '' });
     };
 
@@ -324,18 +338,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) => {
@@ -403,6 +405,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) => {
@@ -468,10 +483,12 @@ const AutoCompleteWithSelectedList = forwardRef<
     ): boolean => {
       if (Array.isArray(selectedItems)) {
         return selectedItems.some(
-          (selectedItem) => selectedItem[desc] === item[desc]
+          (selectedItem) =>
+            selectedItem[desc] === item[desc] ||
+            selectedItem[descId] === item[descId]
         );
       } else {
-        return item[desc] === selectedItems;
+        return item[desc] === selectedItems || item[descId] === selectedItems;
       }
     };
 
@@ -665,6 +682,56 @@ const AutoCompleteWithSelectedList = forwardRef<
         </ul>
       );
     };
+
+    const handleSelectAll = () => {
+      if (isMultiple) {
+        if (selectAll) {
+          setSelectedItems((prev) =>
+            prev.filter(
+              (item) => !filteredData.some((f) => f[descId] === item[descId])
+            )
+          );
+        } else {
+          filteredData.map((suggestion: ValueProps) =>
+            setSelectedItems((prev) => {
+              const isAdded = prev.some(
+                (item) => item[descId] === suggestion[descId]
+              );
+              if (isAdded) {
+                return prev;
+              } else {
+                return [...prev, suggestion];
+              }
+            })
+          );
+        }
+      }
+    };
+
+    const handleOpenDropdown = (e: any) => {
+      if (!suggestions || suggestions?.length === 0 || refetchData) {
+        if (autoDropdown && (inputValue === '' || inputValue.trim() === '')) {
+          handlePickSuggestions('*', 1);
+          setRefetchData(false);
+          setAllDataLoaded(true);
+        } else if (!refetchData && inputValue !== '') {
+          handlePickSuggestions(inputValue, 1);
+          setRefetchData(true);
+          setAllDataLoaded(false);
+        }
+      }
+    };
+
+    useEffect(() => {
+      const allSelected =
+        filteredData.length > 0 &&
+        filteredData.every((item) =>
+          selectedItems.some((s) => s[descId] === item[descId])
+        );
+
+      setSelectAll(allSelected);
+    }, [filteredData, selectedItems, descId]);
+
     useEffect(() => {
       handleUpdateParent?.(dropOpen, dropLevelRef.current);
     }, [dropOpen, dropLevelRef.current]);
@@ -818,7 +885,7 @@ const AutoCompleteWithSelectedList = forwardRef<
                       tabInlineSearch && (
                         <div
                           style={{ position: 'relative' }}
-                          className="react-core-ts-search-container"
+                          className="react-core-ts-search-container qbs-autocomplete-selected-suggestions-outer"
                         >
                           <span className="dropdown-search-icon">
                             <Search />
@@ -831,13 +898,70 @@ const AutoCompleteWithSelectedList = forwardRef<
                             autoComplete="off"
                             ref={inputSearchRef}
                           />
+
+                          <>
+                            {autoDropdown && !disabled && !readOnly && (
+                              <button
+                                disabled={disabled ?? readOnly}
+                                onClick={(e) => handleOpenDropdown(e)}
+                                className="text-[#667085] focus-visible:outline-slate-100 absolute right-2 qbs-all-dropdown-btn"
+                                data-testid="drop-arrow"
+                                type="button"
+                                id="autocomplete-drop-icon"
+                                ref={dropBtnRef}
+                              >
+                                <AllDropArrow
+                                  type={!allDataLoaded ? 'down' : 'up'}
+                                  uniqueId="all-dropdow-arrow-icon"
+                                  className="all-dropdow-arrow-icon"
+                                />
+                              </button>
+                            )}
+                          </>
                         </div>
                       )}
                   </>
                 )}
 
+                {filteredData?.length > 0 && enableSelectAll && isMultiple && (
+                  <div
+                    id="select-all"
+                    className={`qbs-select-all-link qbs-cursor-pointer qbs-text-xs`}
+                    onClick={handleSelectAll}
+                  >
+                    <div
+                      className={`qbs-autocomplete-listitem-container qbs-autocomplete-checkbox-container`}
+                    >
+                      <div className="qbs-autocomplete-checkbox">
+                        <input
+                          type="checkbox"
+                          checked={selectAll}
+                          id={`qbs-checkbox-all`}
+                        />
+                        <label htmlFor={`qbs-checkbox-all`}>
+                          <svg
+                            width="8"
+                            height="6"
+                            viewBox="0 0 8 6"
+                            fill="none"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M0 3.21739L2.89883 6L8 1.06994L6.89494 0L2.89883 3.86768L1.09728 2.14745L0 3.21739Z"
+                              fill="white"
+                            />
+                          </svg>
+                        </label>
+                      </div>
+                      <div className={`qbs-autocomplete-suggestions-item`}>
+                        Select All
+                      </div>
+                    </div>
+                  </div>
+                )}
+
                 <div
-                  className={`qbs-autocomplete-suggestions-sub ${
+                  className={`qbs-autocomplete-suggestions-sub qbs-autocomplete-selected-suggestions-outer ${
                     viewMode ? 'hidden' : ''
                   }`}
                   ref={itemsRef}

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';
 
@@ -65,6 +65,7 @@ const ExpandableAutoComplete = forwardRef<
       typeOnlyFetch = false,
       autoDropdown = false,
       enableSelectAll = false,
+      matchFromStart = false,
     },
     ref
   ) => {
@@ -107,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;
         }
@@ -122,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,
@@ -321,9 +318,20 @@ const ExpandableAutoComplete = forwardRef<
       desc,
       selected,
       async,
-      isTreeDropdown
+      isTreeDropdown,
+      true,
+      matchFromStart
     );
 
+    useEffect(() => {
+      window.addEventListener('resize', adjustDropdownPosition);
+      adjustDropdownPosition();
+
+      return () => {
+        window.removeEventListener('resize', adjustDropdownPosition);
+      };
+    }, [dropOpen, selectedItems, filteredData]);
+
     useEffect(() => {
       // Handle keyboard navigation
       const handleKeyDown = (e: any) => {
@@ -388,10 +396,12 @@ const ExpandableAutoComplete = forwardRef<
     ): boolean => {
       if (Array.isArray(selectedItems)) {
         return selectedItems.some(
-          (selectedItem) => selectedItem[desc] === item[desc]
+          (selectedItem) =>
+            selectedItem[desc] === item[desc] ||
+            selectedItem[descId] === item[descId]
         );
       } else {
-        return item[desc] === selectedItems;
+        return item[desc] === selectedItems || item[descId] === selectedItems;
       }
     };
 

package/src/styles/components/selectedautocomplete.css

@@ -117,9 +117,26 @@
 .qbs-hidden {
   display: none;
 }
+.qbs-autocomplete-selected-suggestions {
+  padding: 8px 0px;
+}
 .qbs-autocomplete-selected-suggestions .qbs-autocomplete-suggestions-sub {
   min-height: 184px;
 }
+.qbs-autocomplete-selected-suggestions .qbs-autocomplete-selected-suggestions-outer {
+  padding: 0px 8px;
+}
+.qbs-autocomplete-selected-suggestions .qbs-autocomplete-listitem-container{
+  padding-top: 0px;
+  padding-left: 4px;
+  padding-right: 4px;
+}
+.qbs-autocomplete-selected-suggestions .qbs-autocomplete-selected-suggestions-outer span.dropdown-search-icon {
+  left: 16px;
+}
+.qbs-autocomplete-selected-suggestions .qbs-autocomplete-selected-suggestions-outer .qbs-all-dropdown-btn {
+  right: 16px;
+}
 .selected-items-outer-container {
   display: flex;
   gap: 5px;