react-core-ts 2.0.2 → 2.0.4

package/docs/App.tsx

@@ -1,21 +1,12 @@
-import React, { useState } from 'react';
+import React, { useState } from "react";
 
-import {
-  AutoComplete,
-  AutoCompleteWithSelectedList,
-  AutoCompleteWithTabFilter,
-  AutoCompleteWithTreeStructure,
-  ExpandableAutoComplete,
-  ModernAutoComplete,
-  ModernAutoCompleteDropdown,
-  ModernTextField,
-} from '../src/index';
-import ModernTextArea from '../src/ReactTextArea';
-import TextField from '../src/ReactTextField';
-import { ValueProps } from '../src/commontypes';
-import { treeDropData } from './store';
+import { ValueProps } from "../src/commontypes";
+import { AutoComplete, AutoCompleteWithSelectedList, AutoCompleteWithTabFilter, AutoCompleteWithTreeStructure, ExpandableAutoComplete, ModernAutoComplete, ModernAutoCompleteDropdown, ModernTextField } from "../src/index";
+import ModernTextArea from "../src/ReactTextArea";
+import TextField from "../src/ReactTextField";
+import { treeDropData } from "./store";
 
-import '../src/styles/global.css';
+import "../src/styles/global.css";
 
 export default function App() {
   const [dropData, setDropData] = useState();
@@ -24,9 +15,8 @@ export default function App() {
   const [selectedTabItems, setSelectedTabItems] = useState<ValueProps[]>([]);
   const [selectedItems, setSelectedItems] = useState<ValueProps[]>([]);
 
-
   const getData = (keyName?: string, next?: number) => {
-    console.log(keyName, 'keyName');
+    console.log(keyName, "keyName");
     return fetch(
       keyName
         ? `https://jsonplaceholder.typicode.com/posts?_page=${next}&_limit=10&title_like=${keyName}`
@@ -36,7 +26,7 @@ export default function App() {
       .then((res) => {
         setNexBlock(nexBlock + 1);
         const result = res.map((item: any) => {
-          return { ...item, ['name']: item?.title, id: item?.id.toString() };
+          return { ...item, ["name"]: item?.title, id: item?.id.toString() };
         });
         return result;
       });
@@ -45,7 +35,7 @@ export default function App() {
     return fetch(
       keyName
         ? `https://jsonplaceholder.typicode.com/posts?title_like=${
-            keyName === '*' ? '' : keyName
+            keyName === "*" ? "" : keyName
           }`
         : `https://jsonplaceholder.typicode.com/posts`
     )
@@ -53,7 +43,7 @@ export default function App() {
       .then((res) => {
         setPrev(prev + 1);
         const result = res.map((item: any) => {
-          return { ...item, ['name']: item?.title, id: item?.id.toString() };
+          return { ...item, ["name"]: item?.title, id: item?.id.toString() };
         });
         return result;
       });
@@ -74,7 +64,11 @@ export default function App() {
       .then((res) => {
         setNexBlock(nexBlock + 1);
         const result = res.map((item: any) => {
-          return { ...item, ['name']: item?.title + ' - ' + tab?.toString(), id: `${item?.id.toString()}-${tab?.toString()}`};
+          return {
+            ...item,
+            ["name"]: item?.title + " - " + tab?.toString(),
+            id: `${item?.id.toString()}-${tab?.toString()}`,
+          };
         });
         return result;
       });
@@ -83,59 +77,107 @@ export default function App() {
     <React.Fragment>
       <div
         style={{
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'center',
-          justifyContent: 'center',
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
         }}
       >
         <div
           style={{
-            display: 'flex',
-            flexDirection: 'column',
+            display: "flex",
+            flexDirection: "column",
             gap: 20,
             padding: 20,
-            maxWidth: '75%',
+            maxWidth: "75%",
 
-            overflowY: 'scroll',
+            overflowY: "scroll",
           }}
         >
-          
           <div style={{ width: 500 }}>
             <AutoCompleteWithTabFilter
-                label="Auto Suggestion With Data"
-                name="sample"
-                type="auto_suggestion"
-                async={true}
-                typeOnlyFetch={true}
-                desc="name"
-                isMultiple={true}
-                singleSelect={false}
-                descId="id"
-                getData={getData}
-                paginationEnabled={false}
-                initialLoad={false}
-                itemCount={3}
-                placeholder="Auto Suggestion"
-                selectedItems={selectedItems}
-                onChange={(e) => setSelectedItems(Array.isArray(e) ? e : e ? [e] : [])}
-                tabSelectedItems={selectedTabItems}
-                getTabData={getDataWithTab}
-                onToolTabChange={(value) => setSelectedTabItems(Array.isArray(value) ? value : value ? [value] : [])}
-                countOnly={true}
-                toolTabClearSwitch={false}
-                enableToolsTab={true}
-                toolTabs={[
-                  { id: 1, label: 'Tab 1' },
-                  { id: 2, label: 'Tab 2' },
-                ]}
-                tabName="sample"
-                tabDesc="name"
-                tabDescId="id"
-                enableSelectAll={true}
-                autoDropdown={true}
-              />
-            
+              label="Auto Suggestion With Data"
+              name="sample"
+              type="auto_suggestion"
+              async={true}
+              typeOnlyFetch={true}
+              desc="name"
+              isMultiple={true}
+              singleSelect={false}
+              descId="id"
+              getData={getData}
+              paginationEnabled={false}
+              initialLoad={false}
+              itemCount={3}
+              placeholder="Auto Suggestion"
+              selectedItems={selectedItems}
+              onChange={(e) =>
+                setSelectedItems(Array.isArray(e) ? e : e ? [e] : [])
+              }
+              tabSelectedItems={selectedTabItems}
+              getTabData={getDataWithTab}
+              onToolTabChange={(value) =>
+                setSelectedTabItems(
+                  Array.isArray(value) ? value : value ? [value] : []
+                )
+              }
+              countOnly={true}
+              toolTabClearSwitch={false}
+              enableToolsTab={true}
+              toolTabs={[
+                { id: 1, label: "Tab 1" },
+                { id: 2, label: "Tab 2" },
+              ]}
+              tabName="sample"
+              tabDesc="name"
+              tabDescId="id"
+              enableSelectAll={true}
+              autoDropdown={true}
+            />
+          </div>
+
+          <div style={{ width: 500 }}>
+            <AutoCompleteWithTabFilter
+              label="Inline Auto Suggestion With Data"
+              name="sample"
+              type="auto_suggestion"
+              async={true}
+              typeOnlyFetch={true}
+              desc="name"
+              isMultiple={true}
+              singleSelect={false}
+              descId="id"
+              getData={getData}
+              paginationEnabled={false}
+              initialLoad={false}
+              itemCount={3}
+              placeholder="Auto Suggestion"
+              selectedItems={selectedItems}
+              onChange={(e) =>
+                setSelectedItems(Array.isArray(e) ? e : e ? [e] : [])
+              }
+              tabSelectedItems={selectedTabItems}
+              getTabData={getDataWithTab}
+              onToolTabChange={(value) =>
+                setSelectedTabItems(
+                  Array.isArray(value) ? value : value ? [value] : []
+                )
+              }
+              countOnly={true}
+              toolTabClearSwitch={false}
+              enableToolsTab={true}
+              toolTabs={[
+                { id: 1, label: "Tab 1" },
+                { id: 2, label: "Tab 2" },
+              ]}
+              tabName="sample"
+              tabDesc="name"
+              tabDescId="id"
+              enableSelectAll={true}
+              autoDropdown={true}
+              tabInlineSearch={false}
+              //autoTabSelectAll={false}
+            />
           </div>
 
           <div style={{ width: 300 }}>
@@ -143,12 +185,12 @@ export default function App() {
               name="sample"
               label="TextField Enable Search"
               id="id"
-              type="text" 
+              type="text"
               placeholder="TextField"
               required
-              onChange={(e) => console.log(e, 'onchange')}
+              onChange={(e) => console.log(e, "onchange")}
               enableSearch={true}
-              onSearchClick={(value) => console.log(value, 'onSearchClick')}
+              onSearchClick={(value) => console.log(value, "onSearchClick")}
             />
           </div>
 
@@ -162,7 +204,7 @@ export default function App() {
               placeholder="TextField"
               required
               getData={getDatas}
-              onChange={(e) => console.log(e, 'onchange')}
+              onChange={(e) => console.log(e, "onchange")}
               shortCode="id"
               labelCode="userId"
             />
@@ -177,7 +219,7 @@ export default function App() {
               placeholder="TextField"
               required
               getData={getDatas}
-              onChange={(e) => console.log(e, 'onchange')}
+              onChange={(e) => console.log(e, "onchange")}
             />
           </div>
 
@@ -210,7 +252,7 @@ export default function App() {
               placeholder="Auto Suggestion"
               selectedItems={[]}
               getData={getData}
-              onChange={(e) => console.log(e, 'onchange')}
+              onChange={(e) => console.log(e, "onchange")}
             />
           </div>
           <div className="autocomplete-section">
@@ -232,7 +274,7 @@ export default function App() {
               singleSelect={true}
               expandable={true}
               isTreeDropdown={true}
-              filterCondition={{ filterKey: 'id', filterValue: 22 }}
+              filterCondition={{ filterKey: "id", filterValue: 22 }}
               descId="id"
               data={treeDropData}
               paginationEnabled={false}
@@ -271,11 +313,11 @@ export default function App() {
               placeholder="Auto Suggestion"
               selectedItems={[
                 {
-                  name: 'Port G - A small',
+                  name: "Port G - A small",
                   id: 2,
                 },
               ]}
-              onChange={(e) => console.log(e, 'onchange')}
+              onChange={(e) => console.log(e, "onchange")}
               countOnly={true}
             />
           </div>
@@ -293,13 +335,34 @@ export default function App() {
               itemCount={3}
               placeholder="Auto Suggestion"
               selectedItems={[]}
-              onChange={(e) => console.log(e, 'onchange')}
+              onChange={(e) => console.log(e, "onchange")}
               countOnly={true}
               enableSelectAll={true}
               autoDropdown={true}
             />
           </div>
-          
+
+          <div style={{ width: 300 }}>
+            <AutoCompleteWithSelectedList
+              label="Inline 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}
+              enableSelectAll={true}
+              autoDropdown={true}
+              tabInlineSearch={false}
+            />
+          </div>
 
           <div style={{ width: 300 }}>
             <AutoCompleteWithSelectedList
@@ -315,16 +378,19 @@ export default function App() {
               itemCount={3}
               placeholder="Auto Suggestion"
               selectedItems={[]}
-              onChange={(e) => console.log(e, 'onchange')}
+              onChange={(e) => console.log(e, "onchange")}
               countOnly={true}
               tab={[
-                { id: 1, label: 'Tab 1' },
-                { id: 2, label: 'Tab 2' },
+                { id: 1, label: "Tab 1" },
+                { id: 2, label: "Tab 2" },
               ]}
               clearTabSwitch={true}
               tabInlineSearch={false}
-              searchValue='Hello'
-              onSearchValueChange={(value) => console.log(value, 'onSearchValueChange')}
+              // autoDropdown={true}
+              searchValue="Hello"
+              onSearchValueChange={(value) =>
+                console.log(value, "onSearchValueChange")
+              }
             />
           </div>
 
@@ -342,11 +408,11 @@ export default function App() {
               itemCount={3}
               placeholder="Auto Suggestion"
               selectedItems={[]}
-              onChange={(e) => console.log(e, 'onchange')}
+              onChange={(e) => console.log(e, "onchange")}
               countOnly={true}
               tab={[
-                { id: 1, label: 'Tab 1' },
-                { id: 2, label: 'Tab 2' },
+                { id: 1, label: "Tab 1" },
+                { id: 2, label: "Tab 2" },
               ]}
               clearTabSwitch={true}
               tabInlineSearch={true}
@@ -368,18 +434,11 @@ export default function App() {
               desc="name"
               isMultiple={true}
               selectedItems={[]}
+              initialLoad={true}
               descId="id"
               type="custom_select"
-              data={[
-                { name: 'test', id: '1' },
-                { name: 'test1', id: '2' },
-
-                { name: 'test2', id: '3' },
-
-                { name: 'test3', id: '4' },
-              ]}
-              // getData={getData}
-              onChange={() => console.log('onchange')}
+              getData={getData}
+              onChange={() => console.log("onchange")}
             />
           </div>
           <div className="autocomplete-section">
@@ -403,7 +462,7 @@ export default function App() {
               placeholder="Auto Complete"
               // data={[{ name: 'test', id: '1' }]}
               getData={getData}
-              onChange={() => console.log('onchange')}
+              onChange={() => console.log("onchange")}
             />
           </div>
           <div style={{ width: 300 }}>
@@ -417,7 +476,7 @@ export default function App() {
               placeholder="Auto Complete"
               // data={[{ name: 'test', id: '1' }]}
               getData={getDatas}
-              onChange={() => console.log('onchange')}
+              onChange={() => console.log("onchange")}
             />
           </div>
           <div className="autocomplete-section">
@@ -439,18 +498,18 @@ export default function App() {
               descId="id"
               type="custom_search_select"
               data={[
-                { name: 'Apple', id: '1' },
-                { name: 'Banana', id: '2' },
-                { name: 'Cherry', id: '3' },
-                { name: 'Date', id: '4' },
-                { name: 'Fig', id: '5' },
-                { name: 'Grape', id: '6' },
-                { name: 'Honeydew', id: '7' },
-                { name: 'Kiwi', id: '8' },
-                { name: 'Lemon', id: '9' },
-                { name: 'Mango', id: '10' },
+                { name: "Apple", id: "1" },
+                { name: "Banana", id: "2" },
+                { name: "Cherry", id: "3" },
+                { name: "Date", id: "4" },
+                { name: "Fig", id: "5" },
+                { name: "Grape", id: "6" },
+                { name: "Honeydew", id: "7" },
+                { name: "Kiwi", id: "8" },
+                { name: "Lemon", id: "9" },
+                { name: "Mango", id: "10" },
               ]}
-              onChange={() => console.log('onchange')}
+              onChange={() => console.log("onchange")}
             />
           </div>
           <div className="autocomplete-section">
@@ -473,7 +532,7 @@ export default function App() {
               placeholder="Auto Suggestion"
               // data={[{ name: 'test', id: '1' }]}
               getData={getData}
-              onChange={() => console.log('onchange')}
+              onChange={() => console.log("onchange")}
             />
           </div>
           <div style={{ width: 300 }}>
@@ -483,14 +542,15 @@ export default function App() {
               type="auto_suggestion"
               required
               desc="name"
+
               async
               isMultiple
               descId="id"
               placeholder="Auto Suggestion"
-              selectedItems={[{ name: 'test', id: '1' }]}
+              selectedItems={[{ name: "test", id: "1" }]}
               // data={[{ name: 'test', id: '1' }]}
               getData={getData}
-              onChange={(value) => console.log(value, 'onchange')}
+              onChange={(value) => console.log(value, "onchange")}
             />
           </div>
           <div style={{ width: 300 }}>
@@ -506,9 +566,9 @@ export default function App() {
               initialLoad={true}
               // nextBlock={nexBlock}
               placeholder="Auto Suggestion"
-              selectedItems={[{ name: 'test', id: '1' }]}
+              selectedItems={[{ name: "test", id: "1" }]}
               getData={getData}
-              onChange={(e) => console.log(e, 'onchange')}
+              onChange={(e) => console.log(e, "onchange")}
             />
           </div>
 
@@ -536,9 +596,9 @@ export default function App() {
               itemCount={5}
               // nextBlock={nexBlock}
               placeholder="Auto Suggestion"
-              selectedItems={[{ name: 'test', id: '1' }]}
+              selectedItems={[{ name: "test", id: "1" }]}
               getData={getData}
-              onChange={(e) => console.log(e, 'onchange')}
+              onChange={(e) => console.log(e, "onchange")}
             />
           </div>
           <div className="autocomplete-section">
@@ -559,7 +619,7 @@ export default function App() {
               adorementPosition="start"
               placeholder="TextField"
               required
-              onChange={(e) => console.log(e, 'onchange')}
+              onChange={(e) => console.log(e, "onchange")}
             />
           </div>
           <div style={{ width: 300 }}>
@@ -579,15 +639,15 @@ export default function App() {
               itemCount={3}
               placeholder="Auto Suggestion"
               selectedItems={[
-                { id: 1, name: 'testssdfsdfsdfsd sdvsdf' },
-                { id: 2, name: 'test1 slkdflksmflksd' },
-                { id: 3, name: 'test2 lsdfkslkdfmlksdf' },
-                { id: 4, name: 'test3 lksdmflkmsflkms' },
-                { id: 5, name: 'test4lskdmflksldkf sdf' },
-                { id: 6, name: 'test5lksdlkf sdf' },
-                { id: 7, name: 'test6lksdlf sdf' },
+                { id: 1, name: "testssdfsdfsdfsd sdvsdf" },
+                { id: 2, name: "test1 slkdflksmflksd" },
+                { id: 3, name: "test2 lsdfkslkdfmlksdf" },
+                { id: 4, name: "test3 lksdmflkmsflkms" },
+                { id: 5, name: "test4lskdmflksldkf sdf" },
+                { id: 6, name: "test5lksdlkf sdf" },
+                { id: 7, name: "test6lksdlf sdf" },
               ]}
-              onChange={(e) => console.log(e, 'onchange')}
+              onChange={(e) => console.log(e, "onchange")}
               countOnly={true}
             />
           </div>
@@ -598,7 +658,7 @@ export default function App() {
               placeholder="efsdf"
               label="sdfsdfsd"
               value=""
-              onChange={(e) => console.log(e, 'onchange')}
+              onChange={(e) => console.log(e, "onchange")}
             />
           </div>
         </div>

package/package.json

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

package/src/AutoCompleteWithSelectedList.tsx

@@ -827,6 +827,24 @@ const AutoCompleteWithSelectedList = forwardRef<
     };
 
     const handleOpenDropdown = (e: any) => {
+
+      if (!tabInlineSearch) {
+        // Toggle the main dropdown when not using inline search
+        if (dropOpen && visible && allDataLoaded) {
+            // If dropdown is open and visible, close it
+            setDropOpen(false);
+            setVisible(false);
+            setAllDataLoaded(false);
+            return
+        } else if (!dropOpen) {
+            // If dropdown is closed, open it
+            setVisibleDrop();
+        } else if (dropOpen && !visible) {
+            // If dropdown is open but not visible, make it visible
+            setVisible(true);
+        }
+      }
+      
       if (!suggestions || suggestions?.length === 0 || refetchData) {
         if (autoDropdown && (inputValue === '' || inputValue.trim() === '')) {
           if (tabInlineSearch && tab.length > 0) {
@@ -903,7 +921,7 @@ const AutoCompleteWithSelectedList = forwardRef<
               {!countOnly ? (
                 getSelectedItems(false)
               ) : !tabInlineSearch ? (
-                <div className="selected-items-counter-container qbs-text-sm qbs-gap-1">
+                <div className={`selected-items-counter-container qbs-text-sm qbs-gap-1 ${!tabInlineSearch && autoDropdown ? 'selected-item-nontool-direct-counter' : ''}`}>
                   <Tooltip title={allSelectedTooltipContent} enabled={selectedItems?.length > 0 ? true : false}>
                     <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}
@@ -934,6 +952,28 @@ const AutoCompleteWithSelectedList = forwardRef<
             </>
           )}
 
+          <>
+            {autoDropdown && !tabInlineSearch && !disabled && !readOnly && (
+                <div className={`qbs-inline-all-dropdown-btn ${!tabInlineSearch && autoDropdown ? 'qbs-inline-all-direct-dropdown-btn' : ''}`}>
+                    <button
+                        disabled={disabled ?? readOnly}
+                        onClick={(e) => handleOpenDropdown(e)}
+                        className="text-[#667085] focus-visible:outline-slate-100 absolute right-2 qbs-all-dropdown-btn"
+                        data-testid="drop-arrow"
+                        type="button"
+                        id="autocomplete-drop-icon"
+                        ref={dropBtnRef}
+                    >
+                        <AllDropArrow
+                            type={!allDataLoaded ? 'down' : 'up'}
+                            uniqueId="all-dropdow-arrow-icon"
+                            className="all-dropdow-arrow-icon"
+                        />
+                    </button>
+                </div>
+            )}
+          </>
+
           <div
             className={`qbs-textfield-expandable ${
               !expandable ? 'qbs-normal' : ''
@@ -1002,6 +1042,7 @@ const AutoCompleteWithSelectedList = forwardRef<
             countOnly={countOnly}
             uniqueDropArrowId={uniqueDropArrowId}
             viewMode={viewMode}
+            autoDropdown={autoDropdown && !tabInlineSearch ? true : false}
           />
           {/* Displaying Loading Spinner */}