@etsoo/materialui 1.4.68 → 1.4.69

package/lib/cjs/ListItemRightIcon.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ListItemRightIcon = void 0;
+const material_1 = require("@mui/material");
+/**
+ * List item right icon component
+ */
+exports.ListItemRightIcon = (0, material_1.styled)(material_1.ListItemIcon)(({ theme }) => ({
+    minWidth: "20px!important",
+    paddingLeft: theme.spacing(2)
+}));

package/lib/cjs/ListMoreDisplay.js

@@ -0,0 +1,101 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ListMoreDisplay = ListMoreDisplay;
+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 LoadingButton_1 = require("./LoadingButton");
+const ReactApp_1 = require("./app/ReactApp");
+/**
+ * ListMoreDisplay
+ * @param props Props
+ * @returns Component
+ */
+function ListMoreDisplay(props) {
+    // Destruct
+    const { batchSize = 6, children, defaultOrderBy, headerRenderer, autoLoad = headerRenderer == null, headerTitle, loadBatchSize, loadData, moreLabel = ReactApp_1.globalApp ? ReactApp_1.globalApp.get("more") + "..." : undefined, fieldTemplate, threshold, ...rest } = props;
+    // Refs
+    const refs = react_1.default.useRef({
+        queryPaging: {
+            currentPage: 0,
+            orderBy: defaultOrderBy,
+            batchSize
+        },
+        autoLoad,
+        hasNextPage: true,
+        isNextPageLoading: false,
+        loadedItems: 0,
+        selectedItems: [],
+        idCache: {}
+    });
+    const ref = refs.current;
+    // States
+    const [states, setStates] = react_1.default.useReducer((currentStates, newStates) => {
+        return { ...currentStates, ...newStates };
+    }, { completed: false });
+    // Load data
+    const loadDataLocal = async (reset = false) => {
+        // Prevent multiple loadings
+        if (!ref.hasNextPage || ref.isNextPageLoading)
+            return;
+        // Update state
+        ref.isNextPageLoading = true;
+        // Parameters
+        const { queryPaging, data } = ref;
+        const loadProps = {
+            queryPaging,
+            data
+        };
+        const mergedData = (0, react_2.GridDataGet)(loadProps, fieldTemplate);
+        const items = await loadData(mergedData);
+        if (items == null || ref.isMounted === false) {
+            return;
+        }
+        ref.isMounted = true;
+        const newItems = items.length;
+        const hasNextPage = newItems >= batchSize;
+        ref.lastLoadedItems = newItems;
+        ref.isNextPageLoading = false;
+        ref.hasNextPage = hasNextPage;
+        // Next page
+        var currentPage = ref.queryPaging.currentPage ?? 0;
+        ref.queryPaging.currentPage = currentPage + 1;
+        // Update rows
+        if (states.items == null || reset) {
+            setStates({ items, completed: !hasNextPage });
+        }
+        else {
+            setStates({
+                items: [...states.items, ...items],
+                completed: !hasNextPage
+            });
+        }
+    };
+    const reset = (data) => {
+        // Update the form data
+        ref.data = data;
+        // Reset page number
+        ref.isNextPageLoading = false;
+        ref.queryPaging.currentPage = 0;
+        ref.hasNextPage = true;
+        // Load data
+        loadDataLocal(true);
+    };
+    react_1.default.useEffect(() => {
+        if (autoLoad)
+            loadDataLocal();
+    }, [autoLoad]);
+    react_1.default.useEffect(() => {
+        return () => {
+            ref.isMounted = false;
+        };
+    }, []);
+    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [headerRenderer && headerRenderer(reset), (0, jsx_runtime_1.jsxs)(material_1.Card, { ...rest, children: [(0, jsx_runtime_1.jsx)(material_1.CardHeader, { title: headerTitle }), (0, jsx_runtime_1.jsx)(material_1.CardContent, { sx: {
+                            paddingTop: 0,
+                            paddingBottom: states.completed ? 0 : "inherit"
+                        }, children: states.items == null ? ((0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 20 })) : (states.items.map((item, index) => children(item, index))) }), !states.completed && ((0, jsx_runtime_1.jsx)(material_1.CardActions, { sx: { justifyContent: "flex-end" }, children: (0, jsx_runtime_1.jsx)(LoadingButton_1.LoadingButton, { onClick: async () => await loadDataLocal(), children: moreLabel }) }))] })] }));
+}

