react-core-ts 1.7.3 → 1.7.5

package/dist/utilities/autosuggestions.d.ts

@@ -5,6 +5,7 @@ type UseSuggestionsType = (getData: (key?: string, next?: number, tabValue?: num
     suggestions: ValueProps[];
     isLoading: boolean;
     handlePickSuggestions: (value?: string, next?: number, append?: boolean, tabValue?: string | number) => Promise<void>;
+    resetSuggections?: () => void;
 };
 export declare const useSuggestions: UseSuggestionsType;
 export {};

package/dist/utilities/autosuggestions.js

@@ -58,6 +58,9 @@ var useSuggestions = function (getData, initialData, dropOpen, asyncFetch, pagin
     if (typeOnlyFetch === void 0) { typeOnlyFetch = false; }
     var _a = (0, react_1.useState)(initialData), suggestions = _a[0], setSuggestions = _a[1];
     var _b = (0, react_1.useState)(false), isLoading = _b[0], setIsLoading = _b[1];
+    var resetSuggections = function () {
+        setSuggestions([]);
+    };
     var handlePickSuggestions = function (value, nextPage, appendData, tabValue) { return __awaiter(void 0, void 0, void 0, function () {
         var data, newSuggestions, error_1;
         return __generator(this, function (_a) {
@@ -106,7 +109,7 @@ var useSuggestions = function (getData, initialData, dropOpen, asyncFetch, pagin
             }
         }
     }, [dropOpen]);
-    return { suggestions: suggestions, isLoading: isLoading, handlePickSuggestions: handlePickSuggestions };
+    return { suggestions: suggestions, isLoading: isLoading, handlePickSuggestions: handlePickSuggestions, resetSuggections: resetSuggections };
 };
 exports.useSuggestions = useSuggestions;
 //# sourceMappingURL=autosuggestions.js.map

package/dist/utilities/autosuggestions.js.map

@@ -1 +1 @@
-{"version":3,"file":"autosuggestions.js","sourceRoot":"","sources":["../../src/utilities/autosuggestions.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+BAA4C;AAkCrC,IAAM,cAAc,GAAuB,UAChD,OAAO,EACP,WAAgB,EAChB,QAAgB,EAChB,UAAkB,EAClB,iBAAyB,EACzB,WAAmB,EACnB,UAAe,EACf,UAAU,EACV,WAAW,EACX,aAAkB,EAClB,aAAqB;IATrB,4BAAA,EAAA,gBAAgB;IAChB,yBAAA,EAAA,gBAAgB;IAChB,2BAAA,EAAA,kBAAkB;IAClB,kCAAA,EAAA,yBAAyB;IACzB,4BAAA,EAAA,mBAAmB;IACnB,2BAAA,EAAA,eAAe;IAGf,8BAAA,EAAA,kBAAkB;IAClB,8BAAA,EAAA,qBAAqB;IAEf,IAAA,KAAgC,IAAA,gBAAQ,EAAe,WAAW,CAAC,EAAlE,WAAW,QAAA,EAAE,cAAc,QAAuC,CAAC;IACpE,IAAA,KAA4B,IAAA,gBAAQ,EAAU,KAAK,CAAC,EAAnD,SAAS,QAAA,EAAE,YAAY,QAA4B,CAAC;IAE3D,IAAM,qBAAqB,GAAG,UAC5B,KAAc,EACd,QAAiB,EACjB,UAAoB,EACpB,QAA0B;;;;;oBAE1B,YAAY,CAAC,IAAI,CAAC,CAAC;;;;oBAEJ,qBAAM,CAAC,UAAU,IAAI,WAAW;4BAC3C,CAAC,CAAC,aAAa,IAAI,KAAK,KAAK,EAAE;gCAC7B,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC;gCACrB,CAAC,CAAC,OAAO,CAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,CAAC;4BACtC,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,EAAA;;oBAJ3B,IAAI,GAAG,SAIoB;oBACjC,IAAI,CAAC,IAAI,IAAI,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,MAAM,MAAK,CAAC,EAAE;wBAC/B,WAAW,CAAC,SAAS,CAAC,CAAC;qBACxB;oBACK,cAAc,GAAG,UAAU,CAAC,CAAC,iCAAK,WAAW,SAAK,IAAI,QAAE,CAAC,CAAC,IAAI,CAAC;oBACrE,cAAc,CAAC,cAAc,CAAC,CAAC;;;;oBAE/B,OAAO,CAAC,KAAK,CAAC,sBAAsB,EAAE,OAAK,CAAC,CAAC;;;oBAE7C,YAAY,CAAC,KAAK,CAAC,CAAC;;;;;SAEvB,CAAC;IAEF,IAAA,iBAAS,EAAC;QACR,IAAI,QAAQ,EAAE;YACZ,IAAI,CAAC,UAAU,IAAI,CAAC,CAAC,UAAU,IAAI,WAAW,CAAC,MAAM,KAAK,CAAC,CAAC,EAAE;gBAC5D,WAAW,CAAC,CAAC,CAAC,CAAC;gBACf,qBAAqB,CAAC,EAAE,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;aAC9D;iBAAM,IACL,UAAU;gBACV,CAAC,WAAW,CAAC,MAAM,KAAK,CAAC;oBACvB,CAAC,aAAa;oBACd,CAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,MAAM,MAAK,CAAC,CAAC,EAC9B;gBACA,IAAI,CAAC,aAAa,IAAI,CAAC,UAAU;oBAC/B,qBAAqB,CAAC,EAAE,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;aAChE;SACF;IACH,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,OAAO,EAAE,WAAW,aAAA,EAAE,SAAS,WAAA,EAAE,qBAAqB,uBAAA,EAAE,CAAC;AAC3D,CAAC,CAAC;AA3DW,QAAA,cAAc,kBA2DzB"}
+{"version":3,"file":"autosuggestions.js","sourceRoot":"","sources":["../../src/utilities/autosuggestions.ts"],"names":[],"mappings":"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"}

package/package.json

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

package/src/AutoCompleteWithSelectedList.tsx

@@ -68,6 +68,7 @@ const AutoCompleteWithSelectedList = forwardRef<
       viewMode = false,
       handleUpdateParent,
       shortCode = '',
+      tabInlineSearch = true,
     },
     ref
   ) => {
@@ -137,9 +138,14 @@ const AutoCompleteWithSelectedList = forwardRef<
 
           setSelHeight(defaultHeight);
         } else if (spaceAbove >= dropdownHeight) {
+          const sHeight = tabInlineSearch ? 73 : 113;
           dropLevelRef.current = 'top';
           dropdownPosition.top =
-            inputRect.top + window.scrollY - dropdownHeight + 73 + topMargin;
+            inputRect.top +
+            window.scrollY -
+            dropdownHeight +
+            sHeight +
+            topMargin;
 
           setSelHeight(defaultHeight);
         } else {
@@ -174,20 +180,21 @@ const AutoCompleteWithSelectedList = forwardRef<
       };
     }, [dropOpen, expandArrowClick]);
 
