react-core-ts 2.0.0 → 2.0.2

package/dist/styles/styles/components/treedropdown.css

@@ -0,0 +1,97 @@
+.qbs-tree-list-container {
+  display: flex;
+  flex-direction: column;
+}
+.qbs-tree-list-container-sub {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: 7px;
+}
+
+.qbs-tree-list-container-sub .no-children {
+  margin-left: 1.75rem; /* Corresponds to ml-7 in Tailwind */
+}
+.qbs-tree-list-container-sub-icon {
+  margin-top: 0.25rem; /* Corresponds to mt-1 in Tailwind */
+  cursor: pointer;
+  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 {
+  transform: rotate(90deg); /* Corresponds to rotate-90 in Tailwind */
+}
+.qbs-tree-list-container-sub-container {
+  display: flex;
+  gap: 15px; /* 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-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-hideicon:hover {
+  color: #003c71;
+  background-color: rgba(141, 194, 240, 0.15) !important;
+}
+.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,
+.qbs-tree-list-container-sub-container-hideicon.checked {
+  color: #003c71;
+  background-color: rgba(
+    141,
+    194,
+    240,
+    0.15
+  ) !important; /* Corresponds to bg-green-200 in Tailwind */
+}
+
+.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) */
+}
+.qbs-tree-list-container-child {
+  margin-left: 1rem; /* Corresponds to ml-4 in Tailwind */
+  margin-top: 0.5rem; /* Corresponds to mt-2 in Tailwind */
+  display: flex; /* Corresponds to flex in Tailwind */
+  flex-direction: column; /* Corresponds to flex-col in Tailwind */
+  gap: 0.5rem; /* Corresponds to gap-2 in Tailwind */
+}
+.qbs-tree-list-container-sub-text {
+  line-height: 18px; /* Corresponds to leading-[18px] in Tailwind */
+  font-size: 14px; /* Corresponds to text-sm in Tailwind (14px) */
+  font-weight: 500;
+  letter-spacing: 0.28px;
+  font-family: 'Noto Sans';
+  /* color: #3d414a; */
+}

package/dist/styles/styles/global.css

@@ -0,0 +1,8 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@import './components/autocomplete.css';
+@import './components/treedropdown.css';
+@import './components/selectedautocomplete.css';
+@import './components/tooltip.css';

package/docs/App.tsx

@@ -12,6 +12,7 @@ import {
 } from '../src/index';
 import ModernTextArea from '../src/ReactTextArea';
 import TextField from '../src/ReactTextField';
+import { ValueProps } from '../src/commontypes';
 import { treeDropData } from './store';
 
 import '../src/styles/global.css';
@@ -20,8 +21,8 @@ export default function App() {
   const [dropData, setDropData] = useState();
   const [nexBlock, setNexBlock] = useState(1);
   const [prev, setPrev] = useState(1);
-  const [selectedTabItems, setSelectedTabItems] = useState([]);
-  const [selectedItems, setSelectedItems] = useState([]);
+  const [selectedTabItems, setSelectedTabItems] = useState<ValueProps[]>([]);
+  const [selectedItems, setSelectedItems] = useState<ValueProps[]>([]);
 
 
   const getData = (keyName?: string, next?: number) => {
@@ -117,10 +118,10 @@ export default function App() {
                 itemCount={3}
                 placeholder="Auto Suggestion"
                 selectedItems={selectedItems}
-                onChange={(e) => setSelectedItems(e)}
+                onChange={(e) => setSelectedItems(Array.isArray(e) ? e : e ? [e] : [])}
                 tabSelectedItems={selectedTabItems}
                 getTabData={getDataWithTab}
-                onToolTabChange={(value) => setSelectedTabItems(value)}
+                onToolTabChange={(value) => setSelectedTabItems(Array.isArray(value) ? value : value ? [value] : [])}
                 countOnly={true}
                 toolTabClearSwitch={false}
                 enableToolsTab={true}

package/package.json

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

package/src/AutoCompleteWithSelectedList.tsx

@@ -118,6 +118,7 @@ const AutoCompleteWithSelectedList = forwardRef<
     const [selectAll, setSelectAll] = useState(false);
     const [refetchData, setRefetchData] = useState(false);
     const [allDataLoaded, setAllDataLoaded] = useState(false);
+    const [isKeyboardOpen, setIsKeyboardOpen] = useState(false);
 
     let originalOverflow = '';
     let hasScrollbar = false;
@@ -198,6 +199,24 @@ const AutoCompleteWithSelectedList = forwardRef<
       };
     }, [dropOpen, expandArrowClick]);
 
+    // Detect keyboard open on mobile using Visual Viewport API
+    useEffect(() => {
+      const vv = (window as any).visualViewport;
+      if (!vv) return;
+      const onResize = () => {
+        // Heuristic: if visual viewport height shrinks a lot, keyboard is likely open
+        const open = vv.height < window.innerHeight - 100;
+        setIsKeyboardOpen(open);
+      };
+      vv.addEventListener("resize", onResize);
+      vv.addEventListener("scroll", onResize); // iOS sometimes fires scroll instead
+      onResize();
+      return () => {
+        vv.removeEventListener("resize", onResize);
+        vv.removeEventListener("scroll", onResize);
+      };
+    }, []);
+
     const { suggestions, isLoading, handlePickSuggestions, resetSuggections } =
       useSuggestions(
         getData,
@@ -363,58 +382,108 @@ const AutoCompleteWithSelectedList = forwardRef<
     };
 
     const uniqueDropArrowId = `${name}-drop-arrow-selected-list-icon`;