package/lib/cjs/LoadingButton.js

@@ -0,0 +1,47 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LoadingButton = LoadingButton;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const react_1 = __importDefault(require("react"));
+/**
+ * Loading button
+ * @param props Props
+ */
+function LoadingButton(props) {
+    // Destruct
+    const { endIcon, loadingIconProps = {}, onClick, ...rest } = props;
+    // Default size
+    loadingIconProps.size ??= 12;
+    // State
+    // https://stackoverflow.com/questions/55265255/react-usestate-hook-event-handler-using-initial-state
+    const [loading, setLoading] = react_1.default.useState(false);
+    // Icon
+    const localEndIcon = loading ? ((0, jsx_runtime_1.jsx)(material_1.CircularProgress, { ...loadingIconProps })) : (endIcon);
+    // Check if the component is mounted
+    const isMounted = react_1.default.useRef(true);
+    react_1.default.useEffect(() => {
+        return () => {
+            isMounted.current = false;
+        };
+    }, []);
+    // Layout
+    return ((0, jsx_runtime_1.jsx)(material_1.Button, { disabled: loading, endIcon: localEndIcon, onClick: async (event) => {
+            if (onClick) {
+                // Update state
+                setLoading(true);
+                // https://stackoverflow.com/questions/38508420/how-to-know-if-a-function-is-async
+                // const AsyncFunction = (async () => {}).constructor;
+                // onClick instanceof AsyncFunction
+                await onClick(event);
+                // Warning: Can't perform a React state update on an unmounted component
+                // It's necessary to check the component is mounted now
+                if (isMounted.current) {
+                    setLoading(false);
+                }
+            }
+        }, ...rest }));
+}

package/lib/cjs/MUGlobal.js

