@etsoo/materialui 1.4.68 → 1.4.70

package/lib/cjs/OptionGroupFlag.js

@@ -0,0 +1,92 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OptionGroupFlag = OptionGroupFlag;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const shared_1 = require("@etsoo/shared");
+const material_1 = require("@mui/material");
+const OutlinedInput_1 = __importDefault(require("@mui/material/OutlinedInput"));
+const react_1 = __importDefault(require("react"));
+/**
+ * OptionGroupFlag
+ * @param props Props
+ * @returns Component
+ */
+function OptionGroupFlag(props) {
+    // Destruct
+    const { getOptionLabel, defaultValue, idField = "id", label, labelField = "label", mRef, name, onValueChange, options, readOnly, row, itemSize, helperText, variant, required, fullWidth, sx = {}, ...rest } = props;
+    // Outlined
+    const outlined = variant === "outlined";
+    // Get option value
+    // D type should be the source id type
+    const getOptionValue = (option) => {
+        const value = shared_1.DataTypes.getValue(option, idField);
+        if (value == null)
+            return null;
+        return value;
+    };
+    // Value
+    const [value, setValue] = react_1.default.useState(defaultValue);
+    react_1.default.useEffect(() => {
+        setValue(defaultValue);
+    }, [defaultValue]);
+    // Disabled ids
+    const [disabledIds, setDisabledIds] = react_1.default.useState();
+    // Item checked
+    const itemChecked = (option) => {
+        // Value
+        const itemValue = getOptionValue(option);
+        if (itemValue == null || value == null)
+            return false;
+        return (value & itemValue) > 0;
+    };
+    react_1.default.useImperativeHandle(mRef, () => ({
+        disable(ids) {
+            setDisabledIds(ids);
+        }
+    }));
+    // First item value
+    const firstOptionValue = getOptionValue(options[0]);
+    // Items
+    const list = options.map((option) => {
+        // Value
+        const ov = getOptionValue(option);
+        if (ov == null)
+            return;
+        // Control
+        const control = ((0, jsx_runtime_1.jsx)(material_1.Checkbox, { name: name, readOnly: readOnly, size: itemSize, checked: itemChecked(option), disabled: disabledIds?.includes(ov), onChange: (event) => {
+                if (firstOptionValue == null)
+                    return;
+                const typeValue = shared_1.Utils.parseString(event.target.value, firstOptionValue);
+                const newValue = (value == null
+                    ? event.target.checked
+                        ? typeValue
+                        : undefined
+                    : event.target.checked
+                        ? value | typeValue
+                        : value ^ typeValue);
+                if (onValueChange)
+                    onValueChange(newValue);
+                setValue(newValue);
+            } }));
+        // Label
+        const label = getOptionLabel == null ? `${option[labelField]}` : getOptionLabel(option);
+        return ((0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: control, value: ov, label: label }, ov));
+    });
+    // Group
+    const group = (0, jsx_runtime_1.jsx)(material_1.FormGroup, { row: row, children: list });
+    // Layout
+    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.FormControl, { fullWidth: fullWidth, sx: sx, ...rest, children: [label && ((0, jsx_runtime_1.jsx)(material_1.InputLabel, { required: required, variant: variant, shrink: true, children: label })), outlined ? ((0, jsx_runtime_1.jsx)(OutlinedInput_1.default, { label: label && required ? label + " *" : label, notched: true, endAdornment: group, sx: {
+                            cursor: "default",
+                            display: "flex",
+                            gap: 1,
+                            paddingX: 2,
+                            paddingY: "7px",
+                            width: fullWidth ? "100%" : "auto",
+                            "& input": {
+                                display: "none"
+                            }
+                        } })) : ((0, jsx_runtime_1.jsx)(material_1.Box, { paddingLeft: 2, paddingY: "7px", children: group }))] }), helperText && ((0, jsx_runtime_1.jsx)(material_1.FormHelperText, { sx: { marginLeft: 2, marginRight: 2 }, children: helperText }))] }));
+}

package/lib/cjs/PList.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PList = PList;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+/**
+ * Paragraph items list
+ * @param items Items
+ */
+function PList(props) {
+    const { items } = props;
+    return ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: items != null &&
+            items.map((item, index) => {
+                return (0, jsx_runtime_1.jsx)("p", { children: item }, index);
+            }) }));
+}

