@etsoo/materialui 1.4.68 → 1.4.70

package/lib/cjs/MoreFab.js

@@ -0,0 +1,100 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MoreFab = MoreFab;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const MoreHoriz_1 = __importDefault(require("@mui/icons-material/MoreHoriz"));
+const react_1 = __importDefault(require("react"));
+const material_1 = require("@mui/material");
+const react_router_1 = require("react-router");
+function getActions(input) {
+    // Actions
+    const actions = [];
+    input.forEach((action) => {
+        if (typeof action === "boolean")
+            return;
+        actions.push(action);
+    });
+    return actions;
+}
+/**
+ * More fab
+ * @returns Component
+ */
+function MoreFab(props) {
+    // Destruct
+    const { actions, drawArrow = true, anchorOrigin = {
+        vertical: "top",
+        horizontal: "right"
+    }, color = "primary", icon = (0, jsx_runtime_1.jsx)(MoreHoriz_1.default, {}), iconButton = false, PaperProps = drawArrow
+        ? {
+            elevation: 0,
+            sx: {
+                overflow: "visible",
+                filter: "drop-shadow(0px 2px 8px rgba(0,0,0,0.32))",
+                mt: -0.4,
+                "& .MuiAvatar-root": {
+                    width: 32,
+                    height: 32,
+                    ml: -0.5,
+                    mr: 1
+                },
+                "&:before": {
+                    content: '""',
+                    display: "block",
+                    position: "absolute",
+                    top: 0,
+                    right: 14,
+                    width: 10,
+                    height: 10,
+                    bgcolor: "background.paper",
+                    transform: "translateY(-50%) rotate(45deg)",
+                    zIndex: 0
+                }
+            }
+        }
+        : undefined, size, title, transformOrigin = {
+        vertical: "bottom",
+        horizontal: "right"
+    } } = props;
+    // State
+    const [anchorEl, setAnchorEl] = react_1.default.useState();
+    // Open state
+    const open = Boolean(anchorEl);
+    // Handle click
+    const handleClick = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    // Handle close
+    const handleClose = () => {
+        setAnchorEl(undefined);
+    };
+    // No actions
+    if (actions == null || actions.length == 0)
+        return (0, jsx_runtime_1.jsx)(react_1.default.Fragment, {});
+    // Actions
+    const actionsLocal = getActions(actions);
+    // Has any icon
+    const hasIcon = actionsLocal.some((action) => action.icon != null);
+    // Main
+    const main = iconButton ? ((0, jsx_runtime_1.jsx)(material_1.IconButton, { color: color, size: size, title: title, onClick: handleClick, children: icon })) : ((0, jsx_runtime_1.jsx)(material_1.Fab, { color: color, size: size, title: title, onClick: handleClick, children: icon }));
+    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [main, (0, jsx_runtime_1.jsx)(material_1.Menu, { disableScrollLock: true, anchorEl: anchorEl, anchorOrigin: anchorOrigin, keepMounted: true, transformOrigin: transformOrigin, open: open, onClose: handleClose, PaperProps: PaperProps, children: actionsLocal.map(({ label, icon, action }, index) => label === "-" ? ((0, jsx_runtime_1.jsx)(material_1.Divider, {}, index)) : ((0, jsx_runtime_1.jsxs)(material_1.MenuItem, { ...(typeof action === "string"
+                        ? action.includes("://")
+                            ? {
+                                component: "a",
+                                href: action,
+                                target: "_blank"
+                            }
+                            : { component: react_router_1.Link, to: action }
+                        : Array.isArray(action)
+                            ? { component: react_router_1.Link, to: action[0], state: action[1] }
+                            : {
+                                onClick: (event) => {
+                                    handleClose();
+                                    if (typeof action === "function")
+                                        action(event);
+                                }
+                            }), children: [icon != null && (0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: icon }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { inset: icon == null && hasIcon, children: label })] }, label))) })] }));
+}

package/lib/cjs/NotifierMU.js

