react-core-ts 1.7.6 → 1.7.8

package/src/ReactAutoCompleteDropdown.tsx

@@ -26,6 +26,7 @@ interface AutoSuggestionInputProps {
   autoFocus?: boolean;
   required?: boolean;
   shortCode?: string;
+  labelCode?: string;
   hideClear?: boolean;
   value?: valueProps;
   onChange: (value?: valueProps) => void;
@@ -64,6 +65,7 @@ const ModernAutoCompleteDropdown: React.FC<AutoSuggestionInputProps> = ({
   autoFocus,
   name,
   shortCode = '',
+  labelCode = '',
   fullWidth,
   placeholder,
   id,
@@ -286,6 +288,7 @@ const ModernAutoCompleteDropdown: React.FC<AutoSuggestionInputProps> = ({
           setIsLoading(false);
           if (autoDropdown) {
             setRefetchData(false);
+            timerRef.current = 1;
           }
         } catch (error) {
           setIsLoading(false);
@@ -554,7 +557,7 @@ const ModernAutoCompleteDropdown: React.FC<AutoSuggestionInputProps> = ({
 
   useEffect(() => {
     if (
-      inputValue &&
+      (inputValue || autoDropdown) &&
       filteredData?.length === 0 &&
       !isLoading &&
       timerRef.current === 1
@@ -662,6 +665,12 @@ const ModernAutoCompleteDropdown: React.FC<AutoSuggestionInputProps> = ({
                     {suggestion?.label ? suggestion?.label : suggestion.name}
                   </span>
 
+                  {labelCode && suggestion?.[labelCode] && (
+                    <span className="label-code">
+                      {suggestion?.[labelCode]}
+                    </span>
+                  )}
+
                   {shortCode && suggestion?.[shortCode] && (
                     <span className="short-code">
                       {suggestion?.[shortCode]}
@@ -845,7 +854,7 @@ const ModernAutoCompleteDropdown: React.FC<AutoSuggestionInputProps> = ({
               ref={adorementRef}
               className={`${generateClassName(
                 'adorement'
-              )} qbs-autocomplete-adorement custom-dorpdown-adorement mr-[1px] ${
+              )} qbs-autocomplete-adorement auto-dorpdown-adorement mr-[1px] ${
                 isLoading ? 'bg-white' : ''
               }`}
             >

package/src/commontypes.ts

@@ -78,6 +78,7 @@ export interface AutoSuggestionInputProps {
     filterValue?: any;
   };
   shortCode?: string
+  labelCode?: string,
   tabInlineSearch?: boolean // tab dropdown search
 }
 export interface IconsProps {

package/src/components/DropdownList.tsx

@@ -12,6 +12,7 @@ type ValueProps = {
   desc: string;
   hideCheckbox?: boolean;
   shortCode?: string
+  labelCode?: string
   focusedIndex?: number
   setItemRef?: (index: number, ref: HTMLDivElement | null) => void
 };
@@ -27,6 +28,7 @@ const DropdownList: React.FC<ValueProps> = ({
   desc,
   hideCheckbox = false,
   shortCode = '',
+  labelCode = '',
   focusedIndex = 0,
   setItemRef
 }) => {
@@ -74,6 +76,7 @@ const DropdownList: React.FC<ValueProps> = ({
       >
         {suggestion[desc]}
       </div>
+      {labelCode && suggestion?.[labelCode] && <div className='label-code'>{suggestion?.[labelCode]}</div>}
       {shortCode && suggestion?.[shortCode] && <div className='short-code'>{suggestion?.[shortCode]}</div>}
     </div>
   );

package/src/styles/components/autocomplete.css

@@ -128,7 +128,7 @@ body * {
   font-size: 14px;
   font-weight: 500;
   line-height: 20px; /* 142.857% */
-  width: 100%;
+  /* width: 100%; */
   display: flex;
   align-items: flex-start;
   gap: 8px;
@@ -650,7 +650,7 @@ span.dropdown-search-icon {
 
 .autocomplete-suggections .qbs-autocomplete-suggections-items {
   display: flex;
-  justify-content: space-between;
+  /* justify-content: space-between; */
   align-items: center;
   cursor: pointer;
   outline: none;
@@ -669,4 +669,16 @@ span.dropdown-search-icon {
   border: 1px solid #ccc;
   border-radius: 4px;
   white-space: nowrap;
+  margin-left: auto;
+}
+
+.autocomplete-suggections .qbs-autocomplete-suggections-items .label-code,
+.qbs-autocomplete-listitem-container .label-code {
+  font-size: 12px;
+  background: #f0f0f0;
+  padding: 4px 8px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  white-space: nowrap;
+  margin: 0px 5px;
 }