package/lib/cjs/PercentCircularProgress.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PercentCircularProgress = PercentCircularProgress;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+function PercentCircularProgress(props) {
+    // Destruct
+    const { textProps, valueUnit = "%", ...rest } = props;
+    // Component
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { position: "relative", display: "inline-flex" }, children: [(0, jsx_runtime_1.jsx)(material_1.CircularProgress, { variant: "determinate", ...rest }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                    top: 0,
+                    left: 0,
+                    bottom: 0,
+                    right: 0,
+                    position: "absolute",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center"
+                }, children: (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "caption", component: "div", color: "text.secondary", ...textProps, children: `${Math.round(props.value)}${valueUnit}` }) })] }));
+}

package/lib/cjs/PercentLinearProgress.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PercentLinearProgress = PercentLinearProgress;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+function PercentLinearProgress(props) {
+    // Destruct
+    const { textProps, valueUnit = "%", ...rest } = props;
+    // Component
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: "flex", alignItems: "center", flexGrow: 2 }, children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: { width: "100%", mr: 1 }, children: (0, jsx_runtime_1.jsx)(material_1.LinearProgress, { variant: "determinate", ...rest }) }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { minWidth: 35 }, children: (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "caption", color: "text.secondary", ...textProps, children: `${Math.round(props.value)}${valueUnit}` }) })] }));
+}

package/lib/cjs/ProgressCount.js

@@ -0,0 +1,79 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProgressCount = ProgressCount;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const react_1 = __importDefault(require("react"));
+/**
+ * Progress count
+ * @param props Props
+ * @returns Component
+ */
+function ProgressCount(props) {
+    // Destruct
+    const { countdown = true, linear = true, minWidth = 36, onComplete, onProgress, seconds, valueUnit = "" } = props;
+    // Progress value
+    const [value, setValue] = react_1.default.useState(countdown ? seconds : 0);
+    // Variant
+    const [variant, setVariant] = react_1.default.useState("determinate");
+    // Progress value
+    const progressValue = (100.0 * value) / seconds;
+    react_1.default.useEffect(() => {
+        const timer = setInterval(() => {
+            setValue((prev) => {
+                const newValue = countdown
+                    ? prev === 0
+                        ? seconds
+                        : prev - 1
+                    : prev === seconds
+                        ? 0
+                        : prev + 1;
+                if (countdown) {
+                    if (newValue === 0) {
+                        if (onComplete) {
+                            const result = onComplete();
+                            // Finish
+                            if (result === false) {
+                                clearInterval(timer);
+                                setVariant("indeterminate");
+                            }
+                        }
+                    }
+                }
+                else {
+                    if (newValue === seconds) {
+                        if (onComplete) {
+                            const result = onComplete();
+                            // Finish
+                            if (result === false) {
+                                clearInterval(timer);
+                                setVariant("indeterminate");
+                            }
+                        }
+                    }
+                }
+                if (onProgress)
+                    onProgress(newValue);
+                return newValue;
+            });
+        }, 1000);
+        return () => {
+            clearInterval(timer);
+        };
+    }, []);
+    if (linear)
+        return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: "flex", alignItems: "center", width: "100%" }, children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: { width: "100%", mr: 1 }, children: (0, jsx_runtime_1.jsx)(material_1.LinearProgress, { variant: variant, value: progressValue }) }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { minWidth }, children: (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", color: "text.secondary", children: `${value}${valueUnit}` }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { position: "relative", display: "inline-flex" }, children: [(0, jsx_runtime_1.jsx)(material_1.CircularProgress, { variant: variant, value: progressValue }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                    top: 0,
+                    left: 0,
+                    bottom: 0,
+                    right: 0,
+                    position: "absolute",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center"
+                }, children: (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "caption", component: "div", color: "text.secondary", children: `${value}${valueUnit}` }) })] }));
+}

package/lib/cjs/PullToRefreshUI.js

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PullToRefreshUI = PullToRefreshUI;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+/**
+ * PullToRefresh UI
+ * Use hammerjs or touchemulator to simulate browser as mobile device
+ * @param props Props
+ * @returns Component
+ */
+function PullToRefreshUI(props) {
+    // Ready
+    react_1.default.useEffect(() => {
+        let pr;
+        import("pulltorefreshjs").then((PullToRefresh) => {
+            pr = PullToRefresh.default;
+            pr.init(props);
+        });
+        return () => {
+            if (pr)
+                pr.destroyAll();
+        };
+    }, [props]);
+    return (0, jsx_runtime_1.jsx)(react_1.default.Fragment, {});
+}

