react-core-ts 2.1.10 → 2.1.12

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/package.json

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

package/src/ExpandableAutoComplete.tsx

@@ -97,50 +97,12 @@ const ExpandableAutoComplete = forwardRef<
     const dropRef = useRef(null);
     const typeRef = useRef(0);
     useImperativeHandle(ref, () => inputRef.current);
-    const [dropdownStyle, setDropdownStyle] = useState({
-      top: 0,
-      left: 0,
-      width: 200,
-    });
-
-    const adjustDropdownPosition = () => {
-      if (dropdownRef.current) {
-        const inputRect = dropdownRef.current.getBoundingClientRect();
-        const dropdownPosition = {
-          left: inputRect.left + window.scrollX,
-          width: inputRect.width,
-          top: 0,
-        };
-        // Check if there's enough space below the input for the dropdown
-        const spaceBelow = window.innerHeight - inputRect.bottom;
-        const spaceAbove = inputRect.top + window.scrollY;
-
-        let dropdownHeight = 275; // Assume a fixed height or calculate based on content
-        if (spaceBelow >= dropdownHeight) {
-          dropdownPosition.top =
-            inputRect.top + window.scrollY + inputRect.height;
-        } else {
-          dropdownHeight =
-            dropdownHeight +
-            (filteredData?.length > 0 && enableSelectAll && isMultiple
-              ? 32
-              : 0);
-          dropdownPosition.top =
-            inputRect.top + window.scrollY - dropdownHeight + 73;
-        }
-
-        setDropdownStyle((prev) => {
-          if (
-            prev.top === dropdownPosition.top &&
-            prev.left === dropdownPosition.left &&
-            prev.width === dropdownPosition.width
-          ) {
-            return prev;
-          }
-          return dropdownPosition;
-        });
-      }
-    };
+    const [dropdownStyle, setDropdownStyle] = useState<{
+      top: number;
+      left: number;
+      width: number;
+    } | null>(null);
+    const isPositionCalculatedRef = useRef(false);
 
     const { suggestions, isLoading, handlePickSuggestions } = useSuggestions(
       getData,
@@ -359,24 +321,78 @@ const ExpandableAutoComplete = forwardRef<
       matchFromStart,
     ]);
 
-    useEffect(() => {
+    const adjustDropdownPosition = useCallback(() => {
+      if (dropdownRef.current) {
+        const inputRect = dropdownRef.current.getBoundingClientRect();
+        const dropdownPosition = {
+          left: inputRect.left + window.scrollX,
+          width: inputRect.width,
+          top: 0,
+        };
+        // Check if there's enough space below the input for the dropdown
+        const spaceBelow = window.innerHeight - inputRect.bottom;
+        const spaceAbove = inputRect.top + window.scrollY;
+
+        let dropdownHeight = 275; // Assume a fixed height or calculate based on content
+        if (spaceBelow >= dropdownHeight) {
+          dropdownPosition.top =
+            inputRect.top + window.scrollY + inputRect.height;
+        } else {
+          dropdownHeight =
+            dropdownHeight +
+            (filteredData?.length > 0 && enableSelectAll && isMultiple
+              ? 32
+              : 0);
+          dropdownPosition.top =
+            inputRect.top + window.scrollY - dropdownHeight + 73;
+        }
+
+        setDropdownStyle((prev) => {
+          if (
+            prev &&
+            prev.top === dropdownPosition.top &&
+            prev.left === dropdownPosition.left &&
+            prev.width === dropdownPosition.width
+          ) {
+            return prev;
+          }
+          isPositionCalculatedRef.current = true;
+          return dropdownPosition;
+        });
+      }
+    }, [filteredData?.length, enableSelectAll, isMultiple]);
+
+    // Use useLayoutEffect to calculate position synchronously before paint to prevent flicker
+    useLayoutEffect(() => {
       if (!dropOpen) {
+        isPositionCalculatedRef.current = false;
+        setDropdownStyle(null);
         return;
       }
-      window.addEventListener('resize', adjustDropdownPosition);
+      // Calculate position immediately when dropdown opens
+      isPositionCalculatedRef.current = false;
       adjustDropdownPosition();
-
-      return () => {
-        window.removeEventListener('resize', adjustDropdownPosition);
-      };
     }, [
       dropOpen,
       selectedItems?.length,
       filteredData?.length,
       enableSelectAll,
       isMultiple,
+      adjustDropdownPosition,
     ]);
 
+    // Separate effect for resize listener (only when dropdown is open)
+    useEffect(() => {
+      if (!dropOpen) {
+        return;
+      }
+      window.addEventListener('resize', adjustDropdownPosition);
+
+      return () => {
+        window.removeEventListener('resize', adjustDropdownPosition);
+      };
+    }, [dropOpen, adjustDropdownPosition]);
+
     useEffect(() => {
       // Handle keyboard navigation
       const handleKeyDown = (e: any) => {
@@ -593,9 +609,9 @@ const ExpandableAutoComplete = forwardRef<
         const borderBottom = parseFloat(computedStyle.borderBottomWidth) || 0;
         const lineHeight = parseFloat(computedStyle.lineHeight) || 20;
         
-        const singleLineThreshold = paddingTop + paddingBottom + borderTop + borderBottom + lineHeight + 10;
+        const singleLineThreshold = paddingTop + paddingBottom + borderTop + borderBottom + lineHeight + 20;
         const isSingle = el.scrollHeight <= singleLineThreshold;
-        
+
         // Only update if value changed
         if (isExpandableSingleLineRef.current !== isSingle) {
           isExpandableSingleLineRef.current = isSingle;
@@ -765,7 +781,7 @@ const ExpandableAutoComplete = forwardRef<
 
           {/* Suggestions Dropdown */}
 
-          {dropOpen &&
+          {dropOpen && dropdownStyle &&
             ReactDOM.createPortal(
               <ul
                 ref={dropRef}