@@ -0,0 +1,189 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MUGlobal = void 0;
+const shared_1 = require("@etsoo/shared");
+const react_router_1 = require("react-router");
+/**
+ * MUGlobal for global configurations
+ */
+class MUGlobal {
+    /**
+     * Search field shrink
+     */
+    static searchFieldShrink = true;
+    /**
+     * Search field size
+     */
+    static searchFieldSize = "small";
+    /**
+     * Search field variant
+     */
+    static searchFieldVariant = "outlined";
+    /**
+     * Input field shrink
+     */
+    static inputFieldShrink = true;
+    /**
+     * Input field size
+     */
+    static inputFieldSize = "medium";
+    /**
+     * Input field variant
+     */
+    static inputFieldVariant = "outlined";
+    /**
+     * TextField variant
+     */
+    static textFieldVariant = "filled";
+    /**
+     * Page default paddings
+     */
+    static pagePaddings = { xs: 2, sm: 3 };
+    /**
+     * Get menu item props
+     * @param path Current path
+     * @param href Item's href
+     * @returns Props
+     */
+    static getMenuItem(path, href) {
+        let selected = false;
+        if (path === href) {
+            // Exact match, most common case
+            selected = true;
+        }
+        else if (href.endsWith("*")) {
+            href = href.slice(0, -1);
+            selected = path.startsWith(href);
+        }
+        else if (href.endsWith("/all")) {
+            selected = path.startsWith(href.slice(0, -3));
+        }
+        return {
+            component: react_router_1.Link,
+            selected,
+            to: href,
+            sx: {
+                ...(selected && {
+                    ".MuiListItemIcon-root": {
+                        color: (theme) => theme.palette.primary.main
+                    }
+                })
+            }
+        };
+    }
+    /**
+     * Update object number properties with half of it
+     * @param input Input object
+     * @returns Updated object
+     */
+    static half(input) {
+        const newObj = { ...input };
+        Object.entries(newObj).forEach(([key, value]) => {
+            if (typeof value === "number") {
+                Reflect.set(newObj, key, value / 2.0);
+            }
+        });
+        return newObj;
+    }
+    /**
+     * Reverse object number properties, like 5 to -5
+     * @param input Input object
+     * @returns Updated object
+     */
+    static reverse(input) {
+        const newObj = { ...input };
+        Object.entries(newObj).forEach(([key, value]) => {
+            if (typeof value === "number") {
+                Reflect.set(newObj, key, -value);
+            }
+        });
+        return newObj;
+    }
+    /**
+     * Update object number properties with adjustment
+     * @param input Input object
+     * @param adjust Adjust value or new size object
+     * @param field Specific field
+     * @returns Updated object
+     */
+    static increase(input, adjust, field) {
+        const newObj = { ...input };
+        Object.entries(newObj).forEach(([key, value]) => {
+            if (typeof value === "number") {
+                if (field == null || field === key) {
+                    const adjustValue = typeof adjust === "number" ? adjust : Reflect.get(adjust, key);
+                    if (adjustValue == null || typeof adjustValue !== "number")
+                        return;
+                    Reflect.set(newObj, key, value + adjustValue);
+                }
+            }
+        });
+        return newObj;
+    }
+    /**
+     * Adjust size with theme update
+     * @param size Base size
+     * @param adjust Adjustment
+     * @param updateFunc Theme update function
+     * @returns Updated object
+     */
+    static adjustWithTheme(size, adjust, updateFunc) {
+        const newObj = { ...adjust };
+        Object.entries(newObj).forEach(([key, value]) => {
+            if (typeof value === "number") {
+                const newValue = shared_1.NumberUtils.parseWithUnit(updateFunc(value));
+                if (newValue != null) {
+                    Reflect.set(newObj, key, `${size - newValue[0]}${newValue[1]}`);
+                }
+            }
+        });
+        return newObj;
+    }
+    /**
+     * Break points defined
+     */
+    static breakpoints = ["xs", "sm", "md", "lg", "xl"];
+    /**
+     * Get multple medias theme space
+     * Responsive values and Breakpoints as an object
+     * xs = theme.breakpoints.up('xs')
+     * https://mui.com/system/basics/
+     * @param spaces Spaces
+     * @param theme Theme
+     * @returns Result
+     */
+    static getSpace(spaces, theme) {
+        const start = this.breakpoints.length - 1;
+        for (let i = start; i >= 0; i--) {
+            const key = this.breakpoints[i];
+            const value = Reflect.get(spaces, key);
+            if (typeof value === "number") {
+                const mediaRaw = theme.breakpoints.up(key);
+                const mediaQuery = mediaRaw.substring(mediaRaw.indexOf("("));
+                if (window.matchMedia(mediaQuery).matches) {
+                    let space = parseInt(theme.spacing(value), 10);
+                    if (isNaN(space))
+                        space = 8 * value;
+                    return space;
+                }
+            }
+        }
+        return 0;
+    }
+    /**
+     * Update object number properties with theme
+     * @param input Input object
+     * @param updateFunc Theme update function
+     * @returns Updated object
+     */
+    static updateWithTheme(input, updateFunc) {
+        const newObj = { ...input };
+        Object.entries(newObj).forEach(([key, value]) => {
+            if (typeof value === "number") {
+                Reflect.set(newObj, key, updateFunc(value));
+            }
+        });
+        return newObj;
+    }
+}
+exports.MUGlobal = MUGlobal;

package/lib/cjs/MUUtils.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MUUtils = void 0;
+/**
+ * MU utilities
+ */
+var MUUtils;
+(function (MUUtils) {
+    /**
+     * Get grid data
+     * @param grid Grid
+     * @param checkField Check field or callback
+     * @returns Results
+     */
+    function getGridData(grid, checkField) {
+        const check = typeof checkField === "function"
+            ? checkField
+            : (item) => {
+                const value = item[checkField];
+                return value == null || value === "" ? false : true;
+            };
+        const items = [];
+        for (const [_, value] of grid.getRowModels()) {
+            const item = value;
+            if (check(item)) {
+                items.push(item);
+            }
+        }
+        return items;
+    }
+    MUUtils.getGridData = getGridData;
+    /**
+     * Setup paging keysets
+     * @param data Paging data
+     * @param lastItem Last item of the query
+     * @param idField Id field
+     */
+    function setupPagingKeysets(data, lastItem, idField) {
+        // If the id field is not set for ordering, add it with descending
+        if (typeof data.queryPaging === "object") {
+            const orderBy = (data.queryPaging.orderBy ??= []);
+            const idUpper = idField.toUpperCase();
+            if (!orderBy.find((o) => o.field.toUpperCase() === idUpper)) {
+                orderBy.push({ field: idField, desc: true, unique: true });
+            }
+            // Set the paging keysets
+            if (lastItem) {
+                const keysets = orderBy.map((o) => Reflect.get(lastItem, o.field));
+                data.queryPaging.keysets = keysets;
+            }
+            else {
+                data.queryPaging.keysets = undefined;
+            }
+        }
+        return data;
+    }
+    MUUtils.setupPagingKeysets = setupPagingKeysets;
+})(MUUtils || (exports.MUUtils = MUUtils = {}));