+    const isKeyboardOpenRef = useRef(false);
+    
+    // Keep ref in sync with state for use in event handlers
     useEffect(() => {
+      isKeyboardOpenRef.current = isKeyboardOpen;
+    }, [isKeyboardOpen]);
+
+    useEffect(() => {
+      const handleScroll = (event: any) => {
+        // On mobile: Don't close dropdown on scroll when keyboard is open
+        // On desktop: Always allow closing on scroll
+        if (isKeyboardOpenRef.current) {
+          // Only prevent closing if keyboard is actually open (mobile scenario)
+          // Also check if input is focused to avoid closing while typing
+          const activeElement = document.activeElement;
+          if (activeElement && (
+            activeElement === inputRef.current || 
+            activeElement === inputSearchRef.current ||
+            (dropRef.current && dropRef.current.contains(activeElement))
+          )) {
+            return;
+          }
+        }
+        
+        // Check if scroll is happening within the dropdown itself - if so, don't close
+        const scrollTarget = event.target;
+        if (dropRef.current && scrollTarget instanceof Node && dropRef.current.contains(scrollTarget)) {
+          return;
+        }
+        
+        // On desktop (keyboard not open), close on scroll
+        if (dropRef.current && dropOpen) {
+          setTimeout(() => {
+            setDropOpen(false);
+            if (!typeOnlyFetch) setSearchValue('');
+          }, 200);
+        }
+      };
+
       const handleClickOutside = (event: any) => {
+        // When keyboard is open, be more lenient - only close on clear outside clicks
+        if (isKeyboardOpenRef.current) {
+          const target = event.target as HTMLElement;
+          // Only close if it's a clear click outside, not on input/textarea elements
+          if (
+            dropRef.current &&
+            target instanceof Node &&
+            !dropRef.current.contains(target) &&
+            target?.id !== uniqueDropArrowId &&
+            event.type === 'mousedown' &&
+            target.closest &&
+            !target.closest('input') &&
+            !target.closest('textarea')
+          ) {
+            setTimeout(() => {
+              setDropOpen(false);
+              if (!typeOnlyFetch) setSearchValue('');
+            }, 200);
+          }
+          return;
+        }
+
+        // Normal behavior when keyboard is not open
         if (
           dropRef.current &&
           event.target instanceof Node &&
           !dropRef.current.contains(event.target) &&
-          event.target?.id !== uniqueDropArrowId
+          (event.target as HTMLElement)?.id !== uniqueDropArrowId
         ) {
           setTimeout(() => {
             setDropOpen(false);
             if (!typeOnlyFetch) setSearchValue('');
           }, 200);
-          //setSearchValue("");
         }
       };
 
-      // const observer = new MutationObserver(() => {
-      //   adjustDropdownPosition();
-      // });
-
-      // observer.observe(document.body, {
-      //   childList: true,
-      //   subtree: true,
-      //   attributes: true,
-      // });
-
       document.addEventListener('mousedown', handleClickOutside as any);
-      window.addEventListener('scroll', handleClickOutside as any);
+      window.addEventListener('scroll', handleScroll as any);
 
       const scrollableDivs = document.querySelectorAll(
         'div[style*="overflow"], .overflow-auto, .overflow-y-auto, .overflow-x-auto'
       );
       scrollableDivs.forEach((div) =>
-        div.addEventListener('scroll', handleClickOutside as any)
+        div.addEventListener('scroll', handleScroll as any)
       );
       if (scrollRef && scrollRef.current && scrollRef.current !== null) {
-        scrollRef.current.addEventListener('scroll', handleClickOutside as any);
+        scrollRef.current.addEventListener('scroll', handleScroll as any);
       }
       return () => {
         document.removeEventListener('mousedown', handleClickOutside as any);
-        window.removeEventListener('scroll', handleClickOutside as any);
+        window.removeEventListener('scroll', handleScroll as any);
         scrollableDivs.forEach((div) =>
-          div.removeEventListener('scroll', handleClickOutside as any)
+          div.removeEventListener('scroll', handleScroll as any)
         );
         if (scrollRef && scrollRef.current && scrollRef.current !== null) {
           scrollRef.current.removeEventListener(
             'scroll',
-            handleClickOutside as any
+            handleScroll as any
           );
         }
       };
-    }, []);
+    }, [dropOpen, typeOnlyFetch, uniqueDropArrowId]);
 
     // Filtering suggestions based on type and search value
     const selected: any = isMultiple ? selectedItems : inputValue;

package/src/AutoCompleteWithTreeStructure.tsx

@@ -1,11 +1,4 @@
-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';
@@ -73,6 +66,7 @@ const AutoCompleteWithTreeStructure = forwardRef<
       inputType = 'text',
       onFocusTreeDropdown,
       filterCondition,
+      singleSelectIcon,
     },
     ref
   ) => {
@@ -454,6 +448,7 @@ const AutoCompleteWithTreeStructure = forwardRef<
             updateNode={updateNode}
             desc={desc}
             descId={descId}
+            singleSelectIcon={singleSelectIcon}
             toggleExpand={toggleExpand}
           >
             {node.expanded &&
@@ -769,6 +764,7 @@ const AutoCompleteWithTreeStructure = forwardRef<
                         hasDisableSelection={hasDisableSelection?.(suggestion)}
                         updateNode={updateNode}
                         desc={desc}
+                        singleSelectIcon={singleSelectIcon}
                         descId={descId}
                         toggleExpand={toggleExpand}
                       >

package/src/commontypes.ts

@@ -97,6 +97,7 @@ export interface AutoSuggestionInputProps {
   toolTabClearSwitch?: boolean;
   onToolTabChange?: (value?: ValueProps | ValueProps[]) => void;
   autoRefreshMainDropdown?: boolean;
+  singleSelectIcon?: any;
 }
 export interface IconsProps {
   name: any;