react-core-ts 1.2.29 → 1.2.31

package/src/AutoComplete.tsx

@@ -1,4 +1,4 @@
-import Tooltip from "./utilities/tooltip";
+import Tooltip from './utilities/tooltip';
 import React, {
   forwardRef,
   useCallback,
@@ -6,14 +6,14 @@ import React, {
   useImperativeHandle,
   useRef,
   useState,
-} from "react";
+} from 'react';
 
-import { AutoSuggestionInputProps } from "./commontypes";
-import { useSuggestions } from "./utilities/autosuggestions";
-import { debounce } from "./utilities/debounce";
-import { deepEqual } from "./utilities/deepEqual";
-import { filterSuggestions } from "./utilities/filterSuggestions";
-import { Close, DropArrow, Search, Spinner } from "./utilities/icons";
+import { AutoSuggestionInputProps } from './commontypes';
+import { useSuggestions } from './utilities/autosuggestions';
+import { debounce } from './utilities/debounce';
+import { deepEqual } from './utilities/deepEqual';
+import { filterSuggestions } from './utilities/filterSuggestions';
+import { Close, DropArrow, Search, Spinner } from './utilities/icons';
 
 type ValueProps = {
   [key: string]: string;
@@ -31,14 +31,14 @@ const AutoComplete = forwardRef<HTMLInputElement, AutoSuggestionInputProps>(
       fullWidth = false,
       placeholder,
       id,
-      type = "custom_select",
+      type = 'custom_select',
       selectedItems: propsSeelctedItems = [],
       readOnly = false,
       disabled = false,
       value,
       isMultiple = false,
-      desc = "name",
-      descId = "id",
+      desc = 'name',
+      descId = 'id',
       singleSelect,
       className,
       async = false,
@@ -57,12 +57,12 @@ const AutoComplete = forwardRef<HTMLInputElement, AutoSuggestionInputProps>(
     const [isInitialRender, setIsInitialRender] = useState(true);
 
     const [inputValue, setInputValue] = useState<string>(value);
-    const [searchValue, setSearchValue] = useState<string>("");
+    const [searchValue, setSearchValue] = useState<string>('');
     const [nextPage, setNextPage] = useState<number | undefined>(1);
     const [dropOpen, setDropOpen] = useState<boolean>(false);
     const [selectedItems, setSelectedItems] = useState<ValueProps[]>([]);
     // API call for suggestions through a custom hook
-    const [dropdownPosition, setDropdownPosition] = useState("bottom");
+    const [dropdownPosition, setDropdownPosition] = useState('bottom');
     const inputRef = useRef(null);
     const dropRef = useRef(null);
     useImperativeHandle(ref, () => inputRef.current);
@@ -75,19 +75,19 @@ const AutoComplete = forwardRef<HTMLInputElement, AutoSuggestionInputProps>(
         const spaceAbove = inputBoxRect.top;
         const spaceBelow = viewportHeight - inputBoxRect.bottom;
         if (spaceAbove > spaceBelow) {
-          setDropdownPosition("top");
+          setDropdownPosition('top');
         } else {
-          setDropdownPosition("bottom");
+          setDropdownPosition('bottom');
         }
       }
     };
 
     useEffect(() => {
-      window.addEventListener("resize", adjustDropdownPosition);
+      window.addEventListener('resize', adjustDropdownPosition);
       adjustDropdownPosition();
 
       return () => {
-        window.removeEventListener("resize", adjustDropdownPosition);
+        window.removeEventListener('resize', adjustDropdownPosition);
       };
     }, [dropOpen]);
 
@@ -120,7 +120,7 @@ const AutoComplete = forwardRef<HTMLInputElement, AutoSuggestionInputProps>(
         });
       } else {
         setInputValue(suggestion[desc]);
-        setSearchValue("");
+        setSearchValue('');
         onChange(suggestion);
         setDropOpen(false);
       }
