react-core-ts 1.0.42 → 1.0.44

package/src/commontypes.ts

@@ -1,6 +1,10 @@
-type ValueProps = {
+export type ValueProps = {
   [key: string]: string;
 };
+export type TabPops = {
+  id: number | string;
+  label: string;
+};
 export interface AutoSuggestionInputProps {
   id?: string;
   label?: string;
@@ -10,12 +14,12 @@ export interface AutoSuggestionInputProps {
   onChange: (value?: ValueProps | ValueProps[]) => void;
   data?: any[];
   type?:
-    | 'custom_select'
-    | 'auto_complete'
-    | 'custom_search_select'
-    | 'auto_suggestion';
+    | "custom_select"
+    | "auto_complete"
+    | "custom_search_select"
+    | "auto_suggestion";
   placeholder?: string;
-  getData?: (key?: string, nextBlock?: number) => any;
+  getData?: (key?: string, nextBlock?: number, tabValue?: number | string) => any;
   errors?: any;
   name: string;
   readOnly?: boolean;
@@ -33,6 +37,7 @@ export interface AutoSuggestionInputProps {
   handleAction?: () => void;
   actionLabel?: string;
   notDataMessage?: string;
+  initialDataMessage?:string;
   selectedItems?: any[];
   onFocus?: (e: React.FocusEvent<HTMLInputElement, Element>) => void;
   dopDownRef?: HTMLInputElement;
@@ -42,4 +47,7 @@ export interface AutoSuggestionInputProps {
   isTreeDropdown?: boolean;
   flatArray?: boolean;
   parentField?: string;
+  countOnly?: boolean; // only show selected items count
+  typeOnlyFetch?: boolean; // async only call when typed any value
+  tab?: TabPops[];
 }

package/src/components/DropdownList.tsx

@@ -25,7 +25,7 @@ const DropdownList: React.FC<ValueProps> = ({
   return (
     <div
       key={idx.toString()}
-      className={`qbs-autocomplete-listitem-container  ${
+      className={`qbs-autocomplete-listitem-container ${
         (isMultiple || singleSelect) && 'qbs-autocomplete-checkbox-container'
       } ${isSelected(suggestion, selected) ? 'is-selected' : ''}`}
     >
@@ -53,7 +53,7 @@ const DropdownList: React.FC<ValueProps> = ({
           </label>
         </div>
       )}
-      <li
+      <div
         key={idx}
         className={`qbs-autocomplete-suggestions-item ${
           isSelected(suggestion, selected) ? 'is-selected' : ''
@@ -62,7 +62,7 @@ const DropdownList: React.FC<ValueProps> = ({
         data-testid={suggestion[desc]}
       >
         {suggestion[desc]}
-      </li>
+      </div>
     </div>
   );
 };

package/src/components/InputActions.tsx

@@ -5,6 +5,7 @@ type ValueProps = {
   inputValue: string;
   searchValue: string;
   dropOpen: boolean;
+  countOnly?: boolean;
   handleDropOpen: (e: any) => void;
   handleDropClose: (e: any) => void;
   disabled: boolean;
@@ -22,10 +23,11 @@ const InputActions: React.FC<ValueProps> = ({
   readOnly,
   expandable,
   handleClear,
+  countOnly
 }) => {
   return (
     <div className="qbs-autocomplete-close-icon">
-      {(inputValue || searchValue) && !disabled && !readOnly && !expandable && (
+      {(inputValue || searchValue) && !disabled && !readOnly && !expandable && !countOnly && (
         <button
           onClick={handleClear}
           className="icon-button"

package/src/index.html

@@ -1 +1 @@
-<div>sdfdsf</div>
+<div>AutoComplete Components</div>

package/src/index.tsx

@@ -7,6 +7,7 @@ export {
 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/src/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/src/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/src/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/src/utilities/autosuggestions.ts

@@ -1,20 +1,21 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState } from "react";
 
 type ValueProps = {
   [key: string]: string;
 };
 
 type UseSuggestionsType = (
-  getData: (key?: string, next?: number) => Promise<ValueProps[]>,
+  getData: (key?: string, next?: number, tabValue?: number | string) => Promise<ValueProps[]>,
   initialData?: ValueProps[],
   dropOpen?: boolean,
   asyncFetch?: boolean,
   paginationEnabled?: boolean,
-  initialLoad?: boolean,
+  typeOnlyFetch?: boolean,
   inputValue?: string,
   isMultiple?: boolean,
   setNextPage?: (value: number) => void,
-  selectedItems?: any[]
+  selectedItems?: any[],
+  initialLoad?: boolean,
 ) => {
   suggestions: ValueProps[];
   isLoading: boolean;
@@ -22,7 +23,8 @@ type UseSuggestionsType = (
   handlePickSuggestions: (
     value?: string,
     next?: number,
-    append?: boolean
+    append?: boolean, 
+    tabValue?: string | number
   ) => Promise<void>;
 };
 
@@ -33,10 +35,11 @@ export const useSuggestions: UseSuggestionsType = (
   asyncFetch = false,
   paginationEnabled = false,
   initialLoad = false,
-  inputValue = '',
+  inputValue = "",
   isMultiple,
   setNextPage,
-  selectedItems = []
+  selectedItems = [],
+  typeOnlyFetch = false
 ) => {
   const [suggestions, setSuggestions] = useState<ValueProps[]>(initialData);
   const [isLoading, setIsLoading] = useState<boolean>(false);
@@ -44,12 +47,15 @@ export const useSuggestions: UseSuggestionsType = (
   const handlePickSuggestions = async (
     value?: string,
     nextPage?: number,
-    appendData?: boolean
+    appendData?: boolean, 
+    tabValue?: string | number
   ) => {
     setIsLoading(true);
     try {
       const data = await (asyncFetch || initialLoad
-        ? getData(value, nextPage)
+        ? typeOnlyFetch && value === ""
+          ? Promise.resolve([])
+          : getData(value, nextPage, tabValue)
         : Promise.resolve(initialData));
       if (!data || data?.length === 0) {
         setNextPage(undefined);
@@ -57,7 +63,7 @@ export const useSuggestions: UseSuggestionsType = (
       const newSuggestions = appendData ? [...suggestions, ...data] : data;
       setSuggestions(newSuggestions);
     } catch (error) {
-      console.error('Error fetching data:', error);
+      console.error("Error fetching data:", error);
     } finally {
       setIsLoading(false);
     }
@@ -67,14 +73,14 @@ export const useSuggestions: UseSuggestionsType = (
     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?.length === 0)
       ) {
-        handlePickSuggestions('', paginationEnabled ? 1 : undefined);
+        handlePickSuggestions("", paginationEnabled ? 1 : undefined);
       }
     }
   }, [dropOpen]);

package/src/utilities/filterSuggestions.ts

@@ -7,14 +7,15 @@ export const filterSuggestions = (
   query: string,
   type: string,
   desc: string,
-  inputValue?: string,
-  async?: boolean,
-  isTreeDropdown?: boolean
+  inputValue?: any[] | string,
+  async?: boolean, // API filter
+  isTreeDropdown?: boolean, // Tree dropdowns
+  withoutSort?: boolean // Don't show selected items on top of the suggections
 ): Item[] => {
   if (
-    (type === 'custom_search_select' ||
-      type === 'auto_complete' ||
-      type === 'auto_suggestion') &&
+    (type === "custom_search_select" ||
+      type === "auto_complete" ||
+      type === "auto_suggestion") &&
     !async &&
     query &&
     !isTreeDropdown
@@ -23,7 +24,9 @@ export const filterSuggestions = (
       item[desc].toLowerCase().includes(query.toLowerCase())
     );
   }
-  return isTreeDropdown ? data : sortedArrayData(data, inputValue, desc);
+  return isTreeDropdown || withoutSort
+    ? data
+    : sortedArrayData(data, inputValue, desc);
 };
 
 const sortedArrayData = (