@@ -0,0 +1,368 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NotifierMU = exports.NotificationMU = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const notificationbase_1 = require("@etsoo/notificationbase");
+const shared_1 = require("@etsoo/shared");
+const material_1 = require("@mui/material");
+const icons_material_1 = require("@mui/icons-material");
+const Close_1 = __importDefault(require("@mui/icons-material/Close"));
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@etsoo/react");
+const DraggablePaperComponent_1 = require("./DraggablePaperComponent");
+const LoadingButton_1 = require("./LoadingButton");
+const Labels_1 = require("./app/Labels");
+// Custom icon dialog title bar
+const IconDialogTitle = (0, material_1.styled)(material_1.DialogTitle, {
+    // Prevent the passing of the draggable prop to the underlying DOM element
+    shouldForwardProp: (prop) => prop !== "draggable"
+}) `
+  ${({ theme, draggable }) => `
+        cursor: ${draggable ? "move" : "default"};
+        display: flex;
+        align-items: center;
+        & .dialogTitle {
+            font-weight: bold;
+            font-size: 1.17em;
+            flex-grow: 3;
+            text-overflow: ellipsis;
+            padding-left: ${theme.spacing(1)};
+        }
+        & .MuiDialogContent-root-close-button {
+            padding-left: ${theme.spacing(1)};
+        }
+    `}
+`;
+/**
+ * MU notification
+ */
+class NotificationMU extends react_2.NotificationReact {
+    // Create alert
+    createAlert(_props, className) {
+        const labels = Labels_1.Labels.NotificationMU;
+        const { buttons, inputs, fullScreen, fullWidth = true, maxWidth, okLabel = labels.alertOK, primaryButton = true, primaryButtonProps, closable = false, draggable = fullScreen === true ? false : true } = this.inputProps ?? {};
+        let title = this.title;
+        let icon;
+        if (this.type === notificationbase_1.NotificationMessageType.Success) {
+            icon = (0, jsx_runtime_1.jsx)(icons_material_1.Done, { color: "primary" });
+            title ??= labels.success;
+        }
+        else if (this.type === notificationbase_1.NotificationMessageType.Info) {
+            icon = (0, jsx_runtime_1.jsx)(icons_material_1.Info, {});
+            title ??= labels.info;
+        }
+        else if (this.type === notificationbase_1.NotificationMessageType.Warning) {
+            icon = (0, jsx_runtime_1.jsx)(icons_material_1.Warning, { color: "secondary" });
+            title ??= labels.warning;
+        }
+        else {
+            icon = (0, jsx_runtime_1.jsx)(icons_material_1.Error, { color: "error" });
+            title ??= labels.alertTitle;
+        }
+        const setupProps = {
+            color: "primary"
+        };
+        // Setup callback
+        const options = this.renderSetup ? this.renderSetup(setupProps) : undefined;
+        // Callback
+        const callback = async (_event) => {
+            await this.returnValue(undefined);
+            return true;
+        };
+        return ((0, jsx_runtime_1.jsxs)(material_1.Dialog, { open: this.open, PaperComponent: draggable ? DraggablePaperComponent_1.DraggablePaperComponent : undefined, className: className, fullWidth: fullWidth, maxWidth: maxWidth, fullScreen: fullScreen, ...options, children: [(0, jsx_runtime_1.jsxs)(IconDialogTitle, { draggable: draggable, className: draggable ? "dialog-title draggable-dialog-title" : "dialog-title", children: [icon, (0, jsx_runtime_1.jsx)("span", { className: "dialogTitle", children: title }), closable && ((0, jsx_runtime_1.jsx)(material_1.IconButton, { className: "MuiDialogContent-root-close-button", size: "small", onClick: () => this.returnValue("CLOSE"), children: (0, jsx_runtime_1.jsx)(Close_1.default, {}) }))] }), (0, jsx_runtime_1.jsxs)(material_1.DialogContent, { children: [typeof this.content === "string" ? ((0, jsx_runtime_1.jsx)(material_1.DialogContentText, { children: this.content })) : (this.content), inputs] }), (0, jsx_runtime_1.jsx)(material_1.DialogActions, { children: buttons
+                        ? buttons(this, callback)
+                        : primaryButton && ((0, jsx_runtime_1.jsx)(LoadingButton_1.LoadingButton, { ...setupProps, onClick: callback, autoFocus: true, ...primaryButtonProps, children: okLabel })) })] }, this.id));
+    }
+    // Create confirm
+    createConfirm(_props, className) {
+        const labels = Labels_1.Labels.NotificationMU;
+        const title = this.title ?? labels.confirmTitle;
+        const { buttons, okLabel = labels.confirmYes, cancelLabel = labels.confirmNo, cancelButton = true, inputs, fullScreen, fullWidth = true, maxWidth, primaryButton = true, primaryButtonProps, closable = false, draggable = fullScreen === true ? false : true } = this.inputProps ?? {};
+        // Setup callback
+        const options = this.renderSetup ? this.renderSetup({}) : undefined;
+        const callback = async (_event, value) => {
+            await this.returnValue(value);
+            return true;
+        };
+        return ((0, jsx_runtime_1.jsxs)(material_1.Dialog, { open: this.open, PaperComponent: draggable ? DraggablePaperComponent_1.DraggablePaperComponent : undefined, className: className, fullWidth: fullWidth, maxWidth: maxWidth, fullScreen: fullScreen, ...options, children: [(0, jsx_runtime_1.jsxs)(IconDialogTitle, { draggable: draggable, className: draggable ? "dialog-title draggable-dialog-title" : "dialog-title", children: [(0, jsx_runtime_1.jsx)(icons_material_1.Help, { color: "action" }), (0, jsx_runtime_1.jsx)("span", { className: "dialogTitle", children: title }), closable && ((0, jsx_runtime_1.jsx)(material_1.IconButton, { className: "MuiDialogContent-root-close-button", size: "small", onClick: () => this.returnValue("CLOSE"), children: (0, jsx_runtime_1.jsx)(Close_1.default, {}) }))] }), (0, jsx_runtime_1.jsxs)(material_1.DialogContent, { children: [typeof this.content === "string" ? ((0, jsx_runtime_1.jsx)(material_1.DialogContentText, { children: this.content })) : (this.content), inputs] }), (0, jsx_runtime_1.jsx)(material_1.DialogActions, { children: buttons ? (buttons(this, callback)) : ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [cancelButton && ((0, jsx_runtime_1.jsx)(LoadingButton_1.LoadingButton, { color: "secondary", onClick: async (event) => await callback(event, false), children: cancelLabel })), primaryButton && ((0, jsx_runtime_1.jsx)(LoadingButton_1.LoadingButton, { color: "primary", onClick: async (event) => await callback(event, true), autoFocus: true, ...primaryButtonProps, children: okLabel }))] })) })] }, this.id));
+    }
+    createMessageColor() {
+        if (this.type === notificationbase_1.NotificationMessageType.Danger)
+            return "error";
+        if (this.type === notificationbase_1.NotificationMessageType.Success)
+            return "success";
+        if (this.type === notificationbase_1.NotificationMessageType.Warning)
+            return "warning";
+        return "info";
+    }
+    // Create message
+    createMessage(props, className) {
+        if (!this.open)
+            return (0, jsx_runtime_1.jsx)(react_1.default.Fragment, {}, this.id);
+        const { closable = false } = props;
+        const setupProps = {
+            severity: this.createMessageColor(),
+            variant: "filled"
+        };
+        // Setup callback
+        const options = this.renderSetup ? this.renderSetup(setupProps) : undefined;
+        return ((0, jsx_runtime_1.jsx)(material_1.Fade, { in: true, children: (0, jsx_runtime_1.jsxs)(material_1.Alert, { ...setupProps, ...options, action: closable ? ((0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "small", onClick: () => this.returnValue("CLOSE"), children: (0, jsx_runtime_1.jsx)(Close_1.default, {}) })) : undefined, onClose: () => this.dismiss(), className: className, children: [this.title && (0, jsx_runtime_1.jsx)(material_1.AlertTitle, { children: this.title }), this.content] }) }, this.id));
+    }
+    // Create prompt
+    createPrompt(_props, className) {
+        const labels = Labels_1.Labels.NotificationMU;
+        const title = this.title ?? labels.promptTitle;
+        const { buttons, cancelLabel = labels.promptCancel, okLabel = labels.promptOK, cancelButton = true, inputs, type, fullScreen, fullWidth = true, maxWidth, primaryButton = true, primaryButtonProps, inputProps, closable = false, draggable = fullScreen === true ? false : true } = this.inputProps ?? {};
+        const inputRef = react_1.default.createRef();
+        const errorRef = react_1.default.createRef();
+        const setError = (error) => {
+            if (errorRef.current == null)
+                return;
+            errorRef.current.innerText = error ?? "";
+        };
+        const handleSubmit = async (event) => {
+            // Result
+            let result = undefined;
+            const input = inputRef.current;
+            if (this.onReturn) {
+                // Inputs case, no HTMLForm set to value, set the current form
+                if (inputs && value == null)
+                    value = event.currentTarget.form;
+                if (input) {
+                    if (type === "switch") {
+                        const boolValue = input.value === "true";
+                        result = this.onReturn(boolValue);
+                    }
+                    else {
+                        const inputValue = shared_1.DomUtils.getInputValue(input);
+                        if ((inputValue == null || inputValue === "") && input.required) {
+                            input.focus();
+                            return false;
+                        }
+                        result = this.onReturn(inputValue);
+                    }
+                }
+                else if (value != null) {
+                    result = this.onReturn(value);
+                }
+            }
+            // Get the value
+            // returns false to prevent default dismiss
+            const v = await result;
+            if (v === false) {
+                input?.focus();
+                return false;
+            }
+            if (typeof v === "string") {
+                setError(v);
+                input?.focus();
+                return false;
+            }
+            this.dismiss();
+            return true;
+        };
+        let localInputs;
+        let value = undefined;
+        if (inputs == null) {
+            if (type === "switch") {
+                localInputs = ((0, jsx_runtime_1.jsx)(material_1.Switch, { inputRef: inputRef, ...inputProps, value: "true", autoFocus: true, required: true }));
+            }
+            else if (type === "slider") {
+                localInputs = (0, jsx_runtime_1.jsx)(material_1.Slider, { onChange: (_e, v) => (value = v) });
+            }
+            else {
+                localInputs = ((0, jsx_runtime_1.jsx)(material_1.TextField, { inputRef: inputRef, onChange: () => setError(undefined), autoFocus: true, margin: "dense", fullWidth: true, type: type, required: true, ...inputProps }));
+            }
+        }
+        else {
+            localInputs = inputs;
+        }
+        // Setup callback
+        const options = this.renderSetup ? this.renderSetup({}) : undefined;
+        return ((0, jsx_runtime_1.jsx)(material_1.Dialog, { open: this.open, PaperComponent: draggable ? DraggablePaperComponent_1.DraggablePaperComponent : undefined, className: className, fullWidth: fullWidth, maxWidth: maxWidth, fullScreen: fullScreen, ...options, children: (0, jsx_runtime_1.jsxs)("form", { onSubmit: (event) => {
+                    event.preventDefault();
+                    event.currentTarget.elements.namedItem("okButton")?.click();
+                    return false;
+                }, children: [(0, jsx_runtime_1.jsxs)(IconDialogTitle, { draggable: draggable, className: draggable ? "dialog-title draggable-dialog-title" : "dialog-title", children: [(0, jsx_runtime_1.jsx)(icons_material_1.Info, { color: "primary" }), (0, jsx_runtime_1.jsx)("span", { className: "dialogTitle", children: title }), closable && ((0, jsx_runtime_1.jsx)(material_1.IconButton, { className: "MuiDialogContent-root-close-button", size: "small", onClick: () => this.returnValue("CLOSE"), children: (0, jsx_runtime_1.jsx)(Close_1.default, {}) }))] }), (0, jsx_runtime_1.jsxs)(material_1.DialogContent, { children: [typeof this.content === "string" ? ((0, jsx_runtime_1.jsx)(material_1.DialogContentText, { children: this.content })) : (this.content), localInputs, (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "caption", display: "block", ref: errorRef, color: "error" })] }), (0, jsx_runtime_1.jsx)(material_1.DialogActions, { children: buttons ? (buttons(this, handleSubmit)) : ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [cancelButton && ((0, jsx_runtime_1.jsx)(material_1.Button, { color: "secondary", onClick: () => {
+                                        if (this.onReturn)
+                                            this.onReturn(undefined);
+                                        this.dismiss();
+                                    }, children: cancelLabel })), primaryButton && ((0, jsx_runtime_1.jsx)(LoadingButton_1.LoadingButton, { color: "primary", autoFocus: true, onClick: handleSubmit, name: "okButton", ...primaryButtonProps, children: okLabel }))] })) })] }) }, this.id));
+    }
+    createPopup(_props, className) {
+        // Destruct
+        // dismiss will trigger onReturn callback
+        const { content, id, open } = this;
+        // Setup callback
+        const options = this.renderSetup ? this.renderSetup({}) : undefined;
+        return ((0, jsx_runtime_1.jsx)(material_1.Popover, { open: open, className: className, onClose: () => this.dismiss(), ...options, children: content }, id));
+    }
+    // Create loading
+    createLoading(_props, className) {
+        // Properties
+        const setupProps = { color: "primary" };
+        const labels = Labels_1.Labels.NotificationMU;
+        // Input props
+        const { maxWidth = "xs" } = this.inputProps ?? {};
+        // Content
+        let content = this.content;
+        if (content === "@")
+            content = labels.loading.toString();
+        // Setup callback
+        const options = this.renderSetup ? this.renderSetup(setupProps) : undefined;
+        return ((0, jsx_runtime_1.jsx)(material_1.Backdrop, { className: className, sx: {
+                color: "#fff",
+                zIndex: (theme) => theme.zIndex.modal + 1
+            }, open: this.open, ...options, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", flexDirection: "column", flexWrap: "nowrap", alignItems: "center", sx: {
+                    "& > :not(style) + :not(style)": {
+                        marginTop: (theme) => theme.spacing(1)
+                    }
+                }, children: [(0, jsx_runtime_1.jsx)(material_1.CircularProgress, { ...setupProps }), content && ((0, jsx_runtime_1.jsx)(material_1.Box, { maxWidth: maxWidth === false ? undefined : maxWidth, children: content }))] }) }, this.id));
+    }
+    /**
+     * Render method
+     * @param props Props
+     * @param className Style class name
+     * @param classes Style classes
+     */
+    render(props, className) {
+        // Loading bar
+        if (this.type === notificationbase_1.NotificationType.Loading) {
+            return this.createLoading(props, className);
+        }
+        else if (this.type === notificationbase_1.NotificationType.Confirm) {
+            return this.createConfirm(props, className);
+        }
+        else if (this.type === notificationbase_1.NotificationType.Prompt) {
+            return this.createPrompt(props, className);
+        }
+        else if (this.type === notificationbase_1.NotificationType.Popup) {
+            return this.createPopup(props, className);
+        }
+        else if (this.type === notificationbase_1.NotificationType.Error ||
+            (this.modal && this.type in notificationbase_1.NotificationMessageType)) {
+            // Alert or modal message
+            return this.createAlert(props, className);
+        }
+        else {
+            return this.createMessage(props, className);
+        }
+    }
+}
+exports.NotificationMU = NotificationMU;
+/**
+ * Antd notifier
+ */
+class NotifierMU extends react_2.NotifierReact {
+    /**
+     * Create state and return provider
+     * @param className Style class name
+     * @param debug Debug mode
+     * @returns Provider
+     */
+    static setup(className, debug = false) {
+        className ??= "notifier-mu";
+        // Create an instance
+        const instance = new NotifierMU();
+        instance.debug = debug;
+        const provider = instance.createProvider(className, debug);
+        react_2.NotifierReact.updateInstance(instance);
+        return provider;
+    }
+    // Calculate origin from align property
+    static getOrigin(align) {
+        if (align === notificationbase_1.NotificationAlign.TopLeft) {
+            return {
+                horizontal: "left",
+                vertical: "top"
+            };
+        }
+        if (align === notificationbase_1.NotificationAlign.TopCenter) {
+            return {
+                horizontal: "center",
+                vertical: "top"
+            };
+        }
+        if (align === notificationbase_1.NotificationAlign.TopRight) {
+            return {
+                horizontal: "right",
+                vertical: "top"
+            };
+        }
+        if (align === notificationbase_1.NotificationAlign.BottomLeft) {
+            return {
+                horizontal: "left",
+                vertical: "bottom"
+            };
+        }
+        if (align === notificationbase_1.NotificationAlign.BottomCenter) {
+            return {
+                horizontal: "center",
+                vertical: "bottom"
+            };
+        }
+        if (align === notificationbase_1.NotificationAlign.BottomRight) {
+            return {
+                horizontal: "right",
+                vertical: "bottom"
+            };
+        }
+        return {
+            horizontal: "center",
+            vertical: "top"
+        };
+    }
+    /**
+     * Create align container
+     * @param align Align
+     * @param children Children
+     * @param options Other options
+     */
+    createContainer = (align, children) => {
+        // Each align group, class equal to something similar to 'align-topleft'
+        const alignText = notificationbase_1.NotificationAlign[align].toLowerCase();
+        let className = `align-${alignText}`;
+        if (children.length === 0) {
+            return (0, jsx_runtime_1.jsx)("div", { className: className }, `empty-${alignText}`);
+        }
+        if (align === notificationbase_1.NotificationAlign.Unknown) {
+            // div container for style control
+            return ((0, jsx_runtime_1.jsx)("div", { className: className, children: children }, `div-${alignText}`));
+        }
+        // Use SnackBar for layout
+        return ((0, jsx_runtime_1.jsx)(material_1.Snackbar, { anchorOrigin: NotifierMU.getOrigin(align), className: className, sx: align === notificationbase_1.NotificationAlign.Center
+                ? { position: "fixed", top: "50%!important" }
+                : undefined, open: true, children: (0, jsx_runtime_1.jsx)(material_1.Box, { display: "flex", flexDirection: "column", flexWrap: "nowrap", sx: {
+                    "& > :not(style) + :not(style)": {
+                        marginTop: (theme) => theme.spacing(1)
+                    }
+                }, children: children }, `box-${alignText}`) }, `layout-${alignText}`));
+    };
+    /**
+     * Add raw definition
+     * @param data Notification data definition
+     * @param modal Show as modal
+     */
+    addRaw(data, modal) {
+        // Destruct
+        const { type, content, title, align, timespan = modal ? 0 : undefined, ...rest } = data;
+        if (this.debug) {
+            console.debug("NotificationMU.addRaw", data);
+        }
+        // Setup
+        const n = new NotificationMU(type, content, title, align, timespan);
+        // Assign other properties
+        Object.assign(n, rest);
+        // Is modal
+        if (modal != null)
+            n.modal = modal;
+        // Add to the collection
+        this.add(n);
+        // Return
+        return n;
+    }
+}
+exports.NotifierMU = NotifierMU;