package/lib/cjs/QuickList.js

@@ -0,0 +1,48 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QuickList = QuickList;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const shared_1 = require("@etsoo/shared");
+const material_1 = require("@mui/material");
+const react_1 = __importDefault(require("react"));
+const InputField_1 = require("./InputField");
+const ReactApp_1 = require("./app/ReactApp");
+const FlexBox_1 = require("./FlexBox");
+/**
+ * Quick list
+ * @param props Props
+ * @returns Component
+ */
+function QuickList(props) {
+    // Destruct
+    const { buttonProps = {}, label, inputProps, itemLabel = shared_1.DataTypes.getListItemLabel, itemRenderer = (item) => itemLabel(item), itemProps, loadData, noMatchesLabel = ReactApp_1.globalApp?.get("noMatches"), gap = 1, height = "480px", onItemClick, ...rest } = props;
+    const { onClick, ...buttonRest } = buttonProps;
+    // States
+    const [loading, setLoading] = react_1.default.useState(false);
+    const [items, setItems] = react_1.default.useState([]);
+    const loadDataLocal = (keyword) => {
+        setLoading(true);
+        loadData(keyword).then((result) => {
+            setLoading(false);
+            setItems(result ?? []);
+        });
+    };
+    react_1.default.useEffect(() => {
+        loadDataLocal();
+    }, []);
+    // Layout
+    return ((0, jsx_runtime_1.jsxs)(FlexBox_1.VBox, { gap: gap, height: height, ...rest, children: [(0, jsx_runtime_1.jsx)(InputField_1.InputField, { label: label, changeDelay: 480, onChangeDelay: (event) => {
+                    // Stop bubble
+                    event.preventDefault();
+                    event.stopPropagation();
+                    loadDataLocal(event.target.value);
+                }, fullWidth: true, ...inputProps }), loading ? ((0, jsx_runtime_1.jsx)(material_1.LinearProgress, {})) : items.length === 0 ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { textAlign: "center", children: noMatchesLabel })) : ((0, jsx_runtime_1.jsx)(material_1.List, { children: items.map((item) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { disablePadding: true, ...itemProps, children: (0, jsx_runtime_1.jsx)(material_1.ListItemButton, { onClick: (event) => {
+                            if (onClick)
+                                onClick(event);
+                            if (!event.defaultPrevented && onItemClick)
+                                onItemClick(item);
+                        }, ...buttonRest, children: itemRenderer(item) }) }, item.id))) }))] }));
+}

package/lib/cjs/RegionsRQ.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/cjs/ResponsibleContainer.js

