@codezee/sixtify-brahma 0.2.156 → 0.2.157

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 (31) hide show
  1. package/package.json +1 -1
  2. package/packages/shared-components/dist/AgGrid/ActionCell/ActionCell.d.ts +1 -1
  3. package/packages/shared-components/dist/AgGrid/ActionCell/ActionCell.d.ts.map +1 -1
  4. package/packages/shared-components/dist/AgGrid/ActionCell/ActionCell.js +15 -11
  5. package/packages/shared-components/dist/AgGrid/AgGrid.d.ts.map +1 -1
  6. package/packages/shared-components/dist/AgGrid/AgGrid.js +1 -4
  7. package/packages/shared-components/dist/AgGrid/RedirectionCell/ClickableCell.d.ts +12 -0
  8. package/packages/shared-components/dist/AgGrid/RedirectionCell/ClickableCell.d.ts.map +1 -0
  9. package/packages/shared-components/dist/AgGrid/RedirectionCell/ClickableCell.js +28 -0
  10. package/packages/shared-components/dist/AgGrid/RedirectionCell/RedirectionCell.d.ts +13 -0
  11. package/packages/shared-components/dist/AgGrid/RedirectionCell/RedirectionCell.d.ts.map +1 -0
  12. package/packages/shared-components/dist/AgGrid/RedirectionCell/RedirectionCell.js +31 -0
  13. package/packages/shared-components/dist/AgGrid/RedirectionCell/index.d.ts +2 -0
  14. package/packages/shared-components/dist/AgGrid/RedirectionCell/index.d.ts.map +1 -0
  15. package/packages/shared-components/dist/AgGrid/RedirectionCell/index.js +17 -0
  16. package/packages/shared-components/dist/AgGrid/hooks/index.d.ts +3 -3
  17. package/packages/shared-components/dist/AgGrid/hooks/index.d.ts.map +1 -1
  18. package/packages/shared-components/dist/AgGrid/hooks/index.js +3 -3
  19. package/packages/shared-components/dist/AgGrid/hooks/useAgGridRowSelectionConfig.d.ts.map +1 -1
  20. package/packages/shared-components/dist/AgGrid/hooks/useAgGridRowSelectionConfig.js +2 -0
  21. package/packages/shared-components/dist/AgGrid/hooks/useCellEnterClick.d.ts +8 -0
  22. package/packages/shared-components/dist/AgGrid/hooks/useCellEnterClick.d.ts.map +1 -0
  23. package/packages/shared-components/dist/AgGrid/hooks/useCellEnterClick.js +39 -0
  24. package/packages/shared-components/dist/AgGrid/index.d.ts +3 -2
  25. package/packages/shared-components/dist/AgGrid/index.d.ts.map +1 -1
  26. package/packages/shared-components/dist/AgGrid/index.js +3 -2
  27. package/packages/shared-components/dist/CellSelectionTable/CellSelectionTable.d.ts.map +1 -1
  28. package/packages/shared-components/dist/CellSelectionTable/CellSelectionTable.js +145 -54
  29. package/packages/shared-components/dist/AgGrid/hooks/useAgGridFocusManagement.d.ts +0 -2
  30. package/packages/shared-components/dist/AgGrid/hooks/useAgGridFocusManagement.d.ts.map +0 -1
  31. package/packages/shared-components/dist/AgGrid/hooks/useAgGridFocusManagement.js +0 -105
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@codezee/sixtify-brahma",
3
- "version": "0.2.156",
3
+ "version": "0.2.157",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+https://github.com/hardikranpariya/sixtify-brahma.git"
@@ -7,6 +7,6 @@ type ActionColumnProps = {
7
7
  items: AgGridActionColumn[];
8
8
  disabled?: boolean;
9
9
  };
10
- export declare const ActionCell: ({ items, disabled }: ActionColumnProps) => import("react/jsx-runtime").JSX.Element;
10
+ export declare const ActionCell: ({ items, disabled }: ActionColumnProps) => import("react/jsx-runtime").JSX.Element | null;
11
11
  export {};
12
12
  //# sourceMappingURL=ActionCell.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"ActionCell.d.ts","sourceRoot":"","sources":["../../../src/AgGrid/ActionCell/ActionCell.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAElD,KAAK,kBAAkB,GAAG;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,QAAQ,CAAC;CACnB,CAAC;AAEF,KAAK,iBAAiB,GAAG;IACvB,KAAK,EAAE,kBAAkB,EAAE,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AACF,eAAO,MAAM,UAAU,GAAI,qBAAqB,iBAAiB,4CA6ChE,CAAC"}