package/lib/cjs/NotifierPopupProps.js

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

package/lib/cjs/NotifierPromptProps.js

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

package/lib/cjs/NumberInputField.js

@@ -0,0 +1,32 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NumberInputField = NumberInputField;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const InputField_1 = require("./InputField");
+const material_1 = require("@mui/material");
+const shared_1 = require("@etsoo/shared");
+/**
+ * Number input field, for controlled only components, please see IntInputField and MoneyInputField
+ * @param props Props
+ * @returns Component
+ */
+function NumberInputField(props) {
+    const { currency, inputStyle, min = 0, step = 1, symbol = currency
+        ? `${currency} ${shared_1.NumberUtils.getCurrencySymbol(currency)}`
+        : undefined, endSymbol, max = 9999999, InputProps, ...rest } = props;
+    return ((0, jsx_runtime_1.jsx)(InputField_1.InputField, { type: "number", inputProps: {
+            min,
+            step,
+            max,
+            style: inputStyle,
+            inputMode: "numeric"
+        }, InputProps: {
+            startAdornment: symbol ? ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: (0, jsx_runtime_1.jsx)(material_1.InputAdornment, { position: "start", children: symbol }) })) : undefined,
+            endAdornment: endSymbol ? ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, { position: "end", children: endSymbol })) : undefined,
+            ...InputProps
+        }, ...rest }));
+}

