@megha-ui/react 1.3.44 → 1.3.46

package/dist/components/dropdown/index.js

@@ -19,6 +19,7 @@ const Dropdown = ({ options, selectedValues, onChange, placeholder = "Select..."
     const clearIconRef = useRef(null);
     const searchInputRef = useRef(null);
     const searchOptionRef = useRef(null);
+    const applyButtonRef = useRef(null);
     const optionRefs = useRef([]);
     const [highlightIndex, setHighlightIndex] = useState(0);
     const [intermediateValues, setIntermediateValues] = useState(selectedValues);
@@ -64,30 +65,27 @@ const Dropdown = ({ options, selectedValues, onChange, placeholder = "Select..."
         setIntermediateValues(selectedValues);
     }, [selectedValues]);
     useEffect(() => {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f, _g;
         if (isOpen && searchEnabled) {
             (_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-            if (typeof maxDropdownHeight === "undefined" &&
-                wrapperRef.current) {
+            if (typeof maxDropdownHeight === "undefined" && wrapperRef.current) {
                 const rect = wrapperRef.current.getBoundingClientRect();
                 const searchOptionRect = (_b = searchOptionRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
-                const searchHeight = (_c = searchOptionRect === null || searchOptionRect === void 0 ? void 0 : searchOptionRect.height) !== null && _c !== void 0 ? _c : 0;
+                const applyButtonRect = (_c = applyButtonRef.current) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect();
+                const searchHeight = (_d = searchOptionRect === null || searchOptionRect === void 0 ? void 0 : searchOptionRect.height) !== null && _d !== void 0 ? _d : 0;
+                const applyBtnHeight = (_e = applyButtonRect === null || applyButtonRect === void 0 ? void 0 : applyButtonRect.height) !== null && _e !== void 0 ? _e : 0;
                 const boundaryParent = getLayoutBoundaryParent(wrapperRef.current);
                 const containerRect = boundaryParent === null || boundaryParent === void 0 ? void 0 : boundaryParent.getBoundingClientRect();
-                const containerTop = (_d = containerRect === null || containerRect === void 0 ? void 0 : containerRect.top) !== null && _d !== void 0 ? _d : 0;
-                const containerBottom = (_e = containerRect === null || containerRect === void 0 ? void 0 : containerRect.bottom) !== null && _e !== void 0 ? _e : document.documentElement.clientHeight;
+                const containerTop = (_f = containerRect === null || containerRect === void 0 ? void 0 : containerRect.top) !== null && _f !== void 0 ? _f : 0;
+                const containerBottom = (_g = containerRect === null || containerRect === void 0 ? void 0 : containerRect.bottom) !== null && _g !== void 0 ? _g : document.documentElement.clientHeight;
                 const viewportPadding = 8;
                 const menuGap = 8;
                 const rawSpaceBelow = containerBottom -
                     rect.bottom -
                     viewportPadding -
                     menuGap -
-                    searchHeight;
-                const rawSpaceAbove = rect.top -
-                    containerTop -
-                    viewportPadding -
-                    menuGap -
-                    searchHeight;
+                    searchHeight - applyBtnHeight;
+                const rawSpaceAbove = rect.top - containerTop - viewportPadding - menuGap - searchHeight - applyBtnHeight;
                 const spaceBelow = Math.max(0, Math.floor(rawSpaceBelow));
                 const spaceAbove = Math.max(0, Math.floor(rawSpaceAbove));
                 const opensUpwards = typeof clickStyle.bottom !== "undefined";
@@ -516,7 +514,7 @@ const Dropdown = ({ options, selectedValues, onChange, placeholder = "Select..."
                                     justifyContent: "end",
                                     padding: "0.75rem 0.5rem",
                                     borderTop: "1px solid var(--divider, #f5f5f5)",
-                                }, children: _jsx(Button, { text: "Apply", fontSize: "", fontWeight: "", color: "#FFFFFF", backgroundColor: "#2377BA", borderColor: "#2377BA", onClick: () => {
+                                }, ref: applyButtonRef, children: _jsx(Button, { text: "Apply", fontSize: "", fontWeight: "", color: "#FFFFFF", backgroundColor: "#2377BA", borderColor: "#2377BA", onClick: () => {
                                         onApplyChange(intermediateValues);
                                         setIsOpen(false);
                                     }, borderRadius: "0.5rem" }) }))] })] })] }));

