@megha-ui/react 1.2.625 → 1.2.626

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/components/grid/index.js +28 -73
  2. package/dist/components/grid/utils/groupedGridDetails.js +47 -58
  3. package/package.json +1 -1
package/dist/components/grid/index.js CHANGED
@@ -384,48 +384,30 @@ withCard = false, cardClassName, cardHeader, title, headerLeft, headerRight, sub
384
384
  }
385
385
  const _groupedKeys = groupedKeys.length > 0
386
386
  ? groupedKeys
387
- : [
388
- {
389
- groupedKey: "",
390
- groupedValue: columnKey,
391
- groupedColumns: columnKey,
392
- },
393
- ];
387
+ : [{ groupedKey: "", groupedValue: columnKey }];
394
388
  _groupedKeys.forEach((grouped) => {
395
- const { groupedValue, groupedColumns } = grouped;
389
+ const { groupedKey, groupedValue } = grouped;
396
390
  const filterValue = _groupedKeys.length > 1 ? groupedValue : "";
397
- // Expand groupedColumns to handle composite levels like "col1+col2>col3"
398
- const columnLevelTokens = groupedColumns
399
- ? groupedColumns.split(">").filter(Boolean)
400
- : [];
401
- const expandedColumnTokens = columnLevelTokens.flatMap((tok) => tok
402
- .split("+")
403
- .map((s) => s.trim())
404
- .filter(Boolean));
405
- // Values are always flattened and separated by '>'
406
- const filterTokens = filterValue
407
- ? filterValue.split(">").filter(Boolean)
408
- : [];
409
- const expandedValueTokens = filterTokens.flatMap((tok) => tok
410
- .split("+")
411
- .map((s) => s.trim())
412
- .filter(Boolean));
413
391
  const filteredValues = filteredData
414
- .filter((row) => {
415
- var _a, _b, _c, _d;
416
- if (!filterValue)
417
- return true;
418
- const n = Math.min(expandedColumnTokens.length, filterTokens.length);
419
- for (let i = 0; i < n; i++) {
420
- const col = expandedColumnTokens[i];
421
- const value = (_c = (_b = (_a = row[col]) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.toString()) !== null && _c !== void 0 ? _c : "";
422
- const expected = (_d = expandedValueTokens[i]) !== null && _d !== void 0 ? _d : "";
423
- if (value !== expected)
424
- return false;
425
- }
426
- return true;
427
- })
428
- .map((row) => { var _a; return ((_a = row[columnKey]) === null || _a === void 0 ? void 0 : _a.value) || ""; });
392
+ .filter((item) => filterValue
393
+ ? filterValue.split(">").length > 1
394
+ ? groupedKey.split(">").every((group) => {
395
+ var _a;
396
+ return filterValue
397
+ .split(">")
398
+ .includes((_a = item[group].value) === null || _a === void 0 ? void 0 : _a.toString());
399
+ })
400
+ : groupedKey.split(">").some((group) => {
401
+ var _a;
402
+ return filterValue
403
+ .split(">")
404
+ .includes((_a = item[group].value) === null || _a === void 0 ? void 0 : _a.toString());
405
+ })
406
+ : true)
407
+ .map((item) => {
408
+ var _a;
409
+ return ((_a = item[columnKey]) === null || _a === void 0 ? void 0 : _a.value) || "";
410
+ });
429
411
  let value = "";
430
412
  const column = gridColumns.find((item) => item.key === columnKey);
431
413
  const nonEmptyValues = filteredValues
@@ -598,50 +580,26 @@ withCard = false, cardClassName, cardHeader, title, headerLeft, headerRight, sub
598
580
  }
599
581
  }, [gridColumns, groupBy]);
