react-hook-toolkit 1.0.21 → 1.0.22

package/dist/chunk1516/chunk613852.d.ts

@@ -53,7 +53,7 @@ interface DownloadFileProps {
 }
 export declare const DownloadFile: React.FC<DownloadFileProps>;
 type MenuPosition = 'auto' | 'fixed';
-type Theme = 'light' | 'dark';
+type ThemeMode = 'light' | 'dark';
 interface ContextMenuProps {
     options: any;
     children: React.ReactNode;
@@ -64,7 +64,7 @@ interface ContextMenuProps {
     onShow?: () => void;
     onHide?: () => void;
     currentInstance?: any;
-    theme?: Theme;
+    theme?: ThemeMode;
 }
 export declare const ContextMenuWrapper: React.FC<ContextMenuProps>;
 export {};

package/dist/chunk1516/chunk613852.js

@@ -12,8 +12,9 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { forwardRef, useState } from 'react';
 import { useEffect, useCallback, useRef, Suspense } from 'react';
-import { Box, Alert, AlertTitle, IconButton, CardContent, Tooltip, Typography, Card, Grid, Skeleton, CircularProgress, } from '@mui/material';
+import { Paper, MenuList, MenuItem, ListItemIcon, ListItemText, Divider, Typography, styled, Box, Alert, AlertTitle, IconButton, CardContent, Tooltip, Card, Grid, Skeleton, CircularProgress, } from '@mui/material';
 import { Close, InsertDriveFile, Image, Description, Download, CheckCircleOutlined, ErrorOutlineOutlined, Upload, } from '@mui/icons-material';
+import { useTheme } from '@mui/material/styles';
 import NProgress from 'nprogress';
 import { ErrorBoundary } from 'react-error-boundary';
 import { promise } from '../utils';
@@ -166,16 +167,58 @@ export var DownloadFile = function (_a) {
                         zIndex: 1,
                     } }))] }) }));
 };
+var StyledMenuPaper = styled(Paper)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        minWidth: 200,
+        padding: theme.spacing(0, 0),
+        boxShadow: theme.shadows[3],
+        '&.context-menu-dark': {
+            backgroundColor: theme.palette.grey[800],
+            color: theme.palette.common.white,
+        },
+    });
+});
+var StyledMenuItem = styled(MenuItem)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        padding: theme.spacing(0.5, 1),
+        fontSize: '14px',
+        '& .MuiListItemText-root': {
+            '& .MuiTypography-root': {
+                fontSize: '14px',
+            },
+        },
+        '&.context-menu-item-dark': {
+            color: theme.palette.common.white,
+            '&:hover': {
+                backgroundColor: theme.palette.grey[700],
+            },
+        },
+        '&.context-menu-item--disabled': {
+            opacity: 0.5,
+            pointerEvents: 'none',
+        },
+    });
+});
+var ShortcutText = styled(Typography)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        marginLeft: theme.spacing(2),
+        fontSize: '0.75rem',
+        color: theme.palette.text.secondary,
+        '&.context-menu-shortcut-dark': {
+            color: theme.palette.grey[400],
+        },
+    });
+});
 export var ContextMenuWrapper = function (_a) {
     var options = _a.options, children = _a.children, disabled = _a.disabled, className = _a.className, menuClassName = _a.menuClassName, _b = _a.position, position = _b === void 0 ? 'auto' : _b, onShow = _a.onShow, onHide = _a.onHide, currentInstance = _a.currentInstance, _c = _a.theme, theme = _c === void 0 ? 'light' : _c;
+    var muiTheme = useTheme();
     var _d = useState(false), isVisible = _d[0], setIsVisible = _d[1];
     var _e = useState({ x: 0, y: 0 }), menuPosition = _e[0], setMenuPosition = _e[1];
     var menuRef = useRef(null);
     var triggerRef = useRef(null);
-    var menuClasses = "context-menu ".concat(menuClassName || '', " context-menu-").concat(theme);
-    var itemClasses = function (item) {
-        return "context-menu-item ".concat(item.disabled ? 'context-menu-item--disabled' : '', " ").concat(item.className || '', " context-menu-item-").concat(theme);
-    };
     var handleContextMenu = function (e) {
         var _a, _b;
         e.preventDefault();
@@ -237,20 +280,20 @@ export var ContextMenuWrapper = function (_a) {
             document.removeEventListener('keydown', handleKeyDown);
         };
     }, [isVisible]);