1
+ {"version":3,"file":"ActionCell.d.ts","sourceRoot":"","sources":["../../../src/AgGrid/ActionCell/ActionCell.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAGlD,KAAK,kBAAkB,GAAG;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,QAAQ,CAAC;CACnB,CAAC;AAEF,KAAK,iBAAiB,GAAG;IACvB,KAAK,EAAE,kBAAkB,EAAE,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,qBAAqB,iBAAiB,mDAqDhE,CAAC"}
@@ -10,19 +10,23 @@ const material_1 = require("@mui/material");
10
10
  const react_1 = require("react");
11
11
  const PadBox_1 = require("../../PadBox");
12
12
  const Popover_1 = require("./Popover");
13
+ const useCellEnterClick_1 = require("../hooks/useCellEnterClick");
13
14
  const ActionCell = ({ items, disabled }) => {
14
15
  const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
15
- const HandleClose = () => {
16
- setAnchorEl(null);
16
+ const buttonRef = (0, react_1.useRef)(null);
17
+ const handleClose = () => setAnchorEl(null);
18
+ const handleClick = (event) => {
19
+ if (!disabled) {
20
+ setAnchorEl(event.currentTarget);
21
+ }
17
22
  };
18
- const HandleClick = (event) => {
19
- setAnchorEl(event.currentTarget);
20
- };
21
- return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { width: "100%" }, children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, { component: "div", sx: { cursor: "pointer", alignItems: "center", width: "100%" }, onClick: HandleClick, disabled: disabled, children: (0, jsx_runtime_1.jsx)(MoreVert_1.default, {}) }), !!anchorEl && ((0, jsx_runtime_1.jsx)(Popover_1.Popover, { open: true, anchorEl: anchorEl, onClose: HandleClose, children: (0, jsx_runtime_1.jsx)(PadBox_1.PadBox, { padding: { padding: "2px" }, children: items.map((item) => {
22
- return ((0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsx)(material_1.ListItemButton, { sx: { width: "100%", textAlign: "start" }, onClick: () => {
23
- item?.onClick();
24
- setAnchorEl(null);
25
- }, children: (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body1", children: item.title }) }) }, item.title));
26
- }) }) }))] }));
23
+ (0, useCellEnterClick_1.useCellEnterClick)({ buttonRef, disabled, popoverOpen: !!anchorEl });
24
+ if (!items || items.length === 0) {
25
+ return null;
26
+ }
27
+ return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { width: "100%" }, children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, { ref: buttonRef, component: "div", sx: { width: "100%", cursor: "pointer", alignItems: "center" }, onClick: handleClick, disabled: disabled, "data-clickable": "true", children: (0, jsx_runtime_1.jsx)(MoreVert_1.default, {}) }), anchorEl && ((0, jsx_runtime_1.jsx)(Popover_1.Popover, { open: true, anchorEl: anchorEl, onClose: handleClose, children: (0, jsx_runtime_1.jsx)(PadBox_1.PadBox, { padding: { padding: "2px" }, children: items.map((item) => ((0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsx)(material_1.ListItemButton, { sx: { width: "100%", textAlign: "start" }, onClick: () => {
28
+ item.onClick();
29
+ handleClose();
30
+ }, children: (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body1", children: item.title }) }) }, item.title))) }) }))] }));
27
31
  };
28
32
  exports.ActionCell = ActionCell;
@@ -1 +1 @@
1
- {"version":3,"file":"AgGrid.d.ts","sourceRoot":"","sources":["../../src/AgGrid/AgGrid.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAIV,OAAO,EAGR,MAAM,mBAAmB,CAAC;AAC3B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAOjC,OAAO,yBAAyB,CAAC;AAWjC,eAAO,MAAM,iBAAiB,GAAI,KAAK,OAAO,CAAC,OAAO,CAAC,KAAG,IAczD,CAAC;AAEF,eAAO,MAAM,eAAe,KAAK,CAAC;AAElC,eAAO,MAAM,eAAe,UAAqB,CAAC;AAGlD,MAAM,MAAM,WAAW,CAAC,CAAC,GAAG,OAAO,IAAI,gBAAgB,CAAC,CAAC,CAAC,GAAG;IAC3D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC,CAAC;AAEF,KAAK,UAAU,GAAG,KAAK,CAAC,yBAAyB,CAAC,WAAW,CAAC,GAC5D,CAAC,CAAC,WAAW,EAAE,KAAK,EAAE,WAAW,CAAC,WAAW,CAAC,KAAK,GAAG,CAAC,OAAO,CAAC,CAAC;AAElE,eAAO,MAAM,MAAM,EA6Pd,UAAU,CAAC"}
1
+ {"version":3,"file":"AgGrid.d.ts","sourceRoot":"","sources":["../../src/AgGrid/AgGrid.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAIV,OAAO,EAGR,MAAM,mBAAmB,CAAC;AAC3B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAOjC,OAAO,yBAAyB,CAAC;AAUjC,eAAO,MAAM,iBAAiB,GAAI,KAAK,OAAO,CAAC,OAAO,CAAC,KAAG,IAczD,CAAC;AAEF,eAAO,MAAM,eAAe,KAAK,CAAC;AAElC,eAAO,MAAM,eAAe,UAAqB,CAAC;AAGlD,MAAM,MAAM,WAAW,CAAC,CAAC,GAAG,OAAO,IAAI,gBAAgB,CAAC,CAAC,CAAC,GAAG;IAC3D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC,CAAC;AAEF,KAAK,UAAU,GAAG,KAAK,CAAC,yBAAyB,CAAC,WAAW,CAAC,GAC5D,CAAC,CAAC,WAAW,EAAE,KAAK,EAAE,WAAW,CAAC,WAAW,CAAC,KAAK,GAAG,CAAC,OAAO,CAAC,CAAC;AAElE,eAAO,MAAM,MAAM,EAwPd,UAAU,CAAC"}
@@ -11,7 +11,6 @@ const AgGridStyleProvider_1 = require("./AgGridStyleProvider");
11
11
  const LoadingOverlay_1 = require("./LoadingOverlay");
12
12
  const NoDataOverlay_1 = require("./NoDataOverlay");
13
13
  require("./registerAgGridModules");
14
- const useAgGridFocusManagement_1 = require("./hooks/useAgGridFocusManagement");
15
14
  const hideNoRowsOverlay = (api) => {
16
15
  if (!api) {
17
16
  return;
@@ -147,9 +146,7 @@ exports.AgGrid = (0, react_1.forwardRef)((props, ref) => {
147
146
  }
148
147
  }
149
148
  }, [onFilterChanged, rowModelType, updateNoRowsOverlay]);
150
- const gridContainerRef = (0, react_1.useRef)(null);
151
- (0, useAgGridFocusManagement_1.useAgGridFocusManagement)(gridContainerRef);
152
- return ((0, jsx_runtime_1.jsxs)(AgGridStyleProvider_1.AgGridStyleProvider, { ref: gridContainerRef, className: "ag-theme-quartz ", style: { width: "100%", height, position: "relative" }, children: [(0, jsx_runtime_1.jsx)(ag_grid_react_1.AgGridReact, { ref: ref, theme: "legacy", cacheBlockSize: cacheBlockSize, defaultColDef: {
149
+ return ((0, jsx_runtime_1.jsxs)(AgGridStyleProvider_1.AgGridStyleProvider, { className: "ag-theme-quartz ", style: { width: "100%", height, position: "relative" }, children: [(0, jsx_runtime_1.jsx)(ag_grid_react_1.AgGridReact, { ref: ref, theme: "legacy", cacheBlockSize: cacheBlockSize, defaultColDef: {
153
150
  ...defaultColumnDef,
154
151
  floatingFilter: enableSecondRowFilter,
155
152
  suppressFloatingFilterButton: enableSecondRowFilter,
@@ -0,0 +1,12 @@
1
+ import type { MouseEvent, ReactNode } from "react";
2
+ type ClickableCellProps = {
3
+ children: ReactNode;
4
+ onClick?: (event: MouseEvent<HTMLElement>) => void;
5
+ onMouseDown?: (event: MouseEvent<HTMLElement>) => void;
6
+ disabled?: boolean;
7
+ className?: string;
8
+ sx?: object;
9
+ };
10
+ export declare const ClickableCell: ({ children, onClick, onMouseDown, disabled, className, sx, }: ClickableCellProps) => import("react/jsx-runtime").JSX.Element;
11
+ export {};
12
+ //# sourceMappingURL=ClickableCell.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ClickableCell.d.ts","sourceRoot":"","sources":["../../../src/AgGrid/RedirectionCell/ClickableCell.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEnD,KAAK,kBAAkB,GAAG;IACxB,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACnD,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACvD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,8DAO3B,kBAAkB,4CAoCpB,CAAC"}
@@ -0,0 +1,28 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.ClickableCell = void 0;
4
+ const jsx_runtime_1 = require("react/jsx-runtime");
5
+ const material_1 = require("@mui/material");
6
+ const ClickableCell = ({ children, onClick, onMouseDown, disabled = false, className, sx, }) => {
7
+ const handleClick = (event) => {
8
+ if (disabled) {
9
+ return;
10
+ }
11
+ onClick?.(event);
12
+ };
13
+ const handleMouseDown = (event) => {
14
+ if (disabled) {
15
+ return;
16
+ }
17
+ onMouseDown?.(event);
18
+ };
19
+ return ((0, jsx_runtime_1.jsx)(material_1.Box, { component: "div", "data-clickable": !disabled ? "true" : undefined, onClick: onClick ? handleClick : undefined, onMouseDown: onMouseDown ? handleMouseDown : undefined, className: className, sx: {
20
+ width: "100%",
21
+ height: "100%",
22
+ display: "flex",
23
+ alignItems: "center",
24
+ cursor: !disabled && (onClick || onMouseDown) ? "pointer" : "default",
25
+ ...sx,
26
+ }, children: children }));
27
+ };
28
+ exports.ClickableCell = ClickableCell;
@@ -0,0 +1,13 @@
1
+ import type { MouseEvent } from "react";
2
+ type RedirectionCellProps = {
3
+ mainLabel: string;
4
+ onClick: (event: MouseEvent<HTMLElement>) => void;
5
+ includeSubLabel?: boolean;
6
+ subLabel?: string;
7
+ avatar?: string;
8
+ includeAvatar?: boolean;
9
+ disabled?: boolean;
10
+ };
11
+ export declare const RedirectionCell: ({ mainLabel, onClick, includeSubLabel, subLabel, avatar, includeAvatar, disabled, }: RedirectionCellProps) => import("react/jsx-runtime").JSX.Element;
12
+ export {};
13
+ //# sourceMappingURL=RedirectionCell.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"RedirectionCell.d.ts","sourceRoot":"","sources":["../../../src/AgGrid/RedirectionCell/RedirectionCell.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAKxC,KAAK,oBAAoB,GAAG;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAClD,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,qFAQ7B,oBAAoB,4CAkEtB,CAAC"}
@@ -0,0 +1,31 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.RedirectionCell = void 0;
4
+ const jsx_runtime_1 = require("react/jsx-runtime");
5
+ const material_1 = require("@mui/material");
6
+ const react_1 = require("react");
7
+ const useCellEnterClick_1 = require("../hooks/useCellEnterClick");
8
+ const ClickableCell_1 = require("./ClickableCell");
9
+ const RedirectionCell = ({ mainLabel, onClick, includeSubLabel = false, subLabel, avatar, includeAvatar = false, disabled = false, }) => {
10
+ const theme = (0, material_1.useTheme)();
11
+ const { butterflyBlue, black } = theme.palette.app.color;
12
+ const cellRef = (0, react_1.useRef)(null);
13
+ (0, useCellEnterClick_1.useCellEnterClick)({
14
+ buttonRef: cellRef,
15
+ disabled,
16
+ });
17
+ const handleClick = (event) => {
18
+ if (!disabled) {
19
+ onClick(event);
20
+ }
21
+ };
22
+ return ((0, jsx_runtime_1.jsx)(ClickableCell_1.ClickableCell, { onClick: onClick, disabled: disabled, children: (0, jsx_runtime_1.jsx)(material_1.Box, { ref: cellRef, component: "div", onClick: handleClick, sx: { width: "100%" }, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", gap: "5px", alignItems: "center", sx: { width: "100%" }, children: [includeAvatar && ((0, jsx_runtime_1.jsx)(material_1.Avatar, { src: avatar ?? "", alt: "Photo", sx: { width: 28, height: 28 } })), (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", sx: {
23
+ width: "100%",
24
+ color: disabled ? black[900] : butterflyBlue[900],
25
+ }, onMouseDown: (e) => {
26
+ if (!disabled) {
27
+ onClick(e);
28
+ }
29
+ }, children: mainLabel }), includeSubLabel && ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", color: butterflyBlue[400], children: subLabel ?? "-" }))] })] }) }) }));
30
+ };
31
+ exports.RedirectionCell = RedirectionCell;
@@ -0,0 +1,2 @@
1
+ export * from "./RedirectionCell";
2
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/AgGrid/RedirectionCell/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC"}
@@ -0,0 +1,17 @@
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __exportStar = (this && this.__exportStar) || function(m, exports) {
14
+ for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
15
+ };
16
+ Object.defineProperty(exports, "__esModule", { value: true });
17
+ __exportStar(require("./RedirectionCell"), exports);
@@ -1,7 +1,7 @@
1
1
  export * from "./useAgGridCheckBoxSelection";
2
- export * from "./useAgGridSummaryRow";
3
- export * from "./useAgGridSummaryRowUpdate";
4
- export * from "./useAgGridRowSelectionConfig";
5
2
  export * from "./useAgGridFilteredData";
6
3
  export * from "./useAgGridKeyboardShortcuts";
4
+ export * from "./useAgGridRowSelectionConfig";
5
+ export * from "./useAgGridSummaryRow";
6
+ export * from "./useAgGridSummaryRowUpdate";
7
7
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/AgGrid/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,8BAA8B,CAAC;AAC7C,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,yBAAyB,CAAC;AACxC,cAAc,8BAA8B,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/AgGrid/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,8BAA8B,CAAC;AAC7C,cAAc,yBAAyB,CAAC;AACxC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC"}
@@ -15,8 +15,8 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
15
15
  };
16
16
  Object.defineProperty(exports, "__esModule", { value: true });
17
17
  __exportStar(require("./useAgGridCheckBoxSelection"), exports);
18
- __exportStar(require("./useAgGridSummaryRow"), exports);
19
- __exportStar(require("./useAgGridSummaryRowUpdate"), exports);
20
- __exportStar(require("./useAgGridRowSelectionConfig"), exports);
21
18
  __exportStar(require("./useAgGridFilteredData"), exports);
22
19
  __exportStar(require("./useAgGridKeyboardShortcuts"), exports);
20
+ __exportStar(require("./useAgGridRowSelectionConfig"), exports);
21
+ __exportStar(require("./useAgGridSummaryRow"), exports);
22
+ __exportStar(require("./useAgGridSummaryRowUpdate"), exports);
@@ -1 +1 @@
1
- {"version":3,"file":"useAgGridRowSelectionConfig.d.ts","sourceRoot":"","sources":["../../../src/AgGrid/hooks/useAgGridRowSelectionConfig.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,MAAM,EAEN,mBAAmB,EACpB,MAAM,mBAAmB,CAAC;AAG3B,KAAK,+BAA+B,CAAC,KAAK,IAAI;IAC5C,UAAU,EAAE,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC;IAC5B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,eAAe,CAAC,EAAE,mBAAmB,CAAC,KAAK,CAAC,CAAC,iBAAiB,CAAC,CAAC;CACjE,CAAC;AAEF,eAAO,MAAM,2BAA2B,GAAI,KAAK,EAAE,wDAIhD,+BAA+B,CAAC,KAAK,CAAC;;;CAqExC,CAAC"}
1
+ {"version":3,"file":"useAgGridRowSelectionConfig.d.ts","sourceRoot":"","sources":["../../../src/AgGrid/hooks/useAgGridRowSelectionConfig.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,MAAM,EAEN,mBAAmB,EACpB,MAAM,mBAAmB,CAAC;AAG3B,KAAK,+BAA+B,CAAC,KAAK,IAAI;IAC5C,UAAU,EAAE,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC;IAC5B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,eAAe,CAAC,EAAE,mBAAmB,CAAC,KAAK,CAAC,CAAC,iBAAiB,CAAC,CAAC;CACjE,CAAC;AAEF,eAAO,MAAM,2BAA2B,GAAI,KAAK,EAAE,wDAIhD,+BAA+B,CAAC,KAAK,CAAC;;;CAuExC,CAAC"}
@@ -34,6 +34,7 @@ const useAgGridRowSelectionConfig = ({ columnDefs, enableClickSelection = false,
34
34
  }
35
35
  return {
36
36
  headerName: "",
37
+ colId: "id",
37
38
  width: 1,
38
39
  minWidth: 1,
39
40
  maxWidth: 1,
@@ -46,6 +47,7 @@ const useAgGridRowSelectionConfig = ({ columnDefs, enableClickSelection = false,
46
47
  suppressSizeToFit: true,
47
48
  resizable: false,
48
49
  sortable: false,
50
+ hide: true,
49
51
  filter: false,
50
52
  suppressHeaderKeyboardEvent: () => true,
51
53
  suppressKeyboardEvent: () => true,
@@ -0,0 +1,8 @@
1
+ type UseCellEnterClickArgs = {
2
+ buttonRef: React.RefObject<HTMLElement>;
3
+ disabled?: boolean;
4
+ popoverOpen?: boolean;
5
+ };
6
+ export declare function useCellEnterClick({ buttonRef, disabled, popoverOpen, }: UseCellEnterClickArgs): void;
7
+ export {};
8
+ //# sourceMappingURL=useCellEnterClick.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useCellEnterClick.d.ts","sourceRoot":"","sources":["../../../src/AgGrid/hooks/useCellEnterClick.ts"],"names":[],"mappings":"AAEA,KAAK,qBAAqB,GAAG;IAC3B,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,EAChC,SAAS,EACT,QAAQ,EACR,WAAW,GACZ,EAAE,qBAAqB,QAuDvB"}
@@ -0,0 +1,39 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.useCellEnterClick = useCellEnterClick;
4
+ const react_1 = require("react");
5
+ function useCellEnterClick({ buttonRef, disabled, popoverOpen, }) {
6
+ (0, react_1.useEffect)(() => {
7
+ const handleKeyDown = (event) => {
8
+ if (event.key !== "Enter" ||
9
+ event.shiftKey ||
10
+ event.ctrlKey ||
11
+ event.metaKey ||
12
+ event.altKey ||
13
+ disabled ||
14
+ popoverOpen) {
15
+ return;
16
+ }
17
+ const activeElement = document.activeElement;
18
+ const cell = activeElement?.closest(".ag-cell");
19
+ const button = buttonRef.current;
20
+ if (!cell || !button || !cell.contains(button)) {
21
+ return;
22
+ }
23
+ const isEditing = cell.classList.contains("ag-cell-inline-editing");
24
+ if (isEditing) {
25
+ return;
26
+ }
27
+ event.preventDefault();
28
+ event.stopPropagation();
29
+ button.click();
30
+ };
31
+ if (buttonRef.current) {
32
+ const cell = buttonRef.current.closest(".ag-cell");
33
+ if (cell) {
34
+ cell.addEventListener("keydown", handleKeyDown, true);
35
+ return () => cell.removeEventListener("keydown", handleKeyDown, true);
36
+ }
37
+ }
38
+ }, [buttonRef, disabled, popoverOpen]);
39
+ }
@@ -1,9 +1,10 @@
1
1
  export * from "./ActionCell/ActionCell";
2
2
  export * from "./AgGrid";
3
+ export * from "./hooks";
3
4
  export * from "./LoadingCell";
4
5
  export * from "./LoadingOverlay";
5
6
  export * from "./NoDataOverlay";
6
- export * from "./utils";
7
+ export * from "./RedirectionCell";
7
8
  export * from "./types";
8
- export * from "./hooks";
9
+ export * from "./utils";
9
10
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/AgGrid/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC;AACxC,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/AgGrid/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC;AACxC,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}
@@ -16,9 +16,10 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
16
16
  Object.defineProperty(exports, "__esModule", { value: true });
17
17
  __exportStar(require("./ActionCell/ActionCell"), exports);
18
18
  __exportStar(require("./AgGrid"), exports);
19
+ __exportStar(require("./hooks"), exports);
19
20
  __exportStar(require("./LoadingCell"), exports);
20
21
  __exportStar(require("./LoadingOverlay"), exports);
21
22
  __exportStar(require("./NoDataOverlay"), exports);
22
- __exportStar(require("./utils"), exports);
23
+ __exportStar(require("./RedirectionCell"), exports);
23
24
  __exportStar(require("./types"), exports);
24
- __exportStar(require("./hooks"), exports);
25
+ __exportStar(require("./utils"), exports);
@@ -1 +1 @@
1
- {"version":3,"file":"CellSelectionTable.d.ts","sourceRoot":"","sources":["../../src/CellSelectionTable/CellSelectionTable.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAEL,KAAK,UAAU,EACf,KAAK,SAAS,EAOf,MAAM,OAAO,CAAC;AAcf,OAAO,KAAK,EACV,SAAS,EACT,MAAM,EAGP,MAAM,eAAe,CAAC;AAGvB,MAAM,MAAM,IAAI,GAAG;IACjB,SAAS,EAAE,MAAM,CAAC;CACnB,GAAG;IACF,CAAC,GAAG,EAAE,MAAM,GAAG,SAAS,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,GAAG,OAAO,CAAC,CAAC;AAEnE,MAAM,MAAM,qBAAqB,GAAG;IAClC,UAAU,EAAE,CAAC,YAAY,EAAE,SAAS,EAAE,KAAK,IAAI,CAAC;IAChD,0BAA0B,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACtD,6BAA6B,EAAE,CAAC,YAAY,EAAE,SAAS,EAAE,KAAK,SAAS,EAAE,CAAC;IAC1E,mBAAmB,EAAE,CAAC,CAAC,GAAG,YAAY,EACpC,YAAY,EAAE,SAAS,EAAE,EACzB,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,GAAG,OAAO,CAAC,KAC7C,CAAC,EAAE,CAAC;CACV,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG;IACpC,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,IAAI,EAAE,YAAY,EAAE,CAAC;IACrB,eAAe,EAAE,CACf,aAAa,EAAE,UAAU,CAAC,SAAS,EAAE,CAAC,EACtC,CAAC,EAAE,UAAU,KACV,IAAI,CAAC;IACV,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,CAAC;IAC9C,YAAY,CAAC,EAAE,CACb,YAAY,EAAE,SAAS,EAAE,EACzB,cAAc,EAAE,SAAS,EAAE,EAC3B,UAAU,EAAE,YAAY,EAAE,EAC1B,YAAY,EAAE,YAAY,EAAE,KACzB,IAAI,CAAC;CACX,CAAC;AAEF,eAAO,MAAM,kBAAkB,2HAspB9B,CAAC"}
1
+ {"version":3,"file":"CellSelectionTable.d.ts","sourceRoot":"","sources":["../../src/CellSelectionTable/CellSelectionTable.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAEL,KAAK,UAAU,EACf,KAAK,SAAS,EAOf,MAAM,OAAO,CAAC;AAef,OAAO,KAAK,EACV,SAAS,EACT,MAAM,EAGP,MAAM,eAAe,CAAC;AAEvB,MAAM,MAAM,IAAI,GAAG;IACjB,SAAS,EAAE,MAAM,CAAC;CACnB,GAAG;IACF,CAAC,GAAG,EAAE,MAAM,GAAG,SAAS,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,GAAG,OAAO,CAAC,CAAC;AAEnE,MAAM,MAAM,qBAAqB,GAAG;IAClC,UAAU,EAAE,CAAC,YAAY,EAAE,SAAS,EAAE,KAAK,IAAI,CAAC;IAChD,0BAA0B,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACtD,6BAA6B,EAAE,CAAC,YAAY,EAAE,SAAS,EAAE,KAAK,SAAS,EAAE,CAAC;IAC1E,mBAAmB,EAAE,CAAC,CAAC,GAAG,YAAY,EACpC,YAAY,EAAE,SAAS,EAAE,EACzB,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,GAAG,OAAO,CAAC,KAC7C,CAAC,EAAE,CAAC;CACV,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG;IACpC,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,IAAI,EAAE,YAAY,EAAE,CAAC;IACrB,eAAe,EAAE,CACf,aAAa,EAAE,UAAU,CAAC,SAAS,EAAE,CAAC,EACtC,CAAC,EAAE,UAAU,KACV,IAAI,CAAC;IACV,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,CAAC;IAC9C,YAAY,CAAC,EAAE,CACb,YAAY,EAAE,SAAS,EAAE,EACzB,cAAc,EAAE,SAAS,EAAE,EAC3B,UAAU,EAAE,YAAY,EAAE,EAC1B,YAAY,EAAE,YAAY,EAAE,KACzB,IAAI,CAAC;CACX,CAAC;AAEF,eAAO,MAAM,kBAAkB,2HA4wB9B,CAAC"}
@@ -5,7 +5,9 @@ exports.CellSelectionTable = void 0;
5
5
  const jsx_runtime_1 = require("react/jsx-runtime");
6
6
  const icons_material_1 = require("@mui/icons-material");
7
7
  const material_1 = require("@mui/material");
8
+ const react_virtual_1 = require("@tanstack/react-virtual");
8
9
  const react_1 = require("react");
10
+ const Tooltip_1 = require("../Tooltip");
9
11
  const useOutsideClick_1 = require("./hook/useOutsideClick");
10
12
  const useSorting_1 = require("./hook/useSorting");
11
13
  const useStickyColumns_1 = require("./hook/useStickyColumns");
@@ -13,12 +15,14 @@ const EmployeeCell_1 = require("./SubComponents/EmployeeCell");
13
15
  const TableBodyLoader_1 = require("./SubComponents/TableBodyLoader");
14
16
  const helper_1 = require("./utils/helper");
15
17
  const sortUtils_1 = require("./utils/sortUtils");
16
- const Tooltip_1 = require("../Tooltip");
17
18
  exports.CellSelectionTable = (0, react_1.forwardRef)(({ columns, data, onCellSelection, cellColors, height, loading = false, getCellTextColor = () => "", onDataUpdate, }, ref) => {
18
19
  const theme = (0, material_1.useTheme)();
19
20
  const { slate, iron, butterflyBlue } = theme.palette.app.color;
20
21
  const selectingRef = (0, react_1.useRef)(false);
21
22
  const tableRef = (0, react_1.useRef)(null);
23
+ const containerRef = (0, react_1.useRef)(null);
24
+ const headerRef = (0, react_1.useRef)(null);
25
+ const [columnWidths, setColumnWidths] = (0, react_1.useState)([]);
22
26
  const selectionModeRef = (0, react_1.useRef)("add");
23
27
  const anchorRef = (0, react_1.useRef)(null);
24
28
  const hoveringRef = (0, react_1.useRef)(null);
@@ -34,12 +38,21 @@ exports.CellSelectionTable = (0, react_1.forwardRef)(({ columns, data, onCellSel
34
38
  setCurrentSelectedRanges([]);
35
39
  }
36
40
  }, [loading]);
37
- const isSelectedCell = (rowIndex, colIndex) => {
41
+ const selectedCellsSet = (0, react_1.useMemo)(() => {
42
+ const set = new Set();
38
43
  if (selectedRanges.length === 0 && currentSelectedRanges.length === 0) {
39
- return false;
44
+ return set;
40
45
  }
41
- return [...selectedRanges, ...currentSelectedRanges].some((range) => range.some((cell) => cell.row === rowIndex && cell.col === colIndex));
42
- };
46
+ [...selectedRanges, ...currentSelectedRanges].forEach((range) => {
47
+ range.forEach((cell) => {
48
+ set.add(`${cell.row}-${cell.col}`);
49
+ });
50
+ });
51
+ return set;
52
+ }, [selectedRanges, currentSelectedRanges]);
53
+ const isSelectedCell = (0, react_1.useCallback)((rowIndex, colIndex) => {
54
+ return selectedCellsSet.has(`${rowIndex}-${colIndex}`);
55
+ }, [selectedCellsSet]);
43
56
  const { stickyMap } = (0, useStickyColumns_1.useStickyColumns)(columns);
44
57
  (0, useOutsideClick_1.useOutsideClick)(tableRef, () => {
45
58
  setSelectedRanges([]);
@@ -78,6 +91,18 @@ exports.CellSelectionTable = (0, react_1.forwardRef)(({ columns, data, onCellSel
78
91
  data: memoizedData,
79
92
  columns,
80
93
  });
94
+ const ROW_HEIGHT = 40;
95
+ const estimateSize = (0, react_1.useCallback)(() => ROW_HEIGHT, []);
96
+ const getScrollElement = (0, react_1.useCallback)(() => containerRef.current, []);
97
+ const rowVirtualizer = (0, react_virtual_1.useVirtualizer)({
98
+ count: sortedData.length,
99
+ estimateSize,
100
+ getScrollElement,
101
+ overscan: 5,
102
+ scrollPaddingStart: 0,
103
+ scrollPaddingEnd: 0,
104
+ });
105
+ const virtualItems = rowVirtualizer.getVirtualItems();
81
106
  const prevSortedDataRef = (0, react_1.useRef)([]);
82
107
  const selectedRangesRef = (0, react_1.useRef)([]);
83
108
  // Keep track of the latest data for the ref methods
@@ -168,7 +193,31 @@ exports.CellSelectionTable = (0, react_1.forwardRef)(({ columns, data, onCellSel
168
193
  (0, react_1.useEffect)(() => {
169
194
  selectedRangesRef.current = selectedRanges;
170
195
  }, [selectedRanges]);
171
- function getCellColor({ cellKey, isSelected = false, }) {
196
+ // Measure header column widths to ensure body cells match
197
+ (0, react_1.useEffect)(() => {
198
+ if (headerRef.current && !loading) {
199
+ const measureWidths = () => {
200
+ const headerRow = headerRef.current?.querySelector("tr");
201
+ if (headerRow) {
202
+ const headerCells = headerRow.querySelectorAll("th");
203
+ const widths = Array.from(headerCells).map((cell) => {
204
+ return cell.getBoundingClientRect().width;
205
+ });
206
+ if (widths.length > 0) {
207
+ setColumnWidths(widths);
208
+ }
209
+ }
210
+ };
211
+ // Use requestAnimationFrame to avoid blocking the main thread
212
+ const rafId = requestAnimationFrame(() => {
213
+ measureWidths();
214
+ });
215
+ return () => {
216
+ cancelAnimationFrame(rafId);
217
+ };
218
+ }
219
+ }, [columns, loading]);
220
+ const getCellColor = (0, react_1.useCallback)(({ cellKey, isSelected = false }) => {
172
221
  if (isSelected) {
173
222
  return butterflyBlue[800];
174
223
  }
@@ -176,7 +225,7 @@ exports.CellSelectionTable = (0, react_1.forwardRef)(({ columns, data, onCellSel
176
225
  return cellColors(cellKey);
177
226
  }
178
227
  return iron[600];
179
- }
228
+ }, [butterflyBlue, cellColors, iron]);
180
229
  const handleCellMouseDown = (0, react_1.useCallback)((ri, ci) => (e) => {
181
230
  e.preventDefault();
182
231
  if ((0, sortUtils_1.isSelectionDisabled)(columns[ci]?.disableSelection, columns[ci]?.sorting) &&
@@ -276,10 +325,15 @@ exports.CellSelectionTable = (0, react_1.forwardRef)(({ columns, data, onCellSel
276
325
  onCellSelection,
277
326
  });
278
327
  }, [onCellSelection, selectedRanges]);
279
- return ((0, jsx_runtime_1.jsx)(material_1.Box, { position: "relative", overflow: "auto", height: height, bgcolor: iron[600], children: (0, jsx_runtime_1.jsxs)(material_1.Table, { ref: tableRef, stickyHeader: true, sx: {
328
+ return ((0, jsx_runtime_1.jsx)(material_1.Box, { ref: containerRef, position: "relative", overflow: "auto", height: height, bgcolor: iron[600], sx: {
329
+ WebkitOverflowScrolling: "touch",
330
+ scrollBehavior: "auto",
331
+ }, children: (0, jsx_runtime_1.jsxs)(material_1.Table, { ref: tableRef, stickyHeader: true, sx: {
280
332
  userSelect: "none",
281
333
  borderCollapse: "separate",
282
334
  borderSpacing: 0,
335
+ tableLayout: "fixed",
336
+ width: "100%",
283
337
  "& th, & td": {
284
338
  borderRight: `1px solid ${slate[700]}`,
285
339
  borderBottom: `1px solid ${slate[700]}`,
@@ -291,7 +345,7 @@ exports.CellSelectionTable = (0, react_1.forwardRef)(({ columns, data, onCellSel
291
345
  "& td": {
292
346
  padding: "0px 5px",
293
347
  },
294
- }, children: [(0, jsx_runtime_1.jsx)(material_1.TableHead, { children: (0, jsx_runtime_1.jsx)(material_1.TableRow, { children: columns.map(({ key, label, minWidth = "auto", lockPinned = false, align = "left", disableSelection, sorting, }, ci) => {
348
+ }, children: [(0, jsx_runtime_1.jsx)(material_1.TableHead, { ref: headerRef, children: (0, jsx_runtime_1.jsx)(material_1.TableRow, { children: columns.map(({ key, label, minWidth = "auto", lockPinned = false, align = "left", disableSelection, sorting, }, ci) => {
295
349
  const isSticky = stickyMap.has(ci);
296
350
  const left = isSticky ? stickyMap.get(ci) : 0;
297
351
  const sortDirection = getSortDirection(key);
@@ -321,54 +375,91 @@ exports.CellSelectionTable = (0, react_1.forwardRef)(({ columns, data, onCellSel
321
375
  }),
322
376
  backgroundColor: slate[700],
323
377
  minWidth,
378
+ maxWidth: columns[ci]?.maxWidth ?? "auto",
379
+ width: minWidth !== "auto" ? minWidth : undefined,
324
380
  padding: "5px 10px",
325
381
  cursor: canSort ? "pointer" : "default",
382
+ boxSizing: "border-box",
326
383
  }, onClick: canSort ? () => handleSort(key) : undefined, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "center", justifyContent: justifyContent, gap: 1, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "subtitle2", lineHeight: "18px", children: label }), canSort && ((0, jsx_runtime_1.jsx)(material_1.Box, { display: "flex", flexDirection: "column", alignItems: "center", children: renderSortIcon() }))] }) }, key));
327
- }) }) }), loading ? ((0, jsx_runtime_1.jsx)(TableBodyLoader_1.TableBodyLoader, { columns: columns, rowCount: 25 })) : ((0, jsx_runtime_1.jsx)(material_1.TableBody, { children: sortedData.map((row, ri) => ((0, jsx_runtime_1.jsx)(material_1.TableRow, { sx: { backgroundColor: iron[600] }, children: columns.map(({ key, maxWidth = "auto", minWidth = "auto", isEmployee, align = "center", lockPinned = false, }, ci) => {
328
- const cell = row[key];
329
- const getRowTitle = (0, helper_1.getCellValue)(cell, "cellLabel");
330
- const tooltip = typeof cell === "object" &&
331
- cell != null &&
332
- typeof cell?.["cellTooltip"] === "object"
333
- ? cell["cellTooltip"]
334
- : (0, helper_1.getCellValue)(cell, "cellTooltip");
335
- const getColor = (0, helper_1.getCellValue)(cell, "cellBackgroundConditionKey");
336
- const cellActive = (0, helper_1.getCellValue)(cell, "cellActive");
337
- const isSticky = stickyMap.has(ci);
338
- const left = isSticky ? stickyMap.get(ci) : 0;
339
- const content = isEmployee ? ((0, jsx_runtime_1.jsx)(EmployeeCell_1.EmployeeCell, { row: row, maxWidth: maxWidth, minWidth: minWidth })) : ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", children: getRowTitle }));
340
- const isNotDisabled = !((0, sortUtils_1.isSelectionDisabled)(columns[ci]?.disableSelection, columns[ci]?.sorting) || row?.rowDisabled);
341
- return ((0, jsx_runtime_1.jsx)(material_1.TableCell, { align: align, sx: {
342
- ...(lockPinned && {
343
- top: 0,
344
- left,
345
- zIndex: 5,
346
- position: "sticky",
347
- }),
348
- ...(isNotDisabled
349
- ? {}
350
- : {
351
- cursor: "not-allowed",
384
+ }) }) }), loading ? ((0, jsx_runtime_1.jsx)(TableBodyLoader_1.TableBodyLoader, { columns: columns, rowCount: 25 })) : ((0, jsx_runtime_1.jsx)(material_1.TableBody, { style: {
385
+ height: `${rowVirtualizer.getTotalSize()}px`,
386
+ position: "relative",
387
+ }, children: virtualItems.map((virtualRow) => {
388
+ const row = sortedData[virtualRow.index];
389
+ if (!row) {
390
+ return null;
391
+ }
392
+ const ri = virtualRow.index;
393
+ return ((0, jsx_runtime_1.jsx)(material_1.TableRow, { sx: {
394
+ backgroundColor: iron[600],
395
+ position: "absolute",
396
+ top: 0,
397
+ left: 0,
398
+ width: "100%",
399
+ height: `${virtualRow.size}px`,
400
+ transform: `translateY(${virtualRow.start}px) translateZ(0)`,
401
+ display: "table-row",
402
+ willChange: "transform",
403
+ backfaceVisibility: "hidden",
404
+ WebkitBackfaceVisibility: "hidden",
405
+ }, children: columns.map(({ key, maxWidth = "auto", minWidth = "auto", isEmployee, align = "center", lockPinned = false, }, ci) => {
406
+ const cell = row[key];
407
+ const getRowTitle = (0, helper_1.getCellValue)(cell, "cellLabel");
408
+ const tooltip = typeof cell === "object" &&
409
+ cell != null &&
410
+ typeof cell?.["cellTooltip"] === "object"
411
+ ? cell["cellTooltip"]
412
+ : (0, helper_1.getCellValue)(cell, "cellTooltip");
413
+ const getColor = (0, helper_1.getCellValue)(cell, "cellBackgroundConditionKey");
414
+ const cellActive = (0, helper_1.getCellValue)(cell, "cellActive");
415
+ const isSticky = stickyMap.has(ci);
416
+ const left = isSticky ? stickyMap.get(ci) : 0;
417
+ const content = isEmployee ? ((0, jsx_runtime_1.jsx)(EmployeeCell_1.EmployeeCell, { row: row, maxWidth: maxWidth, minWidth: minWidth })) : ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", children: getRowTitle }));
418
+ const isNotDisabled = !((0, sortUtils_1.isSelectionDisabled)(columns[ci]?.disableSelection, columns[ci]?.sorting) || row?.rowDisabled);
419
+ let cellWidth;
420
+ if (columnWidths[ci] !== undefined) {
421
+ cellWidth = `${columnWidths[ci]}px`;
422
+ }
423
+ else if (minWidth !== "auto") {
424
+ cellWidth = minWidth;
425
+ }
426
+ else {
427
+ cellWidth = undefined;
428
+ }
429
+ return ((0, jsx_runtime_1.jsx)(material_1.TableCell, { align: align, sx: {
430
+ ...(lockPinned && {
431
+ top: 0,
432
+ left,
433
+ zIndex: 5,
434
+ position: "sticky",
352
435
  }),
353
- userSelect: "none",
354
- overflow: "hidden",
355
- bgcolor: (0, material_1.lighten)(getCellColor({
356
- cellKey: getColor,
357
- isSelected: isSelectedCell(ri, ci),
358
- }), 0.8),
359
- ...(cellActive &&
360
- ci > 0 && {
361
- color: getCellTextColor(cellActive),
362
- }),
363
- padding: "5px 10px",
364
- cursor: "pointer",
365
- maxWidth,
366
- minWidth,
367
- }, onMouseDown: (e) => handleCellMouseDown(ri, ci)(e), onMouseEnter: isNotDisabled
368
- ? handleCellMouseEnter(ri, ci)
369
- : undefined, onMouseUp: (e) => handleCellMouseUp(ri, ci)(e), onContextMenu: isNotDisabled
370
- ? handleContextMenuCallback(ri, ci)
371
- : undefined, children: tooltip ? ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { toolTipLabel: tooltip, children: content })) : (content) }, key));
372
- }) }, typeof row.id === "string" ? row.id : ""))) }))] }) }));
436
+ ...(isNotDisabled
437
+ ? {}
438
+ : {
439
+ cursor: "not-allowed",
440
+ }),
441
+ userSelect: "none",
442
+ overflow: "hidden",
443
+ bgcolor: (0, material_1.lighten)(getCellColor({
444
+ cellKey: getColor,
445
+ isSelected: isSelectedCell(ri, ci),
446
+ }), 0.8),
447
+ ...(cellActive &&
448
+ ci > 0 && {
449
+ color: getCellTextColor(cellActive),
450
+ }),
451
+ padding: "5px 10px",
452
+ cursor: "pointer",
453
+ maxWidth,
454
+ minWidth,
455
+ width: cellWidth,
456
+ boxSizing: "border-box",
457
+ }, onMouseDown: (e) => handleCellMouseDown(ri, ci)(e), onMouseEnter: isNotDisabled
458
+ ? handleCellMouseEnter(ri, ci)
459
+ : undefined, onMouseUp: (e) => handleCellMouseUp(ri, ci)(e), onContextMenu: isNotDisabled
460
+ ? handleContextMenuCallback(ri, ci)
461
+ : undefined, children: tooltip ? ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { toolTipLabel: tooltip, children: content })) : (content) }, key));
462
+ }) }, typeof row.id === "string" ? row.id : `row-${ri}`));
463
+ }) }))] }) }));
373
464
  });
374
465
  exports.CellSelectionTable.displayName = "CellSelectionTable";
@@ -1,2 +0,0 @@
1
- export declare const useAgGridFocusManagement: (containerRef: React.RefObject<HTMLElement>) => void;
2
- //# sourceMappingURL=useAgGridFocusManagement.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useAgGridFocusManagement.d.ts","sourceRoot":"","sources":["../../../src/AgGrid/hooks/useAgGridFocusManagement.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,wBAAwB,GACnC,cAAc,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,SAuJ3C,CAAC"}
@@ -1,105 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.useAgGridFocusManagement = void 0;
4
- /* eslint-disable sonarjs/cognitive-complexity */
5
- /* eslint-disable sonarjs/no-nested-functions */
6
- const react_1 = require("react");
7
- const useAgGridFocusManagement = (containerRef) => {
8
- const rafRef = (0, react_1.useRef)(null);
9
- const secondHeaderCellRef = (0, react_1.useRef)(null);
10
- (0, react_1.useEffect)(() => {
11
- const container = containerRef.current;
12
- if (!container) {
13
- return;
14
- }
15
- const getSecondHeaderCell = () => {
16
- const cached = secondHeaderCellRef.current;
17
- if (cached && container.contains(cached)) {
18
- return cached;
19
- }
20
- const headerCells = container.querySelectorAll(".ag-header-cell:not(.ag-column-first)");
21
- const cell = headerCells.length > 0 ? headerCells[0] : null;
22
- secondHeaderCellRef.current = cell ?? null;
23
- return cell ?? null;
24
- };
25
- const preventUnwantedFocus = () => {
26
- if (rafRef.current !== null) {
27
- return;
28
- }
29
- rafRef.current = requestAnimationFrame(() => {
30
- rafRef.current = null;
31
- const firstHeaderCells = container.querySelectorAll(".ag-header-cell.ag-column-first:not(.ag-floating-filter)");
32
- firstHeaderCells.forEach((cell) => {
33
- if (cell.tabIndex !== -1) {
34
- cell.tabIndex = -1;
35
- }
36
- const interactiveElements = cell.querySelectorAll("input, button, select, textarea, [tabindex]:not([tabindex='-1'])");
37
- interactiveElements.forEach((el) => {
38
- if (el.tabIndex !== -1) {
39
- el.tabIndex = -1;
40
- }
41
- });
42
- });
43
- secondHeaderCellRef.current = null;
44
- });
45
- };
46
- const handleFocusRedirect = (e) => {
47
- const target = e.target;
48
- if (!container.contains(target)) {
49
- return;
50
- }
51
- const isFirstHeader = target.closest(".ag-header-cell.ag-column-first:not(.ag-floating-filter)") !== null;
52
- if (!isFirstHeader) {
53
- return;
54
- }
55
- const secondCell = getSecondHeaderCell();
56
- if (!secondCell) {
57
- return;
58
- }
59
- e.preventDefault();
60
- e.stopPropagation();
61
- requestAnimationFrame(() => {
62
- secondCell.focus();
63
- });
64
- };
65
- const observer = new MutationObserver((mutations) => {
66
- const shouldUpdate = mutations.some((mutation) => {
67
- const target = mutation.target;
68
- if (target.classList?.contains("ag-header") ||
69
- target.classList?.contains("ag-header-cell") ||
70
- target.classList?.contains("ag-header-row")) {
71
- return true;
72
- }
73
- const hasHeaderNodes = Array.from(mutation.addedNodes).some((node) => node instanceof HTMLElement &&
74
- (node.classList.contains("ag-header-cell") ||
75
- node.classList.contains("ag-header-row") ||
76
- node.querySelector(".ag-header-cell, .ag-header-row")));
77
- return hasHeaderNodes;
78
- });
79
- if (shouldUpdate) {
80
- preventUnwantedFocus();
81
- }
82
- });
83
- const header = container.querySelector(".ag-header");
84
- if (header instanceof HTMLElement) {
85
- observer.observe(header, {
86
- childList: true,
87
- subtree: true,
88
- attributes: true,
89
- attributeFilter: ["class", "tabindex"],
90
- });
91
- }
92
- observer.observe(container, { childList: true });
93
- container.addEventListener("focusin", handleFocusRedirect, true);
94
- preventUnwantedFocus();
95
- return () => {
96
- if (rafRef.current !== null) {
97
- cancelAnimationFrame(rafRef.current);
98
- }
99
- observer.disconnect();
100
- container.removeEventListener("focusin", handleFocusRedirect, true);
101
- secondHeaderCellRef.current = null;
102
- };
103
- }, [containerRef]);
104
- };
105
- exports.useAgGridFocusManagement = useAgGridFocusManagement;