react-hook-toolkit 1.0.12 → 1.0.14

package/README.md

@@ -21,6 +21,10 @@ pnpm add react-hook-toolkit
 | ------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- |
 | Latest ✔                                                                                          | Latest ✔                                                                                             | Latest ✔                                                                                          | Latest ✔                                                                                       | Latest ✔                                                                                    | 
 
+### **Authors**
+
+![NPM](https://img.shields.io/badge/Author-Shivaji_(React_Expert)_&_Shyamal_(JS_Expert)-red)   ![npm](https://img.shields.io/npm/v/react-hook-toolkit?color=1C939D)   ![npm](https://img.shields.io/npm/dt/react-hook-toolkit)   ![NPM](https://img.shields.io/npm/l/react-hook-toolkit)   ![NPM Unpacked Size](https://img.shields.io/npm/unpacked-size/react-hook-toolkit)
+
 ## Features  
 Here's the properly structured documentation with clear purpose explanations:
 
@@ -595,6 +599,257 @@ useUpdateEffect(() => {
 }, [value]);
 ```
 
+---
+
+ 📌 **usePersistedForm**  
+ Automatically persists form state to localStorage/sessionStorage and restores it on page reload.
+
+```ts
+const { values, setField, reset } = usePersistedForm('form-key', initialValues);
+
+// Example
+setField('username', 'john_doe'); // Auto-saves to storage
+reset(); // Clears storage
+```
+
+---
+
+📌 **useCrossFieldValidation**  
+ Handles complex validation rules that depend on multiple fields.
+
+```ts
+const { errors, validate } = useCrossFieldValidation({
+  rules: {
+    password: (val, { confirmPassword }) => val === confirmPassword,
+  },
+  initialValues
+});
+
+// Example
+validate('password', 'secret123', { confirmPassword: 'secret123' });
+```
+
+---
+
+📌 **useFieldArray**  
+ Manages dynamic arrays of form fields with add/remove/reorder operations.
+
+```ts
+const { fields, append, remove, move } = useFieldArray(initialItems);
+
+// Example
+append({ name: '', email: '' });
+remove(0); // Remove first item
+move(1, 0); // Move second item to first position
+```
+
+---
+
+📌 **useFormSubmit**  
+ Handles form submission with loading/error states and success callbacks.
+
+```ts
+const { submit, isLoading, error } = useFormSubmit(apiCall, {
+  onSuccess: (data) => console.log('Saved!', data)
+});
+
+// Example
+submit(formData);
+```
+
+---
+
+📌 **useSmartForm**  
+ Complete form management with validation, submission, and state handling.
+
+```ts
+const { register, handleSubmit, errors } = useSmartForm({
+  initialValues,
+  validationSchema,
+  onSubmit: (data) => console.log(data)
+});
+
+// Example
+<input {...register('email') />
+<button onClick={handleSubmit}>Save</button>
+```
+
+---
+
+📌 **useUndo**  
+ Provides undo/redo functionality for state changes.
+
+```ts
+const { state, setState, undo, redo } = useUndo(initialState);
+
+// Example
+setState({ items: [...] });
+undo(); // Reverts to previous state
+```
+
+---
+
+📌 **useFormWizard**  
+ Manages multi-step forms with navigation between steps.
+
+```ts
+const { currentStep, next, prev, goto } = useFormWizard(steps.length);
+
+// Example
+next(); // Move to next step
+goto(3); // Jump to step 4
+```
+
+---
+
+📌 **useWebSocket**  
+ Manages WebSocket connections with auto-reconnect.
+
+```ts
+const { send, message, status } = useWebSocket('ws://api.example.com');
+
+// Example
+send(JSON.stringify({ action: 'ping' }));
+```
+
+---
+
+📌 **useDragReorder**  
+ Enables drag-and-drop reordering of lists.
+
+```ts
+const { items, dragStart, dragOver, drop } = useDragReorder(initialItems);
+
+// Example
+<div 
+  draggable 
+  onDragStart={() => dragStart(index)}
+  onDragOver={() => dragOver(index)}
+  onDrop={drop}
+/>
+```
+
+---
+
+📌 **useInfiniteScroll**  
+ Implements infinite scroll pagination.
+
+```ts
+const { items, loadMore, isLoading } = useInfiniteScroll(fetchCallback);
+
+// Example
+<div onScroll={loadMore}>...</div>
+```
+
+---
+
+📌 **useEventListeners**  
+ Simplifies adding/removing event listeners.
+
+```ts
+useEventListeners({
+  click: handleClick,
+  resize: handleResize
+});
+
+// Example
+useEventListeners({
+  keydown: (e) => console.log(e.key)
+});
+```
+
+---
+
+📌 **useHistoryState**  
+ Manages state history with undo/redo capabilities.
+
+```ts
+const { state, setState, undo, redo } = useHistoryState(initialState);
+
+// Example
+setState({...});
+undo(); // Reverts change
+```
+
+---
+
+📌 **useIdle**  
+ Detects when user becomes inactive.
+
+```ts
+const isIdle = useIdle(30000); // 30s timeout
+
+// Example
+{isIdle && <ScreenSaver />}
+```
+
+---
+
+📌 **useIsFirstRender**  
+ Returns true only on component's first render.
+
+```ts
+const isFirst = useIsFirstRender();
+
+// Example
+useEffect(() => {
+  if (!isFirst) console.log('Updated!');
+}, [deps]);
+```
+
+---
+
+📌 **useList**  
+ Manages array state with utility methods.
+
+```ts
+const { list, push, remove, update } = useList(initialItems);
+
+// Example
+push(newItem);
+remove(0); // Remove first item
+```
+
+---
+
+📌 **useLockBodyScroll**  
+ Locks scrolling on the document body.
+
+```ts
+useLockBodyScroll(true); // Enable lock
+
+// Example
+useLockBodyScroll(modalIsOpen);
+```
+
+---
+
+📌 **useLongPress**  
+ Detects long press gestures.
+
+```ts
+const handlers = useLongPress(() => console.log('Long pressed!'), {
+  threshold: 1000
+});
+
+// Example
+<button {...handlers}>Hold me</button>
+```
+
+---
+
+📌 **createOptimizedContext**  
+ Creates optimized React context with selector support.
+
+```ts
+const { Provider, useStore } = createOptimizedContext(initialState);
+
+// Example
+const user = useStore(state => state.user);
+```
+
+---
+
 ------------------------------------------------ **Custom Components** --------------------------------------------
 
   ✅ **DynamicLoader**  
@@ -749,10 +1004,6 @@ Displays a skeleton placeholder for a pie chart inside a card layout. Includes a
 
 ---
 
-✏️ **Authors**  
-
-![NPM](https://img.shields.io/badge/Author-React%20Expert-red) &nbsp; ![npm](https://img.shields.io/npm/v/react-hook-toolkit?color=1C939D) &nbsp; ![npm](https://img.shields.io/npm/dt/react-hook-toolkit) &nbsp; ![NPM](https://img.shields.io/npm/l/react-hook-toolkit) &nbsp; ![NPM Unpacked Size](https://img.shields.io/npm/unpacked-size/react-hook-toolkit)
-
   **License** 
 
 [MIT](https://opensource.org/licenses)

package/dist/contexts/chunk158261.d.ts

@@ -0,0 +1,16 @@
+import { FC, ReactNode } from 'react';
+export interface DrawerContextValue {
+    drawerOpen: boolean;
+    openDrawer: () => void;
+    closeDrawer: () => void;
+    openDrawerInButton: () => void;
+    closeDrawerInButton: () => void;
+    currentMainMenu?: string;
+    setCurrentMainMenu?: (value: string) => void;
+}
+interface DrawerProviderProps {
+    children: ReactNode;
+}
+declare const DrawerContext: import("react").Context<DrawerContextValue>;
+export declare const DrawerProvider: FC<DrawerProviderProps>;
+export default DrawerContext;

package/dist/contexts/chunk158261.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useState } from 'react';
+import PropTypes from 'prop-types';
+var DrawerContext = createContext({
+    drawerOpen: false,
+    openDrawer: function () { },
+    closeDrawer: function () { },
+    openDrawerInButton: function () { },
+    closeDrawerInButton: function () { },
+    currentMainMenu: '',
+    setCurrentMainMenu: function () { }
+});
+export var DrawerProvider = function (_a) {
+    var children = _a.children;
+    var _b = useState(true), drawerOpen = _b[0], setDrawer = _b[1];
+    var _c = useState(''), currentMainMenu = _c[0], setCurrOpenMenu = _c[1];
+    var openDrawer = function () { return setDrawer(true); };
+    var closeDrawer = function () { return setDrawer(false); };
+    var openDrawerInButton = function () { return setDrawer(false); };
+    var closeDrawerInButton = function () { return setDrawer(true); };
+    var setCurrentMainMenu = function (value) { return setCurrOpenMenu(value); };
+    return (_jsx(DrawerContext.Provider, { value: {
+            drawerOpen: drawerOpen,
+            openDrawer: openDrawer,
+            closeDrawer: closeDrawer,
+            openDrawerInButton: openDrawerInButton,
+            closeDrawerInButton: closeDrawerInButton,
+            currentMainMenu: currentMainMenu,
+            setCurrentMainMenu: setCurrentMainMenu
+        }, children: children }));
+};
+DrawerProvider.propTypes = {
+    children: PropTypes.node.isRequired
+};
+export default DrawerContext;

package/dist/hookExecuter/chunk143.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @license HEXE
+ * Copyright (c) 2020-2024 Shivaji & Collaborators
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+type HookFunction = () => any;
+declare class HEXE {
+    private hs;
+    private ss;
+    constructor();
+    setHook(name: string, hookFunction: HookFunction): this;
+    private putHooks;
+    component(): React.FC;
+    getHook(name: string): any;
+}
+declare const ReactHooksWrapper: React.FC<{}>;
+declare const getHook: (name: string) => any, setHook: (name: string, hookFunction: HookFunction) => HEXE;
+export { ReactHooksWrapper, getHook, setHook };

package/dist/hookExecuter/chunk143.js

@@ -0,0 +1,58 @@
+/**
+ * @license HEXE
+ * Copyright (c) 2020-2024 Shivaji & Collaborators
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+var HEXE = /** @class */ (function () {
+    function HEXE() {
+        this.hs = {};
+        this.ss = {};
+        this.setHook = this.setHook.bind(this);
+        this.getHook = this.getHook.bind(this);
+        this.putHooks = this.putHooks.bind(this);
+    }
+    HEXE.prototype.setHook = function (name, hookFunction) {
+        [
+            { value: name, id: 'name', type: 'string' },
+            { value: hookFunction, id: 'hook', type: 'function' },
+        ].forEach(function (_a) {
+            var value = _a.value, id = _a.id, type = _a.type;
+            if (type === 'string' && typeof value !== 'string') {
+                throw new TypeError("\"".concat(id, "\" expected to be of type ").concat(type));
+            }
+            if (type === 'function' && typeof value !== 'function') {
+                throw new TypeError("\"".concat(id, "\" expected to be of type ").concat(type));
+            }
+        });
+        this.hs[name] = {
+            name: name,
+            hook: hookFunction,
+        };
+        return this;
+    };
+    HEXE.prototype.putHooks = function (name, value) {
+        this.ss[name] = value;
+    };
+    HEXE.prototype.component = function () {
+        var _this = this;
+        /* Author: Shivaji & Shyamal */
+        var Component = function () {
+            Object.values(_this.hs).forEach(function (_a) {
+                var name = _a.name, hook = _a.hook;
+                _this.putHooks(name, hook());
+            });
+            return /*#__PURE__*/ React.createElement(React.Fragment, null);
+        };
+        return Component;
+    };
+    HEXE.prototype.getHook = function (name) {
+        return this.ss[name];
+    };
+    return HEXE;
+}());
+var o = new HEXE();
+var ReactHooksWrapper = o.component();
+var getHook = o.getHook, setHook = o.setHook;
+export { ReactHooksWrapper, getHook, setHook };

package/dist/hooks/chunk613852.d.ts

@@ -0,0 +1,55 @@
+import React, { FC } from 'react';
+export declare const DynamicLoader: (Component: any) => (props: any) => import("react/jsx-runtime").JSX.Element;
+interface PropsType {
+    type: string;
+    msg: string;
+    duration?: number;
+}
+export declare const AlertMessage: FC<PropsType>;
+interface DetailsCardProps {
+    isLoading?: boolean;
+    title: string;
+    details: any[];
+    spacing?: number;
+    boxShadow?: string;
+    background?: string;
+    loaderType?: 'skeleton' | 'circular';
+    displayType?: 'flex' | 'block';
+}
+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;
+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 declare const FilePreview: ({ primaryKey, filename, size, onDownload, width, borderColor, fileColor, isDownloading, }: FileComponentProps) => import("react/jsx-runtime").JSX.Element;
+interface UploadButtonProps {
+    isUpload?: boolean;
+    color?: 'inherit' | 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning';
+    state?: {
+        isUploaded?: boolean;
+        isUploadError?: boolean;
+        isLoadingUpload?: boolean;
+    };
+    onFileSelect: (file: File) => void;
+}
+export declare const UploadFile: React.FC<UploadButtonProps>;
+interface DownloadButtonState {
+    isDownloaded?: boolean;
+    isDownloadError?: boolean;
+    isLoadingDownload?: boolean;
+}
+interface DownloadFileProps {
+    isDownload?: boolean;
+    color?: 'inherit' | 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning';
+    state?: DownloadButtonState;
+    onDownload: () => void;
+}
+export declare const DownloadFile: React.FC<DownloadFileProps>;
+export {};

package/dist/hooks/chunk613852.js

@@ -0,0 +1,168 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef } 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 { Close, InsertDriveFile, Image, Description, Download, CheckCircleOutlined, ErrorOutlineOutlined, Upload, } from '@mui/icons-material';
+import NProgress from 'nprogress';
+import { ErrorBoundary } from 'react-error-boundary';
+import { promise } from '../utils';
+import { getHook } from '../hookExecuter/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] }))] }));
+}
+var Error = function (_a) {
+    var children = _a.children;
+    var firstRender = useRef(false);
+    var handleReload = useCallback(function () {
+        if (!firstRender.current) {
+            firstRender.current = true; // Ensure this runs only once
+            promise(1500).then(function () {
+                window.location.reload();
+            });
+        }
+    }, []);
+    return (_jsx(ErrorBoundary, { FallbackComponent: Fallback, onError: function () {
+            if (process.env.NODE_ENV === 'production') {
+                handleReload();
+            }
+        }, children: children }));
+};
+var LoadingScreen = function () {
+    useEffect(function () {
+        NProgress.start();
+        return function () {
+            NProgress.done();
+        };
+    }, []);
+    return (_jsx(Box, { sx: {
+            backgroundColor: 'background.paper',
+            minHeight: '100%',
+        } }));
+};
+// 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: "primary" })) })] }) }));
+};
+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,
+                    } }))] }) }));
+};

package/dist/hooks/chunk726433.d.ts

@@ -0,0 +1,40 @@
+export declare function useHistoryState<T>(initialPresent: T): {
+    state: T;
+    set: (newPresent: T) => void;
+    undo: () => void;
+    redo: () => void;
+    reset: (newPresent: T) => void;
+    clear: () => void;
+    canUndo: boolean;
+    canRedo: boolean;
+    past: T[];
+    future: T[];
+};
+export declare function useIdle(ms?: number): boolean;
+export declare function useIsFirstRender(): boolean;
+export declare function useList<T>(initialList?: T[]): {
+    list: T[];
+    actions: {
+        set: (newList: T[]) => void;
+        push: (element: T) => void;
+        removeAt: (index: number) => void;
+        insertAt: (index: number, element: T) => void;
+        updateAt: (index: number, element: T) => void;
+        clear: () => void;
+    };
+};
+export declare function useLockBodyScroll(lock?: boolean): void;
+type LongPressOptions = {
+    threshold?: number;
+    onStart?: (event: Event) => void;
+    onFinish?: (event: Event) => void;
+    onCancel?: (event: Event) => void;
+};
+export declare function useLongPress(callback: (event: Event) => void, options?: LongPressOptions): {
+    onMouseDown: any;
+    onMouseUp: any;
+    onMouseLeave: any;
+    onTouchStart: any;
+    onTouchEnd: any;
+};
+export {};