@mkt-loitd/react-table-grid-custom 1.2.3 → 1.2.6

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 (5) hide show
  1. package/dist/index.d.mts +12 -27
  2. package/dist/index.d.ts +12 -27
  3. package/dist/index.js +113 -113
  4. package/dist/index.mjs +117 -117
  5. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -1,5 +1,4 @@
1
- import * as react from 'react';
2
- import { Dispatch, SetStateAction, Key, ReactNode, JSX, MutableRefObject } from 'react';
1
+ import { Dispatch, SetStateAction, Key, ReactNode, JSX, MutableRefObject, FC } from 'react';
3
2
  import { ColumnOrColumnGroup, DataGridProps } from 'react-data-grid';
4
3
  export { Column, ColumnOrColumnGroup, DataGridProps } from 'react-data-grid';
5
4
  import { PaginationRootProps } from '@mantine/core';
@@ -32,6 +31,9 @@ interface useShowHideColumnReturn<T, SR> {
32
31
  handleFindLocation: (filterColumns: TColumnsTable<T, SR>, locationColumns?: string[]) => TColumnsTable<T, SR>;
33
32
  handleChangeLocation?: (arr: string[]) => void;
34
33
  }
34
+ interface ICalculatorTotalPage extends IPaginationParams$1 {
35
+ total?: number;
36
+ }
35
37
 
36
38
  declare const useShowHideColumn: <T, SR = unknown>({ nameLocal, columns, ignoreColumns }: useShowHideColumnParameter<T, SR>) => useShowHideColumnReturn<T, SR>;
37
39
 
@@ -58,6 +60,7 @@ interface IReactTableGridCustom<T = unknown, SR = unknown, K extends Key = Key>
58
60
  listPageSize?: string[];
59
61
  fetching?: boolean;
60
62
  TableLogo?: string;
63
+ [key: string]: any;
61
64
  }
