react-core-ts 2.1.13 → 2.1.14

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.13",
+  "version": "2.1.14",
   "description": "React Components",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -8,7 +8,8 @@
     "start": "webpack serve --open --mode development",
     "build": "tsc && cp -R src/styles dist/styles",
     "test": "jest",
-    "prepublishOnly": "npm run build"
+    "prepublishOnly": "npm run build",
+    "prepare": "npm run build"
   },
   "repository": {
     "type": "git",

package/src/AutoCompleteWithTabFilter.tsx

@@ -1034,7 +1034,8 @@ const AutoCompleteWithTabFilter = forwardRef<
                     });
                 }
 
-                // Don't clear here - clearing happens in handleApplyTabFilter after data is sent
+                // Clear tabSelectedItems after applying filter and data is loaded
+                onToolTabChange?.([]);
                 setShowToolsTab(false);
                 // Reset moreOptionTab component
                 setMoreOptionResetKey(prev => prev + 1);
@@ -1055,21 +1056,12 @@ const AutoCompleteWithTabFilter = forwardRef<
             setAllDataLoaded(false);
         }, [showToolsTab]);
 
-        const handleApplyTabFilter = useCallback((data?: { selectedItems?: ValueProps[], moreOptionValues?: any }) => {
-            // Call onToolTabChange with selected items data when Apply is clicked
-            if (data?.selectedItems !== undefined) {
-                onToolTabChange?.(data.selectedItems);
-                // Clear tabSelectedItems after data is sent
-                // Use setTimeout to ensure the data is sent first
-                setTimeout(() => {
-                    onToolTabChange?.([]);
-                }, 0);
-            }
+        const handleApplyTabFilter = useCallback((moreOptionValues?: any) => {
             // Set flag to trigger effect when data loads
             setApplyTabFilter(true);
             handlePickSuggestions(searchValue ? searchValue : '*', 1);
             // Note: onMoreOptionChange is called when values change in the component, not here
-        }, [searchValue, handlePickSuggestions, onToolTabChange]);
+        }, [searchValue, handlePickSuggestions]);
 
         useEffect(() => {
             const allSelected =

package/src/ReactAutoCompleteTableView.tsx

@@ -125,6 +125,7 @@ const ReactAutoCompleteTableView: React.FC<AutoSuggestionInputProps> = ({
     left: 0,
     bottom: 0,
     right: 0,
+    maxHeight: '60vh',
   });
   const checkIncludes = (
     mainString: string,
@@ -552,19 +553,25 @@ const ReactAutoCompleteTableView: React.FC<AutoSuggestionInputProps> = ({
 
   const getDropPosition = (): any => {
     if (!insideOpen && inputRef?.current) {
-      const dropdownHeight = 200; // Assume the height of the dropdown is 200px, adjust as needed
+      const minDropdownHeight = 200;
+      const padding = 24; // gap + margin so dropdown doesn't touch viewport edge
       const isMobile = window.innerWidth < 768; // Mobile breakpoint
 
       const inputRect = inputRef.current.getBoundingClientRect();
-      const spaceBelow =
-        window.innerHeight - (inputRect.bottom + window.scrollY);
-      const spaceAbove = inputRect.top + window.scrollY;
+      const maxHeightLimit = window.innerHeight * 0.6;
+      const spaceBelow = Math.max(0, window.innerHeight - inputRect.bottom - padding);
+      const spaceAbove = Math.max(0, inputRect.top - padding);
+      const availableSpace = Math.max(spaceAbove, spaceBelow);
+      const maxHeightPx = Math.min(Math.max(minDropdownHeight, availableSpace), maxHeightLimit);
 
-      let top;
-      let bottom;
-      if (spaceBelow < dropdownHeight && spaceAbove > dropdownHeight) {
-        bottom = spaceBelow + 43;
+      let top: number | undefined;
+      let bottom: number | undefined;
+      // Open above if there's more space above, or if there's not enough space below
+      if (spaceAbove > spaceBelow || (spaceBelow < minDropdownHeight && spaceAbove >= minDropdownHeight)) {
+        // Open above: position above input
+        bottom = window.innerHeight - inputRect.top + window.scrollY + 2;
       } else {
+        // Open below: position below input
         top = inputRect.top + window.scrollY + inputRect.height + 2;
       }
 
@@ -626,6 +633,7 @@ const ReactAutoCompleteTableView: React.FC<AutoSuggestionInputProps> = ({
         top,
         bottom,
         width,
+        maxHeight: `${maxHeightPx}px`,
       });
     }
 
@@ -723,13 +731,13 @@ const ReactAutoCompleteTableView: React.FC<AutoSuggestionInputProps> = ({
     return (
       (filteredData?.length > 0 || showNoResults) && (
         <div
-          style={{ ...dropPosition, maxHeight: '60vh' }}
+          style={{ ...dropPosition, overflow: 'hidden' }}
           className="autocomplete-suggections autocomplete-suggections-tableview absolute bg-white shadow-gray-300 shadow-md border border-grey-light z-50 mt-9"
         >
           <ul
             className={`h-auto overflow-auto w-full ${tableView ? '' : 'py-1.5'}`}
             ref={scrollContainerRef}
-            style={{ maxHeight: 'calc(60vh - 2rem)' }}
+            style={{ maxHeight: dropPosition.maxHeight ? `calc(${dropPosition.maxHeight} - 2rem)` : undefined }}
           >
             {filteredData?.length > 0 ? (
               <>

package/src/dropdownFilterTabs.tsx

@@ -635,11 +635,8 @@ const DropdownFilterTabs = forwardRef<
         setIsInitialRender(false);
       } else {
         // Only call onChange if selectedItems actually changed
-        // Skip onChange if applyTabFilter is provided (onChange will be called on Apply button click)
         if (!deepEqual(selectedItems, prevSelectedItemsRef.current)) {
-          if (!applyTabFilter) {
-            onChange(selectedItems);
-          }
+          onChange(selectedItems);
           prevSelectedItemsRef.current = selectedItems;
         }
       }
@@ -650,7 +647,7 @@ const DropdownFilterTabs = forwardRef<
         });
       });
       // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [selectedItems, applyTabFilter]);
+    }, [selectedItems]);
 
     useEffect(() => {
       // Use double requestAnimationFrame to ensure DOM updates are complete
@@ -992,19 +989,7 @@ const DropdownFilterTabs = forwardRef<
       setDropOpen(false);
       setSearchValue('');
       resetSuggections?.();
-      // Extract selectedItems if it's included in values (from moreOptionTab), otherwise use state
-      const itemsToPass = values?.selectedItems || selectedItems;
-      // Extract moreOptionValues (exclude selectedItems from values if present)
-      const { selectedItems: _, ...moreOptionValues } = values || {};
-      const moreOpts = Object.keys(moreOptionValues).length > 0 ? moreOptionValues : values;
-      // When Apply button is used (moreOptionTab), notify parent of moreOption values
-      if (moreOpts !== undefined && moreOpts !== null) {
-        onMoreOptionChange?.(moreOpts);
-      }
-      // Pass all selected items from all tabs to applyTabFilter
-      applyTabFilter?.({ selectedItems: itemsToPass, moreOptionValues: moreOpts });
-      // Clear all selected items after applying
-      setSelectedItems([]);
+      applyTabFilter?.(values);
     };
 
     useEffect(() => {
@@ -1063,19 +1048,13 @@ const DropdownFilterTabs = forwardRef<
                     >
                       {React.isValidElement(moreOptionTab)
                         ? React.cloneElement(moreOptionTab as React.ReactElement<any>, {
-                            onApply: (values?: any) => {
-                              // Include selected tab values along with moreOption values
-                              handleApplySelected({
-                                ...values,
-                                selectedItems: selectedItems
-                              });
-                            },
+                            onApply: (values?: any) => handleApplySelected(values),
                             onValueChange: (values?: any) => {
-                              // Only update local state for UI (e.g. Apply button visibility)
-                              // onMoreOptionChange is called only when Apply button is clicked
+                              // Check if values exist and update state
                               const hasValues = values !== undefined && values !== null && 
                                 (typeof values === 'object' ? Object.keys(values).length > 0 : true);
                               setHasMoreOptionValues(hasValues);
+                              onMoreOptionChange?.(values);
                             },
                           } as any)
                         : moreOptionTab}