react-core-ts 1.0.22 → 1.0.24

package/dist/styles/components/autocomplete.css

@@ -255,6 +255,9 @@ body * {
   cursor: pointer;
   padding: 0px 1px;
 }
+.icon-button-rotate{
+  rotate: 180deg;
+}
 .labels {
   font-size: 12px;
 }
@@ -275,7 +278,7 @@ body * {
 .qbs-autocomplete-suggestions-sub {
   position: relative;
   overflow: auto;
-  max-height: 192px;
+  max-height: 184px;
   top: 0;
   display: flex;
   flex-direction: column;

package/dist/styles/global.css

@@ -1 +1,5 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 @import './components/autocomplete.css';

package/dist/styles/styles/global.css

@@ -1 +1,5 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 @import './components/autocomplete.css';

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) => Item[];
+export declare const filterSuggestions: (data: Item[], query: string, type: string, desc: string, inputValue?: string, async?: boolean, isTreeDropdown?: boolean) => Item[];
 export {};

package/dist/utilities/filterSuggestions.js

@@ -10,17 +10,18 @@ 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) {
+var filterSuggestions = function (data, query, type, desc, inputValue, async, isTreeDropdown) {
     if ((type === 'custom_search_select' ||
         type === 'auto_complete' ||
         type === 'auto_suggestion') &&
         !async &&
-        query) {
+        query &&
+        !isTreeDropdown) {
         return data === null || data === void 0 ? void 0 : data.filter(function (item) {
             return item[desc].toLowerCase().includes(query.toLowerCase());
         });
     }
-    return sortedArrayData(data, inputValue, desc);
+    return isTreeDropdown ? 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;IAEf,IACE,CAAC,IAAI,KAAK,sBAAsB;QAC9B,IAAI,KAAK,eAAe;QACxB,IAAI,KAAK,iBAAiB,CAAC;QAC7B,CAAC,KAAK;QACN,KAAK,EACL;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,eAAe,CAAC,IAAI,EAAE,UAAU,EAAE,IAAI,CAAC,CAAC;AACjD,CAAC,CAAC;AApBW,QAAA,iBAAiB,qBAoB5B;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,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"}

package/docs/App.tsx

@@ -1,8 +1,13 @@
-import React, { useState } from 'react';
+import React, { useState } from "react";
 
-import { AutoComplete, ExpandableAutoComplete } from '../src/index';
+import {
+  AutoComplete,
+  AutoCompleteWithTreeStructure,
+  ExpandableAutoComplete,
+} from "../src/index";
 
-import '../src/styles/global.css';
+import "../src/styles/global.css";
+import { treeDropData } from "./store";
 
 export default function App() {
   const [dropData, setDropData] = useState();
@@ -19,7 +24,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;
       });
@@ -34,7 +39,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;
       });
@@ -43,12 +48,12 @@ export default function App() {
     <React.Fragment>
       <div
         style={{
-          display: 'flex',
-          flexDirection: 'column',
+          display: "flex",
+          flexDirection: "column",
           gap: 20,
           padding: 20,
 
-          overflowY: 'scroll',
+          overflowY: "scroll",
         }}
       >
         <div className="autocomplete-section">
@@ -60,7 +65,7 @@ export default function App() {
             input while still offering assistance.
           </p>
         </div>
-        <div style={{ width: 300 }}>
+        <div style={{ width: 800 }}>
           <ExpandableAutoComplete
             label="Auto Suggestion"
             name="sample"
@@ -75,9 +80,32 @@ export default function App() {
             itemCount={5}
             // nextBlock={nexBlock}
             placeholder="Auto Suggestion Suggestion Suggestion 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 style={{ width: 800 }}>
+          <AutoCompleteWithTreeStructure
+            label="Auto Suggestion"
+            name="sample"
+            type="custom_select"
+            // async
+            desc="name"
+            isMultiple={true}
+            singleSelect={false}
+            expandable={true}
+            isTreeDropdown={true}
+            descId="id"
+            data={treeDropData}
+            paginationEnabled={false}
+            initialLoad={false}
+            itemCount={5}
+            // nextBlock={nexBlock}
+            placeholder="Auto Suggestion Suggestion Suggestion Suggestion"
+            selectedItems={[{ name: "test", id: "1" }]}
+            // getData={getData}
+            onChange={(e) => console.log(e, "onchange")}
           />
         </div>
         <div className="autocomplete-section">
@@ -96,15 +124,15 @@ export default function App() {
             descId="id"
             type="custom_select"
             data={[
-              { name: 'test', id: '1' },
-              { name: 'test1', id: '2' },
+              { name: "test", id: "1" },
+              { name: "test1", id: "2" },
 
-              { name: 'test2', id: '3' },
+              { name: "test2", id: "3" },
 
-              { name: 'test3', id: '4' },
+              { name: "test3", id: "4" },
             ]}
             // getData={getData}
-            onChange={() => console.log('onchange')}
+            onChange={() => console.log("onchange")}
           />
         </div>
         <div className="autocomplete-section">
@@ -128,7 +156,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 }}>
@@ -142,7 +170,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">
@@ -164,18 +192,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">
@@ -198,7 +226,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 }}>
@@ -212,10 +240,10 @@ export default function App() {
             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 }}>