62
65
  interface refTablePaginationClient extends Required<IPaginationParams> {
63
66
  setConfigSearch: Dispatch<SetStateAction<ISetConfigPagination$1>>;
@@ -169,7 +172,7 @@ interface IPayloadService {
169
172
  type IDispatchState<T> = Dispatch<SetStateAction<T>>;
170
173
 
171
174
  interface IExpandValue extends IPayloadService {
172
- t?: TFunction<any, any> | undefined | any;
175
+ t?: TFunction<any, any>;
173
176
  setConfigSearch?: IDispatchState<ISetConfigPagination>;
174
177
  setSelectedRecords?: Dispatch<ReadonlySet<string>>;
175
178
  setIsShowEdit?: Dispatch<SetStateAction<boolean>>;
@@ -188,7 +191,6 @@ interface RenderContextMenuProps {
188
191
  renderData?: configContextMenuType[];
189
192
  valueClickItem?: any;
190
193
  expandValue?: IExpandValue;
191
- classWapper?: boolean;
192
194
  }
193
195
 
194
196
  interface TableStyleWapperProps {
@@ -198,34 +200,17 @@ interface TableStyleWapperProps {
198
200
  };
199
201
  renderContext?: RenderContextMenuProps;
200
202
  clsTablecustom?: string;
203
+ idWapper?: string;
201
204
  }
202
- declare const TableStyleContextWapper: react.NamedExoticComponent<TableStyleWapperProps>;
205
+ interface TableStyleContextMenuWapperComponent extends FC<TableStyleWapperProps> {
206
+ getIdFromOutside?: (externalId?: string) => string;
207
+ }
208
+ declare const TableStyleContextMenuWapper: TableStyleContextMenuWapperComponent;
203
209
 
204
210
  interface IPaginationParams {
205
211
  pageSize?: number;
206
212
  page?: number;
207
213
  }
208
214
  type Maybe<T> = T | undefined | null;
209
- interface ICalculatorTotalPage extends IPaginationParams {
210
- total?: number;
211
- }
212
- interface ISTTParams extends IPaginationParams {
213
- }
214
- interface UseShowHideColumnParameter<T, SR = unknown> {
215
- nameLocal?: string;
216
- /** nếu đầu vào là columns: Functions() thì nên dùng useMemo thì sẽ tối ưu hơn */
217
- columns: TColumnsTable<T, SR>;
218
- ignoreColumns?: string[];
219
- }
220
- interface UseShowHideColumnReturn<T, SR> {
221
- hiddenColumns: string[];
222
- setHiddenColumns: Dispatch<SetStateAction<string[]>>;
223
- columnsTable: TColumnsTable<T, SR>;
224
- changeHiddenColumn: (key: string | string[]) => void;
225
- newShowhideColumns: TColumnsTable<T, SR>;
226
- locationColumns: string[];
227
- handleFindLocation: (filterColumns: TColumnsTable<T, SR>, locationColumns?: string[]) => TColumnsTable<T, SR>;
228
- handleChangeLocation?: (arr: string[]) => void;
229
- }
230
215
 
231
- export { type ICalculatorTotalPage, type IPaginationParams, type IReactTableGridCustom, type ISTTParams, type Maybe, ReactTableGridCustom, ReactTableGridCustomPaginationClient, type ReactTableGridCustomPaginationClientComponent, type ReactTableGridCustomPaginationClientProps, type TColumnsTable, TableStyleContextWapper, type TableStyleWapperProps, type UseShowHideColumnParameter, type UseShowHideColumnReturn, useShowHideColumn };
216
+ export { type IPaginationParams, type IReactTableGridCustom, type Maybe, ReactTableGridCustom, ReactTableGridCustomPaginationClient, type TColumnsTable, TableStyleContextMenuWapper, type TableStyleWapperProps, useShowHideColumn };
package/dist/index.d.ts CHANGED
@@ -1,5 +1,4 @@
1
- import * as react from 'react';
2
- import { Dispatch, SetStateAction, Key, ReactNode, JSX, MutableRefObject } from 'react';
1
+ import { Dispatch, SetStateAction, Key, ReactNode, JSX, MutableRefObject, FC } from 'react';
3
2
  import { ColumnOrColumnGroup, DataGridProps } from 'react-data-grid';
4
3
  export { Column, ColumnOrColumnGroup, DataGridProps } from 'react-data-grid';
5
4
  import { PaginationRootProps } from '@mantine/core';
@@ -32,6 +31,9 @@ interface useShowHideColumnReturn<T, SR> {
32
31
  handleFindLocation: (filterColumns: TColumnsTable<T, SR>, locationColumns?: string[]) => TColumnsTable<T, SR>;
33
32
  handleChangeLocation?: (arr: string[]) => void;
34
33
  }
34
+ interface ICalculatorTotalPage extends IPaginationParams$1 {
35
+ total?: number;
36
+ }
35
37
 
36
38
  declare const useShowHideColumn: <T, SR = unknown>({ nameLocal, columns, ignoreColumns }: useShowHideColumnParameter<T, SR>) => useShowHideColumnReturn<T, SR>;
37
39
 
@@ -58,6 +60,7 @@ interface IReactTableGridCustom<T = unknown, SR = unknown, K extends Key = Key>
58
60
  listPageSize?: string[];
59
61
  fetching?: boolean;
60
62
  TableLogo?: string;
63
+ [key: string]: any;
61
64
  }
62
65
  interface refTablePaginationClient extends Required<IPaginationParams> {
63
66
  setConfigSearch: Dispatch<SetStateAction<ISetConfigPagination$1>>;
@@ -169,7 +172,7 @@ interface IPayloadService {
169
172
  type IDispatchState<T> = Dispatch<SetStateAction<T>>;
170
173
 
171
174
  interface IExpandValue extends IPayloadService {
172
- t?: TFunction<any, any> | undefined | any;
175
+ t?: TFunction<any, any>;
173
176
  setConfigSearch?: IDispatchState<ISetConfigPagination>;
174
177
  setSelectedRecords?: Dispatch<ReadonlySet<string>>;
175
178
  setIsShowEdit?: Dispatch<SetStateAction<boolean>>;
@@ -188,7 +191,6 @@ interface RenderContextMenuProps {
188
191
  renderData?: configContextMenuType[];
189
192
  valueClickItem?: any;
190
193
  expandValue?: IExpandValue;
191
- classWapper?: boolean;
192
194
  }
193
195
 
194
196
  interface TableStyleWapperProps {
@@ -198,34 +200,17 @@ interface TableStyleWapperProps {
198
200
  };
199
201
  renderContext?: RenderContextMenuProps;
200
202
  clsTablecustom?: string;
203
+ idWapper?: string;
201
204
  }
202
- declare const TableStyleContextWapper: react.NamedExoticComponent<TableStyleWapperProps>;
205
+ interface TableStyleContextMenuWapperComponent extends FC<TableStyleWapperProps> {
206
+ getIdFromOutside?: (externalId?: string) => string;
207
+ }
208
+ declare const TableStyleContextMenuWapper: TableStyleContextMenuWapperComponent;
203
209
 
204
210
  interface IPaginationParams {
205
211
  pageSize?: number;
206
212
  page?: number;
207
213
  }
208
214
  type Maybe<T> = T | undefined | null;
209
- interface ICalculatorTotalPage extends IPaginationParams {
210
- total?: number;
211
- }
212
- interface ISTTParams extends IPaginationParams {
213
- }
214
- interface UseShowHideColumnParameter<T, SR = unknown> {
215
- nameLocal?: string;
216
- /** nếu đầu vào là columns: Functions() thì nên dùng useMemo thì sẽ tối ưu hơn */
217
- columns: TColumnsTable<T, SR>;
218
- ignoreColumns?: string[];
219
- }
220
- interface UseShowHideColumnReturn<T, SR> {
221
- hiddenColumns: string[];
222
- setHiddenColumns: Dispatch<SetStateAction<string[]>>;
223
- columnsTable: TColumnsTable<T, SR>;
224
- changeHiddenColumn: (key: string | string[]) => void;
225
- newShowhideColumns: TColumnsTable<T, SR>;
226
- locationColumns: string[];
227
- handleFindLocation: (filterColumns: TColumnsTable<T, SR>, locationColumns?: string[]) => TColumnsTable<T, SR>;
228
- handleChangeLocation?: (arr: string[]) => void;
229
- }
230
215
 
231
- export { type ICalculatorTotalPage, type IPaginationParams, type IReactTableGridCustom, type ISTTParams, type Maybe, ReactTableGridCustom, ReactTableGridCustomPaginationClient, type ReactTableGridCustomPaginationClientComponent, type ReactTableGridCustomPaginationClientProps, type TColumnsTable, TableStyleContextWapper, type TableStyleWapperProps, type UseShowHideColumnParameter, type UseShowHideColumnReturn, useShowHideColumn };
216
+ export { type IPaginationParams, type IReactTableGridCustom, type Maybe, ReactTableGridCustom, ReactTableGridCustomPaginationClient, type TColumnsTable, TableStyleContextMenuWapper, type TableStyleWapperProps, useShowHideColumn };
package/dist/index.js CHANGED
@@ -32,7 +32,7 @@ var index_exports = {};
32
32
  __export(index_exports, {
33
33
  ReactTableGridCustom: () => ReactTableGridCustom,
34
34
  ReactTableGridCustomPaginationClient: () => ReactTableGridCustomPaginationClient,
35
- TableStyleContextWapper: () => TableStyleContextWapper,
35
+ TableStyleContextMenuWapper: () => TableStyleContextMenuWapper,
36
36
  useShowHideColumn: () => useShowHideColumn
37
37
  });
38
38
  module.exports = __toCommonJS(index_exports);
@@ -517,7 +517,7 @@ var ReactTableGridCustomPaginationClientInner = ({
517
517
  ReactTableGridCustom,
518
518
  {
519
519
  data: newDataAccount,
520
- total: data == null ? void 0 : data.length,
520
+ total: (data == null ? void 0 : data.length) || 0,
521
521
  page: configSearch == null ? void 0 : configSearch.page,
522
522
  pageSize: configSearch == null ? void 0 : configSearch.pageSize,
523
523
  setConfigPagination: setConfigSearch,
@@ -538,91 +538,71 @@ var import_react_dom = require("react-dom");
538
538
  var import_jsx_runtime5 = require("react/jsx-runtime");
539
539
  var ContextMenu = ({ selector, children, zIndex = 40 }) => {
540
540
  const menuRef = (0, import_react6.useRef)(null);
541
+ const [mounted, setMounted] = (0, import_react6.useState)(false);
542
+ (0, import_react6.useEffect)(() => {
543
+ setMounted(true);
544
+ }, []);
541
545
  const closeMenu = (0, import_react6.useCallback)(() => {
546
+ if (!mounted || typeof document === "undefined") return;
542
547
  const contextMenuElem = menuRef.current;
543
548
  const elementParent = document.querySelector(selector);
544
- if (contextMenuElem && contextMenuElem.classList.contains("shadow-menu")) {
549
+ if (contextMenuElem == null ? void 0 : contextMenuElem.classList.contains("shadow-menu")) {
545
550
  contextMenuElem.classList.remove("shadow-menu");
546
551
  contextMenuElem.style.opacity = "0";
547
552
  contextMenuElem.style.visibility = "hidden";
548
553
  }
549
- if (elementParent) {
550
- elementParent.style.removeProperty("overflow");
551
- }
552
- }, [menuRef.current]);
554
+ elementParent == null ? void 0 : elementParent.style.removeProperty("overflow");
555
+ }, [mounted, selector]);
553
556
  (0, import_react6.useEffect)(() => {
557
+ if (!mounted || typeof document === "undefined" || typeof window === "undefined") return;
554
558
  const elementParent = document.querySelector(selector);
555
- if (elementParent) {
556
- const clickMenu = (e) => {
557
- const contextMenuElem = menuRef.current;
558
- if (contextMenuElem) {
559
- contextMenuElem.style.opacity = "1";
560
- contextMenuElem.style.visibility = "visible";
561
- const { width: widthContextMenu, height: heightContextMenu } = contextMenuElem.getBoundingClientRect();
562
- elementParent.style.overflow = "hidden";
563
- const maxWidth = window.innerWidth;
564
- const maxHeight = window.innerHeight;
565
- const remainingLeft = maxWidth - e.clientX;
566
- const isLeft = remainingLeft >= widthContextMenu;
567
- const showTop = heightContextMenu + e.clientY <= maxHeight;
568
- const showBottom = e.clientY - heightContextMenu >= 0;
569
- const isCenter = !(showTop || showBottom);
570
- isCenter;
571
- const styleOrigin = {
572
- x: "left",
573
- y: "top"
574
- };
575
- if (isLeft) {
576
- contextMenuElem.style.left = `${e.clientX}px`;
577
- styleOrigin.x = "left";
578
- } else {
579
- contextMenuElem.style.left = `${e.clientX - widthContextMenu}px`;
580
- styleOrigin.x = "right";
581
- }
582
- if (showTop) {
583
- contextMenuElem.style.top = `${e.clientY}px`;
584
- styleOrigin.y = "top";
585
- } else if (showBottom) {
586
- contextMenuElem.style.top = `${e.clientY - heightContextMenu}px`;
587
- styleOrigin.y = "bottom";
588
- } else {
589
- const HalfHeight = heightContextMenu / 2;
590
- const calculatorTop = HalfHeight + e.clientY;
591
- const showTopCenter = calculatorTop <= maxHeight;
592
- const calculatorBottom = e.clientY - HalfHeight;
593
- const showBottom2 = calculatorBottom >= 0;
594
- let topNew = calculatorBottom;
595
- if (!showBottom2 && showTopCenter) {
596
- topNew = topNew - calculatorBottom;
597
- } else if (!showTopCenter && showBottom2) {
598
- const ts = calculatorTop - maxHeight;
599
- topNew = topNew - ts;
600
- }
601
- contextMenuElem.style.top = `${topNew}px`;
602
- styleOrigin.y = "center";
603
- }
604
- contextMenuElem.style.transformOrigin = `${styleOrigin.y} ${styleOrigin.x}`;
605
- if (!contextMenuElem.classList.contains("shadow-menu")) {
606
- contextMenuElem.classList.add("shadow-menu");
607
- }
608
- }
609
- };
610
- elementParent.addEventListener("contextmenu", clickMenu);
611
- window.addEventListener("click", closeMenu);
612
- return () => {
613
- elementParent.removeEventListener("contextmenu", clickMenu);
614
- window.removeEventListener("click", closeMenu);
615
- };
616
- }
559
+ if (!elementParent) return;
560
+ const clickMenu = (e) => {
561
+ e.preventDefault();
562
+ const contextMenuElem = menuRef.current;
563
+ if (!contextMenuElem) return;
564
+ contextMenuElem.style.opacity = "1";
565
+ contextMenuElem.style.visibility = "visible";
566
+ const { width, height } = contextMenuElem.getBoundingClientRect();
567
+ elementParent.style.overflow = "hidden";
568
+ const maxWidth = window.innerWidth;
569
+ const maxHeight = window.innerHeight;
570
+ const isLeft = maxWidth - e.clientX >= width;
571
+ const showTop = height + e.clientY <= maxHeight;
572
+ const showBottom = e.clientY - height >= 0;
573
+ const styleOrigin = { x: "left", y: "top" };
574
+ contextMenuElem.style.left = isLeft ? `${e.clientX}px` : `${e.clientX - width}px`;
575
+ styleOrigin.x = isLeft ? "left" : "right";
576
+ if (showTop) {
577
+ contextMenuElem.style.top = `${e.clientY}px`;
578
+ styleOrigin.y = "top";
579
+ } else if (showBottom) {
580
+ contextMenuElem.style.top = `${e.clientY - height}px`;
581
+ styleOrigin.y = "bottom";
582
+ } else {
583
+ let top = e.clientY - height / 2;
584
+ if (top < 0) top = 0;
585
+ if (top + height > maxHeight) top = maxHeight - height;
586
+ contextMenuElem.style.top = `${top}px`;
587
+ styleOrigin.y = "center";
588
+ }
589
+ contextMenuElem.style.transformOrigin = `${styleOrigin.y} ${styleOrigin.x}`;
590
+ contextMenuElem.classList.add("shadow-menu");
591
+ };
592
+ elementParent.addEventListener("contextmenu", clickMenu);
593
+ window.addEventListener("click", closeMenu);
617
594
  return () => {
595
+ elementParent.removeEventListener("contextmenu", clickMenu);
596
+ window.removeEventListener("click", closeMenu);
618
597
  };
619
- }, []);
598
+ }, [mounted, selector, closeMenu]);
599
+ if (!mounted || typeof document === "undefined") return null;
620
600
  return (0, import_react_dom.createPortal)(
621
601
  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
622
602
  "div",
623
603
  {
624
- className: "fixed z-40 w-fit",
625
604
  ref: menuRef,
605
+ className: "fixed w-fit",
626
606
  style: { opacity: 0, visibility: "hidden", zIndex },
627
607
  children
628
608
  }
@@ -703,64 +683,81 @@ var DropdownContextChild_default = DropdownContextChild;
703
683
 
704
684
  // src/component/ui/ContextMenu/RenderContextMenu.tsx
705
685
  var import_jsx_runtime8 = require("react/jsx-runtime");
706
- var RenderContextMenu = ({
707
- renderData,
686
+ var ContextMenuItemWrapper = ({
687
+ menuAction,
708
688
  valueClickItem,
709
- expandValue = {}
689
+ expandValue
710
690
  }) => {
711
- return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "bg-white shadow-submenu p-1 min-w-[250px] border", children: renderData == null ? void 0 : renderData.map((menuAction, index) => {
712
- const [isShow, setIsShow] = (0, import_react9.useState)(false);
713
- return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react9.Fragment, { children: [
714
- !(menuAction == null ? void 0 : menuAction.children) && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
691
+ const [isShow, setIsShow] = (0, import_react9.useState)(false);
692
+ if (!menuAction.children) {
693
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
694
+ ContextMenuItem_default,
695
+ {
696
+ currentValue: menuAction,
697
+ expandValue,
698
+ valueClickItem
699
+ }
700
+ );
701
+ }
702
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
703
+ DropdownContextChild_default,
704
+ {
705
+ appendTo: "parent",
706
+ placement: "right",
707
+ offset: [0, 5],
708
+ onShow: () => setIsShow(true),
709
+ onHide: () => setIsShow(false),
710
+ button: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
715
711
  ContextMenuItem_default,
716
712
  {
717
713
  currentValue: menuAction,
718
714
  expandValue,
719
- valueClickItem
715
+ valueClickItem,
716
+ show: isShow,
717
+ isArrow: true
720
718
  }
721
719
  ),
722
- (menuAction == null ? void 0 : menuAction.children) && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
723
- DropdownContextChild_default,
720
+ children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "dropdown-context-child absolute -top-[20px] -left-1", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
721
+ RenderContextMenu,
724
722
  {
725
- appendTo: "parent",
726
- placement: "right",
727
- offset: [0, 5],
728
- onShow: () => setIsShow(true),
729
- onHide: () => setIsShow(false),
730
- button: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
731
- ContextMenuItem_default,
732
- {
733
- currentValue: menuAction,
734
- expandValue,
735
- valueClickItem,
736
- show: isShow,
737
- isArrow: true
738
- }
739
- ),
740
- children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "dropdown-context-child absolute -top-[20px] -left-1", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
741
- RenderContextMenu,
742
- {
743
- renderData: menuAction == null ? void 0 : menuAction.children,
744
- expandValue,
745
- valueClickItem
746
- }
747
- ) })
723
+ renderData: menuAction.children,
724
+ expandValue,
725
+ valueClickItem
748
726
  }
749
- )
750
- ] }, index);
751
- }) });
727
+ ) })
728
+ }
729
+ );
730
+ };
731
+ var RenderContextMenu = ({
732
+ renderData,
733
+ valueClickItem,
734
+ expandValue = {}
735
+ }) => {
736
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "bg-white shadow-submenu p-1 min-w-[250px] border", children: renderData == null ? void 0 : renderData.map((menuAction, index) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react9.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
737
+ ContextMenuItemWrapper,
738
+ {
739
+ menuAction,
740
+ expandValue,
741
+ valueClickItem
742
+ }
743
+ ) }, index)) });
752
744
  };