package/dist/components/grid/index.js

@@ -1118,6 +1118,12 @@ withCard = false, cardClassName, cardHeader, title, headerLeft, headerRight, sub
         });
         setSearchQueries((prev) => (Object.assign(Object.assign({}, prev), filterObj)));
     };
+    const normalizeFixedFilters = (filters) => {
+        return Object.entries(filters)
+            .map(([key, values]) => `${key}:${[...values].sort().join(",")}`)
+            .sort()
+            .join("|");
+    };
     const filterDetails = useMemo(() => {
         const filterColumn = gridColumns.reduce((acc, column) => {
             const query = searchQueries[column.key];
@@ -1134,6 +1140,13 @@ withCard = false, cardClassName, cardHeader, title, headerLeft, headerRight, sub
             }
             return acc;
         }, {});
+        const fixedFilterColumn = fixedColumns.reduce((acc, column) => {
+            const values = fixedFilterValues[column.key] || [];
+            if (values.length > 0) {
+                acc[column.key] = values;
+            }
+            return acc;
+        }, {});
         const propFilterColumn = gridColumns.reduce((acc, column) => {
             if (filterData) {
                 const { searchQueries, uniqueSearch } = filterData;
@@ -1153,6 +1166,14 @@ withCard = false, cardClassName, cardHeader, title, headerLeft, headerRight, sub
             }
             return acc;
         }, {});
+        const propFixedFilterColumn = fixedColumns.reduce((acc, column) => {
+            var _a;
+            const values = (filterData && ((_a = filterData.fixedFilterValues) === null || _a === void 0 ? void 0 : _a[column.key])) || [];
+            if (values.length > 0) {
+                acc[column.key] = values;
+            }
+            return acc;
+        }, {});
         const sortColumn = gridColumns.reduce((acc, column) => {
             const query = sortQueries === null || sortQueries === void 0 ? void 0 : sortQueries[column.key];
             if (query) {
@@ -1167,7 +1188,9 @@ withCard = false, cardClassName, cardHeader, title, headerLeft, headerRight, sub
             }
             return acc;
         }, {});
-        const hasFilters = Object.keys(filterColumn).length > 0 || globalInputSearch !== "";
+        const hasFilters = Object.keys(filterColumn).length > 0 ||
+            globalInputSearch !== "" ||
+            Object.keys(fixedFilterColumn).length > 0;
         return {
             hasFilters,
             filtersUpdated: Object.keys(filterColumn).sort().toString() !==
@@ -1178,9 +1201,22 @@ withCard = false, cardClassName, cardHeader, title, headerLeft, headerRight, sub
                     Object.keys(propSortColumn).sort().toString() ||
                 Object.values(sortColumn).sort().toString() !==
                     Object.values(propSortColumn).sort().toString() ||
+                normalizeFixedFilters(fixedFilterColumn) !==
+                    normalizeFixedFilters(propFixedFilterColumn) ||
                 (filterData === null || filterData === void 0 ? void 0 : filterData.globalInputSearch) !== globalInputSearch,
         };
-    }, [searchQueries, globalInputSearch, uniqueSearch, gridColumns]);
+    }, [
+        searchQueries,
+        globalInputSearch,
+        uniqueSearch,
+        gridColumns,
+        filteredData,
+        fixedFilterValues,
+        fixedColumns,
+        sortQueries,
+        defaultSort,
+        filterData,
+    ]);
     const sortDetails = useMemo(() => {
         const sortColumn = gridColumns.reduce((acc, column) => {
             const query = sortQueries === null || sortQueries === void 0 ? void 0 : sortQueries[column.key];
@@ -1469,6 +1505,7 @@ withCard = false, cardClassName, cardHeader, title, headerLeft, headerRight, sub
                                     groupBy: gridGroupBy,
                                     sortQueries: sortQueries,
                                     summariseKeys: summariseKeys,
+                                    fixedFilterValues,
                                 }), style: {
                                     marginLeft: 6,
                                     cursor: "pointer",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@megha-ui/react",
-  "version": "1.3.44",
+  "version": "1.3.46",
   "description": "A collection of reusable UI components for React applications, built with TypeScript.",
   "main": "./dist/index.js",
   "module": "./dist/index.js",