package/lib/cjs/OptionBool.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OptionBool = OptionBool;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ReactApp_1 = require("./app/ReactApp");
+const OptionGroup_1 = require("./OptionGroup");
+/**
+ * OptionBool (yes/no)
+ * @param props Props
+ * @returns Component
+ */
+function OptionBool(props) {
+    // Options
+    const options = ReactApp_1.globalApp?.getBools() ?? [];
+    // Layout
+    return ((0, jsx_runtime_1.jsx)(OptionGroup_1.OptionGroup, { options: options, row: true, multiple: false, ...props }));
+}

package/lib/cjs/OptionGroup.js

@@ -0,0 +1,108 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OptionGroup = OptionGroup;
+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"));
+/**
+ * OptionGroup
+ * @param props Props
+ * @returns Component
+ */
+function OptionGroup(props) {
+    // Destruct
+    const { getOptionLabel, defaultValue, idField = "id", label, labelField = "label", multiple = false, mRef, name, onValueChange, options, readOnly, row, itemSize, helperText, variant, required, fullWidth, ...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;
+    };
+    // Checkbox values
+    const [values, setValues] = react_1.default.useState([]);
+    // Values
+    const dv = react_1.default.useMemo(() => defaultValue == null
+        ? []
+        : Array.isArray(defaultValue)
+            ? defaultValue
+            : [defaultValue], [defaultValue]);
+    react_1.default.useEffect(() => {
+        setValues(dv);
+    }, [dv]);
+    // Disabled ids
+    const [disabledIds, setDisabledIds] = react_1.default.useState();
+    // Item checked
+    const itemChecked = (option) => {
+        // Value
+        const value = getOptionValue(option);
+        if (value == null)
+            return false;
+        return values.includes(value);
+    };
+    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);
+        // Control
+        const control = multiple ? ((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 changedValues = [...values];
+                if (event.target.checked) {
+                    if (changedValues.includes(typeValue))
+                        return;
+                    changedValues.push(typeValue);
+                }
+                else {
+                    changedValues.remove(typeValue);
+                }
+                if (onValueChange)
+                    onValueChange(changedValues);
+                setValues(changedValues);
+            } })) : ((0, jsx_runtime_1.jsx)(material_1.Radio, { disabled: disabledIds?.includes(ov), size: itemSize, readOnly: readOnly }));
+        // Label
+        const label = getOptionLabel == null ? `${option[labelField]}` : getOptionLabel(option);
+        // Value, convert to string
+        // Will fail when type is number
+        const value = getOptionValue(option);
+        return ((0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: control, value: value, label: label }, value));
+    });
+    // Group
+    const group = multiple ? ((0, jsx_runtime_1.jsx)(material_1.FormGroup, { row: row, children: list })) : ((0, jsx_runtime_1.jsx)(material_1.RadioGroup, { row: row, name: name, value: values[0] ?? "", onChange: (_event, value) => {
+            if (firstOptionValue == null)
+                return;
+            const typeValue = shared_1.Utils.parseString(value, firstOptionValue);
+            if (onValueChange)
+                onValueChange(typeValue);
+            setValues([typeValue]);
+        }, children: list }));
+    // Layout
+    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.FormControl, { fullWidth: fullWidth, ...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 }))] }));
+}