@@ -128,7 +128,7 @@ const AutoComplete = forwardRef<HTMLInputElement, AutoSuggestionInputProps>(
 
     // Adding debounce to avoid making API calls on every keystroke
     const handleChangeWithDebounce = debounce((value) => {
-      if ((type === "auto_complete" || type === "auto_suggestion") && async) {
+      if ((type === 'auto_complete' || type === 'auto_suggestion') && async) {
         handlePickSuggestions(value, 1);
       }
     }, 1000);
@@ -150,7 +150,7 @@ const AutoComplete = forwardRef<HTMLInputElement, AutoSuggestionInputProps>(
           setInputValue(suggestion[desc]);
           onChange(suggestion);
         } else {
-          setInputValue("");
+          setInputValue('');
         }
       }
     };
@@ -160,7 +160,7 @@ const AutoComplete = forwardRef<HTMLInputElement, AutoSuggestionInputProps>(
     }, [propsSeelctedItems]);
     // Effect to set the input value whenever `value` prop changes
     useEffect(() => {
-      setInputValue(value ?? "");
+      setInputValue(value ?? '');
     }, [value]);
 
     const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -169,8 +169,8 @@ const AutoComplete = forwardRef<HTMLInputElement, AutoSuggestionInputProps>(
       setSearchValue(value);
       handleChangeWithDebounce(value);
       if (!value) {
-        setInputValue("");
-        onChange({ [descId]: "", [desc]: "" });
+        setInputValue('');
+        onChange({ [descId]: '', [desc]: '' });
       }
     };
     const handleSuggestionChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -188,18 +188,18 @@ const AutoComplete = forwardRef<HTMLInputElement, AutoSuggestionInputProps>(
 
     const handleClear = () => {
       if (searchValue) {
-        setSearchValue("");
+        setSearchValue('');
         setDropOpen(false);
       } else {
-        setInputValue("");
-        onChange({ [descId]: "", [desc]: "" });
+        setInputValue('');
+        onChange({ [descId]: '', [desc]: '' });
         setDropOpen(false);
       }
     };
 
     const generateClassName = useCallback(() => {
       return `qbs-textfield-default ${className} ${
-        errors && errors?.message ? "textfield-error" : "textfield"
+        errors && errors?.message ? 'textfield-error' : 'textfield'
       }`;
     }, [errors, name]);
     const handleRemoveSelectedItem = (index: number) => {
@@ -224,12 +224,12 @@ const AutoComplete = forwardRef<HTMLInputElement, AutoSuggestionInputProps>(
           !dropdownRef.current.contains(event.target)
         ) {
           setDropOpen(false);
-          setSearchValue("");
+          setSearchValue('');
         }
       };
-      document.addEventListener("mousedown", handleClickOutside as any);
+      document.addEventListener('mousedown', handleClickOutside as any);
       return () => {
-        document.removeEventListener("mousedown", handleClickOutside as any);
+        document.removeEventListener('mousedown', handleClickOutside as any);
       };
     }, []);
 
@@ -264,24 +264,24 @@ const AutoComplete = forwardRef<HTMLInputElement, AutoSuggestionInputProps>(
     };
 
     const handleOnClick = () => {
-      !disabled && !readOnly ? setDropOpen(true) : "";
+      !disabled && !readOnly ? setDropOpen(true) : '';
     };
     const tooltipContent =
       selectedItems?.length > 1
         ? selectedItems
             ?.slice(1)
             .map((item) => item[desc])