@@ -0,0 +1,196 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ResponsibleContainer = ResponsibleContainer;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@etsoo/react");
+const DataGridEx_1 = require("./DataGridEx");
+const MUGlobal_1 = require("./MUGlobal");
+const PullToRefreshUI_1 = require("./PullToRefreshUI");
+const ScrollerListEx_1 = require("./ScrollerListEx");
+const SearchBar_1 = require("./SearchBar");
+const Labels_1 = require("./app/Labels");
+const GridUtils_1 = require("./GridUtils");
+function defaultContainerBoxSx(paddings, hasField, _dataGrid) {
+    const half = typeof paddings == "number" ? paddings / 2 : MUGlobal_1.MUGlobal.half(paddings);
+    return {
+        "& .SearchBox": {
+            marginBottom: hasField ? half : 0
+        }
+    };
+}
+/**
+ * Responsible container
+ * @param props Props
+ * @returns Layout
+ */
+function ResponsibleContainer(props) {
+    // Destruct
+    const { adjustHeight, adjustFabHeight, cacheKey, cacheMinutes = 15, columns, containerBoxSx = defaultContainerBoxSx, elementReady, fields, fieldTemplate, height, loadData, mRef, paddings = MUGlobal_1.MUGlobal.pagePaddings, pullToRefresh = true, quickAction, sizeReadyMiliseconds = 0, searchBarHeight = 45.6, searchBarBottom = 8, ...rest } = props;
+    // Labels
+    const labels = Labels_1.Labels.CommonPage;
+    // Refs
+    const refs = react_1.default.useRef({});
+    const state = refs.current;
+    const mRefs = (0, react_2.useCombinedRefs)(mRef, (ref) => {
+        if (ref == null)
+            return;
+        state.ref = ref;
+    });
+    // Screen size detection
+    const showDataGrid = (0, material_1.useMediaQuery)("(min-width:600px)");
+    // Update mounted state
+    react_1.default.useEffect(() => {
+        return () => {
+            state.mounted = false;
+        };
+    }, []);
+    // Has fields
+    const hasFields = fields != null && fields.length > 0;
+    // Load data
+    const localLoadData = (props, lastItem) => {
+        state.mounted = true;
+        return loadData(GridUtils_1.GridUtils.createLoader(props, fieldTemplate, cacheKey, false), lastItem);
+    };
+    // Search data
+    const searchData = GridUtils_1.GridUtils.getSearchData(cacheKey);
+    // On submit callback
+    const onSubmit = (data, _reset) => {
+        if (data == null || state.ref == null)
+            return;
+        state.ref.reset({ data });
+    };
+    // Watch container
+    const { dimensions } = (0, react_2.useDimensions)(1, undefined, sizeReadyMiliseconds, (_preRect, rect) => {
+        // Check
+        if (rect == null)
+            return true;
+        // Last rect
+        const lastRect = state.rect;
+        // 32 = scroll bar width
+        if (lastRect != null &&
+            state.mounted !== true &&
+            Math.abs(rect.width - lastRect.width) <= 32 &&
+            Math.abs(rect.height - lastRect.height) <= 32)
+            return true;
+        // Hold the new rect
+        state.rect = rect;
+        return false;
+    });
+    const onInitLoad = (ref) => {
+        // Avoid repeatedly load from cache
+        if (refs.current.initLoaded || !cacheKey)
+            return undefined;
+        // Cache data
+        const cacheData = GridUtils_1.GridUtils.getCacheData(cacheKey, cacheMinutes);
+        if (cacheData) {
+            const { rows, state } = cacheData;
+            GridUtils_1.GridUtils.mergeSearchData(state, searchData);
+            // Scroll position
+            const scrollData = sessionStorage.getItem(`${cacheKey}-scroll`);
+            if (scrollData) {
+                if ("resetAfterColumnIndex" in ref) {
+                    const { scrollLeft, scrollTop } = JSON.parse(scrollData);
+                    globalThis.setTimeout(() => ref.scrollTo({ scrollLeft, scrollTop }), 0);
+                }
+                else {
+                    const { scrollOffset } = JSON.parse(scrollData);
+                    globalThis.setTimeout(() => ref.scrollTo(scrollOffset), 0);
+                }
+            }
+            // Update flag value
+            refs.current.initLoaded = true;
+            // Return cached rows and state
+            return [rows, state];
+        }
+        return undefined;
+    };
+    const onListScroll = (props) => {
+        if (!cacheKey || !refs.current.initLoaded)
+            return;
+        sessionStorage.setItem(`${cacheKey}-scroll`, JSON.stringify(props));
+    };
+    const onGridScroll = (props) => {
+        if (!cacheKey || !refs.current.initLoaded)
+            return;
+        sessionStorage.setItem(`${cacheKey}-scroll`, JSON.stringify(props));
+    };
+    // Rect
+    const rect = dimensions[0][2];
+    // Create list
+    const list = (() => {
+        // No layout
+        if (rect == null)
+            return [null, undefined];
+        // Height
+        let heightLocal;
+        if (height != null) {
+            heightLocal = height;
+        }
+        else {
+            // Auto calculation
+            heightLocal =
+                document.documentElement.clientHeight - Math.round(rect.bottom + 1);
+            const style = window.getComputedStyle(dimensions[0][1]);
+            const boxMargin = parseFloat(style.marginBottom);
+            if (!isNaN(boxMargin))
+                heightLocal -= boxMargin;
+            if (adjustHeight != null)
+                heightLocal -=
+                    typeof adjustHeight === "number"
+                        ? adjustHeight
+                        : adjustHeight(heightLocal, rect);
+        }
+        if (adjustFabHeight)
+            heightLocal = adjustFabHeight(heightLocal, showDataGrid);
+        if (showDataGrid) {
+            // Delete
+            delete rest.itemRenderer;
+            return ((0, jsx_runtime_1.jsx)(material_1.Box, { className: "DataGridBox", children: (0, jsx_runtime_1.jsx)(DataGridEx_1.DataGridEx, { autoLoad: !hasFields, height: heightLocal, width: rect.width, loadData: localLoadData, mRef: mRefs, onDoubleClick: (_, data) => quickAction && quickAction(data), outerRef: (element) => {
+                        if (element != null && elementReady)
+                            elementReady(element, true);
+                    }, onScroll: onGridScroll, columns: columns, onUpdateRows: GridUtils_1.GridUtils.getUpdateRowsHandler(cacheKey), onInitLoad: onInitLoad, ...rest }) }));
+        }
+        // Delete
+        delete rest.checkable;
+        delete rest.borderRowsCount;
+        delete rest.bottomHeight;
+        delete rest.footerItemRenderer;
+        delete rest.headerHeight;
+        delete rest.hideFooter;
+        delete rest.hoverColor;
+        delete rest.selectable;
+        return ((0, jsx_runtime_1.jsx)(material_1.Box, { className: "ListBox", sx: { height: heightLocal }, children: (0, jsx_runtime_1.jsx)(ScrollerListEx_1.ScrollerListEx, { autoLoad: !hasFields, height: heightLocal, loadData: localLoadData, onUpdateRows: GridUtils_1.GridUtils.getUpdateRowsHandler(cacheKey), onInitLoad: onInitLoad, mRef: mRefs, onClick: (event, data) => quickAction && react_2.ReactUtils.isSafeClick(event) && quickAction(data), oRef: (element) => {
+                    if (element != null && elementReady)
+                        elementReady(element, false);
+                }, onScroll: onListScroll, ...rest }) }));
+    })();
+    const searchBar = react_1.default.useMemo(() => {
+        if (!hasFields ||
+            showDataGrid == null ||
+            rect?.width == null ||
+            rect.width < 20)
+            return;
+        const f = typeof fields == "function" ? fields(searchData ?? {}) : fields;
+        return ((0, jsx_runtime_1.jsx)(SearchBar_1.SearchBar, { fields: f, onSubmit: onSubmit, className: `searchBar${showDataGrid ? "Grid" : "List"}` }));
+    }, [showDataGrid, hasFields, searchBarHeight, rect?.width]);
+    // Pull container
+    const pullContainer = showDataGrid == null
+        ? undefined
+        : showDataGrid
+            ? ".DataGridEx-Body"
+            : ".ScrollerListEx-Body";
+    // Layout
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: containerBoxSx == null
+            ? undefined
+            : containerBoxSx(paddings, hasFields, showDataGrid), children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, { ref: dimensions[0][0], className: "SearchBox", sx: {
+                            height: hasFields ? searchBarHeight : 0
+                        }, marginBottom: hasFields ? `${searchBarBottom}px!important` : undefined, children: searchBar }), list] }), pullToRefresh && pullContainer && ((0, jsx_runtime_1.jsx)(PullToRefreshUI_1.PullToRefreshUI, { mainElement: pullContainer, triggerElement: pullContainer, instructionsPullToRefresh: labels.pullToRefresh, instructionsReleaseToRefresh: labels.releaseToRefresh, instructionsRefreshing: labels.refreshing, onRefresh: () => state.ref?.reset(), shouldPullToRefresh: () => {
+                    const container = document.querySelector(pullContainer);
+                    return !container?.scrollTop;
+                } }))] }));
+}

package/lib/cjs/ResponsiveStyleValue.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/cjs/ScrollTopFab.js

@@ -0,0 +1,30 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScrollTopFab = ScrollTopFab;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const material_1 = require("@mui/material");
+const VerticalAlignTop_1 = __importDefault(require("@mui/icons-material/VerticalAlignTop"));
+/**
+ * Scroll to top fab
+ * @returns Component
+ */
+function ScrollTopFab(props) {
+    // Destruct
+    const { color, size, target, title } = props;
+    // Scroll trigger
+    const trigger = (0, material_1.useScrollTrigger)({
+        target,
+        disableHysteresis: true,
+        threshold: 120
+    });
+    // Icon click handler
+    // behavior: 'smooth'
+    const handleClick = () => {
+        target.scrollTo({ top: 0 });
+    };
+    return trigger ? ((0, jsx_runtime_1.jsx)(material_1.Zoom, { in: trigger, children: (0, jsx_runtime_1.jsx)(material_1.Fab, { color: color, size: size, title: title, onClick: handleClick, children: (0, jsx_runtime_1.jsx)(VerticalAlignTop_1.default, {}) }) })) : ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, {}));
+}