react-core-ts 1.0.42 → 1.0.44

package/dist/components/DropdownList.js

@@ -6,13 +6,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var DropdownList = function (_a) {
     var idx = _a.idx, suggestion = _a.suggestion, isSelected = _a.isSelected, handleSuggestionClick = _a.handleSuggestionClick, handleMultiSelect = _a.handleMultiSelect, selected = _a.selected, isMultiple = _a.isMultiple, singleSelect = _a.singleSelect, desc = _a.desc;
-    return (react_1.default.createElement("div", { key: idx.toString(), className: "qbs-autocomplete-listitem-container  ".concat((isMultiple || singleSelect) && 'qbs-autocomplete-checkbox-container', " ").concat(isSelected(suggestion, selected) ? 'is-selected' : '') },
+    return (react_1.default.createElement("div", { key: idx.toString(), className: "qbs-autocomplete-listitem-container ".concat((isMultiple || singleSelect) && 'qbs-autocomplete-checkbox-container', " ").concat(isSelected(suggestion, selected) ? 'is-selected' : '') },
         (isMultiple || singleSelect) && (react_1.default.createElement("div", { className: "qbs-autocomplete-checkbox" },
             react_1.default.createElement("input", { onChange: function (e) { return handleMultiSelect(e, suggestion); }, type: "checkbox", checked: isSelected(suggestion, selected), id: "qbs-checkbox-".concat(idx.toString()) }),
             react_1.default.createElement("label", { htmlFor: "qbs-checkbox-".concat(idx.toString()) },
                 react_1.default.createElement("svg", { width: "8", height: "6", viewBox: "0 0 8 6", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
                     react_1.default.createElement("path", { d: "M0 3.21739L2.89883 6L8 1.06994L6.89494 0L2.89883 3.86768L1.09728 2.14745L0 3.21739Z", fill: "white" }))))),
-        react_1.default.createElement("li", { key: idx, className: "qbs-autocomplete-suggestions-item ".concat(isSelected(suggestion, selected) ? 'is-selected' : ''), onClick: function () { return handleSuggestionClick(suggestion); }, "data-testid": suggestion[desc] }, suggestion[desc])));
+        react_1.default.createElement("div", { key: idx, className: "qbs-autocomplete-suggestions-item ".concat(isSelected(suggestion, selected) ? 'is-selected' : ''), onClick: function () { return handleSuggestionClick(suggestion); }, "data-testid": suggestion[desc] }, suggestion[desc])));
 };
 exports.default = DropdownList;
 //# sourceMappingURL=DropdownList.js.map

package/dist/components/DropdownList.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownList.js","sourceRoot":"","sources":["../../src/components/DropdownList.tsx"],"names":[],"mappings":";;;;;AAAA,gDAA0B;AAa1B,IAAM,YAAY,GAAyB,UAAC,EAU3C;QATC,GAAG,SAAA,EACH,UAAU,gBAAA,EACV,UAAU,gBAAA,EACV,qBAAqB,2BAAA,EACrB,iBAAiB,uBAAA,EACjB,QAAQ,cAAA,EACR,UAAU,gBAAA,EACV,YAAY,kBAAA,EACZ,IAAI,UAAA;IAEJ,OAAO,CACL,uCACE,GAAG,EAAE,GAAG,CAAC,QAAQ,EAAE,EACnB,SAAS,EAAE,+CACT,CAAC,UAAU,IAAI,YAAY,CAAC,IAAI,qCAAqC,cACnE,UAAU,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,CAAE;QAE1D,CAAC,UAAU,IAAI,YAAY,CAAC,IAAI,CAC/B,uCAAK,SAAS,EAAC,2BAA2B;YACxC,yCACE,QAAQ,EAAE,UAAC,CAAC,IAAK,OAAA,iBAAiB,CAAC,CAAC,EAAE,UAAU,CAAC,EAAhC,CAAgC,EACjD,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,UAAU,CAAC,UAAU,EAAE,QAAQ,CAAC,EACzC,EAAE,EAAE,uBAAgB,GAAG,CAAC,QAAQ,EAAE,CAAE,GACpC;YACF,yCAAO,OAAO,EAAE,uBAAgB,GAAG,CAAC,QAAQ,EAAE,CAAE;gBAC9C,uCACE,KAAK,EAAC,GAAG,EACT,MAAM,EAAC,GAAG,EACV,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B;oBAElC,wCACE,CAAC,EAAC,qFAAqF,EACvF,IAAI,EAAC,OAAO,GACZ,CACE,CACA,CACJ,CACP;QACD,sCACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,4CACT,UAAU,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,CACrD,EACF,OAAO,EAAE,cAAM,OAAA,qBAAqB,CAAC,UAAU,CAAC,EAAjC,CAAiC,iBACnC,UAAU,CAAC,IAAI,CAAC,IAE5B,UAAU,CAAC,IAAI,CAAC,CACd,CACD,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,YAAY,CAAC"}
+{"version":3,"file":"DropdownList.js","sourceRoot":"","sources":["../../src/components/DropdownList.tsx"],"names":[],"mappings":";;;;;AAAA,gDAA0B;AAa1B,IAAM,YAAY,GAAyB,UAAC,EAU3C;QATC,GAAG,SAAA,EACH,UAAU,gBAAA,EACV,UAAU,gBAAA,EACV,qBAAqB,2BAAA,EACrB,iBAAiB,uBAAA,EACjB,QAAQ,cAAA,EACR,UAAU,gBAAA,EACV,YAAY,kBAAA,EACZ,IAAI,UAAA;IAEJ,OAAO,CACL,uCACE,GAAG,EAAE,GAAG,CAAC,QAAQ,EAAE,EACnB,SAAS,EAAE,8CACT,CAAC,UAAU,IAAI,YAAY,CAAC,IAAI,qCAAqC,cACnE,UAAU,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,CAAE;QAE1D,CAAC,UAAU,IAAI,YAAY,CAAC,IAAI,CAC/B,uCAAK,SAAS,EAAC,2BAA2B;YACxC,yCACE,QAAQ,EAAE,UAAC,CAAC,IAAK,OAAA,iBAAiB,CAAC,CAAC,EAAE,UAAU,CAAC,EAAhC,CAAgC,EACjD,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,UAAU,CAAC,UAAU,EAAE,QAAQ,CAAC,EACzC,EAAE,EAAE,uBAAgB,GAAG,CAAC,QAAQ,EAAE,CAAE,GACpC;YACF,yCAAO,OAAO,EAAE,uBAAgB,GAAG,CAAC,QAAQ,EAAE,CAAE;gBAC9C,uCACE,KAAK,EAAC,GAAG,EACT,MAAM,EAAC,GAAG,EACV,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B;oBAElC,wCACE,CAAC,EAAC,qFAAqF,EACvF,IAAI,EAAC,OAAO,GACZ,CACE,CACA,CACJ,CACP;QACD,uCACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,4CACT,UAAU,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,CACrD,EACF,OAAO,EAAE,cAAM,OAAA,qBAAqB,CAAC,UAAU,CAAC,EAAjC,CAAiC,iBACnC,UAAU,CAAC,IAAI,CAAC,IAE5B,UAAU,CAAC,IAAI,CAAC,CACb,CACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,YAAY,CAAC"}

package/dist/components/InputActions.d.ts

@@ -3,6 +3,7 @@ type ValueProps = {
     inputValue: string;
     searchValue: string;
     dropOpen: boolean;
+    countOnly?: boolean;
     handleDropOpen: (e: any) => void;
     handleDropClose: (e: any) => void;
     disabled: boolean;

package/dist/components/InputActions.js

@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var icons_1 = require("../utilities/icons");
 var InputActions = function (_a) {
-    var inputValue = _a.inputValue, searchValue = _a.searchValue, dropOpen = _a.dropOpen, handleDropOpen = _a.handleDropOpen, handleDropClose = _a.handleDropClose, disabled = _a.disabled, readOnly = _a.readOnly, expandable = _a.expandable, handleClear = _a.handleClear;
+    var inputValue = _a.inputValue, searchValue = _a.searchValue, dropOpen = _a.dropOpen, handleDropOpen = _a.handleDropOpen, handleDropClose = _a.handleDropClose, disabled = _a.disabled, readOnly = _a.readOnly, expandable = _a.expandable, handleClear = _a.handleClear, countOnly = _a.countOnly;
     return (react_1.default.createElement("div", { className: "qbs-autocomplete-close-icon" },
-        (inputValue || searchValue) && !disabled && !readOnly && !expandable && (react_1.default.createElement("button", { onClick: handleClear, className: "icon-button", "aria-label": "clear" },
+        (inputValue || searchValue) && !disabled && !readOnly && !expandable && !countOnly && (react_1.default.createElement("button", { onClick: handleClear, className: "icon-button", "aria-label": "clear" },
             react_1.default.createElement(icons_1.Close, null))),
         dropOpen ? (react_1.default.createElement("button", { type: "button", onClick: function (e) { return handleDropClose(e); }, className: "icon-button", "aria-label": "toggle", name: "toggle" },
             react_1.default.createElement(icons_1.DropArrow, { className: "icon-button-rotate" }))) : (react_1.default.createElement("button", { disabled: disabled || readOnly, type: "button", className: "icon-button", onClick: function (e) { return handleDropOpen(e); }, "aria-label": "toggle", name: "toggle" },

package/dist/components/InputActions.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputActions.js","sourceRoot":"","sources":["../../src/components/InputActions.tsx"],"names":[],"mappings":";;;;;AAAA,gDAA0B;AAC1B,4CAAsD;AAatD,IAAM,YAAY,GAAyB,UAAC,EAU3C;QATC,UAAU,gBAAA,EACV,WAAW,iBAAA,EACX,QAAQ,cAAA,EACR,cAAc,oBAAA,EACd,eAAe,qBAAA,EACf,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,UAAU,gBAAA,EACV,WAAW,iBAAA;IAEX,OAAO,CACL,uCAAK,SAAS,EAAC,6BAA6B;QACzC,CAAC,UAAU,IAAI,WAAW,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,QAAQ,IAAI,CAAC,UAAU,IAAI,CACvE,0CACE,OAAO,EAAE,WAAW,EACpB,SAAS,EAAC,aAAa,gBACZ,OAAO;YAElB,8BAAC,aAAK,OAAG,CACF,CACV;QACA,QAAQ,CAAC,CAAC,CAAC,CACV,0CACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,UAAC,CAAC,IAAK,OAAA,eAAe,CAAC,CAAC,CAAC,EAAlB,CAAkB,EAClC,SAAS,EAAC,aAAa,gBACZ,QAAQ,EACnB,IAAI,EAAC,QAAQ;YAEb,8BAAC,iBAAS,IAAC,SAAS,EAAE,oBAAoB,GAAI,CACvC,CACV,CAAC,CAAC,CAAC,CACF,0CACE,QAAQ,EAAE,QAAQ,IAAI,QAAQ,EAC9B,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,aAAa,EACvB,OAAO,EAAE,UAAC,CAAC,IAAK,OAAA,cAAc,CAAC,CAAC,CAAC,EAAjB,CAAiB,gBACtB,QAAQ,EACnB,IAAI,EAAC,QAAQ;YAEb,8BAAC,iBAAS,OAAG,CACN,CACV,CACG,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,YAAY,CAAC"}
+{"version":3,"file":"InputActions.js","sourceRoot":"","sources":["../../src/components/InputActions.tsx"],"names":[],"mappings":";;;;;AAAA,gDAA0B;AAC1B,4CAAsD;AActD,IAAM,YAAY,GAAyB,UAAC,EAW3C;QAVC,UAAU,gBAAA,EACV,WAAW,iBAAA,EACX,QAAQ,cAAA,EACR,cAAc,oBAAA,EACd,eAAe,qBAAA,EACf,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,UAAU,gBAAA,EACV,WAAW,iBAAA,EACX,SAAS,eAAA;IAET,OAAO,CACL,uCAAK,SAAS,EAAC,6BAA6B;QACzC,CAAC,UAAU,IAAI,WAAW,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,QAAQ,IAAI,CAAC,UAAU,IAAI,CAAC,SAAS,IAAI,CACrF,0CACE,OAAO,EAAE,WAAW,EACpB,SAAS,EAAC,aAAa,gBACZ,OAAO;YAElB,8BAAC,aAAK,OAAG,CACF,CACV;QACA,QAAQ,CAAC,CAAC,CAAC,CACV,0CACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,UAAC,CAAC,IAAK,OAAA,eAAe,CAAC,CAAC,CAAC,EAAlB,CAAkB,EAClC,SAAS,EAAC,aAAa,gBACZ,QAAQ,EACnB,IAAI,EAAC,QAAQ;YAEb,8BAAC,iBAAS,IAAC,SAAS,EAAE,oBAAoB,GAAI,CACvC,CACV,CAAC,CAAC,CAAC,CACF,0CACE,QAAQ,EAAE,QAAQ,IAAI,QAAQ,EAC9B,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,aAAa,EACvB,OAAO,EAAE,UAAC,CAAC,IAAK,OAAA,cAAc,CAAC,CAAC,CAAC,EAAjB,CAAiB,gBACtB,QAAQ,EACnB,IAAI,EAAC,QAAQ;YAEb,8BAAC,iBAAS,OAAG,CACN,CACV,CACG,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,YAAY,CAAC"}

package/dist/index.d.ts

@@ -3,6 +3,7 @@ export { default as AutoComplete, default as CustomAutoComplete, } from "./AutoC
 export { default as AutoCompleteWithTreeStructure } from "./AutoCompleteWithTreeStructure";
 export type { AutoSuggestionInputProps } from "./commontypes";
 export { default as ExpandableAutoComplete } from "./ExpandableAutoComplete";
+export { default as AutoCompleteWithSelectedList } from "./AutoCompleteWithSelectedList";
 export { deepEqual } from "./utilities/deepEqual";
 export { default as ExpandableToolTip } from "./utilities/expandableTootltip";
 export { default as ToolTip } from "./utilities/tooltip";

package/dist/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ToolTip = exports.ExpandableToolTip = exports.deepEqual = exports.ExpandableAutoComplete = exports.AutoCompleteWithTreeStructure = exports.CustomAutoComplete = exports.AutoComplete = void 0;
+exports.ToolTip = exports.ExpandableToolTip = exports.deepEqual = exports.AutoCompleteWithSelectedList = exports.ExpandableAutoComplete = exports.AutoCompleteWithTreeStructure = exports.CustomAutoComplete = exports.AutoComplete = void 0;
 require("./styles/global.css");
 var AutoComplete_1 = require("./AutoComplete");
 Object.defineProperty(exports, "AutoComplete", { enumerable: true, get: function () { return __importDefault(AutoComplete_1).default; } });
@@ -12,6 +12,8 @@ var AutoCompleteWithTreeStructure_1 = require("./AutoCompleteWithTreeStructure")
 Object.defineProperty(exports, "AutoCompleteWithTreeStructure", { enumerable: true, get: function () { return __importDefault(AutoCompleteWithTreeStructure_1).default; } });
 var ExpandableAutoComplete_1 = require("./ExpandableAutoComplete");
 Object.defineProperty(exports, "ExpandableAutoComplete", { enumerable: true, get: function () { return __importDefault(ExpandableAutoComplete_1).default; } });
+var AutoCompleteWithSelectedList_1 = require("./AutoCompleteWithSelectedList");
+Object.defineProperty(exports, "AutoCompleteWithSelectedList", { enumerable: true, get: function () { return __importDefault(AutoCompleteWithSelectedList_1).default; } });
 var deepEqual_1 = require("./utilities/deepEqual");
 Object.defineProperty(exports, "deepEqual", { enumerable: true, get: function () { return deepEqual_1.deepEqual; } });
 var expandableTootltip_1 = require("./utilities/expandableTootltip");

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":";;;;;;AAAA,+BAA6B;AAE7B,+CAGwB;AAFtB,6HAAA,OAAO,OAAgB;AACvB,mIAAA,OAAO,OAAsB;AAE/B,iFAA2F;AAAlF,+JAAA,OAAO,OAAiC;AAEjD,mEAA6E;AAApE,iJAAA,OAAO,OAA0B;AAC1C,mDAAkD;AAAzC,sGAAA,SAAS,OAAA;AAClB,qEAA8E;AAArE,wIAAA,OAAO,OAAqB;AACrC,+CAAyD;AAAhD,mHAAA,OAAO,OAAW"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":";;;;;;AAAA,+BAA6B;AAE7B,+CAGwB;AAFtB,6HAAA,OAAO,OAAgB;AACvB,mIAAA,OAAO,OAAsB;AAE/B,iFAA2F;AAAlF,+JAAA,OAAO,OAAiC;AAEjD,mEAA6E;AAApE,iJAAA,OAAO,OAA0B;AAC1C,+EAAyF;AAAhF,6JAAA,OAAO,OAAgC;AAChD,mDAAkD;AAAzC,sGAAA,SAAS,OAAA;AAClB,qEAA8E;AAArE,wIAAA,OAAO,OAAqB;AACrC,+CAAyD;AAAhD,mHAAA,OAAO,OAAW"}

package/dist/styles/components/autocomplete.css

@@ -192,6 +192,18 @@ body * {
   gap: 5px;
 }
 
+.qbs-dropdown-selected-container {
+  border: 0px;
+  border-top: 1px solid #d6d8dc;
+  min-height: 35px;
+  margin-top: 2px;
+  padding-top: 10px;
+}
+
+.qbs-dropdown-selected-container .qbs-clear-link {
+  color: #e76458;
+}
+
 .qbs-textfield-default.expandable {
   height: auto;
   border: none;
@@ -348,6 +360,11 @@ ul {
   left: 0;
 }
 
+.selected-items-container .badge {
+  background-color: #c63a3a;
+  color: #fff;
+}
+
 .selected-item-more {
   display: flex;
   align-items: center;
@@ -422,7 +439,7 @@ span.dropdown-search-icon {
 
 .qbs-autocomplete-checkbox-container .qbs-autocomplete-suggestions-item {
   padding: 0;
-  pointer-events: none;
+  /* pointer-events: none; */
 }
 
 .qbs-autocomplete-checkbox-container:hover {

package/dist/styles/components/selectedautocomplete.css

@@ -0,0 +1,121 @@
+.qbs-flex {
+  display: flex;
+}
+.qbs-flex-wrap {
+  flex-wrap: wrap;
+}
+.qbs-w-full {
+  width: 100%;
+}
+.qbs-mb-2 {
+  margin-bottom: 0.5rem;
+}
+.-qbs-mt-2 {
+  margin-top: -0.5rem;
+}
+.qbs-flex-1 {
+  flex: 1 1 0%;
+}
+.qbs-inline-block {
+  display: inline-block;
+}
+.qbs-text-sm {
+  font-size: 0.875rem;
+}
+.qbs-cursor-pointer {
+  cursor: pointer;
+}
+.qbs-text-center {
+  text-align: center;
+}
+.qbs-p-1 {
+  padding: 0.25rem;
+}
+.qbs-border-b-2 {
+  border-bottom-width: 2px;
+}
+.qbs-tab-item {
+  color: #4b5563;
+  border-color: #d1d5db;
+}
+.qbs-tab-item:hover {
+  color: #2563eb;
+}
+.qbs-tab-active-item {
+  color: #2563eb;
+  border-color: #2563eb;
+}
+.qbs-relative {
+  position: relative;
+}
+.qbs-gap-1 {
+  gap: 0.25rem;
+}
+.qbs-rounded-full {
+  border-radius: 9999px;
+}
+.qbs-text-xs {
+  font-size: 0.75rem;
+}
+.qbs-inline-flex {
+  display: inline-flex;
+}
+.qbs-items-center {
+  align-items: center;
+}
+.qbs-justify-center {
+  justify-content: center;
+}
+.qbs-px-2 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+.qbs-py-1 {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+.qbs-leading-none {
+  line-height: 1;
+}
+.qbs-min-w-6 {
+  min-width: 1.5rem;
+}
+.qbs-min-h-6 {
+  min-height: 1.5rem;
+}
+.qbs-align-middle {
+  vertical-align: middle;
+}
+.qbs-min-emp-h {
+  min-height: 183px;
+}
+.qbs-py-80 {
+  padding-top: 80px;
+  padding-bottom: 80px;
+}
+.qbs-flex-grow {
+  flex-grow: 1;
+}
+.qbs-text-right {
+  text-align: right;
+}
+.qbs-readmore-collapse {
+  cursor: pointer;
+  width: 100%;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  margin-top: 5px;
+}
+.qbs-readmore-collapse div {
+  border-radius: 9999px;
+  min-width: 1.5rem;
+  min-height: 1.5rem;
+  padding: 5px;
+}
+.qbs-more-collapse:hover {
+  background-color: #d1d5db;
+}
+.qbs-hidden {
+  display: none;
+}

package/dist/styles/global.css

@@ -3,4 +3,5 @@
 @tailwind utilities;
 
 @import './components/autocomplete.css';
-@import './components/treedropdown.css';
+@import './components/treedropdown.css';
+@import './components/selectedautocomplete.css';

package/dist/utilities/autosuggestions.d.ts

@@ -1,10 +1,10 @@
 type ValueProps = {
     [key: string]: string;
 };
-type UseSuggestionsType = (getData: (key?: string, next?: number) => Promise<ValueProps[]>, initialData?: ValueProps[], dropOpen?: boolean, asyncFetch?: boolean, paginationEnabled?: boolean, initialLoad?: boolean, inputValue?: string, isMultiple?: boolean, setNextPage?: (value: number) => void, selectedItems?: any[]) => {
+type UseSuggestionsType = (getData: (key?: string, next?: number, tabValue?: number | string) => Promise<ValueProps[]>, initialData?: ValueProps[], dropOpen?: boolean, asyncFetch?: boolean, paginationEnabled?: boolean, typeOnlyFetch?: boolean, inputValue?: string, isMultiple?: boolean, setNextPage?: (value: number) => void, selectedItems?: any[], initialLoad?: boolean) => {
     suggestions: ValueProps[];
     isLoading: boolean;
-    handlePickSuggestions: (value?: string, next?: number, append?: boolean) => Promise<void>;
+    handlePickSuggestions: (value?: string, next?: number, append?: boolean, tabValue?: string | number) => Promise<void>;
 };
 export declare const useSuggestions: UseSuggestionsType;
 export {};

package/dist/utilities/autosuggestions.js

@@ -47,17 +47,18 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useSuggestions = void 0;
 var react_1 = require("react");
-var useSuggestions = function (getData, initialData, dropOpen, asyncFetch, paginationEnabled, initialLoad, inputValue, isMultiple, setNextPage, selectedItems) {
+var useSuggestions = function (getData, initialData, dropOpen, asyncFetch, paginationEnabled, initialLoad, inputValue, isMultiple, setNextPage, selectedItems, typeOnlyFetch) {
     if (initialData === void 0) { initialData = []; }
     if (dropOpen === void 0) { dropOpen = false; }
     if (asyncFetch === void 0) { asyncFetch = false; }
     if (paginationEnabled === void 0) { paginationEnabled = false; }
     if (initialLoad === void 0) { initialLoad = false; }
-    if (inputValue === void 0) { inputValue = ''; }
+    if (inputValue === void 0) { inputValue = ""; }
     if (selectedItems === void 0) { selectedItems = []; }
+    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 handlePickSuggestions = function (value, nextPage, appendData) { return __awaiter(void 0, void 0, void 0, function () {
+    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) {
             switch (_a.label) {
@@ -67,7 +68,9 @@ var useSuggestions = function (getData, initialData, dropOpen, asyncFetch, pagin
                 case 1:
                     _a.trys.push([1, 3, 4, 5]);
                     return [4 /*yield*/, (asyncFetch || initialLoad
-                            ? getData(value, nextPage)
+                            ? typeOnlyFetch && value === ""
+                                ? Promise.resolve([])
+                                : getData(value, nextPage, tabValue)
                             : Promise.resolve(initialData))];
                 case 2:
                     data = _a.sent();
@@ -79,7 +82,7 @@ var useSuggestions = function (getData, initialData, dropOpen, asyncFetch, pagin
                     return [3 /*break*/, 5];
                 case 3:
                     error_1 = _a.sent();
-                    console.error('Error fetching data:', error_1);
+                    console.error("Error fetching data:", error_1);
                     return [3 /*break*/, 5];
                 case 4:
                     setIsLoading(false);
@@ -92,13 +95,13 @@ var useSuggestions = function (getData, initialData, dropOpen, asyncFetch, pagin
         if (dropOpen) {
             if (!isMultiple && (!inputValue || suggestions.length === 0)) {
                 setNextPage(1);
-                handlePickSuggestions('', paginationEnabled ? 1 : undefined);
+                handlePickSuggestions("", paginationEnabled ? 1 : undefined);
             }
             else if (isMultiple &&
                 (suggestions.length === 0 ||
                     !selectedItems ||
                     (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) === 0)) {
-                handlePickSuggestions('', paginationEnabled ? 1 : undefined);
+                handlePickSuggestions("", paginationEnabled ? 1 : undefined);
             }
         }
     }, [dropOpen]);

package/dist/utilities/autosuggestions.js.map

@@ -1 +1 @@
-{"version":3,"file":"autosuggestions.js","sourceRoot":"","sources":["../../src/utilities/autosuggestions.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+BAA4C;AA4BrC,IAAM,cAAc,GAAuB,UAChD,OAAO,EACP,WAAgB,EAChB,QAAgB,EAChB,UAAkB,EAClB,iBAAyB,EACzB,WAAmB,EACnB,UAAe,EACf,UAAU,EACV,WAAW,EACX,aAAkB;IARlB,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;IAEZ,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;;;;;oBAEpB,YAAY,CAAC,IAAI,CAAC,CAAC;;;;oBAEJ,qBAAM,CAAC,UAAU,IAAI,WAAW;4BAC3C,CAAC,CAAC,OAAO,CAAC,KAAK,EAAE,QAAQ,CAAC;4BAC1B,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,EAAA;;oBAF3B,IAAI,GAAG,SAEoB;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,qBAAqB,CAAC,EAAE,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;aAC9D;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;AAtDW,QAAA,cAAc,kBAsDzB"}
+{"version":3,"file":"autosuggestions.js","sourceRoot":"","sources":["../../src/utilities/autosuggestions.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+BAA4C;AA8BrC,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,qBAAqB,CAAC,EAAE,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;aAC9D;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;AA1DW,QAAA,cAAc,kBA0DzB"}

package/dist/utilities/filterSuggestions.d.ts

@@ -1,5 +1,5 @@
 interface Item {
     [key: string]: string;
 }
-export declare const filterSuggestions: (data: Item[], query: string, type: string, desc: string, inputValue?: string, async?: boolean, isTreeDropdown?: boolean) => Item[];
+export declare const filterSuggestions: (data: Item[], query: string, type: string, desc: string, inputValue?: any[] | string, async?: boolean, isTreeDropdown?: boolean, withoutSort?: boolean) => Item[];
 export {};

package/dist/utilities/filterSuggestions.js

@@ -10,10 +10,13 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.filterSuggestions = void 0;
-var filterSuggestions = function (data, query, type, desc, inputValue, async, isTreeDropdown) {
-    if ((type === 'custom_search_select' ||
-        type === 'auto_complete' ||
-        type === 'auto_suggestion') &&
+var filterSuggestions = function (data, query, type, desc, inputValue, async, // API filter
+isTreeDropdown, // Tree dropdowns
+withoutSort // Don't show selected items on top of the suggections
+) {
+    if ((type === "custom_search_select" ||
+        type === "auto_complete" ||
+        type === "auto_suggestion") &&
         !async &&
         query &&
         !isTreeDropdown) {
@@ -21,7 +24,9 @@ var filterSuggestions = function (data, query, type, desc, inputValue, async, is
             return item[desc].toLowerCase().includes(query.toLowerCase());
         });
     }
-    return isTreeDropdown ? data : sortedArrayData(data, inputValue, desc);
+    return isTreeDropdown || withoutSort
+        ? data
+        : sortedArrayData(data, inputValue, desc);
 };
 exports.filterSuggestions = filterSuggestions;
 var sortedArrayData = function (filteredData, selectedItems, desc) {

package/dist/utilities/filterSuggestions.js.map

@@ -1 +1 @@
-{"version":3,"file":"filterSuggestions.js","sourceRoot":"","sources":["../../src/utilities/filterSuggestions.ts"],"names":[],"mappings":";;;;;;;;;;;;AAIO,IAAM,iBAAiB,GAAG,UAC/B,IAAY,EACZ,KAAa,EACb,IAAY,EACZ,IAAY,EACZ,UAAmB,EACnB,KAAe,EACf,cAAwB;IAExB,IACE,CAAC,IAAI,KAAK,sBAAsB;QAC9B,IAAI,KAAK,eAAe;QACxB,IAAI,KAAK,iBAAiB,CAAC;QAC7B,CAAC,KAAK;QACN,KAAK;QACL,CAAC,cAAc,EACf;QACA,OAAO,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,MAAM,CAAC,UAAC,IAAI;YACvB,OAAA,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC;QAAtD,CAAsD,CACvD,CAAC;KACH;IACD,OAAO,cAAc,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,eAAe,CAAC,IAAI,EAAE,UAAU,EAAE,IAAI,CAAC,CAAC;AACzE,CAAC,CAAC;AAtBW,QAAA,iBAAiB,qBAsB5B;AAEF,IAAM,eAAe,GAAG,UACtB,YAAmB,EACnB,aAA6B,EAC7B,IAAS;IAET,OAAO,kBAAI,YAAY,QAAE,IAAI,CAAC,UAAC,CAAC,EAAE,CAAC;QACjC,IAAI,WAAoB,CAAC;QACzB,IAAI,WAAoB,CAAC;QAEzB,IAAI,KAAK,CAAC,OAAO,CAAC,aAAa,CAAC,EAAE;YAChC,WAAW,GAAG,aAAa,CAAC,IAAI,CAAC,UAAC,IAAI,IAAK,OAAA,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,EAAtB,CAAsB,CAAC,CAAC;YACnE,WAAW,GAAG,aAAa,CAAC,IAAI,CAAC,UAAC,IAAI,IAAK,OAAA,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,EAAtB,CAAsB,CAAC,CAAC;SACpE;aAAM;YACL,WAAW,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK,aAAa,CAAC;YACxC,WAAW,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK,aAAa,CAAC;SACzC;QAED,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACvD,CAAC,CAAC,CAAC;AACL,CAAC,CAAC"}
+{"version":3,"file":"filterSuggestions.js","sourceRoot":"","sources":["../../src/utilities/filterSuggestions.ts"],"names":[],"mappings":";;;;;;;;;;;;AAIO,IAAM,iBAAiB,GAAG,UAC/B,IAAY,EACZ,KAAa,EACb,IAAY,EACZ,IAAY,EACZ,UAA2B,EAC3B,KAAe,EAAE,aAAa;AAC9B,cAAwB,EAAE,iBAAiB;AAC3C,WAAqB,CAAC,sDAAsD;;IAE5E,IACE,CAAC,IAAI,KAAK,sBAAsB;QAC9B,IAAI,KAAK,eAAe;QACxB,IAAI,KAAK,iBAAiB,CAAC;QAC7B,CAAC,KAAK;QACN,KAAK;QACL,CAAC,cAAc,EACf;QACA,OAAO,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,MAAM,CAAC,UAAC,IAAI;YACvB,OAAA,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC;QAAtD,CAAsD,CACvD,CAAC;KACH;IACD,OAAO,cAAc,IAAI,WAAW;QAClC,CAAC,CAAC,IAAI;QACN,CAAC,CAAC,eAAe,CAAC,IAAI,EAAE,UAAU,EAAE,IAAI,CAAC,CAAC;AAC9C,CAAC,CAAC;AAzBW,QAAA,iBAAiB,qBAyB5B;AAEF,IAAM,eAAe,GAAG,UACtB,YAAmB,EACnB,aAA6B,EAC7B,IAAS;IAET,OAAO,kBAAI,YAAY,QAAE,IAAI,CAAC,UAAC,CAAC,EAAE,CAAC;QACjC,IAAI,WAAoB,CAAC;QACzB,IAAI,WAAoB,CAAC;QAEzB,IAAI,KAAK,CAAC,OAAO,CAAC,aAAa,CAAC,EAAE;YAChC,WAAW,GAAG,aAAa,CAAC,IAAI,CAAC,UAAC,IAAI,IAAK,OAAA,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,EAAtB,CAAsB,CAAC,CAAC;YACnE,WAAW,GAAG,aAAa,CAAC,IAAI,CAAC,UAAC,IAAI,IAAK,OAAA,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,EAAtB,CAAsB,CAAC,CAAC;SACpE;aAAM;YACL,WAAW,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK,aAAa,CAAC;YACxC,WAAW,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK,aAAa,CAAC;SACzC;QAED,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACvD,CAAC,CAAC,CAAC;AACL,CAAC,CAAC"}

package/docs/App.tsx

@@ -2,6 +2,7 @@ import React, { useState } from "react";
 
 import {
   AutoComplete,
+  AutoCompleteWithSelectedList,
   AutoCompleteWithTreeStructure,
   ExpandableAutoComplete,
 } from "../src/index";
@@ -44,6 +45,23 @@ export default function App() {
         return result;
       });
   };
+
+  const getDataWithTab = (keyName?: string, next?: number, tab?: number | string) => {
+    console.log(tab)
+    return fetch(
+      keyName
+        ? `https://jsonplaceholder.typicode.com/posts?_page=${next}&_limit=10&title_like=${keyName}`
+        : `https://jsonplaceholder.typicode.com/posts?_page=${next}&_limit=10`
+    )
+      .then((res) => res.json())
+      .then((res) => {
+        setNexBlock(nexBlock + 1);
+        const result = res.map((item: any) => {
+          return { ...item, ["name"]: item?.title, id: item?.id.toString() };
+        });
+        return result;
+      });
+  };
   return (
     <React.Fragment>
       <div
@@ -79,12 +97,19 @@ export default function App() {
             initialLoad={true}
             itemCount={5}
             // nextBlock={nexBlock}
-            placeholder="Auto Suggestion Suggestion Suggestion Suggestion"
-            selectedItems={[{ name: "test", id: "1" }]}
+            placeholder="Auto Suggestion"
+            selectedItems={[]}
             getData={getData}
             onChange={(e) => console.log(e, "onchange")}
           />
         </div>
+        <div className="autocomplete-section">
+          <h2>TreeView Auto Suggestion</h2>
+          <p>
+            Able to select, expand/collapse child items based on the suggections
+            data
+          </p>
+        </div>
         <div style={{ width: 800 }}>
           <AutoCompleteWithTreeStructure
             label="Auto Suggestion"
@@ -103,12 +128,79 @@ export default function App() {
             initialLoad={false}
             itemCount={5}
             // nextBlock={nexBlock}
-            placeholder="Auto Suggestion Suggestion Suggestion Suggestion"
+            placeholder="Auto Suggestion"
             selectedItems={[{ name: "test", id: "1" }]}
             // getData={getData}
             onChange={(e) => console.log(e, "onchange")}
           />
         </div>
+
+        <div className="autocomplete-section">
+          <h2>Auto Suggestion with Selected list</h2>
+          <p>
+            Selected items will be displayed in the suggestion box, with options
+            to expand/collapse and clear them. The select box will show the
+            total number of things selected.
+          </p>
+        </div>
+        <div style={{ width: 300 }}>
+          <AutoCompleteWithSelectedList
+            label="Auto Suggestion With Data"
+            name="sample"
+            type="auto_suggestion"
+            // async
+            desc="name"
+            isMultiple={true}
+            singleSelect={false}
+            descId="id"
+            data={treeDropData}
+            paginationEnabled={false}
+            initialLoad={false}
+            itemCount={3}
+            placeholder="Auto Suggestion"
+            selectedItems={[]}
+            onChange={(e) => console.log(e, "onchange")}
+            countOnly={true}
+          />
+        </div>
+        <div style={{ width: 300 }}>
+          <AutoCompleteWithSelectedList
+            label="Auto Suggestion API Data"
+            name="sample"
+            type="auto_suggestion"
+            async={true}
+            desc="name"
+            isMultiple={true}
+            typeOnlyFetch={true}
+            descId="id"
+            getData={getData}
+            itemCount={3}
+            placeholder="Auto Suggestion"
+            selectedItems={[]}
+            onChange={(e) => console.log(e, "onchange")}
+            countOnly={true}
+          />
+        </div>
+
+        <div style={{ width: 300 }}>
+          <AutoCompleteWithSelectedList
+            label="Auto Suggestion API Data With Tab"
+            name="sample"
+            type="auto_suggestion"
+            async={true}
+            desc="name"
+            isMultiple={true}
+            typeOnlyFetch={true}
+            descId="id"
+            getData={getDataWithTab}
+            itemCount={3}
+            placeholder="Auto Suggestion"
+            selectedItems={[]}
+            onChange={(e) => console.log(e, "onchange")}
+            countOnly={true}
+            tab={[{id: 1, label: "Tab 1"}, {id: 2, label: "Tab 2"}]}
+          />
+        </div>
         <div className="autocomplete-section">
           <h2>Custom Select</h2>
           <p>
@@ -289,7 +381,7 @@ export default function App() {
             initialLoad={true}
             itemCount={5}
             // nextBlock={nexBlock}
-            placeholder="Auto Suggestion Suggestion Suggestion Suggestion"
+            placeholder="Auto Suggestion"
             selectedItems={[{ name: "test", id: "1" }]}
             getData={getData}
             onChange={(e) => console.log(e, "onchange")}

package/docs/index.html

@@ -21,7 +21,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Autocomplete App</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

package/package.json

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