-            .join(", ")
-        : "";
+            .join(', ')
+        : '';
 
     return (
-      <div className={fullWidth ? "fullWidth" : "autoWidth"} ref={dropdownRef}>
+      <div className={fullWidth ? 'fullWidth' : 'autoWidth'} ref={dropdownRef}>
         {label && (
           <div
             style={{
               marginBottom: 5,
-              display: "flex",
-              justifyContent: "space-between",
+              display: 'flex',
+              justifyContent: 'space-between',
             }}
           >
             <label className={`labels label-text`}>
@@ -295,7 +295,7 @@ const AutoComplete = forwardRef<HTMLInputElement, AutoSuggestionInputProps>(
         )}
         {/* Displaying selected items for multi-select */}
 
-        <div style={{ position: "relative" }}>
+        <div style={{ position: 'relative' }}>
           <div className="selected-items-container ">
             {selectedItems?.length > 0 && (
               <>
@@ -328,7 +328,7 @@ const AutoComplete = forwardRef<HTMLInputElement, AutoSuggestionInputProps>(
             ref={inputRef}
             type="text"
             value={
-              type === "auto_suggestion"
+              type === 'auto_suggestion'
                 ? inputValue
                 : searchValue || inputValue
             }
@@ -337,9 +337,9 @@ const AutoComplete = forwardRef<HTMLInputElement, AutoSuggestionInputProps>(
             onFocus={onFocus}
             onClick={() => handleOnClick()}
             className={generateClassName()}
-            placeholder={selectedItems?.length > 0 ? "" : placeholder ?? ""}
+            placeholder={selectedItems?.length > 0 ? '' : placeholder ?? ''}
             readOnly={
-              readOnly || type === "custom_select" || type == "auto_suggestion"
+              readOnly || type === 'custom_select' || type == 'auto_suggestion'
             }
             disabled={disabled}
             data-testid="custom-autocomplete"
@@ -376,9 +376,9 @@ const AutoComplete = forwardRef<HTMLInputElement, AutoSuggestionInputProps>(
               ref={dropRef}
               className={`qbs-autocomplete-suggestions ${dropdownPosition}`}
             >
-              {type == "auto_suggestion" && (
+              {type == 'auto_suggestion' && (
                 <div
-                  style={{ position: "relative" }}
+                  style={{ position: 'relative' }}
                   className="react-core-ts-search-container"
                 >
                   <span className="dropdown-search-icon">
@@ -410,9 +410,9 @@ const AutoComplete = forwardRef<HTMLInputElement, AutoSuggestionInputProps>(
                       key={idx.toString()}
                       className={`qbs-autocomplete-listitem-container ${
                         (isMultiple || singleSelect) &&
-                        "qbs-autocomplete-checkbox-container"
+                        'qbs-autocomplete-checkbox-container'
                       } ${
-                        isSelected(suggestion, selected) ? "is-selected" : ""
+                        isSelected(suggestion, selected) ? 'is-selected' : ''
                       }`}
                     >
                       {(isMultiple || singleSelect) && (
@@ -442,7 +442,7 @@ const AutoComplete = forwardRef<HTMLInputElement, AutoSuggestionInputProps>(
                       <li
                         key={idx}
                         className={`qbs-autocomplete-suggestions-item ${
-                          isSelected(suggestion, selected) ? "is-selected" : ""
+                          isSelected(suggestion, selected) ? 'is-selected' : ''
                         }`}
                         onClick={() => handleSuggestionClick(suggestion)}
                         data-testid={suggestion[desc]}
@@ -455,7 +455,7 @@ const AutoComplete = forwardRef<HTMLInputElement, AutoSuggestionInputProps>(
                   <>
                     {isLoading ? (
                       <div
-                        style={{ display: "flex", justifyContent: "center" }}
+                        style={{ display: 'flex', justifyContent: 'center' }}
                       >
                         <span>
                           <Spinner />
@@ -466,7 +466,7 @@ const AutoComplete = forwardRef<HTMLInputElement, AutoSuggestionInputProps>(
                         className="qbs-autocomplete-notfound"
                         onClick={handleBlur}
                       >
-                        {notDataMessage ?? "No Results Found"}
+                        {notDataMessage ?? 'No Results Found'}
                       </li>
                     )}
                   </>

package/src/AutoCompleteWithSelectedList.tsx

@@ -108,14 +108,13 @@ const AutoCompleteWithSelectedList = forwardRef<
         };
         // Check if there's enough space below the input for the dropdown
         const spaceBelow = window.innerHeight - inputRect.bottom;
-        const spaceAbove = inputRect.top + window.scrollY;
         let dropdownHeight = viewMode ? 160 : 380; // Assume a fixed height or calculate based on content
 
         if (countOnly && !viewMode) {
           // if (dropdownSelectedRef?.current) {
           //   dropdownHeight += dropdownSelectedRef?.current?.clientHeight;
           // }
-          dropdownHeight += type === 'auto_suggestion' ? 210 : 192;
+          dropdownHeight += type === 'auto_suggestion' ? 220 : 192;
         }
 
         if (tab.length > 0) {
@@ -130,9 +129,11 @@ const AutoCompleteWithSelectedList = forwardRef<
             ? inputRect.top + window.scrollY - dropdownHeight + 18 + topMargin
             : inputRect.top + window.scrollY - dropdownHeight + 73 + topMargin;
         }
-        setDropdownStyle({
-          ...dropdownPosition,
-        });
+        setTimeout(() => {
+          setDropdownStyle({
+            ...dropdownPosition,
+          });
+        }, 100);
       }
     };
 
@@ -143,7 +144,7 @@ const AutoCompleteWithSelectedList = forwardRef<
       return () => {
         window.removeEventListener('resize', adjustDropdownPosition);
       };
-    }, [selectedItems, expandArrowClick]);
+    }, [selectedItems, expandArrowClick, dropOpen]);
 
     const { suggestions, isLoading, handlePickSuggestions } = useSuggestions(
       getData,
@@ -398,17 +399,10 @@ const AutoCompleteWithSelectedList = forwardRef<
     const handleDropOpen = async (e: any) => {
       e.stopPropagation();
       if (!dropOpen) setDropOpen(true);
-
-      setTimeout(() => {
-        if (viewMode) {
-          adjustDropdownPosition();
-        }
-      }, 100);
     };
 
     const handleDropClose = (e: any) => {
       e.stopPropagation();
-      console.log('handleDropClose');
       if (dropOpen) setDropOpen(false);
     };
 
@@ -486,12 +480,7 @@ const AutoCompleteWithSelectedList = forwardRef<
         </div>
       );
     };
-    useEffect(() => {
-      if (dropOpen && !viewMode) {
-        adjustDropdownPosition();
-      }
-    }, [dropOpen]);
-    console.log(dropdownStyle, 'dropdownStyle');
+
     const getTabItems = () => {
       return (
         <ul
@@ -625,7 +614,14 @@ const AutoCompleteWithSelectedList = forwardRef<
             ReactDOM.createPortal(
               <div
                 ref={dropRef}
-                style={{ ...dropdownStyle, minHeight: viewMode ? 160 : 192 }}
+                style={{
+                  ...dropdownStyle,
+                  minHeight: viewMode
+                    ? 160
+                    : type === 'auto_suggestion'
+                    ? 164
+                    : 192,
+                }}
                 className={`qbs-autocomplete-suggestions qbs-autocomplete-selected-suggestions ${
                   viewMode ? 'qbs-dropdown-selected-preview' : ''
                 } ${viewMode && selectedItems?.length === 0 ? 'hidden' : ''}`}
@@ -717,7 +713,9 @@ const AutoCompleteWithSelectedList = forwardRef<
                       ref={dropdownSelectedRef}
                     >
                       {selectedItems?.length > 0 ? (
-                        <div className={`qbs-flex qbs-w-full qbs-text-xs`}>
+                        <div
+                          className={`qbs-flex qbs-w-full qbs-text-xs items-center`}
+                        >
                           <div className="qbs-selected-lbs qbs-flex-grow">
                             Selected Items
                           </div>
@@ -731,7 +729,10 @@ const AutoCompleteWithSelectedList = forwardRef<
                           </div>
                         </div>
                       ) : (
-                        <div> No Items Selected</div>
+                        <div className="w-full flex items-center justify-center">
+                          {' '}
+                          No Items Selected
+                        </div>
                       )}
 
                       {getSelectedItems(true)}