react-core-ts 1.3.71 → 1.3.73

package/docs/App.tsx

@@ -146,14 +146,15 @@ export default function App() {
               type="custom_select"
               // async
               desc="name"
-              isMultiple={true}
+              isMultiple={false}
               flatArray={true}
-              singleSelect={false}
+              singleSelect={true}
               expandable={true}
               isTreeDropdown={true}
               descId="id"
               data={treeDropData}
               paginationEnabled={false}
+              showIcon={true}
               initialLoad={false}
               itemCount={5}
               // nextBlock={nexBlock}

package/package.json

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

package/src/AutoCompleteWithTreeStructure.tsx

@@ -67,6 +67,9 @@ const AutoCompleteWithTreeStructure = forwardRef<
       handleUpdateParent,
       isSeachable = true,
       customDropOffset = 300,
+      showIcon,
+      handleShowIcon,
+      hasDisableSelection,
     },
     ref
   ) => {
@@ -440,6 +443,8 @@ const AutoCompleteWithTreeStructure = forwardRef<
             isMultiple={isMultiple}
             singleSelect={singleSelect}
             handleSelect={handleSelect}
+            showIcon={handleShowIcon?.(node) ?? showIcon}
+            hasDisableSelection={hasDisableSelection?.(node)}
             idx={node[descId]}
             updateNode={updateNode}
             desc={desc}
@@ -703,6 +708,8 @@ const AutoCompleteWithTreeStructure = forwardRef<
                         singleSelect={singleSelect}
                         idx={suggestion[descId]}
                         handleSelect={handleSelect}
+                        showIcon={handleShowIcon?.(suggestion) ?? showIcon}
+                        hasDisableSelection={hasDisableSelection?.(suggestion)}
                         updateNode={updateNode}
                         desc={desc}
                         descId={descId}

package/src/ReactAutoComplete.tsx

@@ -461,7 +461,7 @@ const ModernAutoComplete: React.FC<AutoSuggestionInputProps> = ({
   //   return 'bottom'
   // }
   const filteredData =
-    inputValue !== '*' && type !== 'custom_select' && !noLocalFilter
+    inputValue !== '*' && inputValue !== '' && type !== 'custom_select' && !noLocalFilter
       ? suggestions?.filter((item: valueProps) =>
           checkIncludes(
             item.name,

package/src/commontypes.ts

@@ -66,6 +66,9 @@ export interface AutoSuggestionInputProps {
   handleUpdateParent?: (val: boolean, level?: string) => void;
   isSeachable?: boolean; // show search input
   customDropOffset?: number; // adjust dropdown postion manually if any overlap issue
+  showIcon?: boolean;
+  handleShowIcon?: (node: any) => boolean;
+  hasDisableSelection?: (node: any) => boolean;
 }
 export interface IconsProps {
   name: any;

package/src/components/TreeNode.tsx

@@ -17,6 +17,8 @@ const TreeNode: React.FC<any> = ({
   selected,
   handleSelect,
   singleSelectIcon,
+  showIcon,
+  hasDisableSelection,
 }) => {
   // Toggle the expanded state when clicking on the node
   const handleToggle = (node?: any) => {
@@ -27,6 +29,7 @@ const TreeNode: React.FC<any> = ({
     const { checked } = e.target;
     updateNode(dataItem[descId], checked, dataItem);
   };
+
   return (
     <div>
       <li className="qbs-tree-list-container">
@@ -48,13 +51,15 @@ const TreeNode: React.FC<any> = ({
             </span>
           )}
           <div
-            className={`qbs-tree-list-container-sub-container ${
-              isSelected(node, selected) ? 'checked' : ''
-            } ${node.expanded ? 'qbs-expanded-child' : ''} ${
-              node?.children?.length > 0 ? '' : ' marginLeft'
-            }`}
+            className={`${
+              isMultiple || (singleSelect && !showIcon)
+                ? 'qbs-tree-list-container-sub-container'
+                : 'qbs-tree-list-container-sub-container-hideicon'
+            } ${isSelected(node, selected) ? 'checked' : ''} ${
+              node.expanded ? 'qbs-expanded-child' : ''
+            } ${node?.children?.length > 0 ? '' : 'lightmarginLeft'}`}
           >
-            {(isMultiple || singleSelect) && (
+            {(isMultiple || (singleSelect && showIcon)) && (
               <div
                 style={{ alignItems: singleSelect ? 'flex-start' : 'center' }}
                 className={`${'qbs-autocomplete-checkbox'}`}
@@ -83,21 +88,33 @@ const TreeNode: React.FC<any> = ({
                     </label>
                   </>
                 ) : (
-                  <span className="qbs-tree-single-select-icon">
-                    {singleSelectIcon ?? <QuestionIcon />}
-                  </span>
+                  showIcon && (
+                    <span className="qbs-tree-single-select-icon">
+                      {singleSelectIcon ?? <QuestionIcon />}
+                    </span>
+                  )
                 )}
               </div>
             )}
             {singleSelect ? (
-              <span
-                onClick={() => handleSelect(node)}
-                className={`${
-                  node.expanded ? 'qbs-expanded-child' : ''
-                } qbs-tree-list-container-sub-text cursor-pointer`}
-              >
-                {node[desc]}
-              </span>
+              hasDisableSelection ? (
+                <span
+                  className={`${
+                    node.expanded ? 'qbs-expanded-child' : ''
+                  } qbs-tree-list-container-sub-text `}
+                >
+                  {node[desc]}
+                </span>
+              ) : (
+                <span
+                  onClick={() => handleSelect(node)}
+                  className={`${
+                    node.expanded ? 'qbs-expanded-child' : ''
+                  } qbs-tree-list-container-sub-text cursor-pointer`}
+                >
+                  {node[desc]}
+                </span>
+              )
             ) : (
               <span
                 className={`${

package/src/styles/components/treedropdown.css

@@ -32,6 +32,14 @@
   width: 100%; /* Corresponds to w-full in Tailwind */
   color: #3d414a;
 }
+.qbs-tree-list-container-sub-container-hideicon {
+  display: flex;
+  gap: 6px; /* Corresponds to gap-2 in Tailwind */
+  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;
@@ -55,9 +63,12 @@
     0.15
   ) !important; /* Corresponds to bg-green-200 in Tailwind */
 }
-.qbs-tree-list-container-sub-container.marginLeft {
+.marginLeft {
   margin-left: 28px; /* Corresponds to ml-2 in Tailwind */
 }
+.lightmarginLeft {
+  margin-left: 19px; /* Corresponds to ml-2 in Tailwind */
+}
 .qbs-tree-list-container-sub- {
   line-height: 18px; /* Corresponds to leading-[18px] in Tailwind */
   font-size: 0.875rem; /* Corresponds to text-sm in Tailwind (14px) */