package/lib/cjs/MaskInput.d.ts

@@ -0,0 +1,40 @@
+import { TextFieldProps } from "@mui/material";
+type ReactIMask = typeof import("react-imask", { with: { "resolution-mode": "import" } }).useIMask;
+type ReactIMaskProps = Parameters<ReactIMask>;
+type RIOpts = ReactIMaskProps[0];
+type RIReturns = ReturnType<ReactIMask>;
+type RIMaskRef = RIReturns["maskRef"]["current"];
+type RIMValue = RIReturns["value"];
+/**
+ * Mask input props
+ */
+export type MaskInputProps = TextFieldProps & {
+    /**
+     * Mask props
+     */
+    mask: RIOpts;
+    /**
+     * Accept hanlder
+     */
+    onAccept?: (value: RIMValue, maskRef: RIMaskRef, e?: InputEvent) => void;
+    /**
+     * Complete handler
+     */
+    onComplete?: (value: RIMValue, maskRef: RIMaskRef, e?: InputEvent) => void;
+    /**
+     * Is the field read only?
+     */
+    readOnly?: boolean;
+    /**
+     * Search case
+     */
+    search?: boolean;
+};
+/**
+ * Mask input
+ * https://imask.js.org/
+ * @param props Props
+ * @returns Component
+ */
+export declare function MaskInput(props: MaskInputProps): import("react/jsx-runtime").JSX.Element | undefined;
+export {};

package/lib/cjs/MaskInput.js

@@ -0,0 +1,54 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MaskInput = MaskInput;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const react_1 = __importDefault(require("react"));
+const MUGlobal_1 = require("./MUGlobal");
+/**
+ * Mask input
+ * https://imask.js.org/
+ * @param props Props
+ * @returns Component
+ */
+function MaskInput(props) {
+    // Destruct
+    const { defaultValue, mask, InputLabelProps = {}, InputProps = {}, onAccept, onComplete, readOnly, search = false, size = search ? MUGlobal_1.MUGlobal.searchFieldSize : MUGlobal_1.MUGlobal.inputFieldSize, value, variant = search ? MUGlobal_1.MUGlobal.searchFieldVariant : MUGlobal_1.MUGlobal.inputFieldVariant, ...rest } = props;
+    // State
+    const [useIMask, setUseIMask] = react_1.default.useState(null);
+    react_1.default.useEffect(() => {
+        import("react-imask").then((module) => setUseIMask(module.useIMask));
+    }, []);
+    if (useIMask == null)
+        return;
+    const { ref, maskRef } = useIMask(mask, {
+        onAccept: (value, maskRef, event) => {
+            if (onAccept)
+                onAccept(value, maskRef, event);
+        },
+        onComplete: (value, maskRef, event) => {
+            if (onComplete)
+                onComplete(value, maskRef, event);
+        }
+    });
+    const localValue = defaultValue ?? value;
+    // Shrink
+    InputLabelProps.shrink ??= search
+        ? MUGlobal_1.MUGlobal.searchFieldShrink
+        : MUGlobal_1.MUGlobal.inputFieldShrink;
+    // Read only
+    if (readOnly != null)
+        InputProps.readOnly = readOnly;
+    InputProps.inputRef = ref;
+    react_1.default.useEffect(() => {
+        if (maskRef.current == null || localValue == null)
+            return;
+        maskRef.current.value = String(localValue);
+        maskRef.current.updateValue();
+    }, [maskRef.current, localValue]);
+    // Layout
+    return ((0, jsx_runtime_1.jsx)(material_1.TextField, { InputLabelProps: InputLabelProps, InputProps: InputProps, size: size, variant: variant, ...rest }));
+}

package/lib/cjs/MenuButton.js

