react-hook-toolkit 1.2.3 → 1.2.4

package/README.md

@@ -788,215 +788,6 @@ const { send, message, status } = useWebSocket('ws://api.example.com');
 // Example
 send(JSON.stringify({ action: 'ping' }));
 ```
----
-
-Let me know if you'd like more information or changes!
-
-------------------------------------- **Custom Components** --------------------------------------------
-
-  ✅ **DynamicLoader**  
-A Higher-Order Component (HOC) that dynamically loads a React component using `React.lazy()` with `Suspense`, while wrapping it in an `ErrorBoundary` to handle potential errors gracefully. It ensures that the component is loaded only when needed, reducing the initial bundle size and improving performance.
-
-```jsx
-import React, { lazy } from "react";
-const MyComponent = DynamicLoader(lazy(() => import("./MyComponent")));
-
-```
----
-
-✅ **ContextMenuWrapper**  
-Displays a customizable context menu with support for light/dark themes, keyboard navigation, accessibility compliance, and automatic positioning. Handles items, dividers, icons, shortcuts, and click events.
-
-```tsx
-<ContextMenuWrapper
-  options={[
-    { label: 'Edit', icon: <EditIcon />, onClick: handleEdit },
-    { label: 'Copy', shortcut: '⌘C', onClick: handleCopy },
-    'divider',
-    { label: 'Delete', disabled: true, onClick: handleDelete }
-  ]}
-  theme="dark"
-  onShow={() => console.log('Menu opened')}
-  onHide={() => console.log('Menu closed')}
-  currentInstance={this}
->
-  <div>Right-click here</div>
-</ContextMenu>
-```
-
-✅ **AnimatedWrapper**
-A lightweight wrapper component that applies animations to its children with customizable animation type and delay.Ideal for enhancing UI transitions smoothly.
-
-```tsx
-<AnimatedWrapper animationClass="animate__fadeIn" delay={1}>
-  <div>Hello with delay</div>
-</AnimatedWrapper>
-```
-
-✅ **RichTextEditor**  
-Provides a fully-featured WYSIWYG editor with HTML conversion, customizable toolbar, and responsive design for rich text input.
-
-```tsx
-<RichTextEditor 
-  initialHtml="<p>Initial content</p>"
-  onChange={(html) => console.log(html)}
-  placeholder="Type your text here..."
-  minHeight="300px"
-/>
-```
-
----
-  ✅ **FilePreview**  
-Displays a styled file card with an icon based on file type, filename with ellipsis handling, file size, and an optional download action.
-
-```tsx
-<FilePreview
-  primaryKey="file123"
-  filename="example.pdf"
-  size="2.3 MB"
-  onDownload={(id) => console.log("Download:", id)}
-/>
-```
----
- ✅ **UploadFile**  
-Renders an icon button for file uploads with visual feedback for different upload states (loading, success, error). It supports disabling, color customization, and a hidden file input for seamless UX.
-
-```tsx
-<UploadFile
-  isUpload={true}
-  color="#1976d2"
-  state={{
-    isUploaded: false,
-    isUploadError: false,
-    isLoadingUpload: true,
-  }}
-  onFileSelect={(file) => console.log(file)}
-/>
-
-const handleFileSelect = async (files: any) => {
-  setState({ isUploaded: false, isUploadError: false, isLoadingUpload: true });
-  try {
-    await _promise(2000);
-    setState({ isUploaded: true, isUploadError: false, isLoadingUpload: false });
-  } catch (err) {
-    setState({ isUploaded: false, isUploadError: true, isLoadingUpload: false });
-  }
-};
-```
----
-
- ✅ **DownloadFile**  
-Renders an icon button for file downloads with visual feedback for different states (loading, success, error). It supports color customization and disables interaction during loading.
-
-```tsx
-<DownloadFile
-  isDownload={true}
-  color="primary"
-  state={{
-    isDownloaded: false,
-    isDownloadError: false,
-    isLoadingDownload: true,
-  }}
-  onDownload={() => console.log('Download initiated')}
- />
-```
-
----
-
- ✅ **LabeledValue**  
-Displays a simple key-value label pair in a single line, with optional styling.
-
-```tsx
-<LabeledValue
-  label="Name"
-  value="ABC"
-/>
-```
----
-
- ✅ **DetailsCard**  
-Renders a card with a title and grid-based layout of labeled values. It supports custom spacing, responsive behavior, and optional card shadow.
-
-```tsx
-<DetailsCard
-  title="Details"
-  spacing={2}
-  details={[
-    { label: 'Name', value: 'XYZ' },
-  ]}
-/>
-```
-
----
-  ✅ **AlertMessage**  
-A functional React component that displays dynamic alerts using the enqueueSnackbar function. It provides a customizable message with a specified type and duration. The alerts can be dismissed manually by clicking a close button, and they support various configurations such as position, auto-hide duration, and duplicate prevention.
-
-```jsx
-<AlertMessage type="success" msg="Data saved successfully!" />
-```
----
-  ✅ **FieldSkeleton**  
-Simulates form field placeholders with optional label skeletons, useful for loading states in forms or input sections.
-
-```jsx
-<FieldSkeleton 
-  length={3} 
-  spacing={2} 
-  isLabel={true} 
-  responsive={{ xs: 12, sm: 6, md: 4 }} 
-/>
-```
----
-
- ✅ **FileSkeleton**  
-Displays one or more placeholder file cards mimicking the layout of file previews. Useful during file list loading.
-
-```tsx
-<FileSkeleton
-  length={3}
-  width={350}
-  borderColor="#dfdfdf"
-/>
-```
-
----
-
- ✅ **TableSkeleton**  
-Shows a full table layout with skeleton headers and rows. Includes a toolbar area for filters or search bars.
-
-```tsx
-<TableSkeleton
-  rows={6}
-  columns={6}
-/>
-```
-
----
-
- ✅ **CardSkeleton**  
-Simulates a card layout with a title and multiple row placeholders, ideal for stat or summary cards.
-
-```tsx
-<CardSkeleton />
-```
-
----
-
- ✅ **LineChartSkeleton**  
-Represents a placeholder for a line chart with gridlines and axis lines to simulate loading of chart data.
-
-```tsx
-<LineChartSkeleton />
-```
-
----
-
- ✅ **PieChartSkeleton**  
-Displays a skeleton placeholder for a pie chart inside a card layout. Includes a title and circular loading element.
-
-```tsx
-<PieChartSkeleton />
-```
 
 ---
 

package/dist/chunk1516/chunk0022.d.ts

@@ -1,2 +1,7 @@
 import { UseBrowserControlsReturn } from "../type";
 export declare const useBrowser: () => UseBrowserControlsReturn;
+export declare const useRouter: (initialPath: string) => {
+    pathname: string;
+    searchParams: URLSearchParams;
+    navigate: (path: string) => void;
+};

package/dist/chunk1516/chunk0022.js

@@ -43,7 +43,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 export var useBrowser = function () {
     var _a, _b;
     var _c = useState(new URL(window.location.href)), currentUrl = _c[0], setCurrentUrl = _c[1];
@@ -379,3 +379,15 @@ export var useBrowser = function () {
         closeCurrentTab: closeCurrentTab,
     };
 };
+export var useRouter = function (initialPath) {
+    var _a = useState(initialPath), pathname = _a[0], setPathname = _a[1];
+    var searchParams = useState(function () { return new URLSearchParams(); })[0];
+    var router = useMemo(function () {
+        return {
+            pathname: pathname,
+            searchParams: searchParams,
+            navigate: function (path) { return setPathname(String(path)); },
+        };
+    }, [pathname, searchParams]);
+    return router;
+};

package/dist/chunk1516/chunk613852.d.ts

@@ -1,10 +1 @@
-import React, { FC } from 'react';
-import { FileComponentProps, AlertPropsType, DetailsCardProps, UploadButtonProps, DownloadFileProps, ContextMenuProps } from '../type';
 export declare const DynamicLoader: (Component: any) => (props: any) => import("react/jsx-runtime").JSX.Element;
-export declare const AlertMessage: FC<AlertPropsType>;
-export declare const DetailsCard: ({ isLoading, title, details, spacing, boxShadow, background, loaderType, displayType, }: DetailsCardProps) => import("react/jsx-runtime").JSX.Element;
-export declare const LabeledValue: ({ label, value, style }: any) => import("react/jsx-runtime").JSX.Element;
-export declare const FilePreview: ({ primaryKey, filename, size, onDownload, width, borderColor, fileColor, isDownloading, }: FileComponentProps) => import("react/jsx-runtime").JSX.Element;
-export declare const UploadFile: React.FC<UploadButtonProps>;
-export declare const DownloadFile: React.FC<DownloadFileProps>;
-export declare const ContextMenuWrapper: React.FC<ContextMenuProps>;

package/dist/chunk1516/chunk613852.js

@@ -9,17 +9,12 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { forwardRef, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useCallback, useRef, Suspense } from 'react';
-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 { Box, Alert, AlertTitle } from '@mui/material';
 import NProgress from 'nprogress';
 import { ErrorBoundary } from 'react-error-boundary';
 import { promise } from '../utils';
-import { getHook } from '../chunk1415/chunk143';
-import { useWindowSize } from './chunk940514';
 function Fallback(_a) {
     var error = _a.error;
     return (_jsxs(Box, { sx: { padding: 2 }, children: [process.env.NODE_ENV === 'production' && (_jsxs(Alert, { sx: { py: 0, borderLeft: '2px solid #00abff !important', border: '1px solid #d0cfcf' }, severity: "info", children: [_jsx(AlertTitle, { children: "Page Loading Error" }), "Please check your network connection..."] })), process.env.NODE_ENV !== 'production' && (_jsxs(Alert, { severity: "error", sx: { py: 0, borderTop: '2px solid #791212ad !important', border: '1px solid #d0cfcf' }, children: [_jsx(AlertTitle, { children: "Error" }), error.message] }))] }));
@@ -55,245 +50,3 @@ var LoadingScreen = function () {
 };
 // prettier-ignore
 export var DynamicLoader = function (Component) { return function (props) { return (_jsx(Error, { children: _jsx(Suspense, { fallback: _jsx(LoadingScreen, {}), children: _jsx(Component, __assign({}, props)) }) })); }; };
-export var AlertMessage = function (_a) {
-    var type = _a.type, msg = _a.msg, duration = _a.duration;
-    var _b = getHook('snackBar'), enqueueSnackbar = _b.enqueueSnackbar, closeSnackbar = _b.closeSnackbar;
-    if (msg !== undefined && msg !== '') {
-        enqueueSnackbar(msg !== null && msg !== void 0 ? msg : '', {
-            anchorOrigin: {
-                // @shivaji perpose dyanamic global alert.
-                horizontal: 'right',
-                vertical: 'top',
-            },
-            variant: type,
-            preventDuplicate: true,
-            // persist: true, whenever you want to close.
-            action: function (key) { return (_jsx(IconButton, { "aria-label": "close", size: "small", onClick: function () { return closeSnackbar(key); }, children: _jsx(Close, { fontSize: "small", sx: { color: '#fff' } }) })); },
-            autoHideDuration: duration !== null && duration !== void 0 ? duration : 6000,
-        });
-    }
-    return null;
-};
-export var DetailsCard = function (_a) {
-    var _b = _a.isLoading, isLoading = _b === void 0 ? false : _b, title = _a.title, details = _a.details, _c = _a.spacing, spacing = _c === void 0 ? 2 : _c, _d = _a.boxShadow, boxShadow = _d === void 0 ? '0px 0px 2px 2px #d8d8d8' : _d, _e = _a.background, background = _e === void 0 ? '#eee' : _e, _f = _a.loaderType, loaderType = _f === void 0 ? 'skeleton' : _f, _g = _a.displayType, displayType = _g === void 0 ? 'flex' : _g;
-    var width = useWindowSize().width;
-    return (_jsx(Card, { sx: { boxShadow: boxShadow }, children: _jsxs(CardContent, { children: [_jsx(Typography, { variant: "h6", sx: { background: background, padding: '4px' }, children: title }), _jsx(Grid, { container: true, spacing: spacing, sx: { mt: 1 }, children: details.filter(Boolean).map(function (item, index) { return (_jsx(Grid, { item: true, xs: 12, sm: 6, md: 6, lg: width < 1367 ? 6 : 4, children: _jsxs(Box, { display: displayType, alignItems: "center", sx: { fontSize: '14px' }, children: [_jsxs(Typography, { fontWeight: "bold", component: "span", sx: { fontSize: '14px' }, children: [item === null || item === void 0 ? void 0 : item.label, ":\u00A0"] }), isLoading ? (loaderType === 'skeleton' ? (_jsx(Skeleton, { sx: { ml: 2 }, variant: "text", width: 100, height: 20 })) : (_jsx(CircularProgress, { sx: { ml: 2 }, color: "success", size: 18 }))) : (_jsx(Typography, { component: "span", sx: { fontSize: '14px' }, children: (item === null || item === void 0 ? void 0 : item.value) !== undefined && (item === null || item === void 0 ? void 0 : item.value) !== null && (item === null || item === void 0 ? void 0 : item.value) !== '' ? item.value : 'N/A' }))] }) }, index.toString())); }) })] }) }));
-};
-export var LabeledValue = function (_a) {
-    var label = _a.label, value = _a.value, _b = _a.style, style = _b === void 0 ? undefined : _b;
-    return (_jsx(_Fragment, { children: _jsx(Typography, { sx: style !== null && style !== void 0 ? style : { padding: '5px' }, children: _jsxs("span", { style: { fontSize: '13px' }, children: [_jsxs("b", { children: [label, " "] }), ": ", value !== null && value !== void 0 ? value : 'N/A'] }) }) }));
-};
-export var FilePreview = function (_a) {
-    var primaryKey = _a.primaryKey, filename = _a.filename, size = _a.size, _b = _a.onDownload, onDownload = _b === void 0 ? undefined : _b, _c = _a.width, width = _c === void 0 ? 350 : _c, _d = _a.borderColor, borderColor = _d === void 0 ? '#dfdfdf' : _d, _e = _a.fileColor, fileColor = _e === void 0 ? 'primary' : _e, _f = _a.isDownloading, isDownloading = _f === void 0 ? false : _f;
-    // Icon mapping configuration
-    var iconMap = {
-        pdf: _jsx(InsertDriveFile, { fontSize: "large", color: fileColor }),
-        image: _jsx(Image, { fontSize: "large", color: fileColor }),
-        doc: _jsx(Description, { fontSize: "large", color: fileColor }),
-        default: _jsx(Description, { fontSize: "large", color: fileColor }),
-    };
-    // Determine file type from filename extension
-    var getFileType = function (filenames) {
-        var extension = filenames.split('.').pop().toLowerCase();
-        if (['pdf'].includes(extension))
-            return 'pdf';
-        if (['jpg', 'jpeg', 'png', 'gif'].includes(extension))
-            return 'image';
-        if (['doc', 'docx', 'txt'].includes(extension))
-            return 'doc';
-        return 'default';
-    };
-    return (_jsx(Card, { variant: "outlined", sx: {
-            maxWidth: width,
-            minWidth: width,
-            border: "1px solid ".concat(borderColor),
-            borderRadius: 1,
-            '&:hover': { boxShadow: 2 },
-            marginLeft: 1,
-        }, children: _jsxs(CardContent, { sx: {
-                display: 'flex',
-                alignItems: 'center',
-                gap: 2,
-                padding: '8px !important',
-            }, children: [iconMap[getFileType(filename)], _jsxs(Box, { sx: { flexGrow: 1 }, children: [filename.length > 33 ? (_jsx(Tooltip, { title: filename, placement: "top", arrow: true, children: _jsx(Typography, { sx: {
-                                    fontSize: '14px',
-                                    whiteSpace: 'nowrap',
-                                    overflow: 'hidden',
-                                    textOverflow: 'ellipsis',
-                                    maxWidth: width - 120,
-                                }, children: filename }) })) : (_jsx(Typography, { sx: {
-                                fontSize: '14px',
-                                whiteSpace: 'nowrap',
-                                overflow: 'hidden',
-                                textOverflow: 'ellipsis',
-                                maxWidth: width - 120,
-                            }, children: filename })), _jsx(Typography, { variant: "caption", color: "text.secondary", children: size })] }), _jsx(IconButton, { disabled: onDownload === undefined, "aria-label": "download", onClick: function () { return onDownload(primaryKey); }, sx: { color: '#dfdfdf', '&:hover': { color: 'primary.main' } }, children: isDownloading ? (_jsx(CircularProgress, { color: "success", size: 20 })) : (_jsx(Download, { fontSize: "small", color: onDownload ? 'primary' : 'inherit' })) })] }) }));
-};
-var VisuallyHiddenInput = forwardRef(function (props, ref) { return (_jsx("input", __assign({ ref: ref, type: "file", style: {
-        position: 'absolute',
-        width: 1,
-        height: 1,
-        padding: 0,
-        overflow: 'hidden',
-        clip: 'rect(0,0,0,0)',
-        whiteSpace: 'nowrap',
-        border: 0,
-    } }, props))); });
-export var UploadFile = function (_a) {
-    var _b = _a.isUpload, isUpload = _b === void 0 ? true : _b, color = _a.color, _c = _a.state, state = _c === void 0 ? {} : _c, onFileSelect = _a.onFileSelect;
-    var onFileInputChange = function (e) {
-        var _a;
-        var file = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0];
-        if (file) {
-            onFileSelect(file);
-            e.target.value = '';
-        }
-    };
-    return (_jsx(Tooltip, { title: "Upload", children: _jsxs(Box, { sx: { position: 'relative', display: 'inline-block' }, children: [_jsxs(IconButton, { disabled: !isUpload, component: "label", children: [(state === null || state === void 0 ? void 0 : state.isUploaded) ? (_jsx(CheckCircleOutlined, { color: "success" })) : (state === null || state === void 0 ? void 0 : state.isUploadError) ? (_jsx(ErrorOutlineOutlined, { color: "error" })) : (_jsx(Upload, { color: color !== null && color !== void 0 ? color : 'primary' })), _jsx(VisuallyHiddenInput, { onChange: onFileInputChange })] }), (state === null || state === void 0 ? void 0 : state.isLoadingUpload) && (_jsx(CircularProgress, { size: "40px", sx: {
-                        position: 'absolute',
-                        top: 0,
-                        left: 0,
-                        zIndex: 1,
-                    } }))] }) }));
-};
-export var DownloadFile = function (_a) {
-    var _b = _a.isDownload, isDownload = _b === void 0 ? true : _b, color = _a.color, _c = _a.state, state = _c === void 0 ? {} : _c, onDownload = _a.onDownload;
-    return (_jsx(Tooltip, { title: "Download", children: _jsxs(Box, { sx: { position: 'relative', display: 'inline-block' }, children: [_jsx(IconButton, { disabled: !isDownload || (state === null || state === void 0 ? void 0 : state.isLoadingDownload), onClick: onDownload, sx: {
-                        bgcolor: function (theme) { return (color ? (theme.palette.mode === 'dark' ? '#303041' : color) : 'default'); },
-                    }, children: (state === null || state === void 0 ? void 0 : state.isDownloaded) ? (_jsx(CheckCircleOutlined, { color: "success" })) : (state === null || state === void 0 ? void 0 : state.isDownloadError) ? (_jsx(ErrorOutlineOutlined, { color: "error" })) : (_jsx(Download, { color: color !== null && color !== void 0 ? color : 'primary' })) }), (state === null || state === void 0 ? void 0 : state.isLoadingDownload) && (_jsx(CircularProgress, { size: "40px", sx: {
-                        position: 'absolute',
-                        top: 0,
-                        left: 0,
-                        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 handleContextMenu = function (e) {
-        var _a, _b;
-        e.preventDefault();
-        if (disabled)
-            return;
-        var x = e.clientX;
-        var y = e.clientY;
-        if (position === 'auto') {
-            var viewportWidth = window.innerWidth;
-            var viewportHeight = window.innerHeight;
-            var menuWidth = ((_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 200;
-            var menuHeight = ((_b = menuRef.current) === null || _b === void 0 ? void 0 : _b.offsetHeight) || 200;
-            if (x + menuWidth > viewportWidth) {
-                x = viewportWidth - menuWidth - 5;
-            }
-            if (y + menuHeight > viewportHeight) {
-                y = viewportHeight - menuHeight - 5;
-            }
-        }
-        setMenuPosition({ x: x, y: y });
-        setIsVisible(true);
-        onShow === null || onShow === void 0 ? void 0 : onShow();
-    };
-    var closeMenu = function () {
-        setIsVisible(false);
-        onHide === null || onHide === void 0 ? void 0 : onHide();
-    };
-    var handleClickOutside = function (e) {
-        if (menuRef.current &&
-            !menuRef.current.contains(e.target) &&
-            triggerRef.current &&
-            !triggerRef.current.contains(e.target)) {
-            closeMenu();
-        }
-    };
-    var handleKeyDown = function (e) {
-        if (e.key === 'Escape') {
-            closeMenu();
-        }
-    };
-    var handleItemClick = function (item) {
-        var _a;
-        if (item.disabled)
-            return;
-        (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item, currentInstance !== null && currentInstance !== void 0 ? currentInstance : item);
-        closeMenu();
-    };
-    useEffect(function () {
-        if (isVisible) {
-            document.addEventListener('mousedown', handleClickOutside);
-            document.addEventListener('keydown', handleKeyDown);
-        }
-        else {
-            document.removeEventListener('mousedown', handleClickOutside);
-            document.removeEventListener('keydown', handleKeyDown);
-        }
-        return function () {
-            document.removeEventListener('mousedown', handleClickOutside);
-            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, style: {
-                    position: 'fixed',
-                    left: "".concat(menuPosition.x, "px"),
-                    top: "".concat(menuPosition.y, "px"),
-                    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/dist/index.d.ts

@@ -1,15 +1,13 @@
 import 'nprogress/nprogress.css';
 import 'animate.css';
-import { DynamicLoader, AlertMessage, FilePreview, LabeledValue, DetailsCard, UploadFile, DownloadFile, ContextMenuWrapper } from './chunk1516/chunk613852';
+import { DynamicLoader } from './chunk1516/chunk613852';
 import { ReactHooksWrapper, getHook, setHook } from './chunk1415/chunk143';
-import { FileSkeleton, TableSkeleton, PieChartSkeleton, CardSkeleton, LineChartSkeleton, FieldSkeleton } from './chunk1617/chunk613555';
 import { useHistoryState, useIdle, useIsFirstRender, useList, useLockBodyScroll, useLongPress, useRecentSearch, useSpeech, usePermission, usePageLeave, useMotion, useHoverDirty, useBeforeUnload, useClickAway, useResponsive, useUnmountedRef } from './chunk1516/chunk726433';
-import { useBrowser } from './chunk1516/chunk0022';
+import { useBrowser, useRouter } from './chunk1516/chunk0022';
 import { privateAxios, publicAxios } from './chunk1213/chunk158862';
 declare const useDrawer: () => import("./chunk1213/chunk158261").DrawerContextValue;
 import { useGenericReducer, useArray, useAsync, useAxios, useClipboard, useCookie, useDarkMode, useDebounce, useDebouncedCallback, useDebouncedValue, useDelay, useRequest, useRequestRetry, useForm, useImageLoader, useIndexedDB, useInterval, useKeyPress, useLocalStorage, useMediaQuery, useMousePosition, useOnlineStatus, usePersistedState, usePrevious, useReducedMotion, useResizeObserver, useScrollDirection, useScrollLock, useScrollPosition, useScript, useStepper, useThrottle, useTimeout, useToggle, useVisibilityChange, useWindowSize } from './chunk1516/chunk940514';
 import { createOptimizedContext, useBattery, useCountDown, useCountUp, useCrossFieldValidation, useCss, useDragReorder, useEventListener, useEventListeners, useFieldArray, useFormSubmit, useFormWizard, useGeoLocation, useHistory, useInfiniteScroll, useIsMounted, usePersistedForm, usePreferredLanguage, useSessionStorage, useSmartForm, useSound, useSpeak, useTimer, useTouch, useUndo, useUpdateEffect, useWebSocket } from './chunk1516/chunk0021';
 import { DrawerProvider } from './chunk1213/chunk158261';
-import { AnimatedWrapper } from './chunk1617/chunk613557';
 export default ReactHooksWrapper;
-export { getHook, setHook, privateAxios, publicAxios, useGenericReducer, useArray, useAsync, useAxios, useBrowser, useBattery, useBeforeUnload, useClipboard, useCookie, useClickAway, useCountDown, useCountUp, useCrossFieldValidation, useCss, useDrawer, useDarkMode, useDebounce, useDebouncedCallback, useDebouncedValue, useDelay, useDragReorder, useEventListener, useEventListeners, useRequest, useRequestRetry, useFieldArray, useForm, useFormSubmit, useFormWizard, useGeoLocation, useHoverDirty, useHistory, useHistoryState, useIdle, useImageLoader, useIndexedDB, useInfiniteScroll, useInterval, useIsFirstRender, useIsMounted, useKeyPress, useList, useLocalStorage, useLockBodyScroll, useLongPress, useMotion, useMediaQuery, useMousePosition, useOnlineStatus, usePersistedForm, usePersistedState, usePreferredLanguage, usePrevious, usePermission, usePageLeave, useReducedMotion, useRecentSearch, useResponsive, useResizeObserver, useScript, useScrollDirection, useScrollLock, useScrollPosition, useSessionStorage, useSmartForm, useSound, useSpeech, useSpeak, useStepper, useThrottle, useTimeout, useTimer, useToggle, useTouch, useUnmountedRef, useUndo, useUpdateEffect, useVisibilityChange, useWebSocket, useWindowSize, AlertMessage, CardSkeleton, AnimatedWrapper, ContextMenuWrapper, DrawerProvider, DetailsCard, DownloadFile, DynamicLoader, FieldSkeleton, FilePreview, FileSkeleton, LineChartSkeleton, LabeledValue, PieChartSkeleton, TableSkeleton, UploadFile, createOptimizedContext, };
+export { getHook, setHook, privateAxios, publicAxios, useGenericReducer, useArray, useAsync, useAxios, useBrowser, useBattery, useBeforeUnload, useClipboard, useCookie, useClickAway, useCountDown, useCountUp, useCrossFieldValidation, useCss, useDrawer, useDarkMode, useDebounce, useDebouncedCallback, useDebouncedValue, useDelay, useDragReorder, useEventListener, useEventListeners, useRequest, useRequestRetry, useFieldArray, useForm, useFormSubmit, useFormWizard, useGeoLocation, useHoverDirty, useHistory, useHistoryState, useIdle, useImageLoader, useIndexedDB, useInfiniteScroll, useInterval, useIsFirstRender, useIsMounted, useKeyPress, useList, useLocalStorage, useLockBodyScroll, useLongPress, useMotion, useMediaQuery, useMousePosition, useOnlineStatus, usePersistedForm, usePersistedState, usePreferredLanguage, usePrevious, usePermission, usePageLeave, useRouter, useReducedMotion, useRecentSearch, useResponsive, useResizeObserver, useScript, useScrollDirection, useScrollLock, useScrollPosition, useSessionStorage, useSmartForm, useSound, useSpeech, useSpeak, useStepper, useThrottle, useTimeout, useTimer, useToggle, useTouch, useUnmountedRef, useUndo, useUpdateEffect, useVisibilityChange, useWebSocket, useWindowSize, DrawerProvider, DynamicLoader, createOptimizedContext, };

package/dist/index.js

@@ -1,10 +1,9 @@
 import 'nprogress/nprogress.css';
 import 'animate.css';
-import { DynamicLoader, AlertMessage, FilePreview, LabeledValue, DetailsCard, UploadFile, DownloadFile, ContextMenuWrapper } from './chunk1516/chunk613852';
+import { DynamicLoader } from './chunk1516/chunk613852';
 import { ReactHooksWrapper, getHook, setHook } from './chunk1415/chunk143';
-import { FileSkeleton, TableSkeleton, PieChartSkeleton, CardSkeleton, LineChartSkeleton, FieldSkeleton } from './chunk1617/chunk613555';
 import { useHistoryState, useIdle, useIsFirstRender, useList, useLockBodyScroll, useLongPress, useRecentSearch, useSpeech, usePermission, usePageLeave, useMotion, useHoverDirty, useBeforeUnload, useClickAway, useResponsive, useUnmountedRef } from './chunk1516/chunk726433';
-import { useBrowser } from './chunk1516/chunk0022';
+import { useBrowser, useRouter } from './chunk1516/chunk0022';
 import { useContext } from 'react';
 import DrawerContext from './chunk1213/chunk158261';
 import { privateAxios, publicAxios } from './chunk1213/chunk158862';
@@ -12,6 +11,5 @@ var useDrawer = function () { return useContext(DrawerContext); };
 import { useGenericReducer, useArray, useAsync, useAxios, useClipboard, useCookie, useDarkMode, useDebounce, useDebouncedCallback, useDebouncedValue, useDelay, useRequest, useRequestRetry, useForm, useImageLoader, useIndexedDB, useInterval, useKeyPress, useLocalStorage, useMediaQuery, useMousePosition, useOnlineStatus, usePersistedState, usePrevious, useReducedMotion, useResizeObserver, useScrollDirection, useScrollLock, useScrollPosition, useScript, useStepper, useThrottle, useTimeout, useToggle, useVisibilityChange, useWindowSize, } from './chunk1516/chunk940514';
 import { createOptimizedContext, useBattery, useCountDown, useCountUp, useCrossFieldValidation, useCss, useDragReorder, useEventListener, useEventListeners, useFieldArray, useFormSubmit, useFormWizard, useGeoLocation, useHistory, useInfiniteScroll, useIsMounted, usePersistedForm, usePreferredLanguage, useSessionStorage, useSmartForm, useSound, useSpeak, useTimer, useTouch, useUndo, useUpdateEffect, useWebSocket } from './chunk1516/chunk0021';
 import { DrawerProvider } from './chunk1213/chunk158261';
-import { AnimatedWrapper } from './chunk1617/chunk613557';
 export default ReactHooksWrapper;
-export { getHook, setHook, privateAxios, publicAxios, useGenericReducer, useArray, useAsync, useAxios, useBrowser, useBattery, useBeforeUnload, useClipboard, useCookie, useClickAway, useCountDown, useCountUp, useCrossFieldValidation, useCss, useDrawer, useDarkMode, useDebounce, useDebouncedCallback, useDebouncedValue, useDelay, useDragReorder, useEventListener, useEventListeners, useRequest, useRequestRetry, useFieldArray, useForm, useFormSubmit, useFormWizard, useGeoLocation, useHoverDirty, useHistory, useHistoryState, useIdle, useImageLoader, useIndexedDB, useInfiniteScroll, useInterval, useIsFirstRender, useIsMounted, useKeyPress, useList, useLocalStorage, useLockBodyScroll, useLongPress, useMotion, useMediaQuery, useMousePosition, useOnlineStatus, usePersistedForm, usePersistedState, usePreferredLanguage, usePrevious, usePermission, usePageLeave, useReducedMotion, useRecentSearch, useResponsive, useResizeObserver, useScript, useScrollDirection, useScrollLock, useScrollPosition, useSessionStorage, useSmartForm, useSound, useSpeech, useSpeak, useStepper, useThrottle, useTimeout, useTimer, useToggle, useTouch, useUnmountedRef, useUndo, useUpdateEffect, useVisibilityChange, useWebSocket, useWindowSize, AlertMessage, CardSkeleton, AnimatedWrapper, ContextMenuWrapper, DrawerProvider, DetailsCard, DownloadFile, DynamicLoader, FieldSkeleton, FilePreview, FileSkeleton, LineChartSkeleton, LabeledValue, PieChartSkeleton, TableSkeleton, UploadFile, createOptimizedContext, };
+export { getHook, setHook, privateAxios, publicAxios, useGenericReducer, useArray, useAsync, useAxios, useBrowser, useBattery, useBeforeUnload, useClipboard, useCookie, useClickAway, useCountDown, useCountUp, useCrossFieldValidation, useCss, useDrawer, useDarkMode, useDebounce, useDebouncedCallback, useDebouncedValue, useDelay, useDragReorder, useEventListener, useEventListeners, useRequest, useRequestRetry, useFieldArray, useForm, useFormSubmit, useFormWizard, useGeoLocation, useHoverDirty, useHistory, useHistoryState, useIdle, useImageLoader, useIndexedDB, useInfiniteScroll, useInterval, useIsFirstRender, useIsMounted, useKeyPress, useList, useLocalStorage, useLockBodyScroll, useLongPress, useMotion, useMediaQuery, useMousePosition, useOnlineStatus, usePersistedForm, usePersistedState, usePreferredLanguage, usePrevious, usePermission, usePageLeave, useRouter, useReducedMotion, useRecentSearch, useResponsive, useResizeObserver, useScript, useScrollDirection, useScrollLock, useScrollPosition, useSessionStorage, useSmartForm, useSound, useSpeech, useSpeak, useStepper, useThrottle, useTimeout, useTimer, useToggle, useTouch, useUnmountedRef, useUndo, useUpdateEffect, useVisibilityChange, useWebSocket, useWindowSize, DrawerProvider, DynamicLoader, createOptimizedContext, };

package/dist/type.d.ts

@@ -12,66 +12,6 @@ export interface DrawerContextValue {
 export interface DrawerProviderProps {
     children: ReactNode;
 }
-export interface FileComponentProps {
-    primaryKey: string | number;
-    filename: string;
-    size: string | number;
-    onDownload?: any;
-    width?: number;
-    borderColor?: string;
-    fileColor?: 'inherit' | 'primary' | 'secondary' | 'error' | 'disabled' | 'action';
-    isDownloading: boolean;
-}
-export interface AlertPropsType {
-    type: string;
-    msg: string;
-    duration?: number;
-}
-export interface DetailsCardProps {
-    isLoading?: boolean;
-    title: string;
-    details: any[];
-    spacing?: number;
-    boxShadow?: string;
-    background?: string;
-    loaderType?: 'skeleton' | 'circular';
-    displayType?: 'flex' | 'block';
-}
-export interface UploadButtonProps {
-    isUpload?: boolean;
-    color?: 'inherit' | 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning';
-    state?: {
-        isUploaded?: boolean;
-        isUploadError?: boolean;
-        isLoadingUpload?: boolean;
-    };
-    onFileSelect: (file: File) => void;
-}
-export interface DownloadButtonState {
-    isDownloaded?: boolean;
-    isDownloadError?: boolean;
-    isLoadingDownload?: boolean;
-}
-export interface DownloadFileProps {
-    isDownload?: boolean;
-    color?: 'inherit' | 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning';
-    state?: DownloadButtonState;
-    onDownload: () => void;
-}
-type MenuPosition = 'auto' | 'fixed';
-type ThemeMode = 'light' | 'dark';
-export interface ContextMenuProps {
-    options: any;
-    children: React.ReactNode;
-    disabled?: boolean;
-    className?: string;
-    menuClassName?: string;
-    position?: MenuPosition;
-    onShow?: () => void;
-    onHide?: () => void;
-    currentInstance?: any;
-    theme?: ThemeMode;
-}
 export interface UndoableHistoryState<T> {
     past: T[];
     present: T;
@@ -283,4 +223,3 @@ export interface AnimatedWrapperProps {
     delay?: any;
     children: React.ReactNode;
 }
-export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-hook-toolkit",
-  "version": "1.2.3",
+  "version": "1.2.4",
   "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",