@majoo-ui/react 1.61.21 → 1.61.22

package/components/contextMenu/ContextMenu.d.ts

@@ -1,19 +1,19 @@
-/// <reference types="react" />
-interface TriggerProps {
+import React from 'react';
+interface TriggerProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'> {
     id: string;
     triggerSide?: 'left' | 'right';
-    children?: JSX.Element | string;
+    children?: React.ReactNode;
 }
-interface MenuProps {
+interface MenuProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
     id: string;
-    children?: JSX.Element | JSX.Element[];
+    children?: React.ReactNode;
 }
-interface ItemProps {
-    children?: JSX.Element | string;
+interface ItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'children'> {
+    children?: React.ReactNode;
     data?: object;
-    onClick?: (e: any, data: any) => void;
+    onClick?: (e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>, data?: object) => void;
 }
-export declare const ContextMenuTrigger: import("@stitches/react/types/styled-component").StyledComponent<(props: TriggerProps) => JSX.Element, {}, {
+export declare const ContextMenuTrigger: import("@stitches/react/types/styled-component").StyledComponent<({ id, triggerSide, children, className, onClick, onContextMenu, style, ...rest }: TriggerProps) => JSX.Element, {}, {
     sm: "(min-width: 359px)";
     md: "(min-width: 767px)";
     lg: "(min-width: 1023px)";
@@ -110,7 +110,7 @@ export declare const ContextMenuTrigger: import("@stitches/react/types/styled-co
         backgroundColor: string;
     };
 }>>;
-export declare const ContextMenu: import("@stitches/react/types/styled-component").StyledComponent<(props: MenuProps) => JSX.Element, {}, {
+export declare const ContextMenu: import("@stitches/react/types/styled-component").StyledComponent<({ id, children, className, style, ...rest }: MenuProps) => JSX.Element | null, {}, {
     sm: "(min-width: 359px)";
     md: "(min-width: 767px)";
     lg: "(min-width: 1023px)";
@@ -207,7 +207,7 @@ export declare const ContextMenu: import("@stitches/react/types/styled-component
         backgroundColor: string;
     };
 }>>;
-export declare const ContextMenuItem: import("@stitches/react/types/styled-component").StyledComponent<(props: ItemProps) => JSX.Element, {}, {
+export declare const ContextMenuItem: import("@stitches/react/types/styled-component").StyledComponent<({ children, data, onClick, className, onKeyDown, ...rest }: ItemProps) => JSX.Element, {}, {
     sm: "(min-width: 359px)";
     md: "(min-width: 767px)";
     lg: "(min-width: 1023px)";

package/index.esm.js

@@ -47,7 +47,7 @@ import 'leaflet-defaulticon-compatibility';
 import { ResponsiveContainer, LineChart as LineChart$1, XAxis, YAxis, CartesianGrid, Tooltip as Tooltip$2, Line as Line$2, BarChart, Legend, Bar, Cell as Cell$1, LabelList, PieChart, Pie, Sector } from 'recharts';
 import { EditorState } from 'draft-js';
 import { Editor } from 'react-draft-wysiwyg';
-import { ContextMenuTrigger as ContextMenuTrigger$1, ContextMenu as ContextMenu$1, MenuItem } from 'react-contextmenu';
+import { Portal as Portal$1 } from '@radix-ui/react-portal';
 import ReactSkeleton, { SkeletonTheme } from 'react-loading-skeleton';
 import 'react-loading-skeleton/dist/skeleton.css';
 import { useVirtual } from 'react-virtual';
@@ -7925,7 +7925,7 @@ const StyledCheckbox = styled(CheckboxPrimitive.Root, {
   minHeight: '$$cbSize',
   width: '$$cbSize',
   height: '$$cbSize',
-  border: '1.5px solid $gray300',
+  border: '1.5px solid $bgOutline',
   borderRadius: '3px',
   display: 'flex',
   alignItems: 'center',
@@ -8101,10 +8101,10 @@ const InputGroupStyle = styled('div', {
           color: '$textDisable'
         },
         '&:hover': {
-          border: '1px solid $bgBorder',
+          border: '1px solid $bgOutline',
           borderRadius: '$lg',
           '& > .addon': {
-            border: '1px solid $bgBorder'
+            border: '1px solid $bgOutline'
           }
         },
         '& > input': {
@@ -8159,7 +8159,7 @@ const InputGroupStyle = styled('div', {
     isLetter: {
       true: {
         borderRadius: '$lg',
-        border: '1px solid $bgBorder',
+        border: '1px solid $bgOutline',
         '&:focus': {
           border: '1px solid $primary400'
         },
@@ -8177,7 +8177,7 @@ const InputGroupStyle = styled('div', {
             color: '$textDisable'
           },
           '&:hover': {
-            border: '1px solid $gray300'
+            border: '1px solid $bgOutline'
           }
         }
       }
@@ -8277,14 +8277,14 @@ const InputAddon = styled(Text$1, {
     },
     placements: {
       left: {
-        border: '1px solid $gray300',
+        border: '1px solid $bgOutline',
         borderRightWidth: 0,
         borderRadius: '$lg',
         borderEndEndRadius: 0,
         borderStartEndRadius: 0
       },
       right: {
-        border: '1px solid $gray300',
+        border: '1px solid $bgOutline',
         borderLeftWidth: 0,
         borderRadius: '$lg',
         borderEndStartRadius: 0,
@@ -8427,7 +8427,7 @@ const disabledStyle = {
     color: '$textDisable'
   },
   '&:hover': {
-    border: '1px solid $gray300'
+    border: '1px solid $bgOutline'
   }
 };
 const StyledInput$1 = styled('input', {
@@ -8454,7 +8454,7 @@ const StyledInput$1 = styled('input', {
   lineHeight: '$short-content-regular',
   fontWeight: '400',
   padding: '10px $spacing-05',
-  border: '1px solid $gray300',
+  border: '1px solid $bgOutline',
   borderRadius: '$lg',
   '&:focus': {
     border: '1px solid $primary400'
@@ -8515,7 +8515,7 @@ const StyledInput$1 = styled('input', {
             color: '$textDisable'
           },
           '&:hover': {
-            border: '1px solid $gray300'
+            border: '1px solid $bgOutline'
           }
         }
       }
@@ -8766,7 +8766,7 @@ const RADIO_BASE_STYLES = {
   textDecoration: 'none',
   WWebkitTapHighlightColor: 'rgba(0,0,0,0)',
   borderRadius: '$round',
-  border: '2px solid $gray300',
+  border: '2px solid $bgOutline',
   overflow: 'hidden',
   '&[data-state=checked]': {
     border: '2px solid $primary500'
@@ -8822,7 +8822,7 @@ const Container$a = styled(Flex$1, {
   variants: {
     outlined: {
       true: {
-        border: '1px solid $gray300',
+        border: '1px solid $bgOutline',
         borderRadius: '$lg',
         padding: '$spacing-03',
         '& > input': {
@@ -11124,7 +11124,7 @@ const StyledInput = styled(NumberFormat, {
   lineHeight: '$short-content-regular',
   fontWeight: '400',
   padding: '10px $spacing-05',
-  border: '1px solid $gray300',
+  border: '1px solid $bgOutline',
   borderRadius: '$lg',
   '&:focus': {
     border: '1px solid $colors$primary400'
@@ -11562,7 +11562,7 @@ const InputTagsComponent = styled('div', {
   appearance: 'none',
   backgroundolor: 'none',
   boxSizing: 'border-box',
-  border: '1px solid $gray300',
+  border: '1px solid $bgOutline',
   color: '$textPrimary',
   lineHeight: '$short-content-regular',
   fontSize: '$short-content-regular',
@@ -13178,7 +13178,7 @@ const SelectBox = styled(Flex$1, {
   appearance: 'none',
   background: 'none',
   boxSizing: 'border-box',
-  border: '1px solid $gray300',
+  border: '1px solid $bgOutline',
   borderRadius: '$lg',
   outline: 'none',
   '&:focus-within': {
@@ -13202,10 +13202,10 @@ const SelectBox = styled(Flex$1, {
         color: '$textDisable',
         cursor: 'not-allowed',
         '&:hover': {
-          border: '1px solid $gray300'
+          border: '1px solid $bgOutline'
         },
         '&:focus-within': {
-          border: '1px solid $gray300'
+          border: '1px solid $bgOutline'
         }
       }
     },
@@ -13214,10 +13214,10 @@ const SelectBox = styled(Flex$1, {
         backgroundColor: '$formDisable',
         color: '$textPrimary',
         '&:hover': {
-          border: '1px solid $gray300'
+          border: '1px solid $bgOutline'
         },
         '&:focus-within': {
-          border: '1px solid $gray300'
+          border: '1px solid $bgOutline'
         }
       }
     },
@@ -14234,7 +14234,7 @@ const Select = styled('div', {
   appearance: 'none',
   background: 'none',
   boxSizing: 'border-box',
-  border: '1px solid $gray300',
+  border: '1px solid $bgOutline',
   borderRadius: '$md',
   outline: 'none',
   '&:focus-within': {
@@ -14262,10 +14262,10 @@ const Select = styled('div', {
         color: '$textDisable',
         cursor: 'not-allowed',
         '&:hover': {
-          border: '1px solid $gray300'
+          border: '1px solid $bgOutline'
         },
         '&:focus-within': {
-          border: '1px solid $gray300'
+          border: '1px solid $bgOutline'
         }
       }
     },
@@ -15907,7 +15907,7 @@ const InputWrapper = styled('div', {
   appearance: 'none',
   backgroundolor: 'none',
   boxSizing: 'border-box',
-  border: '1px solid $gray300',
+  border: '1px solid $bgOutline',
   borderRadius: '$md',
   color: '$textPrimary',
   lineHeight: '$short-content-regular',
@@ -16153,7 +16153,7 @@ const IconBox = styled('div', {
     border: {
       true: {
         borderRadius: 3,
-        border: '1.5px solid $gray300'
+        border: '1.5px solid $bgOutline'
       }
     }
   }
@@ -16447,7 +16447,7 @@ function InputResourceList({
       }), void 0)
     }), void 0), jsxs(Box, Object.assign({
       css: Object.assign({
-        border: '1px solid $gray300',
+        border: '1px solid $bgOutline',
         padding: '$spacing-05',
         borderRadius: '$lg',
         maxHeight: 285,
@@ -20952,7 +20952,7 @@ const Container$8 = styled(Flex$1, {
   flexDirection: 'row',
   alignItems: 'center',
   userSelect: 'none',
-  border: '1px solid $gray300',
+  border: '1px solid $bgOutline',
   borderRadius: 6,
   '&:hover': {
     border: '1px solid $primary400'
@@ -23841,21 +23841,184 @@ Pagination.propTypes = {
 };
 Pagination.displayName = 'Pagination';
 
-const Trigger = props => {
-  return jsx(ContextMenuTrigger$1, Object.assign({}, props, {
-    mouseButton: (props === null || props === void 0 ? void 0 : props.triggerSide) === 'left' ? 0 : undefined
+const menuListeners = new Map();
+let activeMenuId = null;
+const subscribeToMenu = (id, listener) => {
+  if (!menuListeners.has(id)) {
+    menuListeners.set(id, new Set());
+  }
+  const listeners = menuListeners.get(id);
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+    if (listeners.size === 0) {
+      menuListeners.delete(id);
+    }
+  };
+};
+const notifyMenu = (id, state) => {
+  const listeners = menuListeners.get(id);
+  if (!listeners) return;
+  listeners.forEach(listener => listener(state));
+};
+const openMenu = (id, state) => {
+  if (activeMenuId && activeMenuId !== id) {
+    notifyMenu(activeMenuId, null);
+  }
+  activeMenuId = id;
+  notifyMenu(id, state);
+};
+const closeMenu = id => {
+  const targetId = id !== null && id !== void 0 ? id : activeMenuId;
+  if (!targetId) return;
+  notifyMenu(targetId, null);
+  if (activeMenuId === targetId) {
+    activeMenuId = null;
+  }
+};
+const composeEventHandlers = (userHandler, ourHandler) => event => {
+  userHandler === null || userHandler === void 0 ? void 0 : userHandler(event);
+  if (event.defaultPrevented) {
+    return;
+  }
+  ourHandler === null || ourHandler === void 0 ? void 0 : ourHandler(event);
+};
+const Trigger = _a => {
+  var {
+      id,
+      triggerSide = 'right',
+      children,
+      className,
+      onClick,
+      onContextMenu,
+      style
+    } = _a,
+    rest = __rest(_a, ["id", "triggerSide", "children", "className", "onClick", "onContextMenu", "style"]);
+  const handleOpen = useCallback(event => {
+    openMenu(id, {
+      position: {
+        x: event.clientX,
+        y: event.clientY
+      }
+    });
+  }, [id]);
+  const handleContextMenu = useCallback(event => {
+    if (triggerSide === 'left') return;
+    event.preventDefault();
+    handleOpen(event);
+  }, [handleOpen, triggerSide]);
+  const handleClick = useCallback(event => {
+    if (triggerSide !== 'left') return;
+    handleOpen(event);
+  }, [handleOpen, triggerSide]);
+  return jsx("span", Object.assign({}, rest, {
+    className: className,
+    style: Object.assign({
+      display: 'contents'
+    }, style),
+    onClick: composeEventHandlers(onClick, handleClick),
+    onContextMenu: composeEventHandlers(onContextMenu, handleContextMenu)
   }, {
-    children: props === null || props === void 0 ? void 0 : props.children
+    children: children
   }), void 0);
 };
-const Menu = props => {
-  return jsx(ContextMenu$1, Object.assign({}, props, {
-    children: props === null || props === void 0 ? void 0 : props.children
-  }), void 0);
+const MenuContext = /*#__PURE__*/React__default.createContext(null);
+const Menu = _a => {
+  var {
+      id,
+      children,
+      className,
+      style
+    } = _a,
+    rest = __rest(_a, ["id", "children", "className", "style"]);
+  const [menuState, setMenuState] = useState(null);
+  const menuRef = useRef(null);
+  useEffect(() => subscribeToMenu(id, setMenuState), [id]);
+  const handleClose = useCallback(() => {
+    closeMenu(id);
+  }, [id]);
+  useEffect(() => {
+    if (!menuState) return;
+    const doc = typeof document !== 'undefined' ? document : null;
+    const win = typeof window !== 'undefined' ? window : null;
+    if (!doc) return;
+    const handlePointerDown = event => {
+      if (!menuRef.current) return;
+      if (event.target instanceof Node && menuRef.current.contains(event.target)) return;
+      handleClose();
+    };
+    const handleScroll = () => handleClose();
+    const handleKeyDown = event => {
+      if (event.key === 'Escape') handleClose();
+    };
+    doc.addEventListener('mousedown', handlePointerDown);
+    doc.addEventListener('touchstart', handlePointerDown);
+    doc.addEventListener('scroll', handleScroll, true);
+    win === null || win === void 0 ? void 0 : win.addEventListener('resize', handleScroll);
+    doc.addEventListener('keydown', handleKeyDown);
+    return () => {
+      doc.removeEventListener('mousedown', handlePointerDown);
+      doc.removeEventListener('touchstart', handlePointerDown);
+      doc.removeEventListener('scroll', handleScroll, true);
+      win === null || win === void 0 ? void 0 : win.removeEventListener('resize', handleScroll);
+      doc.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [menuState, handleClose]);
+  if (!menuState) return null;
+  return jsx(Portal$1, {
+    children: jsx("div", Object.assign({}, rest, {
+      ref: menuRef,
+      className: ['react-contextmenu', className].filter(Boolean).join(' '),
+      style: Object.assign({
+        position: 'fixed',
+        top: menuState.position.y,
+        left: menuState.position.x
+      }, style),
+      role: "menu",
+      "data-state": "open",
+      "data-side": "bottom"
+    }, {
+      children: jsx(MenuContext.Provider, Object.assign({
+        value: {
+          closeMenu: handleClose
+        }
+      }, {
+        children: children
+      }), void 0)
+    }), void 0)
+  }, void 0);
 };
-const Item = props => {
-  return jsx(MenuItem, Object.assign({}, props, {
-    children: props === null || props === void 0 ? void 0 : props.children
+const Item = _a => {
+  var {
+      children,
+      data,
+      onClick,
+      className,
+      onKeyDown
+    } = _a,
+    rest = __rest(_a, ["children", "data", "onClick", "className", "onKeyDown"]);
+  const menuContext = React__default.useContext(MenuContext);
+  const handleSelect = useCallback(event => {
+    onClick === null || onClick === void 0 ? void 0 : onClick(event, data);
+    menuContext === null || menuContext === void 0 ? void 0 : menuContext.closeMenu();
+  }, [data, menuContext, onClick]);
+  const handleKeyDown = useCallback(event => {
+    onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+    if (event.defaultPrevented) return;
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      onClick === null || onClick === void 0 ? void 0 : onClick(event, data);
+      menuContext === null || menuContext === void 0 ? void 0 : menuContext.closeMenu();
+    }
+  }, [data, menuContext, onClick, onKeyDown]);
+  return jsx("div", Object.assign({}, rest, {
+    className: className,
+    role: "menuitem",
+    tabIndex: 0,
+    onClick: handleSelect,
+    onKeyDown: handleKeyDown
+  }, {
+    children: children
   }), void 0);
 };
 const slideUpAndFade$1 = keyframes({
@@ -30768,7 +30931,10 @@ const Upload = ({
   function renderCropper() {
     return /*#__PURE__*/React__default.createElement(ModalDialog, {
       onOpenChange: open => {
-        if (!open) setCrop(null);
+        if (!open) {
+          setCrop(null);
+          if (hiddenFileInput) hiddenFileInput.current.value = null;
+        }
       },
       isMobile: isMobile,
       theme: theme,
@@ -30783,7 +30949,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 844,
+        lineNumber: 847,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement("div", {
@@ -30791,7 +30957,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 845,
+        lineNumber: 848,
         columnNumber: 11
       }
     })), /*#__PURE__*/React__default.createElement(ModalDialogTitle, {
@@ -30804,7 +30970,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 847,
+        lineNumber: 850,
         columnNumber: 9
       }
     }, cropperTitle || t('cropperTitle', 'Potong Gambar')), /*#__PURE__*/React__default.createElement(ModalDialogContent, {
@@ -30817,7 +30983,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 850,
+        lineNumber: 853,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(ReactCrop, {
@@ -30828,7 +30994,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 858,
+        lineNumber: 861,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default.createElement(Image, {
@@ -30842,14 +31008,14 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 859,
+        lineNumber: 862,
         columnNumber: 13
       }
     }))), /*#__PURE__*/React__default.createElement(ModalDialogFooter, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 870,
+        lineNumber: 873,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -30861,14 +31027,14 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 871,
+        lineNumber: 874,
         columnNumber: 11
       }
     }, hiddenToggleAspect ? /*#__PURE__*/React__default.createElement(Box, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 873,
+        lineNumber: 876,
         columnNumber: 15
       }
     }) : /*#__PURE__*/React__default.createElement(Tooltip$1, {
@@ -30876,7 +31042,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 875,
+        lineNumber: 878,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default.createElement(ImageOutline, {
@@ -30888,7 +31054,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 876,
+        lineNumber: 879,
         columnNumber: 17
       }
     })), /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -30896,7 +31062,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 883,
+        lineNumber: 886,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default.createElement(Button$4, {
@@ -30905,7 +31071,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 884,
+        lineNumber: 887,
         columnNumber: 15
       }
     }, t('label.cancel', 'Batal', {
@@ -30915,7 +31081,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 887,
+        lineNumber: 890,
         columnNumber: 15
       }
     }, t('save', 'Simpan', {
@@ -30932,7 +31098,7 @@ const Upload = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 896,
+      lineNumber: 899,
       columnNumber: 5
     }
   }, !isFile && renderPicture(), isFile && renderFile(), progress || isLoading ? /*#__PURE__*/React__default.createElement(UploadProgress, {
@@ -30941,7 +31107,7 @@ const Upload = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 899,
+      lineNumber: 902,
       columnNumber: 32
     }
   }) : renderUpload(), showCropper && renderCropper(), /*#__PURE__*/React__default.createElement(Input$2, {
@@ -30953,7 +31119,7 @@ const Upload = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 901,
+      lineNumber: 904,
       columnNumber: 7
     }
   }));
@@ -56352,7 +56518,7 @@ function seqNumberVariants(variantFn, max) {
 const Container$1 = styled('div', {
   width: 460,
   '& > .wrapper-root > .toolbar-root': {
-    border: '1px solid $gray300',
+    border: '1px solid $bgOutline',
     borderRadius: 8,
     backgroundColor: '$bgWhite'
   },
@@ -56382,7 +56548,7 @@ const Container$1 = styled('div', {
     backgroundColor: '$gray100 !important'
   },
   '& > .wrapper-root > .editor-root': {
-    border: '1px solid $gray300',
+    border: '1px solid $bgOutline',
     borderRadius: 8,
     backgroundColor: '$bgWhite',
     padding: '$spacing-05',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@majoo-ui/react",
-  "version": "1.61.21",
+  "version": "1.61.22",
   "main": "./index.esm.js",
   "exports": {
     ".": {
@@ -19,9 +19,9 @@
     "@floating-ui/react": "^0.19.2",
     "@floating-ui/react-dom": "^1.3.0",
     "@hookform/resolvers": "^2.8.10",
-    "@majoo-ui/core": "1.31.7",
+    "@majoo-ui/core": "1.31.8",
     "@majoo-ui/helpers": "1.30.7",
-    "@majoo-ui/icons": "1.38.40",
+    "@majoo-ui/icons": "1.38.43",
     "@monsonjeremy/react-leaflet": "^3.2.2",
     "@radix-ui/react-accordion": "^1.0.0",
     "@radix-ui/react-alert-dialog": "^1.0.3",
@@ -60,7 +60,6 @@
     "otp-input-react": "^0.3.0",
     "prismjs": "^1.28.0",
     "react-color": "^2.19.3",
-    "react-contextmenu": "^2.14.0",
     "react-draft-wysiwyg": "^1.15.0",
     "react-hook-form": "^7.31.3",
     "react-i18next": "^12.0.0",
@@ -78,11 +77,5 @@
     "recharts": "^2.1.9",
     "axios": "1.6.0",
     "yup": "^0.32.11"
-  },
-  "overrides": {
-    "react-contextmenu": {
-      "react": "$react",
-      "react-dom": "$react-dom"
-    }
   }
 }