react-core-ts 1.3.68 → 1.3.69

package/docs/App.tsx

@@ -1,6 +1,12 @@
 import React, { useState } from 'react';
 
-import { AutoComplete, AutoCompleteWithSelectedList, AutoCompleteWithTreeStructure, ExpandableAutoComplete, ModernAutoComplete } from '../src/index';
+import {
+  AutoComplete,
+  AutoCompleteWithSelectedList,
+  AutoCompleteWithTreeStructure,
+  ExpandableAutoComplete,
+  ModernAutoComplete,
+} from '../src/index';
 import ModernTextArea from '../src/ReactTextArea';
 import TextField from '../src/ReactTextField';
 import { treeDropData } from './store';
@@ -140,9 +146,9 @@ export default function App() {
               type="custom_select"
               // async
               desc="name"
-              isMultiple={false}
+              isMultiple={true}
               flatArray={true}
-              singleSelect={true}
+              singleSelect={false}
               expandable={true}
               isTreeDropdown={true}
               descId="id"
@@ -152,9 +158,8 @@ export default function App() {
               itemCount={5}
               // nextBlock={nexBlock}
               placeholder="Auto Suggestion"
-              selectedItems={[{ name: 'test', id: '1' }]}
               // getData={getData}
-              onChange={(e) => console.log(e, 'onchange')}
+              onChange={(e) => {}}
             />
           </div>
 

package/package.json

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

package/src/AutoCompleteWithTreeStructure.tsx

@@ -1,4 +1,11 @@
-import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import React, {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react';
 import ReactDOM from 'react-dom';
 
 import { AutoSuggestionInputProps } from './commontypes';
@@ -338,7 +345,6 @@ const AutoCompleteWithTreeStructure = forwardRef<
     const updateNode = (id: string, checked: boolean, dataItem: any) => {
       let newTreeData;
       let checkedNodes: any[] = []; // Array to store the entire checked node objects
-
       if (isMultiple) {
         let selectedData = [...selectedItems];
         if (checked) {
@@ -361,19 +367,19 @@ const AutoCompleteWithTreeStructure = forwardRef<
         );
       }
     };
-    const handleSelect = (node: any) => {
+    const handleSelect = (selctedNode: any) => {
       let TreeData = [];
-      const checked = !node?.checked;
+      const checked = !selctedNode?.checked;
       if (!checked) {
         setInputValue('');
         onChange({ id: '', name: '' });
       }
-      // Single-select logic: uncheck all other nodes and check only the clicked one
       TreeData = dropDownData.map((node) =>
-        updateAllNodes(node, node[descId], checked)
+        updateAllNodes(node, selctedNode[descId], checked)
       );
       setDropDownData(TreeData);
     };
+
     const getCheckedNodes = (node: any, checkedNodes: any[]) => {
       if (node.checked) {
         checkedNodes.push(node); // Push the entire node object

package/src/components/TreeNode.tsx

@@ -27,7 +27,7 @@ const TreeNode: React.FC<any> = ({
     const { checked } = e.target;
     updateNode(dataItem[descId], checked, dataItem);
   };
-  console.log(isSelected(node, selected));
+
   return (
     <div>
       <li className="qbs-tree-list-container">
@@ -51,10 +51,15 @@ const TreeNode: React.FC<any> = ({
           <div
             className={`qbs-tree-list-container-sub-container ${
               isSelected(node, selected) ? 'checked' : ''
-            } ${node?.children?.length > 0 ? '' : ' marginLeft'}`}
+            } ${node.expanded ? 'qbs-expanded-child' : ''} ${
+              node?.children?.length > 0 ? '' : ' marginLeft'
+            }`}
           >
             {(isMultiple || singleSelect) && (
-              <div className={`${'qbs-autocomplete-checkbox'}`}>
+              <div
+                style={{ alignItems: singleSelect ? 'flex-start' : 'center' }}
+                className={`${'qbs-autocomplete-checkbox'}`}
+              >
                 {!singleSelect ? (
                   <>
                     <input
@@ -79,19 +84,27 @@ const TreeNode: React.FC<any> = ({
                     </label>
                   </>
                 ) : (
-                  <span className='qbs-tree-single-select-icon'>{singleSelectIcon ?? <QuestionIcon />}</span>
+                  <span className="qbs-tree-single-select-icon">
+                    {singleSelectIcon ?? <QuestionIcon />}
+                  </span>
                 )}
               </div>
             )}
             {singleSelect ? (
               <span
                 onClick={() => handleSelect(node)}
-                className="qbs-tree-list-container-sub-text cursor-pointer"
+                className={`${
+                  node.expanded ? 'qbs-expanded-child' : ''
+                } qbs-tree-list-container-sub-text cursor-pointer`}
               >
                 {node[desc]}
               </span>
             ) : (
-              <span className="qbs-tree-list-container-sub-text">
+              <span
+                className={`${
+                  node.expanded ? 'qbs-expanded-child' : ''
+                } qbs-tree-list-container-sub-text`}
+              >
                 {node[desc]}
               </span>
             )}

package/src/styles/components/autocomplete.css

@@ -229,8 +229,6 @@ body * {
   margin-left: 10px;
 }
 
-
-
 .qbs-textfield-default.expandable {
   height: auto;
   border: none;
@@ -630,3 +628,4 @@ span.dropdown-search-icon {
   margin-left: -5px;
   border-color: transparent transparent #000 transparent;
 }
+

package/src/styles/components/treedropdown.css

@@ -18,6 +18,7 @@
   padding-top: 0.5rem; /* Corresponds to py-2 in Tailwind */
   padding-bottom: 0.5rem;
   transition: transform 0.3s ease; /* Smooth rotation transition */
+  color: #003c71;
 }
 
 .qbs-tree-list-container-sub-icon.expanded {
@@ -29,9 +30,24 @@
   padding: 0.5rem; /* Corresponds to p-2 in Tailwind */
   flex-direction: row; /* Corresponds to flex-row in Tailwind */
   width: 100%; /* Corresponds to w-full in Tailwind */
+  color: #3d414a;
+}
+.qbs-tree-list-container-sub-container:hover {
+  color: #003c71;
+  background-color: rgba(141, 194, 240, 0.15) !important;
+}
+.qbs-tree-list-container-sub-container.qbs-expanded-child {
+  color: #003c71;
+}
+.qbs-tree-list-container-sub-text.qbs-expanded-child {
+  color: #003c71;
+}
+.qbs-tree-list-container-sub-text:hover {
+  color: #003c71;
+  /* background-color: rgba(141, 194, 240, 0.15) !important; */
 }
-
 .qbs-tree-list-container-sub-container.checked {
+  color: #003c71;
   background-color: rgba(
     141,
     194,
@@ -59,5 +75,5 @@
   font-weight: 500;
   letter-spacing: 0.28px;
   font-family: 'Noto Sans';
-  color: #3d414a;
+  /* color: #3d414a; */
 }