@megha-ui/react 1.3.25 → 1.3.27

package/dist/components/grid/hooks/useBulkSelect.d.ts

@@ -3,8 +3,9 @@ interface UseBulkSelectProps {
     data: DataRow[];
     setSelectedRows?: any;
     selectedRows?: Set<string>;
+    idKey: string;
 }
-export declare const useBulkSelect: ({ data, selectedRows, setSelectedRows }: UseBulkSelectProps) => {
+export declare const useBulkSelect: ({ data, selectedRows, setSelectedRows, idKey, }: UseBulkSelectProps) => {
     selectedRows: Set<string> | undefined;
     toggleRowSelection: (id: string) => void;
     toggleSelectAll: (visibleData: DataRow[], allSelected: boolean) => void;

package/dist/components/grid/hooks/useBulkSelect.js

@@ -1,44 +1,48 @@
 import { useCallback, useMemo } from "react";
-export const useBulkSelect = ({ data, selectedRows, setSelectedRows }) => {
+export const useBulkSelect = ({ data, selectedRows, setSelectedRows, idKey, }) => {
     const toggleRowSelection = useCallback((id) => {
-        setSelectedRows && setSelectedRows((prevSelectedRows) => {
-            const newSelectedRows = new Set(prevSelectedRows);
-            if (newSelectedRows.has(id)) {
-                newSelectedRows.delete(id);
-            }
-            else {
-                newSelectedRows.add(id);
-            }
-            return newSelectedRows;
-        });
+        setSelectedRows &&
+            setSelectedRows((prevSelectedRows) => {
+                const newSelectedRows = new Set(prevSelectedRows);
+                if (newSelectedRows.has(id)) {
+                    newSelectedRows.delete(id);
+                }
+                else {
+                    newSelectedRows.add(id);
+                }
+                return newSelectedRows;
+            });
     }, []);
     const toggleSelectAll = useCallback((visibleData, allSelected) => {
-        setSelectedRows && setSelectedRows((prevSelectedRows) => {
-            const newSelectedRows = new Set(prevSelectedRows);
-            if (allSelected) {
-                visibleData.forEach((item) => { var _a; return newSelectedRows.delete((_a = item === null || item === void 0 ? void 0 : item["id"].value) === null || _a === void 0 ? void 0 : _a.toString()); });
-            }
-            else {
-                visibleData.forEach((item) => {
-                    var _a;
-                    newSelectedRows.add((_a = item === null || item === void 0 ? void 0 : item["id"].value) === null || _a === void 0 ? void 0 : _a.toString());
-                });
-            }
-            return newSelectedRows;
-        });
+        setSelectedRows &&
+            setSelectedRows((prevSelectedRows) => {
+                const newSelectedRows = new Set(prevSelectedRows);
+                if (allSelected) {
+                    visibleData.forEach((item) => { var _a; return newSelectedRows.delete((_a = item === null || item === void 0 ? void 0 : item[idKey].value) === null || _a === void 0 ? void 0 : _a.toString()); });
+                }
+                else {
+                    visibleData.forEach((item) => {
+                        var _a;
+                        newSelectedRows.add((_a = item === null || item === void 0 ? void 0 : item[idKey].value) === null || _a === void 0 ? void 0 : _a.toString());
+                    });
+                }
+                return newSelectedRows;
+            });
     }, []);
     const allRowsSelected = useMemo(() => {
         return data.every((item) => {
             var _a;
-            return (item === null || item === void 0 ? void 0 : item["id"]) &&
-                selectedRows && selectedRows.has((_a = item === null || item === void 0 ? void 0 : item["id"].value) === null || _a === void 0 ? void 0 : _a.toString());
+            return (item === null || item === void 0 ? void 0 : item[idKey]) &&
+                selectedRows &&
+                selectedRows.has((_a = item === null || item === void 0 ? void 0 : item[idKey].value) === null || _a === void 0 ? void 0 : _a.toString());
         });
     }, [data, selectedRows]);
     const someRowsSelected = useMemo(() => {
         return data.some((item) => {
             var _a;
-            return (item === null || item === void 0 ? void 0 : item["id"]) &&
-                selectedRows && selectedRows.has((_a = item === null || item === void 0 ? void 0 : item["id"].value) === null || _a === void 0 ? void 0 : _a.toString());
+            return (item === null || item === void 0 ? void 0 : item[idKey]) &&
+                selectedRows &&
+                selectedRows.has((_a = item === null || item === void 0 ? void 0 : item[idKey].value) === null || _a === void 0 ? void 0 : _a.toString());
         });
     }, [selectedRows, allRowsSelected]);
     return {

package/dist/components/grid/index.js

@@ -32,7 +32,7 @@ import NewGridHeader from "./utils/newGridHeader";
 import NewGridRow from "./utils/newGridRow";
 import NewSummariseDetails from "./utils/newSummariseDetails";
 import NewGroupedGridDetails from "./utils/newGroupedGridDetails";
-const Grid = ({ columns, wrapperClass, updateGridColumns, data, height, sortable = true, paginate, rowsPerPageOptions = [10, 20, 50, 100], defaultRowsPerPage = 100, defaultColumnsPerView = 200, widthMode = "custom", bulkSelect = false, cellBorder = false, rowHeight = "3rem", onRowClick, rowCount = false, rowBorder = true, showMenu = false, search = false, defaultSearchOperation = "contains", gridBorder = false, isLoading = false, rowTopBorder, rowBottomBorder, rowLeftBorder, rowRightBorder, headerBackground = "var(--row-header-bg)", headerTopBorder = "none", headerBottomBorder = "none", SettingIcon, ExportIcon, ignoredExportItems = ["action", "actions"], borderColor = "#dbdfe9", updateColumns, showHideAvailable = false, columnSearchOutside = false, multiSorting = false, exportAvailable = false, exportableFileName = "", groupBy, updateGroupBy, rowKey = "id", hlBorderColor = "black", selectedRow, selectedRowStyle = {
+const Grid = ({ columns, wrapperClass, updateGridColumns, data, height, sortable = true, paginate, rowsPerPageOptions = [10, 20, 50, 100], defaultRowsPerPage = 100, defaultColumnsPerView = 200, widthMode = "custom", bulkSelect = false, bulkId = "id", cellBorder = false, rowHeight = "3rem", onRowClick, rowCount = false, rowBorder = true, showMenu = false, search = false, defaultSearchOperation = "contains", gridBorder = false, isLoading = false, rowTopBorder, rowBottomBorder, rowLeftBorder, rowRightBorder, headerBackground = "var(--row-header-bg)", headerTopBorder = "none", headerBottomBorder = "none", SettingIcon, ExportIcon, ignoredExportItems = ["action", "actions"], borderColor = "#dbdfe9", updateColumns, showHideAvailable = false, columnSearchOutside = false, multiSorting = false, exportAvailable = false, exportableFileName = "", groupBy, updateGroupBy, rowKey = "id", hlBorderColor = "black", selectedRow, selectedRowStyle = {
     borderLeft: "0.5rem solid #d9d9d9",
 }, defaultSort, noKeyEvents = true, customOperation, hasCustomOperation, globalSearch, headerDropdownIndex, draggable = false, resizable = false, updateGridData, widthUnits, checkboxWrapper, ignoreHugContent = false, isSummarise = false, isHideDups = false, isMultipleChips = false, fullScreenAvailable = true, defaultGroupOpen, alternateRowColor = true, activeCalculateColor = "#2377BA", calculatetextColor = "#fff", actionsKey = "actions", ignoreClickKeys = "", saveAsNewView = false, handleSaveAsView, saveAsViewIcon, filterData, chipColor = "#ccc", withAscii = false, propSummariseKeys, SummariseIcon, summarizeColor = "black", isExpandable = false, expandedRow, extraRow, selectedCheckBox, setSelectedCheckbox, ignoreRowSelect, setOpenedRows, openedRows, getLoadingState, globalSearchOpen = false, updateFixedFilterValues = (fixedFilterValues) => {
     console.log("Update fixed filter values not implemented", fixedFilterValues);
@@ -550,6 +550,7 @@ withCard = false, cardClassName, cardHeader, title, headerLeft, headerRight, sub
         data: sortedData,
         selectedRows: selectedCheckBox,
         setSelectedRows: setSelectedCheckbox,
+        idKey: bulkId
     });
     const [hasVerticalScroll, setHasVerticalScroll] = useState(false);
     const [rowOpened, setRowOpened] = useState([]);

package/dist/components/grid/types/grid.d.ts

@@ -73,6 +73,7 @@ export interface OjasGridProps {
     defaultSearchOperation?: IDefaultSearchOps;
     paginate?: boolean;
     bulkSelect?: boolean;
+    bulkId?: string;
     rowsPerPageOptions?: number[];
     defaultRowsPerPage?: number;
     defaultColumnsPerView?: number;

package/dist/components/grid/utils/newGridHeader.js

@@ -248,7 +248,9 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
     };
     return (_jsxs(_Fragment, { children: [bulkSelect && (_jsx("div", { style: Object.assign(Object.assign({}, cellStyle), { textTransform: "uppercase", padding: "0.5rem", textAlign: "left", whiteSpace: "nowrap", textOverflow: "ellipsis", position: "sticky", top: 0, zIndex: 1, backgroundColor: "var(--row-header-bg)" }), children: _jsx("div", { style: {
                         display: "flex",
-                        alignItems: "center"
+                        alignItems: "center",
+                        width: "100%",
+                        height: "100%",
                     }, children: _jsx(Checkbox, { selected: allRowsSelected, onChange: () => toggleSelectAll(), noLabel: true, wrapperClass: checkboxWrapper }) }) })), groupByKeys.map((_groupBy) => {
                 var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36, _37, _38, _39, _40, _41, _42, _43, _44, _45, _46, _47, _48, _49, _50, _51, _52, _53, _54, _55, _56, _57, _58;
                 return (_jsx(_Fragment, { children: headerColumns.find((column) => column.key === _groupBy) && (_jsxs("div", { className: `${sortable &&

package/dist/components/grid/utils/newGridRow.js

@@ -100,6 +100,8 @@ const GridRow = ({ item, rowStyle, cellStyle, rowHeight, bulkSelect, selectedRow
                                 : "var(--row-bg-even)" }), children: _jsx("div", { style: {
                                 display: "flex",
                                 alignItems: "center",
+                                width: "100%",
+                                height: "100%",
                             }, children: _jsx(Checkbox, { noLabel: true, disabled: ignoreRowSelect &&
                                     ignoreRowSelect.has((_e = item["id"].value) === null || _e === void 0 ? void 0 : _e.toString()), onChange: () => { var _a; return toggleRowSelection((_a = item["id"].value) === null || _a === void 0 ? void 0 : _a.toString()); }, selected: item["id"] && selectedRows.has(item["id"].value), wrapperClass: checkboxWrapper }) }) })), item[groupBy] && (_jsx("div", { style: {
                             wordBreak: widthMode === "auto" ? "break-all" : "unset",
@@ -152,6 +154,8 @@ const GridRow = ({ item, rowStyle, cellStyle, rowHeight, bulkSelect, selectedRow
                         : "var(--row-bg-even)" }), children: _jsx("div", { style: {
                         display: "flex",
                         alignItems: "center",
+                        width: "100%",
+                        height: "100%",
                     }, children: _jsx(Checkbox, { noLabel: true, disabled: ignoreRowSelect &&
                             ignoreRowSelect.has((_m = item["id"].value) === null || _m === void 0 ? void 0 : _m.toString()), onChange: () => { var _a; return toggleRowSelection((_a = item["id"].value) === null || _a === void 0 ? void 0 : _a.toString()); }, selected: item["id"] && selectedRows.has(item["id"].value), wrapperClass: checkboxWrapper }) }) })), columns.map((column, colIndex) => {
                 var _a, _b, _c, _d, _e, _f, _g;

package/package.json

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