react-core-ts 1.3.5 → 1.3.7

package/src/AutoCompleteWithSelectedList.tsx

@@ -232,7 +232,7 @@ const AutoCompleteWithSelectedList = forwardRef<
 
     const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
       const { value } = e.target;
-      setDropOpen(true);
+      //setVisibleDrop();
       setSearchValue(value);
       handleChangeWithDebounce(value);
       if (!value) {
@@ -242,7 +242,7 @@ const AutoCompleteWithSelectedList = forwardRef<
     };
     const handleSuggestionChange = (e: React.ChangeEvent<HTMLInputElement>) => {
       const { value } = e.target;
-      setDropOpen(true);
+      //setVisibleDrop();
       setSearchValue(value);
       handleChangeWithDebounce(value);
     };
@@ -303,7 +303,7 @@ const AutoCompleteWithSelectedList = forwardRef<
       window.addEventListener('scroll', handleClickOutside as any);
 
       const scrollableDivs = document.querySelectorAll(
-        'div[style*="overflow"], .overflow-auto ,overflow-y-auto overflow-x-auto'
+        'div[style*="overflow"], .overflow-auto, .overflow-y-auto, .overflow-x-auto'
       );
       scrollableDivs.forEach((div) =>
         div.addEventListener('scroll', handleClickOutside as any)
@@ -360,7 +360,7 @@ const AutoCompleteWithSelectedList = forwardRef<
 
     const handleOnClick = () => {
       (!disabled && !readOnly && !expandable && !dropOpen) || viewMode
-        ? setDropOpen(true)
+        ? setVisibleDrop()
         : '';
     };
     const onInputFocus = () => {
@@ -399,12 +399,16 @@ const AutoCompleteWithSelectedList = forwardRef<
         : '';
 
     const handleDropOpen = (e: any) => {
+      setVisibleDrop()
+    };
+
+    const setVisibleDrop = () => {
       setVisible(false);
       if (!dropOpen) setDropOpen(true);
       setTimeout(() => {
         setVisible(true);
-      }, 100);
-    };
+      }, 200);
+    }
 
     const handleDropClose = (e: any) => {
       if (dropOpen) setDropOpen(false);
@@ -620,6 +624,7 @@ const AutoCompleteWithSelectedList = forwardRef<
                 style={{
                   ...dropdownStyle,
                   minHeight: viewMode ? 100 : 192,
+                  visibility: visible ? 'visible' : 'hidden',
                 }}
                 className={`qbs-autocomplete-suggestions qbs-autocomplete-selected-suggestions ${
                   viewMode ? 'qbs-dropdown-selected-preview' : ''
@@ -675,7 +680,7 @@ const AutoCompleteWithSelectedList = forwardRef<
                         searchValue !== '' &&
                         async) ? (
                         <div className="qbs-flex qbs-align-middle qbs-justify-center qbs-min-emp-h">
-                          <div className="qbs-pt-16">
+                          <div className="qbs-pt-16 qbs-autocomplete-loader">
                             <Spinner />
                           </div>
                         </div>

package/src/AutoCompleteWithTreeStructure.tsx

@@ -245,7 +245,7 @@ const AutoCompleteWithTreeStructure = forwardRef<
       window.addEventListener("scroll", handleClickOutside as any);
 
       const scrollableDivs = document.querySelectorAll(
-        'div[style*="overflow"], .overflow-auto ,overflow-y-auto overflow-x-auto'
+        'div[style*="overflow"], .overflow-auto, .overflow-y-auto, .overflow-x-auto'
       );
       scrollableDivs.forEach((div) =>
         div.addEventListener("scroll", handleClickOutside as any)

package/src/ExpandableAutoComplete.tsx

@@ -262,7 +262,7 @@ const ExpandableAutoComplete = forwardRef<
       window.addEventListener("scroll", handleClickOutside as any);
 
       const scrollableDivs = document.querySelectorAll(
-        'div[style*="overflow"], .overflow-auto ,overflow-y-auto overflow-x-auto'
+        'div[style*="overflow"], .overflow-auto, .overflow-y-auto, .overflow-x-auto'
       );
       scrollableDivs.forEach((div) =>
         div.addEventListener("scroll", handleClickOutside as any)
@@ -340,6 +340,12 @@ const ExpandableAutoComplete = forwardRef<
       if (dropOpen) setDropOpen(false);
     };
 
+    const handleClearSelected = () => {
+      setSelectedItems([]);
+      if (isMultiple) onChange([]);
+      else onChange({ [descId]: '', [desc]: '' });
+    };
+
     return (
       <div className={fullWidth ? "fullWidth" : "autoWidth"} ref={dropdownRef}>
         {label && (
@@ -446,6 +452,15 @@ const ExpandableAutoComplete = forwardRef<
             />
           </div>
 
+          {selectedItems?.length > 1 && (
+            <div
+              className={`qbs-clear-link qbs-text-right qbs-cursor-pointer qbs-text-xs absolute right-2 bottom-1`}
+              onClick={handleClearSelected}
+            >
+              Clear all
+            </div>
+          )}
+
           {/* Icons for Clearing Input or Toggling Dropdown */}
 
           <InputActions
@@ -507,6 +522,7 @@ const ExpandableAutoComplete = forwardRef<
                       {isLoading ? (
                         <div
                           style={{ display: "flex", justifyContent: "center" }}
+                          className="qbs-autocomplete-loader"
                         >
                           <span>
                             <Spinner />

package/src/ReactAutoComplete.tsx

@@ -16,6 +16,7 @@ type valueProps = {
   param2?: string | number | null;
   param3?: string | number | null;
   param4?: string | number | null;
+  from?: number
 };
 interface AutoSuggestionInputProps {
   id?: string;
@@ -148,7 +149,7 @@ const ModernAutoComplete: React.FC<AutoSuggestionInputProps> = ({
     handleValChange(value);
     if (!value) {
       setInputValue('');
-      onChange({ id: undefined, name: '' });
+      onChange({ id: undefined, name: '', from: 2 });
     }
   };
 
@@ -156,7 +157,7 @@ const ModernAutoComplete: React.FC<AutoSuggestionInputProps> = ({
     debounce(
       (value: string) => {
         setDropOpen(true);
-        onChange({ id: undefined, name: '' });
+        onChange({ id: undefined, name: '', from: 1 });
         if (value.trim() === '' && type === 'auto_complete') {
           setSuggestions([]);
           if (autoFilter) {
@@ -327,7 +328,7 @@ const ModernAutoComplete: React.FC<AutoSuggestionInputProps> = ({
       const mainElement = document.querySelector('main');
       mainElement?.addEventListener('scroll', handleScroll);
 
-      const gridElements = document.querySelectorAll('.k-grid-content, .overflow-auto');
+      const gridElements = document.querySelectorAll('.k-grid-content, .overflow-auto, .overflow-y-auto, .overflow-x-auto');
       gridElements.forEach((gridElement: any) => {
         gridElement.addEventListener('scroll', handleScroll);
       });
@@ -349,7 +350,7 @@ const ModernAutoComplete: React.FC<AutoSuggestionInputProps> = ({
   const handleClear = () => {
     setDropOpen(false);
     setInputValue('');
-    onChange({ id: undefined, name: '' });
+    onChange({ id: undefined, name: '', from: 3 });
     onLabelClick();
   };
 
@@ -517,7 +518,7 @@ const ModernAutoComplete: React.FC<AutoSuggestionInputProps> = ({
     return (
       (filteredData?.length > 0 || showNoResults) && (
         <ul
-          className=" absolute h-auto max-h-40 pl-[10px] overflow-auto w-full bg-white shadow-gray-300 shadow-md border border-grey-light py-1.5 z-50  mt-9"
+          className=" 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}
         >
           {filteredData?.length > 0 ? (
@@ -528,7 +529,7 @@ 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`}
+                  } cursor-pointer p-1  text-xxs ps-3.5 pl-[10px]`}
                   key={suggestion?.id}
                   data-testid={suggestion.name}
                   onClick={() => handleSuggestionClick(suggestion)}

package/src/styles/components/autocomplete.css

@@ -218,7 +218,8 @@ body * {
   }
 }
 
-.qbs-dropdown-selected-container .qbs-clear-link {
+.qbs-dropdown-selected-container .qbs-clear-link,
+.qbs-expandable-container .qbs-clear-link {
   color: #e76458;
 }
 
@@ -235,7 +236,7 @@ body * {
   overflow: hidden;
 }
 .qbs-expandable-container .qbs-textfield-expandable::after {
-  content: attr(data-value) ' ';
+  content: attr(data-value) " ";
   visibility: hidden;
   white-space: pre;
   grid-area: 1 / 2;
@@ -597,7 +598,7 @@ span.dropdown-search-icon {
 
 .qbs-table-tooltip .tooltiptext::after,
 .tooltiptext::after {
-  content: '';
+  content: "";
   position: absolute;
   border-width: 5px;
   border-style: solid;