@@ -231,9 +259,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>
 
@@ -261,9 +289,9 @@ export default function App() {
             itemCount={5}
             // nextBlock={nexBlock}
             placeholder="Auto Suggestion Suggestion Suggestion 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>

package/docs/store.ts

@@ -0,0 +1,76 @@
+export const treeDropData = [
+  {
+    name: "Port A - This is the main port in the northern region with significant traffic and operations",
+    id: 22,
+    children: [
+      {
+        name: "Port C - A key sub-port with heavy container traffic in the southern bay area",
+        id: 1,
+        children: [
+          {
+            name: "Port G - A small port used for local shipments and fishing operations",
+            id: 2,
+            children: [
+              {
+                name: "Port H - A minor local port focusing on fisheries and small-scale cargo",
+                id: 3,
+                children: [],
+              },
+            ],
+          },
+          {
+            name: "Port I - A coastal port for regional trade and tourism operations",
+            id: 4,
+            children: [
+              {
+                name: "Port J - A harbor for tourist cruises and commercial boats",
+                id: 5,
+                children: [],
+              },
+            ],
+          },
+        ],
+      },
+      {
+        name: "Port D - An industrial port dealing with large-scale cargo and ship repair services",
+        id: 6,
+        children: [
+          {
+            name: "Port K - A dock specializing in shipbuilding and marine repairs",
+            id: 7,
+            children: [
+              {
+                name: "Port L - A repair facility for both military and commercial vessels",
+                id: 8,
+                children: [],
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+  {
+    name: "Port B - This is the largest port in the central region, supporting international trade",
+    id: 9,
+    children: [
+      {
+        name: "Port E - A primary export port dealing with raw materials and heavy goods",
+        id: 10,
+        children: [
+          {
+            name: "Port M - A small export hub for agricultural and mining products",
+            id: 11,
+            children: [
+              {
+                name: "Port N - A warehouse and storage center for exported goods",
+                id: 12,
+                children: [],
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-core-ts",
-  "version": "1.0.22",
+  "version": "1.0.24",
   "description": "React Components",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -38,13 +38,17 @@
     "@svgr/webpack": "^8.1.0",
     "@types/react": "^18.2.24",
     "@types/react-dom": "^18.2.9",
+    "autoprefixer": "^10.4.20",
     "babel-loader": "^8.3.0",
     "copy-webpack-plugin": "^11.0.0",
     "css-loader": "^6.8.1",
     "file-loader": "^6.2.0",
     "html-webpack-plugin": "^4.5.2",
     "mini-css-extract-plugin": "^2.7.6",
+    "postcss": "^8.4.47",
+    "postcss-loader": "^8.1.1",
     "style-loader": "^3.3.3",
+    "tailwindcss": "^3.4.13",
     "ts-loader": "^9.4.4",
     "typescript": "^4.0.0",
     "webpack": "^5.88.2",
@@ -53,9 +57,6 @@
   },
   "dependencies": {
     "@babel/plugin-transform-typescript": "^7.22.15",
-    "autoprefixer": "^10.4.16",
-    "postcss": "^8.4.31",
-    "source-map-loader": "^4.0.1",
-    "tailwindcss": "^3.3.3"
+    "source-map-loader": "^4.0.1"
   }
 }

package/postcss.config.js

@@ -1,7 +1,6 @@
-// postcss.config.js
 module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
+  plugins: [
+    require('tailwindcss'),
+    require('autoprefixer'),
+  ],
 };