@@ -0,0 +1,68 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuButton = MenuButton;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const react_1 = __importDefault(require("react"));
+function MenuButton(props) {
+    // Destruct
+    const { button, items, labelField, anchorOrigin = {
+        vertical: "top",
+        horizontal: "right"
+    }, transformOrigin = {
+        vertical: anchorOrigin.vertical === "center"
+            ? "center"
+            : anchorOrigin.vertical === "top"
+                ? "bottom"
+                : "top",
+        horizontal: anchorOrigin.horizontal
+    }, sx, ...rest } = props;
+    // Top?
+    const isTop = transformOrigin.vertical === "top";
+    // Menu anchor
+    const [anchorEl, setAnchorEl] = react_1.default.useState();
+    // Menu open or not
+    const isMenuOpen = Boolean(anchorEl);
+    const handleMenuOpen = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleMenuClose = () => {
+        setAnchorEl(undefined);
+    };
+    const labelFormatter = typeof labelField === "function"
+        ? labelField
+        : (item) => item[labelField];
+    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [typeof button === "function" ? (button(handleMenuOpen)) : ((0, jsx_runtime_1.jsx)(material_1.Button, { onClick: handleMenuOpen, ...button })), (0, jsx_runtime_1.jsx)(material_1.Menu, { slotProps: {
+                    paper: {
+                        elevation: 0,
+                        sx: {
+                            overflow: "visible",
+                            filter: "drop-shadow(0px 2px 8px rgba(0,0,0,0.32))",
+                            "& .MuiAvatar-root": {
+                                width: 32,
+                                height: 32
+                            },
+                            "&:before": {
+                                content: '""',
+                                display: "block",
+                                position: "absolute",
+                                top: isTop ? 0 : undefined,
+                                bottom: isTop ? undefined : -10,
+                                right: 14,
+                                width: 10,
+                                height: 10,
+                                bgcolor: "background.paper",
+                                transform: "translateY(-50%) rotate(45deg)",
+                                zIndex: 0
+                            },
+                            ...{ sx }
+                        }
+                    }
+                }, disableScrollLock: true, anchorEl: anchorEl, anchorOrigin: anchorOrigin, keepMounted: true, transformOrigin: transformOrigin, open: isMenuOpen, transitionDuration: 0, onClose: handleMenuClose, ...rest, children: items.map((item) => {
+                    const label = labelFormatter(item);
+                    return ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { disabled: true, children: label }, item.id));
+                }) })] }));
+}

package/lib/cjs/MobileListItemRenderer.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MobileListItemRenderer = MobileListItemRenderer;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const MoreFab_1 = require("./MoreFab");
+/**
+ * Default mobile list item renderer
+ * @param param0 List renderer props
+ * @param margin Margin
+ * @param renderer Renderer for card content
+ * @returns Component
+ */
+function MobileListItemRenderer({ data, itemHeight, margins }, renderer) {
+    // Loading
+    if (data == null)
+        return (0, jsx_runtime_1.jsx)(material_1.LinearProgress, {});
+    // Elements
+    const [title, subheader, actions, children, cardActions] = renderer(data);
+    return ((0, jsx_runtime_1.jsxs)(material_1.Card, { sx: {
+            height: itemHeight,
+            ...margins
+        }, children: [(0, jsx_runtime_1.jsx)(material_1.CardHeader, { sx: { paddingBottom: 0.5 }, action: Array.isArray(actions) ? ((0, jsx_runtime_1.jsx)(MoreFab_1.MoreFab, { iconButton: true, size: "small", anchorOrigin: {
+                        vertical: "bottom",
+                        horizontal: "right"
+                    }, transformOrigin: {
+                        vertical: "top",
+                        horizontal: "right"
+                    }, actions: actions })) : (actions), title: title, titleTypographyProps: { variant: "body2" }, subheader: subheader, subheaderTypographyProps: { variant: "caption" } }), (0, jsx_runtime_1.jsx)(material_1.CardContent, { sx: {
+                    paddingTop: 0,
+                    paddingBottom: cardActions == null ? Reflect.get(margins, "marginBottom") : 0
+                }, children: children }), cardActions] }));
+}

package/lib/cjs/MoneyInputField.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MoneyInputField = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const IntInputField_1 = require("./IntInputField");
+/**
+ * Money input field (controlled)
+ */
+exports.MoneyInputField = react_1.default.forwardRef((props, ref) => {
+    // Destruct
+    const { step = 0.01, ...rest } = props;
+    // Layout
+    return (0, jsx_runtime_1.jsx)(IntInputField_1.IntInputField, { ref: ref, step: step, ...rest });
+});