753
745
  var RenderContextMenu_default = RenderContextMenu;
754
746
 
755
747
  // src/component/ui/Table/TableStyleContextWapper.tsx
756
748
  var import_jsx_runtime9 = require("react/jsx-runtime");
757
- var TableStyleContextMenuWapper = ({
749
+ var isClient = typeof window !== "undefined";
750
+ var TableStyleContextWapper = ({
758
751
  children,
759
752
  contextMenuProps,
760
753
  clsTablecustom,
761
- renderContext
754
+ renderContext,
755
+ idWapper: externalId
762
756
  }) => {
763
- const idWapper = (0, import_react10.useId)();
757
+ if (!isClient) {
758
+ return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children });
759
+ }
760
+ const idWapper = externalId != null ? externalId : (0, import_react10.useId)();
764
761
  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
765
762
  "div",
766
763
  {
@@ -780,13 +777,16 @@ var TableStyleContextMenuWapper = ({
780
777
  }
781
778
  );
782
779
  };
783
- var TableStyleContextWapper = (0, import_react10.memo)(
784
- TableStyleContextMenuWapper
780
+ var TableStyleContextMenuWapper = (0, import_react10.memo)(
781
+ TableStyleContextWapper
785
782
  );
783
+ TableStyleContextMenuWapper.getIdFromOutside = (externalId) => {
784
+ return `wapper_menu_context-${externalId != null ? externalId : "default-id"}`;
785
+ };
786
786
  // Annotate the CommonJS export names for ESM import in node:
787
787
  0 && (module.exports = {
788
788
  ReactTableGridCustom,
789
789
  ReactTableGridCustomPaginationClient,
790
- TableStyleContextWapper,
790
+ TableStyleContextMenuWapper,
791
791
  useShowHideColumn
792
792
  });
package/dist/index.mjs CHANGED
@@ -493,7 +493,7 @@ var ReactTableGridCustomPaginationClientInner = ({
493
493
  ReactTableGridCustom,
494
494
  {
495
495
  data: newDataAccount,
496
- total: data == null ? void 0 : data.length,
496
+ total: (data == null ? void 0 : data.length) || 0,
497
497
  page: configSearch == null ? void 0 : configSearch.page,
498
498
  pageSize: configSearch == null ? void 0 : configSearch.pageSize,
499
499
  setConfigPagination: setConfigSearch,
@@ -509,96 +509,76 @@ var ReactTableGridCustomPaginationClient = memo2(
509
509
  import { memo as memo3, useId as useId2 } from "react";
510
510
 
511
511
  // src/component/ui/ContextMenu/ContextMenu.tsx
512
- import { useCallback as useCallback4, useEffect as useEffect2, useRef as useRef2 } from "react";
512
+ import { useCallback as useCallback4, useEffect as useEffect2, useRef as useRef2, useState as useState4 } from "react";
513
513
  import { createPortal } from "react-dom";
514
514
  import { jsx as jsx5 } from "react/jsx-runtime";
515
515
  var ContextMenu = ({ selector, children, zIndex = 40 }) => {
516
516
  const menuRef = useRef2(null);
517
+ const [mounted, setMounted] = useState4(false);
518
+ useEffect2(() => {
519
+ setMounted(true);
520
+ }, []);
517
521
  const closeMenu = useCallback4(() => {
522
+ if (!mounted || typeof document === "undefined") return;
518
523
  const contextMenuElem = menuRef.current;
519
524
  const elementParent = document.querySelector(selector);
520
- if (contextMenuElem && contextMenuElem.classList.contains("shadow-menu")) {
525
+ if (contextMenuElem == null ? void 0 : contextMenuElem.classList.contains("shadow-menu")) {
521
526
  contextMenuElem.classList.remove("shadow-menu");
522
527
  contextMenuElem.style.opacity = "0";
523
528
  contextMenuElem.style.visibility = "hidden";
524
529
  }
525
- if (elementParent) {
526
- elementParent.style.removeProperty("overflow");
527
- }
528
- }, [menuRef.current]);
530
+ elementParent == null ? void 0 : elementParent.style.removeProperty("overflow");
531
+ }, [mounted, selector]);
529
532
  useEffect2(() => {
533
+ if (!mounted || typeof document === "undefined" || typeof window === "undefined") return;
530
534
  const elementParent = document.querySelector(selector);
531
- if (elementParent) {
532
- const clickMenu = (e) => {
533
- const contextMenuElem = menuRef.current;
534
- if (contextMenuElem) {
535
- contextMenuElem.style.opacity = "1";
536
- contextMenuElem.style.visibility = "visible";
537
- const { width: widthContextMenu, height: heightContextMenu } = contextMenuElem.getBoundingClientRect();
538
- elementParent.style.overflow = "hidden";
539
- const maxWidth = window.innerWidth;
540
- const maxHeight = window.innerHeight;
541
- const remainingLeft = maxWidth - e.clientX;
542
- const isLeft = remainingLeft >= widthContextMenu;
543
- const showTop = heightContextMenu + e.clientY <= maxHeight;
544
- const showBottom = e.clientY - heightContextMenu >= 0;
545
- const isCenter = !(showTop || showBottom);
546
- isCenter;
547
- const styleOrigin = {
548
- x: "left",
549
- y: "top"
550
- };
551
- if (isLeft) {
552
- contextMenuElem.style.left = `${e.clientX}px`;
553
- styleOrigin.x = "left";
554
- } else {
555
- contextMenuElem.style.left = `${e.clientX - widthContextMenu}px`;
556
- styleOrigin.x = "right";
557
- }
558
- if (showTop) {
559
- contextMenuElem.style.top = `${e.clientY}px`;
560
- styleOrigin.y = "top";
561
- } else if (showBottom) {
562
- contextMenuElem.style.top = `${e.clientY - heightContextMenu}px`;
563
- styleOrigin.y = "bottom";
564
- } else {
565
- const HalfHeight = heightContextMenu / 2;
566
- const calculatorTop = HalfHeight + e.clientY;
567
- const showTopCenter = calculatorTop <= maxHeight;
568
- const calculatorBottom = e.clientY - HalfHeight;
569
- const showBottom2 = calculatorBottom >= 0;
570
- let topNew = calculatorBottom;
571
- if (!showBottom2 && showTopCenter) {
572
- topNew = topNew - calculatorBottom;
573
- } else if (!showTopCenter && showBottom2) {
574
- const ts = calculatorTop - maxHeight;
575
- topNew = topNew - ts;
576
- }
577
- contextMenuElem.style.top = `${topNew}px`;
578
- styleOrigin.y = "center";
579
- }
580
- contextMenuElem.style.transformOrigin = `${styleOrigin.y} ${styleOrigin.x}`;
581
- if (!contextMenuElem.classList.contains("shadow-menu")) {
582
- contextMenuElem.classList.add("shadow-menu");
583
- }
584
- }
585
- };
586
- elementParent.addEventListener("contextmenu", clickMenu);
587
- window.addEventListener("click", closeMenu);
588
- return () => {
589
- elementParent.removeEventListener("contextmenu", clickMenu);
590
- window.removeEventListener("click", closeMenu);
591
- };
592
- }
535
+ if (!elementParent) return;
536
+ const clickMenu = (e) => {
537
+ e.preventDefault();
538
+ const contextMenuElem = menuRef.current;
539
+ if (!contextMenuElem) return;
540
+ contextMenuElem.style.opacity = "1";
541
+ contextMenuElem.style.visibility = "visible";
542
+ const { width, height } = contextMenuElem.getBoundingClientRect();
543
+ elementParent.style.overflow = "hidden";
544
+ const maxWidth = window.innerWidth;
545
+ const maxHeight = window.innerHeight;
546
+ const isLeft = maxWidth - e.clientX >= width;
547
+ const showTop = height + e.clientY <= maxHeight;
548
+ const showBottom = e.clientY - height >= 0;
549
+ const styleOrigin = { x: "left", y: "top" };
550
+ contextMenuElem.style.left = isLeft ? `${e.clientX}px` : `${e.clientX - width}px`;
551
+ styleOrigin.x = isLeft ? "left" : "right";
552
+ if (showTop) {
553
+ contextMenuElem.style.top = `${e.clientY}px`;
554
+ styleOrigin.y = "top";
555
+ } else if (showBottom) {
556
+ contextMenuElem.style.top = `${e.clientY - height}px`;
557
+ styleOrigin.y = "bottom";
558
+ } else {
559
+ let top = e.clientY - height / 2;
560
+ if (top < 0) top = 0;
561
+ if (top + height > maxHeight) top = maxHeight - height;
562
+ contextMenuElem.style.top = `${top}px`;
563
+ styleOrigin.y = "center";
564
+ }
565
+ contextMenuElem.style.transformOrigin = `${styleOrigin.y} ${styleOrigin.x}`;
566
+ contextMenuElem.classList.add("shadow-menu");
567
+ };
568
+ elementParent.addEventListener("contextmenu", clickMenu);
569
+ window.addEventListener("click", closeMenu);
593
570
  return () => {
571
+ elementParent.removeEventListener("contextmenu", clickMenu);
572
+ window.removeEventListener("click", closeMenu);
594
573
  };
595
- }, []);
574
+ }, [mounted, selector, closeMenu]);
575
+ if (!mounted || typeof document === "undefined") return null;
596
576
  return createPortal(
597
577
  /* @__PURE__ */ jsx5(
598
578
  "div",
599
579
  {
600
- className: "fixed z-40 w-fit",
601
580
  ref: menuRef,
581
+ className: "fixed w-fit",
602
582
  style: { opacity: 0, visibility: "hidden", zIndex },
603
583
  children
604
584
  }
@@ -609,7 +589,7 @@ var ContextMenu = ({ selector, children, zIndex = 40 }) => {
609
589
  var ContextMenu_default = ContextMenu;
610
590
 
611
591
  // src/component/ui/ContextMenu/RenderContextMenu.tsx
612
- import { Fragment as Fragment2, useState as useState4 } from "react";
592
+ import { Fragment as Fragment2, useState as useState5 } from "react";
613
593
 
614
594
  // src/component/ui/ContextMenu/ContextMenuItem.tsx
615
595
  import { useTranslation as useTranslation3 } from "react-i18next";
@@ -678,66 +658,83 @@ var DropdownContextChild = ({ button, children, ...rest }) => {
678
658
  var DropdownContextChild_default = DropdownContextChild;
679
659
 
680
660
  // src/component/ui/ContextMenu/RenderContextMenu.tsx
681
- import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
682
- var RenderContextMenu = ({
683
- renderData,
661
+ import { jsx as jsx8 } from "react/jsx-runtime";
662
+ var ContextMenuItemWrapper = ({
663
+ menuAction,
684
664
  valueClickItem,
685
- expandValue = {}
665
+ expandValue
686
666
  }) => {
687
- return /* @__PURE__ */ jsx8("div", { className: "bg-white shadow-submenu p-1 min-w-[250px] border", children: renderData == null ? void 0 : renderData.map((menuAction, index) => {
688
- const [isShow, setIsShow] = useState4(false);
689
- return /* @__PURE__ */ jsxs4(Fragment2, { children: [
690
- !(menuAction == null ? void 0 : menuAction.children) && /* @__PURE__ */ jsx8(
667
+ const [isShow, setIsShow] = useState5(false);
668
+ if (!menuAction.children) {
669
+ return /* @__PURE__ */ jsx8(
670
+ ContextMenuItem_default,
671
+ {
672
+ currentValue: menuAction,
673
+ expandValue,
674
+ valueClickItem
675
+ }
676
+ );
677
+ }
678
+ return /* @__PURE__ */ jsx8(
679
+ DropdownContextChild_default,
680
+ {
681
+ appendTo: "parent",
682
+ placement: "right",
683
+ offset: [0, 5],
684
+ onShow: () => setIsShow(true),
685
+ onHide: () => setIsShow(false),
686
+ button: /* @__PURE__ */ jsx8(
691
687
  ContextMenuItem_default,
692
688
  {
693
689
  currentValue: menuAction,
694
690
  expandValue,
695
- valueClickItem
691
+ valueClickItem,
692
+ show: isShow,
693
+ isArrow: true
696
694
  }
697
695
  ),
698
- (menuAction == null ? void 0 : menuAction.children) && /* @__PURE__ */ jsx8(
699
- DropdownContextChild_default,
696
+ children: /* @__PURE__ */ jsx8("div", { className: "dropdown-context-child absolute -top-[20px] -left-1", children: /* @__PURE__ */ jsx8(
697
+ RenderContextMenu,
700
698
  {
701
- appendTo: "parent",
702
- placement: "right",
703
- offset: [0, 5],
704
- onShow: () => setIsShow(true),
705
- onHide: () => setIsShow(false),
706
- button: /* @__PURE__ */ jsx8(
707
- ContextMenuItem_default,
708
- {
709
- currentValue: menuAction,
710
- expandValue,
711
- valueClickItem,
712
- show: isShow,
713
- isArrow: true
714
- }
715
- ),
716
- children: /* @__PURE__ */ jsx8("div", { className: "dropdown-context-child absolute -top-[20px] -left-1", children: /* @__PURE__ */ jsx8(
717
- RenderContextMenu,
718
- {
719
- renderData: menuAction == null ? void 0 : menuAction.children,
720
- expandValue,
721
- valueClickItem
722
- }
723
- ) })
699
+ renderData: menuAction.children,
700
+ expandValue,
701
+ valueClickItem
724
702
  }
725
- )
726
- ] }, index);
727
- }) });
703
+ ) })
704
+ }
705
+ );
706
+ };
707
+ var RenderContextMenu = ({
708
+ renderData,
709
+ valueClickItem,
710
+ expandValue = {}
711
+ }) => {
712
+ return /* @__PURE__ */ jsx8("div", { className: "bg-white shadow-submenu p-1 min-w-[250px] border", children: renderData == null ? void 0 : renderData.map((menuAction, index) => /* @__PURE__ */ jsx8(Fragment2, { children: /* @__PURE__ */ jsx8(
713
+ ContextMenuItemWrapper,
714
+ {
715
+ menuAction,
716
+ expandValue,
717
+ valueClickItem
718
+ }
719
+ ) }, index)) });
728
720
  };
729
721
  var RenderContextMenu_default = RenderContextMenu;
730
722
 
731
723
  // src/component/ui/Table/TableStyleContextWapper.tsx
732
- import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
733
- var TableStyleContextMenuWapper = ({
724
+ import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
725
+ var isClient = typeof window !== "undefined";
726
+ var TableStyleContextWapper = ({
734
727
  children,
735
728
  contextMenuProps,
736
729
  clsTablecustom,
737
- renderContext
730
+ renderContext,
731
+ idWapper: externalId
738
732
  }) => {
739
- const idWapper = useId2();
740
- return /* @__PURE__ */ jsxs5(
733
+ if (!isClient) {
734
+ return /* @__PURE__ */ jsx9(Fragment3, { children });
735
+ }
736
+ const idWapper = externalId != null ? externalId : useId2();
737
+ return /* @__PURE__ */ jsxs4(
741
738
  "div",
742
739
  {
743
740
  id: `wapper_menu_context-${idWapper}`,
@@ -756,12 +753,15 @@ var TableStyleContextMenuWapper = ({
756
753
  }
757
754
  );
758
755
  };
759
- var TableStyleContextWapper = memo3(
760
- TableStyleContextMenuWapper
756
+ var TableStyleContextMenuWapper = memo3(
757
+ TableStyleContextWapper
761
758
  );
759
+ TableStyleContextMenuWapper.getIdFromOutside = (externalId) => {
760
+ return `wapper_menu_context-${externalId != null ? externalId : "default-id"}`;
761
+ };
762
762
  export {
763
763
  ReactTableGridCustom,
764
764
  ReactTableGridCustomPaginationClient,
765
- TableStyleContextWapper,
765
+ TableStyleContextMenuWapper,
766
766
  useShowHideColumn
767
767
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mkt-loitd/react-table-grid-custom",
3
- "version": "1.2.3",
3
+ "version": "1.2.6",
4
4
  "description": "React Table Grid Custom component",
5
5
  "license": "ISC",
6
6
  "private": false,