600
582
  const groupByMultipleKeys = (data, groupByKeys) => {
601
- const parsedKeys = groupByKeys
602
- .map((k) => (k !== null && k !== void 0 ? k : "").trim())
603
- .filter((k) => k)
604
- .map((k) => k.includes("+")
605
- ? k
606
- .split("+")
607
- .map((s) => s.trim())
608
- .filter(Boolean)
609
- : [k]);
610
583
  const groupData = (items, keys, level = 0) => {
611
584
  if (level >= keys.length)
612
585
  return items;
613
586
  const groupedResult = [];
614
- const levelKeys = keys[level]; // one or more keys for this level
587
+ const groupKey = keys[level];
615
588
  items.forEach((item) => {
616
589
  var _a;
617
- let groupValue = "";
618
- let groupKeyLabel = levelKeys[levelKeys.length - 1] || "";
619
- let allKeysForLevel = undefined;
620
- if (levelKeys.length > 1) {
621
- const values = levelKeys.map((k) => { var _a, _b; return (_b = (_a = item[k]) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : ""; });
622
- groupValue = values.join("+");
623
- allKeysForLevel = levelKeys;
624
- }
625
- else {
626
- const k = levelKeys[0];
627
- groupValue = ((_a = item[k]) === null || _a === void 0 ? void 0 : _a.value) || "";
628
- }
590
+ const groupValue = ((_a = item[groupKey]) === null || _a === void 0 ? void 0 : _a.value) || "";
629
591
  let existingGroup = groupedResult.find((g) => g.value === groupValue);
630
592
  if (existingGroup) {
631
593
  existingGroup.values.push(item);
632
594
  }
633
595
  else {
634
- const base = {
635
- key: groupKeyLabel,
596
+ groupedResult.push({
597
+ key: groupKey,
636
598
  value: groupValue,
637
599
  count: 0,
638
600
  subGroups: [],
639
601
  values: [item],
640
- };
641
- if (allKeysForLevel) {
642
- base.allKeys = allKeysForLevel;
643
- }
644
- groupedResult.push(base);
602
+ });
645
603
  }
646
604
  });
647
605
  groupedResult.forEach((group) => {
@@ -650,7 +608,7 @@ withCard = false, cardClassName, cardHeader, title, headerLeft, headerRight, sub
650
608
  });
651
609
  return groupedResult;
652
610
  };
653
- return groupData(data, parsedKeys);
611
+ return groupData(data, groupByKeys);
654
612
  };
655
613
  const flattenGroupedData = (groupedData, level, groupedValues = [], parentKeys = []) => {
656
614
  const flatArray = [];
@@ -695,10 +653,7 @@ withCard = false, cardClassName, cardHeader, title, headerLeft, headerRight, sub
695
653
  };
696
654
  useEffect(() => {
697
655
  if (gridGroupBy && gridGroupBy !== "") {
698
- const sets = gridGroupBy
699
- .split(",")
700
- .map((s) => s.trim())
701
- .filter((s) => s);
656
+ const sets = gridGroupBy.split(",");
702
657
  const groupedArray = sets.length
703
658
  ? groupByMultipleKeys(sortedData, sets)
704
659
  : [];
package/dist/components/grid/utils/groupedGridDetails.js CHANGED
@@ -1,4 +1,4 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
1
+ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { memo, useEffect, useRef, useState } from "react";
3
3
  import GroupedRow from "./groupedRow";
4
4
  import SummariseDetails from "./SummariseDetails";
@@ -43,7 +43,7 @@ const GroupedGrid = ({ groupedData, rowOpened, startIndex, endIndex, alternateRo
43
43
  .join(">"));
44
44
  })
45
45
  .map((item, gIndex) => {
46
- var _a, _b, _c, _d, _e, _f, _g, _h;
46
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j;
47
47
  if (gIndex >= startIndex && gIndex <= endIndex)
48
48
  return item.type === "main" ? (_jsxs("div", { style: {
49
49
  width: "100%",
@@ -53,16 +53,16 @@ const GroupedGrid = ({ groupedData, rowOpened, startIndex, endIndex, alternateRo
53
53
  height: "max-content",
54
54
  boxSizing: "border-box", // Include padding and borders in the element's total width and height
55
55
  backgroundColor: "var(--summary-bg)",
56
- }, onClick: () => updateRowOpened(item.groupedValue), children: [(_a = item.groupedKey) === null || _a === void 0 ? void 0 : _a.split(">").flatMap((item) => item.split("+")).map((columnKey, index) => {
56
+ }, onClick: () => updateRowOpened(item.groupedValue), children: [(_a = item.groupedKey) === null || _a === void 0 ? void 0 : _a.split(">").filter((key) => key !== item.key).map((columnKey) => {
57
57
  const column = gridColumns.find((column) => column.key === columnKey);
58
58
  if (column) {
59
- return (_jsxs("div", { style: {
59
+ return (_jsx("div", { style: {
60
60
  width: widthMode === "auto"
61
61
  ? "auto"
62
62
  : (column === null || column === void 0 ? void 0 : column.width)
63
- ? `calc(${column === null || column === void 0 ? void 0 : column.width} + 25px)`
63
+ ? column === null || column === void 0 ? void 0 : column.width
64
64
  : columnWidths[`column-${columnKey}`]
65
- ? `calc(${columnWidths[`column-${columnKey}`]} + 25px)`
65
+ ? columnWidths[`column-${columnKey}`]
66
66
  : "fit-content",
67
67
  flex: widthMode === "auto" ? 1 : undefined,
68
68
  flexGrow: widthMode === "auto" ? 1 : 0,
@@ -70,60 +70,49 @@ const GroupedGrid = ({ groupedData, rowOpened, startIndex, endIndex, alternateRo
70
70
  display: "flex",
71
71
  alignItems: "center",
72
72
  padding: "0.5rem",
73
- }, className: `column index-${columnKey}`, children: [index === 0 && (_jsx("span", { style: {
74
- fontSize: "inherit",
75
- marginRight: "0.5rem",
76
- color: "var(--foreground)",
77
- background: "var(--disabled-bg)",
78
- width: "1rem",
79
- height: "1rem",
80
- flexGrow: 0,
81
- flexShrink: 0,
82
- borderRadius: 4,
83
- display: "flex",
84
- alignItems: "center",
85
- justifyContent: "center",
86
- }, children: rowOpened.includes(item.groupedValue || "")
87
- ? "-"
88
- : "+" })), _jsx("div", { children: (() => {
89
- var _a;
90
- const keys = (item.groupedKey || "").split(">");
91
- const vals = (item.groupedValue || "").split(">");
92
- const idx = keys.indexOf(columnKey);
93
- const compositeKeys = (item.groupedKey || "")
94
- .split(">")
95
- .filter((item) => item.includes("+"))
96
- .flatMap((item) => item.split("+"));
97
- const compositeValues = (item.groupedValue || "")
98
- .split(">")
99
- .filter((item) => item.includes("+"))
100
- .flatMap((item) => item.split("+"));
101
- const compositeIndex = compositeKeys.indexOf(columnKey);
102
- const display = idx > -1
103
- ? vals[idx]
104
- : compositeIndex > -1
105
- ? compositeValues[compositeIndex]
106
- : "";
107
- if (display && idx === keys.length - 1) {
108
- return `${display} (${item === null || item === void 0 ? void 0 : item.count})`;
109
- }
110
- else if (display &&
111
- compositeIndex === compositeKeys.length - 1 &&
112
- index ===
113
- ((_a = item.groupedKey) === null || _a === void 0 ? void 0 : _a.split(">").flatMap((item) => item.split("+")).length) -
114
- 1) {
115
- return `${display} (${item === null || item === void 0 ? void 0 : item.count})`;
116
- }
117
- if (compositeKeys.includes(item.key) ||
118
- item.key === columnKey) {
119
- return display;
120
- }
121
- })() })] }));
73
+ }, className: `column index-${columnKey}`, children: _jsx("div", { style: {
74
+ color: alternateRowColor && (gIndex + 1) % 2 === 0
75
+ ? "var(--row-header-bg)"
76
+ : "var(--row-bg)",
77
+ }, children: "--" }) }));
122
78
  }
123
79
  return null;
124
- }), isSummarise &&
125
- parseInt(((_b = item === null || item === void 0 ? void 0 : item.count) === null || _b === void 0 ? void 0 : _b.toString()) || "0") > 0 && (_jsx(SummariseDetails, { rowIndex: gIndex, removedKeys: (_c = item.groupedKey) === null || _c === void 0 ? void 0 : _c.split(">").flatMap((ele) => ele.split("+")), columns: gridColumns, groupBy: gridGroupBy, sortable: sortable, cellStyle: cellStyle, columnWidths: columnWidths, widthMode: widthMode, summariseKeys: summariseKeys, summariseDetails: summariseDetails, activeCalculateColor: activeCalculateColor, gridRef: gridRef, setCalculatePosition: setCalculatePosition, calculatePosition: calculatePosition, calculatetextColor: calculatetextColor, setCalculateVisible: setCalculateVisible, calculateVisible: calculateVisible, summariseDisplay: summariseDisplay, recalculate: recalculate, groupedData: item.groupedValue, actionsKey: actionsKey }))] }, String((_d = item.groupedValue) !== null && _d !== void 0 ? _d : gIndex))) : (_jsx(GroupedRow, { item: item.rowData, index: gIndex, rowStyle: Object.assign(Object.assign({}, rowStyle), (selectedRow === gIndex ? selectedRowStyle : {})), cellStyle: cellStyle, rowHeight: rowHeight, alternateRowColor: alternateRowColor, bulkSelect: bulkSelect, columns: gridColumns, widthMode: widthMode, rowKey: rowKey, onRowClick: onRowClick, loading: isLoading, groupBy: gridGroupBy, selectedRows: selectedRows, toggleRowSelection: toggleRowSelection, hasVerticalScroll: hasVerticalScroll, hugColumnWidths: columnWidths, actionsKey: actionsKey }, String(((_f = (_e = item.rowData) === null || _e === void 0 ? void 0 : _e.id) === null || _f === void 0 ? void 0 : _f.value)
126
- ? `${item.groupedValue}-${(_h = (_g = item.rowData) === null || _g === void 0 ? void 0 : _g.id) === null || _h === void 0 ? void 0 : _h.value}`
80
+ }), _jsxs("div", { style: {
81
+ display: "flex",
82
+ alignItems: "center",
83
+ fontSize: "inherit",
84
+ width: widthMode === "auto"
85
+ ? "auto"
86
+ : ((_b = gridColumns.find((column) => column.key === item.key)) === null || _b === void 0 ? void 0 : _b.width)
87
+ ? `calc(${(_c = gridColumns.find((column) => column.key === item.key)) === null || _c === void 0 ? void 0 : _c.width} + 25px)`
88
+ : columnWidths[`column-${item.key}`]
89
+ ? `calc(${columnWidths[`column-${item.key}`]} + 25px)`
90
+ : "fit-content",
91
+ background: "inherit",
92
+ flexShrink: 0,
93
+ flexGrow: 0,
94
+ cursor: "pointer",
95
+ padding: "0.5rem",
96
+ }, className: `group-column ${item.key}`, onClick: () => updateRowOpened(item.groupedValue), children: [_jsx("span", { style: {
97
+ fontSize: "inherit",
98
+ marginRight: "0.5rem",
99
+ color: "var(--foreground)",
100
+ background: "var(--disabled-bg)",
101
+ width: "1rem",
102
+ height: "1rem",
103
+ flexGrow: 0,
104
+ flexShrink: 0,
105
+ borderRadius: 4,
106
+ display: "flex",
107
+ alignItems: "center",
108
+ justifyContent: "center",
109
+ }, children: rowOpened.includes(item.groupedValue || "") ? "-" : "+" }), _jsxs("div", { style: {
110
+ display: "flex",
111
+ alignItems: "center",
112
+ flexWrap: "wrap",
113
+ }, children: [_jsx("span", { style: { marginRight: "0.5rem" }, children: item.html ? _jsx(_Fragment, { children: item.html }) : item.value }), _jsx("span", { children: `(${item === null || item === void 0 ? void 0 : item.count})` })] })] }), isSummarise &&
114
+ parseInt(((_d = item === null || item === void 0 ? void 0 : item.count) === null || _d === void 0 ? void 0 : _d.toString()) || "0") > 0 && (_jsx(SummariseDetails, { rowIndex: gIndex, removedKeys: item.groupedKey.split(">"), columns: gridColumns, groupBy: gridGroupBy, sortable: sortable, cellStyle: cellStyle, columnWidths: columnWidths, widthMode: widthMode, summariseKeys: summariseKeys, summariseDetails: summariseDetails, activeCalculateColor: activeCalculateColor, gridRef: gridRef, setCalculatePosition: setCalculatePosition, calculatePosition: calculatePosition, calculatetextColor: calculatetextColor, setCalculateVisible: setCalculateVisible, calculateVisible: calculateVisible, summariseDisplay: summariseDisplay, recalculate: recalculate, groupedData: item.groupedValue, actionsKey: actionsKey }))] }, String((_e = item.groupedValue) !== null && _e !== void 0 ? _e : gIndex))) : (_jsx(GroupedRow, { item: item.rowData, index: gIndex, rowStyle: Object.assign(Object.assign({}, rowStyle), (selectedRow === gIndex ? selectedRowStyle : {})), cellStyle: cellStyle, rowHeight: rowHeight, alternateRowColor: alternateRowColor, bulkSelect: bulkSelect, columns: gridColumns, widthMode: widthMode, rowKey: rowKey, onRowClick: onRowClick, loading: isLoading, groupBy: gridGroupBy, selectedRows: selectedRows, toggleRowSelection: toggleRowSelection, hasVerticalScroll: hasVerticalScroll, hugColumnWidths: columnWidths, actionsKey: actionsKey }, String(((_g = (_f = item.rowData) === null || _f === void 0 ? void 0 : _f.id) === null || _g === void 0 ? void 0 : _g.value)
115
+ ? `${item.groupedValue}-${(_j = (_h = item.rowData) === null || _h === void 0 ? void 0 : _h.id) === null || _j === void 0 ? void 0 : _j.value}`
127
116
  : gIndex)));
128
117
  }) }));
129
118
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@megha-ui/react",
3
- "version": "1.2.625",
3
+ "version": "1.2.626",
4
4
  "description": "A collection of reusable UI components for React applications, built with TypeScript.",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.js",