react-core-ts 2.1.9 → 2.1.11

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.9",
+  "version": "2.1.11",
   "description": "React Components",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/ExpandableAutoComplete.tsx

@@ -3,6 +3,8 @@ import React, {
   useCallback,
   useEffect,
   useImperativeHandle,
+  useLayoutEffect,
+  useMemo,
   useRef,
   useState,
 } from 'react';
@@ -73,6 +75,7 @@ const ExpandableAutoComplete = forwardRef<
   ) => {
     const dropdownRef = useRef<HTMLDivElement>(null);
     const expandableContainerRef = useRef<HTMLDivElement>(null);
+    const isExpandableSingleLineRef = useRef(true);
     const [isExpandableSingleLine, setIsExpandableSingleLine] = useState(true);
     // State Hooks Section
     const [isInitialRender, setIsInitialRender] = useState(true);
@@ -126,8 +129,15 @@ const ExpandableAutoComplete = forwardRef<
             inputRect.top + window.scrollY - dropdownHeight + 73;
         }
 
-        setDropdownStyle({
-          ...dropdownPosition,
+        setDropdownStyle((prev) => {
+          if (
+            prev.top === dropdownPosition.top &&
+            prev.left === dropdownPosition.left &&
+            prev.width === dropdownPosition.width
+          ) {
+            return prev;
+          }
+          return dropdownPosition;
         });
       }
     };
@@ -322,8 +332,23 @@ const ExpandableAutoComplete = forwardRef<
     }, []);
 
     // Filtering suggestions based on type and search value
-    const selected: any = isMultiple ? selectedItems : inputValue;
-    const filteredData: ValueProps[] = filterSuggestions(
+    const selected: any = useMemo(
+      () => (isMultiple ? selectedItems : inputValue),
+      [isMultiple, selectedItems, inputValue]
+    );
+    const filteredData: ValueProps[] = useMemo(() => {
+      return filterSuggestions(
+        suggestions,
+        searchValue,
+        type,
+        desc,
+        selected,
+        async,
+        isTreeDropdown,
+        true,
+        matchFromStart
+      );
+    }, [
       suggestions,
       searchValue,
       type,
@@ -331,18 +356,26 @@ const ExpandableAutoComplete = forwardRef<
       selected,
       async,
       isTreeDropdown,
-      true,
-      matchFromStart
-    );
+      matchFromStart,
+    ]);
 
     useEffect(() => {
+      if (!dropOpen) {
+        return;
+      }
       window.addEventListener('resize', adjustDropdownPosition);
       adjustDropdownPosition();
 
       return () => {
         window.removeEventListener('resize', adjustDropdownPosition);
       };
-    }, [dropOpen, selectedItems, filteredData]);
+    }, [
+      dropOpen,
+      selectedItems?.length,
+      filteredData?.length,
+      enableSelectAll,
+      isMultiple,
+    ]);
 
     useEffect(() => {
       // Handle keyboard navigation
@@ -517,30 +550,62 @@ const ExpandableAutoComplete = forwardRef<
       setSelectAll(allSelected);
     }, [filteredData, selectedItems, descId]);
 
-    const isExpandableSingleLineRef = useRef(true);
-    useEffect(() => {
+    // Track previous values to prevent unnecessary checks
+    const prevSelectedItemsLengthRef = useRef(selectedItems?.length ?? 0);
+    const prevSearchValueRef = useRef(searchValue);
+    const prevExpandableRef = useRef(expandable);
+    
+    // Check single line status only when content actually changes
+    useLayoutEffect(() => {
       const el = expandableContainerRef.current;
-      if (!el || !expandable) return;
-
-      const checkSingleLine = () => {
-        const lineHeight = parseInt(
-          getComputedStyle(el).lineHeight || '20',
-          10
-        ) || 20;
-        const padding = 5 * 2;
-        const singleLineMax = lineHeight + padding + 4;
-        const isSingle = el.scrollHeight <= singleLineMax;
+      const currentLength = selectedItems?.length ?? 0;
+      
+      // Only check if dependencies actually changed
+      const lengthChanged = prevSelectedItemsLengthRef.current !== currentLength;
+      const searchChanged = prevSearchValueRef.current !== searchValue;
+      const expandableChanged = prevExpandableRef.current !== expandable;
+      
+      if (!lengthChanged && !searchChanged && !expandableChanged) {
+        return; // Skip if nothing changed
+      }
+      
+      // Update refs
+      prevSelectedItemsLengthRef.current = currentLength;
+      prevSearchValueRef.current = searchValue;
+      prevExpandableRef.current = expandable;
+      
+      if (!el || !expandable) {
+        if (isExpandableSingleLineRef.current !== true) {
+          isExpandableSingleLineRef.current = true;
+          setIsExpandableSingleLine(true);
+        }
+        return;
+      }
+
+      // Use requestAnimationFrame to check after DOM updates
+      requestAnimationFrame(() => {
+        if (!el) return;
+        
+        const computedStyle = getComputedStyle(el);
+        const paddingTop = parseFloat(computedStyle.paddingTop) || 5;
+        const paddingBottom = parseFloat(computedStyle.paddingBottom) || 5;
+        const borderTop = parseFloat(computedStyle.borderTopWidth) || 0;
+        const borderBottom = parseFloat(computedStyle.borderBottomWidth) || 0;
+        const lineHeight = parseFloat(computedStyle.lineHeight) || 20;
+        
+        const singleLineThreshold = paddingTop + paddingBottom + borderTop + borderBottom + lineHeight + 20;
+        const isSingle = el.scrollHeight <= singleLineThreshold;
+
+        console.log(singleLineThreshold, 'singleLineThreshold')
+        console.log(el.scrollHeight, 'el.scrollHeight')
+        console.log(isSingle, 'isSingle')
+        // Only update if value changed
         if (isExpandableSingleLineRef.current !== isSingle) {
           isExpandableSingleLineRef.current = isSingle;
           setIsExpandableSingleLine(isSingle);
         }
-      };
-
-      checkSingleLine();
-      const observer = new ResizeObserver(checkSingleLine);
-      observer.observe(el);
-      return () => observer.disconnect();
-    }, [expandable, selectedItems, searchValue]);
+      });
+    }, [expandable, selectedItems?.length, searchValue]);
 
     return (
       <div