-    return (_jsxs("div", { ref: triggerRef, className: "context-menu-trigger ".concat(className || ''), onContextMenu: handleContextMenu, children: [children, isVisible && (_jsx("div", { ref: menuRef, className: menuClasses, style: {
+    return (_jsxs("div", { ref: triggerRef, className: "context-menu-trigger ".concat(className || ''), onContextMenu: handleContextMenu, children: [children, isVisible && (_jsx("div", { ref: menuRef, style: {
                     position: 'fixed',
                     left: "".concat(menuPosition.x, "px"),
                     top: "".concat(menuPosition.y, "px"),
-                    zIndex: 9999,
-                }, role: "menu", children: _jsx("ul", { className: "context-menu-list context-menu-list-".concat(theme), children: options.map(function (item, index) {
-                        if (item === 'divider') {
-                            return (_jsx("li", { className: "context-menu-divider context-menu-divider-".concat(theme) }, "divider-".concat(index.toString())));
-                        }
-                        return (_jsxs("li", { className: itemClasses(item), onClick: function () { return handleItemClick(item); }, onKeyDown: function (e) {
-                                if (e.key === 'Enter' || e.key === ' ') {
-                                    e.preventDefault();
-                                    handleItemClick(item);
-                                }
-                            }, role: "menuitem", tabIndex: item.disabled ? -1 : 0, "aria-disabled": item.disabled, children: [item.icon && _jsx("span", { className: "context-menu-icon context-menu-icon-".concat(theme), children: item.icon }), _jsx("span", { className: "context-menu-text context-menu-text-".concat(theme), children: item.label }), item.shortcut && (_jsx("span", { className: "context-menu-shortcut context-menu-shortcut-".concat(theme), children: item.shortcut }))] }, item.key || index));
-                    }) }) }))] }));
+                    zIndex: muiTheme.zIndex.modal,
+                }, children: _jsx(StyledMenuPaper, { className: "".concat(menuClassName || '', " context-menu-").concat(theme), children: _jsx(MenuList, { children: options.map(function (item, index) {
+                            if (item === 'divider') {
+                                return _jsx(Divider, { className: "context-menu-divider-".concat(theme) }, "divider-".concat(index.toString()));
+                            }
+                            return (_jsxs(StyledMenuItem, { sx: { fontSize: '10px' }, className: "".concat(item.className || '', " context-menu-item-").concat(theme, " ").concat(item.disabled ? 'context-menu-item--disabled' : ''), onClick: function () { return handleItemClick(item); }, onKeyDown: function (e) {
+                                    if (e.key === 'Enter' || e.key === ' ') {
+                                        e.preventDefault();
+                                        handleItemClick(item);
+                                    }
+                                }, tabIndex: item.disabled ? -1 : 0, disabled: item.disabled, children: [item.icon && (_jsx(ListItemIcon, { sx: { marginRight: -1 }, className: "context-menu-icon-".concat(theme), children: item.icon })), _jsx(ListItemText, { className: "context-menu-text-".concat(theme), children: item.label }), item.shortcut && (_jsx(ShortcutText, { className: "context-menu-shortcut-".concat(theme), children: item.shortcut }))] }, item.key || index));
+                        }) }) }) }))] }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-hook-toolkit",
-  "version": "1.0.21",
+  "version": "1.0.22",
   "description": "Ultimate package for React developers, offering a powerful collection of hooks and components to enhance their development experience.",
   "main": "dist/index.js",
   "module": "dist/index.js",