-    const { suggestions, isLoading, handlePickSuggestions } = useSuggestions(
-      getData,
-      data,
-      dropOpen,
-      async,
-      paginationEnabled,
-      initialLoad,
-      inputValue,
-      isMultiple,
-      setNextPage,
-      selectedItems,
-      typeOnlyFetch
-      // nextBlock
-    );
+    const { suggestions, isLoading, handlePickSuggestions, resetSuggections } =
+      useSuggestions(
+        getData,
+        data,
+        dropOpen,
+        async,
+        paginationEnabled,
+        initialLoad,
+        inputValue,
+        isMultiple,
+        setNextPage,
+        selectedItems,
+        typeOnlyFetch
+        // nextBlock
+      );
 
     // Handling the selection of a suggestion
     const handleSuggestionClick = useCallback(
@@ -271,6 +278,10 @@ const AutoCompleteWithSelectedList = forwardRef<
         setInputValue('');
         // onChange({ [descId]: '', [desc]: '' });
       }
+
+      if (!tabInlineSearch) {
+        setDropOpen(true);
+      }
     };
     const handleSuggestionChange = (e: React.ChangeEvent<HTMLInputElement>) => {
       const { value } = e.target;
@@ -540,9 +551,20 @@ const AutoCompleteWithSelectedList = forwardRef<
       if (activeTab !== index) {
         if (clearTabSwitch) {
           handleClearSelected();
-          setSearchValue('');
-          setInputValue('');
-          handlePickSuggestions('', 1);
+          if (tabInlineSearch) {
+            setSearchValue('');
+            setInputValue('');
+            handlePickSuggestions('', 1);
+          } else {
+            resetSuggections?.();
+            const activeTabVal =
+              tab.length > 0 ? tab?.[activeTab].id : undefined;
+            handlePickSuggestions(searchValue, 1, false, activeTabVal);
+          }
+        } else if (!tabInlineSearch) {
+          resetSuggections?.();
+          const activeTabVal = tab.length > 0 ? tab?.[activeTab].id : undefined;
+          handlePickSuggestions(searchValue, 1, false, activeTabVal);
         }
         setActiveTab(index);
       }
@@ -672,10 +694,16 @@ const AutoCompleteWithSelectedList = forwardRef<
             expandable ? 'qbs-expandable-container' : 'qbs-container'
           }`}
         >
-          {selectedItems?.length > 0 && (
+          {(selectedItems?.length > 0 || !tabInlineSearch) && (
             <>
               {!countOnly ? (
                 getSelectedItems(false)
+              ) : !tabInlineSearch ? (
+                <div className="selected-items-counter-container qbs-text-sm qbs-gap-1">
+                  <span className="badge qbs-rounded-full qbs-text-xs qbs-inline-flex qbs-items-center qbs-justify-center qbs-px-2 qbs-py-1 qbs-leading-none qbs-min-w-6 qbs-min-h-6">
+                    {selectedItems?.length}
+                  </span>
+                </div>
               ) : (
                 <div
                   className="selected-items-container qbs-text-sm qbs-gap-1"
@@ -713,7 +741,7 @@ const AutoCompleteWithSelectedList = forwardRef<
               autoComplete="off"
               type="text"
               value={
-                type === 'auto_suggestion' && !expandable
+                type === 'auto_suggestion' && !expandable && tabInlineSearch
                   ? inputValue
                   : searchValue || inputValue
               }
@@ -726,7 +754,7 @@ const AutoCompleteWithSelectedList = forwardRef<
               readOnly={
                 readOnly ||
                 type === 'custom_select' ||
-                (type == 'auto_suggestion' && !expandable)
+                (type == 'auto_suggestion' && !expandable && tabInlineSearch)
               }
               disabled={disabled}
               data-testid="custom-autocomplete"
@@ -771,24 +799,26 @@ const AutoCompleteWithSelectedList = forwardRef<
                 {!viewMode && (
                   <>
                     <>{tab.length > 0 && getTabItems()}</>
-                    {type == 'auto_suggestion' && !expandable && (
-                      <div
-                        style={{ position: 'relative' }}
-                        className="react-core-ts-search-container"
-                      >
-                        <span className="dropdown-search-icon">
-                          <Search />
-                        </span>
-                        <input
-                          className="dropdown-search-input"
-                          onChange={handleSuggestionChange}
-                          value={searchValue}
-                          placeholder="Type to search"
-                          autoComplete="off"
-                          ref={inputSearchRef}
-                        />
-                      </div>
-                    )}
+                    {type == 'auto_suggestion' &&
+                      !expandable &&
+                      tabInlineSearch && (
+                        <div
+                          style={{ position: 'relative' }}
+                          className="react-core-ts-search-container"
+                        >
+                          <span className="dropdown-search-icon">
+                            <Search />
+                          </span>
+                          <input
+                            className="dropdown-search-input"
+                            onChange={handleSuggestionChange}
+                            value={searchValue}
+                            placeholder="Type to search"
+                            autoComplete="off"
+                            ref={inputSearchRef}
+                          />
+                        </div>
+                      )}
                   </>
                 )}