react-core-ts 2.1.13 → 2.1.15

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/dist/utilities/autosuggestions.d.ts

@@ -1,10 +1,10 @@
 type ValueProps = {
     [key: string]: string;
 };
-type UseSuggestionsType = (getData: (key?: string, next?: number, tabValue?: number | string) => Promise<ValueProps[]>, initialData?: ValueProps[], dropOpen?: boolean, asyncFetch?: boolean, paginationEnabled?: boolean, typeOnlyFetch?: boolean, inputValue?: string, isMultiple?: boolean, setNextPage?: (value: number) => void, selectedItems?: any[], initialLoad?: boolean) => {
+type UseSuggestionsType = (getData: (key?: string, next?: number, tabValue?: number | string, toolApply?: boolean) => Promise<ValueProps[]>, initialData?: ValueProps[], dropOpen?: boolean, asyncFetch?: boolean, paginationEnabled?: boolean, typeOnlyFetch?: boolean, inputValue?: string, isMultiple?: boolean, setNextPage?: (value: number) => void, selectedItems?: any[], initialLoad?: boolean) => {
     suggestions: ValueProps[];
     isLoading: boolean;
-    handlePickSuggestions: (value?: string, next?: number, append?: boolean, tabValue?: string | number) => Promise<void>;
+    handlePickSuggestions: (value?: string, next?: number, append?: boolean, tabValue?: string | number, toolApply?: boolean) => Promise<void>;
     resetSuggections?: () => void;
 };
 export declare const useSuggestions: UseSuggestionsType;

package/dist/utilities/autosuggestions.js

@@ -61,7 +61,7 @@ var useSuggestions = function (getData, initialData, dropOpen, asyncFetch, pagin
     var resetSuggections = function () {
         setSuggestions([]);
     };
-    var handlePickSuggestions = function (value, nextPage, appendData, tabValue) { return __awaiter(void 0, void 0, void 0, function () {
+    var handlePickSuggestions = function (value, nextPage, appendData, tabValue, toolApply) { return __awaiter(void 0, void 0, void 0, function () {
         var data, newSuggestions, error_1;
         return __generator(this, function (_a) {
             switch (_a.label) {
@@ -73,7 +73,7 @@ var useSuggestions = function (getData, initialData, dropOpen, asyncFetch, pagin
                     return [4 /*yield*/, (asyncFetch || initialLoad
                             ? typeOnlyFetch && value === ""
                                 ? Promise.resolve([])
-                                : getData(value, nextPage, tabValue)
+                                : getData(value, nextPage, tabValue, toolApply)
                             : Promise.resolve(initialData))];
                 case 2:
                     data = _a.sent();

package/dist/utilities/autosuggestions.js.map

@@ -1 +1 @@
-{"version":3,"file":"autosuggestions.js","sourceRoot":"","sources":["../../src/utilities/autosuggestions.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"autosuggestions.js","sourceRoot":"","sources":["../../src/utilities/autosuggestions.ts"],"names":[],"mappings":"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"}

package/docs/App.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 
 import { ValueProps } from "../src/commontypes";
 import { AutoComplete, AutoCompleteWithSelectedList, AutoCompleteWithTabFilter, AutoCompleteWithTreeStructure, ExpandableAutoComplete, ModernAutoComplete, ModernAutoCompleteDropdown, ModernAutoCompleteTableView, ModernAutoCompleteSuggections, ModernTextField } from "../src/index";
@@ -718,11 +718,21 @@ export default function App() {
 interface MoreOptionsComponentProps {
   onApply?: (values?: any) => void;
   onValueChange?: (values?: any) => void;
+  resetKey?: number;
 }
 
-const MoreOptionsComponent = ({ onApply, onValueChange }: MoreOptionsComponentProps) => {
+const MoreOptionsComponent = ({ onApply, onValueChange, resetKey }: MoreOptionsComponentProps) => {
   const [checked, setChecked] = useState(false);
   
+  // Reset component state when resetKey changes
+  useEffect(() => {
+    if (resetKey !== undefined && resetKey > 0) {
+      setChecked(false);
+      // Notify parent that values have been reset
+      onValueChange?.(undefined);
+    }
+  }, [resetKey, onValueChange]);
+  
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const newValue = e.target.checked;
     setChecked(newValue);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-core-ts",
-  "version": "2.1.13",
+  "version": "2.1.15",
   "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);
+            handlePickSuggestions(searchValue ? searchValue : '*', 1, false, undefined, true);
             // 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

@@ -145,14 +145,17 @@ const DropdownFilterTabs = forwardRef<
     const [hasMoreOptionValues, setHasMoreOptionValues] = useState(false);
     const [tabsScrollable, setTabsScrollable] = useState(false);
     const scrollableDivsRef = useRef<NodeListOf<Element> | null>(null);
+    const [localResetKey, setLocalResetKey] = useState(0);
     
-    // Use external reset key if provided, otherwise default to 0
-    const currentResetKey = externalResetKey !== undefined ? externalResetKey : 0;
+    // Use external reset key if provided, otherwise use local reset key
+    const currentResetKey = externalResetKey !== undefined ? externalResetKey : localResetKey;
 
     // Reset hasMoreOptionValues when reset key changes
     useEffect(() => {
       if (externalResetKey !== undefined && externalResetKey > 0) {
         setHasMoreOptionValues(false);
+        // Reset local reset key when external reset happens
+        setLocalResetKey(0);
       }
     }, [externalResetKey]);
 
@@ -635,11 +638,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 +650,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 +992,12 @@ 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([]);
+      // Reset moreOption data
+      setHasMoreOptionValues(false);
+      onMoreOptionChange?.(undefined);
+      // Trigger reset on moreOption component by incrementing reset key
+      setLocalResetKey(prev => prev + 1);
+      applyTabFilter?.(values);
     };
 
     useEffect(() => {
@@ -1063,20 +1056,15 @@ 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);
                             },
+                            resetKey: currentResetKey,
                           } as any)
                         : moreOptionTab}
                     </div>

package/src/utilities/autosuggestions.ts

@@ -8,7 +8,8 @@ type UseSuggestionsType = (
   getData: (
     key?: string,
     next?: number,
-    tabValue?: number | string
+    tabValue?: number | string,
+    toolApply?: boolean
   ) => Promise<ValueProps[]>,
   initialData?: ValueProps[],
   dropOpen?: boolean,
@@ -28,7 +29,8 @@ type UseSuggestionsType = (
     value?: string,
     next?: number,
     append?: boolean,
-    tabValue?: string | number
+    tabValue?: string | number,
+    toolApply?: boolean
   ) => Promise<void>;
   resetSuggections?: () => void
 };
@@ -57,14 +59,15 @@ export const useSuggestions: UseSuggestionsType = (
     value?: string,
     nextPage?: number,
     appendData?: boolean,
-    tabValue?: string | number
+    tabValue?: string | number,
+    toolApply?: boolean
   ) => {
     setIsLoading(true);
     try {
       const data = await (asyncFetch || initialLoad
         ? typeOnlyFetch && value === ""
           ? Promise.resolve([])
-          : getData(value, nextPage, tabValue)
+          : getData(value, nextPage, tabValue, toolApply)
         : Promise.resolve(initialData));
       if (!data || data?.length === 0) {
         setNextPage(undefined);