@etsoo/materialui 1.4.67 → 1.4.69

package/lib/cjs/DataSteps.js

@@ -0,0 +1,93 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataSteps = DataSteps;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const Close_1 = __importDefault(require("@mui/icons-material/Close"));
+const NavigateNext_1 = __importDefault(require("@mui/icons-material/NavigateNext"));
+const NavigateBefore_1 = __importDefault(require("@mui/icons-material/NavigateBefore"));
+const Check_1 = __importDefault(require("@mui/icons-material/Check"));
+const Start_1 = __importDefault(require("@mui/icons-material/Start"));
+const react_1 = __importDefault(require("react"));
+const FlexBox_1 = require("./FlexBox");
+const ReactApp_1 = require("./app/ReactApp");
+const MUGlobal_1 = require("./MUGlobal");
+/**
+ * Data collecting steps component
+ * @param props Props
+ * @returns Component
+ */
+function DataSteps(props) {
+    // App
+    const app = ReactApp_1.globalApp;
+    if (app == null) {
+        throw new Error("No globalApp");
+    }
+    // Labels
+    const labels = app.getLabels("close", "nextStep", "previousStep", "submit");
+    // Destruct
+    const { InputLabelProps = {}, jsonValue, valueFormatter = (_data) => "...", onValueChange, steps, value = "", ...rest } = props;
+    // Shrink
+    InputLabelProps.shrink ??= MUGlobal_1.MUGlobal.searchFieldShrink;
+    // Current index
+    const indexRef = react_1.default.useRef(-1);
+    // Current Json data
+    const jsonRef = react_1.default.useRef(jsonValue);
+    // Ignore empty value case
+    if (jsonValue !== jsonRef.current && valueFormatter(jsonValue))
+        jsonRef.current = jsonValue;
+    // Current value
+    const [localValue, setLocalValue] = react_1.default.useState(value);
+    // Get step
+    const showStep = (index) => {
+        indexRef.current = index;
+        const [{ callback, ...rest }, more] = steps(index, jsonRef.current);
+        app.showInputDialog({
+            ...rest,
+            buttons: (n, callback) => ((0, jsx_runtime_1.jsxs)(FlexBox_1.HBox, { paddingLeft: 2, paddingRight: 2, paddingBottom: 2, gap: 2, justifyContent: "space-between", children: [index === 0 ? ((0, jsx_runtime_1.jsx)(material_1.Button, { variant: "outlined", startIcon: (0, jsx_runtime_1.jsx)(Close_1.default, {}), onClick: () => n.dismiss(), children: labels.close })) : ((0, jsx_runtime_1.jsx)(material_1.Button, { variant: "outlined", startIcon: (0, jsx_runtime_1.jsx)(NavigateBefore_1.default, {}), onClick: () => {
+                            n.dismiss();
+                            showStep(indexRef.current - 1);
+                        }, children: labels.previousStep })), more ? ((0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", startIcon: (0, jsx_runtime_1.jsx)(NavigateNext_1.default, {}), onClick: async (event) => {
+                            const result = await callback(event);
+                            if (!result)
+                                return;
+                            showStep(indexRef.current + 1);
+                        }, children: labels.nextStep })) : ((0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", startIcon: (0, jsx_runtime_1.jsx)(Check_1.default, {}), onClick: async (event) => {
+                            const result = await callback(event);
+                            if (!result)
+                                return;
+                            const value = jsonRef.current;
+                            setLocalValue(valueFormatter(value));
+                            if (onValueChange)
+                                onValueChange(value);
+                        }, children: labels.submit }))] })),
+            callback: (form) => {
+                if (form == null)
+                    return;
+                const result = callback(form);
+                if (result !== true) {
+                    return false;
+                }
+            }
+        });
+    };
+    const cancelInput = (event) => {
+        event.stopPropagation();
+        event.preventDefault();
+    };
+    react_1.default.useEffect(() => {
+        setLocalValue(valueFormatter(jsonRef.current));
+    }, [valueFormatter]);
+    return ((0, jsx_runtime_1.jsx)(material_1.TextField, { autoComplete: "off", InputLabelProps: InputLabelProps, inputProps: { style: { cursor: "pointer" } }, InputProps: {
+            onKeyDown: (event) => {
+                if (event.key === "Tab")
+                    return;
+                cancelInput(event);
+            },
+            onPaste: cancelInput,
+            endAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, { position: "end", children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { edge: "end", size: "small", children: (0, jsx_runtime_1.jsx)(Start_1.default, {}) }) }))
+        }, onClick: () => showStep(0), value: localValue, ...rest }));
+}

package/lib/cjs/DataTable.js

@@ -0,0 +1,52 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataTable = DataTable;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const x_data_grid_1 = require("@mui/x-data-grid");
+const react_1 = __importDefault(require("react"));
+const ReactApp_1 = require("./app/ReactApp");
+/**
+ * Data table
+ * @param props Props
+ * @returns Component
+ */
+function DataTable(props) {
+    // Destructor
+    const { localeText = {}, onCellSelection, onProcessRowUpdateError = (error) => console.log("onProcessRowUpdateError", error), slotProps, ...rest } = props;
+    // Labels
+    const { noRows } = ReactApp_1.globalApp?.getLabels("noRows") ?? {};
+    if (noRows && !localeText.noRowsLabel)
+        localeText.noRowsLabel = noRows;
+    const [cellModesModel, setCellModesModel] = react_1.default.useState({});
+    const handleCellFocus = react_1.default.useCallback((event) => {
+        // event.target is the element that triggered the event
+        // event.currentTarget is the element that the event listener is attached to
+        const cell = event.currentTarget;
+        const row = cell.parentElement;
+        if (row == null)
+            return;
+        const id = row.dataset.id;
+        const index = row.dataset.rowindex;
+        const field = cell.dataset.field;
+        if (id == null || index == null || field == null)
+            return;
+        const params = {
+            id,
+            field,
+            index: parseInt(index)
+        };
+        if (onCellSelection) {
+            if (onCellSelection(params) === false)
+                return;
+        }
+    }, []);
+    return ((0, jsx_runtime_1.jsx)(x_data_grid_1.DataGrid, { disableColumnMenu: true, hideFooter: true, localeText: localeText, cellModesModel: cellModesModel, onCellModesModelChange: (model) => setCellModesModel(model), onProcessRowUpdateError: onProcessRowUpdateError, slotProps: {
+            ...slotProps,
+            cell: {
+                onFocus: handleCellFocus
+            }
+        }, ...rest }));
+}

package/lib/cjs/DialogButton.js

@@ -0,0 +1,43 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DialogButton = DialogButton;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const react_1 = __importDefault(require("react"));
+const Labels_1 = require("./app/Labels");
+/**
+ * Dialog button
+ * @param props Props
+ * @returns Component
+ */
+function DialogButton(props) {
+    // Labels shared with NotificationMU
+    const labels = Labels_1.Labels.NotificationMU;
+    // Destruct
+    const { buttonLabel = labels.alertOK, children, content, contentPre, dialogTitle, disableScrollLock, fullScreen, fullWidth, icon, inputs, maxWidth, onClick, title, ...rest } = props;
+    // Open state
+    const [open, setOpen] = react_1.default.useState(false);
+    const handleClickOpen = () => {
+        setOpen(true);
+    };
+    // Onclick handler
+    const onClickLocal = (event) => {
+        // Stop propagation
+        event.stopPropagation();
+        event.preventDefault();
+        // Show dialog
+        handleClickOpen();
+        // Additional callback
+        if (onClick)
+            onClick(event);
+    };
+    // Layout
+    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [icon == null ? ((0, jsx_runtime_1.jsx)(material_1.Button, { ...rest, title: title, onClick: onClickLocal, children: children })) : ((0, jsx_runtime_1.jsx)(material_1.IconButton, { ...rest, onClick: onClickLocal, title: title ?? children?.toString(), children: icon })), (0, jsx_runtime_1.jsxs)(material_1.Dialog, { disableScrollLock: disableScrollLock, fullScreen: fullScreen, fullWidth: fullWidth, maxWidth: maxWidth, open: open, onClose: () => setOpen(false), onClick: (event) => {
+                    // The dialog will be embeded and the click event will bubble up
+                    // Stop propatation but will also cancel onClose and onBackdropClick event
+                    event.stopPropagation();
+                }, children: [(0, jsx_runtime_1.jsx)(material_1.DialogTitle, { children: dialogTitle ?? title ?? children }), (0, jsx_runtime_1.jsxs)(material_1.DialogContent, { children: [(0, jsx_runtime_1.jsx)(material_1.DialogContentText, { component: contentPre ? "pre" : "span", children: content }), inputs] }), (0, jsx_runtime_1.jsx)(material_1.DialogActions, { children: (0, jsx_runtime_1.jsx)(material_1.Button, { onClick: () => setOpen(false), children: buttonLabel }) })] })] }));
+}

package/lib/cjs/DnDList.js

@@ -0,0 +1,222 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DnDItemStyle = void 0;
+exports.DnDList = DnDList;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const react_1 = __importDefault(require("react"));
+function SortableItem(props) {
+    // Destruct
+    const { id, useSortableType, CSSType, itemRenderer, style = {} } = props;
+    // Use sortable
+    const { attributes, listeners, setNodeRef, transform, transition, setActivatorNodeRef } = useSortableType({ id });
+    const allStyle = {
+        ...style,
+        transform: CSSType.Transform.toString(transform),
+        transition
+    };
+    const nodeRef = {
+        style: allStyle,
+        ref: setNodeRef,
+        ...attributes
+    };
+    const actionNodeRef = {
+        ...listeners,
+        ref: setActivatorNodeRef
+    };
+    return itemRenderer(nodeRef, actionNodeRef);
+}
+/**
+ * DnD item default style
+ * @param index Item index
+ * @param isDragging Is dragging
+ * @param theme Theme
+ * @returns Style
+ */
+const DnDItemStyle = (index, isDragging, theme) => ({
+    padding: theme.spacing(1),
+    zIndex: isDragging ? 1 : "auto",
+    background: isDragging
+        ? theme.palette.primary.light
+        : index % 2 === 0
+            ? theme.palette.grey[100]
+            : theme.palette.grey[50]
+});
+exports.DnDItemStyle = DnDItemStyle;
+/**
+ * DnD (Drag and Drop) sortable list
+ * @param props Props
+ * @returns Component
+ */
+function DnDList(props) {
+    // Destruct
+    const { keyField, height = 360, itemRenderer, labelField, mRef, sortingStrategy, onChange, onFormChange, onDragEnd } = props;
+    // Theme
+    const theme = (0, material_1.useTheme)();
+    // States
+    const [items, setItems] = react_1.default.useState([]);
+    const [activeId, setActiveId] = react_1.default.useState();
+    react_1.default.useEffect(() => {
+        setItems(props.items);
+    }, [props.items]);
+    const doFormChange = react_1.default.useCallback((newItems) => {
+        if (onFormChange)
+            onFormChange(newItems ?? items);
+    }, [items, onFormChange]);
+    const changeItems = react_1.default.useCallback((newItems) => {
+        // Possible to alter items with the handler
+        if (onChange)
+            onChange(newItems);
+        doFormChange(newItems);
+        // Update state
+        setItems(newItems);
+    }, [onChange, doFormChange]);
+    // Methods
+    react_1.default.useImperativeHandle(mRef, () => {
+        return {
+            addItem(newItem) {
+                // Existence check
+                if (items.some((item) => item[labelField] === newItem[labelField])) {
+                    return false;
+                }
+                // Clone
+                const newItems = [newItem, ...items];
+                // Update the state
+                changeItems(newItems);
+                return true;
+            },
+            addItems(inputItems) {
+                // Clone
+                const newItems = [...items];
+                // Insert items
+                inputItems.forEach((newItem) => {
+                    // Existence check
+                    if (newItems.some((item) => item[labelField] === newItem[labelField])) {
+                        return;
+                    }
+                    newItems.push(newItem);
+                });
+                // Update the state
+                changeItems(newItems);
+                return newItems.length - items.length;
+            },
+            editItem(newItem, index) {
+                // Existence check
+                const newIndex = items.findIndex((item) => item[labelField] === newItem[labelField]);
+                if (newIndex >= 0 && newIndex !== index) {
+                    // Label field is the same with a different item
+                    return false;
+                }
+                // Clone
+                const newItems = [...items];
+                // Remove the item
+                newItems.splice(index, 1, newItem);
+                // Update the state
+                changeItems(newItems);
+                return true;
+            },
+            deleteItem(index) {
+                // Clone
+                const newItems = [...items];
+                // Remove the item
+                newItems.splice(index, 1);
+                // Update the state
+                changeItems(newItems);
+            },
+            getItems() {
+                return items;
+            }
+        };
+    }, [items, labelField, changeItems]);
+    // Dynamic import library
+    const [dnd, setDnd] = react_1.default.useState();
+    react_1.default.useEffect(() => {
+        Promise.all([
+            import("@dnd-kit/core"),
+            import("@dnd-kit/sortable"),
+            import("@dnd-kit/utilities")
+        ]).then(([{ DndContext }, { SortableContext, useSortable, rectSortingStrategy, rectSwappingStrategy, horizontalListSortingStrategy, verticalListSortingStrategy }, { CSS }]) => {
+            setDnd([
+                DndContext,
+                SortableContext,
+                useSortable,
+                rectSortingStrategy,
+                rectSwappingStrategy,
+                horizontalListSortingStrategy,
+                verticalListSortingStrategy,
+                CSS
+            ]);
+        });
+    }, []);
+    if (dnd == null) {
+        return (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", width: "100%", height: height });
+    }
+    const [DndContextType, SortableContextType, useSortableType, rectSortingStrategyType, rectSwappingStrategyType, horizontalListSortingStrategyType, verticalListSortingStrategyType, CSSType] = dnd;
+    const strategy = typeof sortingStrategy === "function"
+        ? sortingStrategy()
+        : sortingStrategy === "rect"
+            ? rectSortingStrategyType
+            : sortingStrategy === "rectSwapping"
+                ? rectSwappingStrategyType
+                : sortingStrategy === "horizontal"
+                    ? horizontalListSortingStrategyType
+                    : sortingStrategy === "vertical"
+                        ? verticalListSortingStrategyType
+                        : undefined;
+    let getItemStyle = props.getItemStyle;
+    if (getItemStyle == null) {
+        getItemStyle = (index, isDragging) => (0, exports.DnDItemStyle)(index, isDragging, theme);
+    }
+    // Drag event handlers
+    function handleDragStart(event) {
+        const { active } = event;
+        setActiveId(active.id);
+    }
+    function handleDragEnd(event) {
+        const { active, over } = event;
+        if (over && active.id !== over.id) {
+            // Indices
+            const oldIndex = items.findIndex((item) => item.id === active.id);
+            const newIndex = items.findIndex((item) => item.id === over.id);
+            // Clone
+            const newItems = [...items];
+            // Removed item
+            const [removed] = newItems.splice(oldIndex, 1);
+            // Insert to the destination index
+            newItems.splice(newIndex, 0, removed);
+            changeItems(newItems);
+            // Drag end handler
+            if (onDragEnd)
+                onDragEnd(newItems);
+        }
+        setActiveId(undefined);
+    }
+    const setupDiv = (div) => {
+        // Inputs
+        div
+            .querySelectorAll("input")
+            .forEach((input) => input.addEventListener("change", () => doFormChange()));
+        // Textareas
+        div
+            .querySelectorAll("textarea")
+            .forEach((input) => input.addEventListener("change", () => doFormChange()));
+        // Select
+        div
+            .querySelectorAll("select")
+            .forEach((input) => input.addEventListener("change", () => doFormChange()));
+    };
+    const children = ((0, jsx_runtime_1.jsx)(DndContextType, { onDragStart: handleDragStart, onDragEnd: handleDragEnd, children: (0, jsx_runtime_1.jsx)(SortableContextType, { items: items, strategy: strategy, children: items.map((item, index) => {
+                const id = item[keyField];
+                return ((0, jsx_runtime_1.jsx)(SortableItem, { id: id, useSortableType: useSortableType, CSSType: CSSType, style: getItemStyle(index, id === activeId), itemRenderer: (nodeRef, actionNodeRef) => itemRenderer(item, index, nodeRef, actionNodeRef) }, id));
+            }) }) }));
+    if (onFormChange) {
+        return ((0, jsx_runtime_1.jsx)("div", { style: { width: "100%" }, ref: (div) => {
+                if (div)
+                    setupDiv(div);
+            }, children: children }));
+    }
+    return children;
+}

package/lib/cjs/DraggablePaperComponent.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.DraggablePaperComponent = DraggablePaperComponent;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const react_1 = __importDefault(require("react"));
+const react_draggable_1 = __importDefault(require("react-draggable"));
+/**
+ * Draggable paper component
+ * @param props Props
+ * @returns Component
+ */
+function DraggablePaperComponent(props) {
+    const nodeRef = react_1.default.useRef(null);
+    return ((0, jsx_runtime_1.jsx)(react_draggable_1.default, { handle: ".draggable-dialog-title", cancel: '[class*="MuiDialogContent-root"]', nodeRef: nodeRef, children: (0, jsx_runtime_1.jsx)(material_1.Paper, { ref: nodeRef, ...props }) }));
+}

package/lib/cjs/EmailInput.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EmailInput = EmailInput;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+/**
+ * Email input
+ * @param props Props
+ */
+function EmailInput(props) {
+    // Destruct
+    const { inputProps = {}, ...rest } = props;
+    // Default max length
+    inputProps.maxLength ??= 128;
+    // Layout
+    return (0, jsx_runtime_1.jsx)(material_1.TextField, { type: "email", fullWidth: true, inputProps: inputProps, ...rest });
+}

package/lib/cjs/FabBox.js

@@ -0,0 +1,42 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FabBox = FabBox;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const react_1 = __importDefault(require("react"));
+const initOpactiy = 0.15;
+/**
+ * Fabs container box
+ * @param props Props
+ * @returns Component
+ */
+function FabBox(props) {
+    // Destruct
+    const { columnDirection, fabPanel = columnDirection, itemGap = 1, sx, ...rest } = props;
+    // Theme
+    const theme = (0, material_1.useTheme)();
+    const spaceGap = theme.spacing(itemGap);
+    const [opacity, setOpacity] = react_1.default.useState(initOpactiy);
+    if (columnDirection == null)
+        return (0, jsx_runtime_1.jsx)(react_1.default.Fragment, {});
+    return fabPanel ? ((0, jsx_runtime_1.jsx)(material_1.Paper, { sx: {
+            position: "fixed",
+            display: "flex",
+            alignItems: "center",
+            padding: spaceGap,
+            flexDirection: columnDirection ? "column" : "row",
+            gap: spaceGap,
+            opacity: opacity,
+            ...sx
+        }, onMouseEnter: () => setOpacity(1), onMouseLeave: () => setOpacity(initOpactiy), ...rest })) : ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+            position: "fixed",
+            display: "flex",
+            alignItems: "center",
+            flexDirection: columnDirection ? "column" : "row",
+            gap: spaceGap,
+            ...sx
+        }, ...rest }));
+}

package/lib/cjs/FieldSetEx.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.FieldSetEx = FieldSetEx;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const OutlinedInput_1 = __importDefault(require("@mui/material/OutlinedInput"));
+const react_1 = __importDefault(require("react"));
+/**
+ * FieldSetEx
+ * @param props Props
+ * @returns Component
+ */
+function FieldSetEx(props) {
+    // Destruct
+    const { label, helperText, required, fullWidth, children, ...rest } = props;
+    // 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: "outlined", shrink: true, children: label })), (0, jsx_runtime_1.jsx)(OutlinedInput_1.default, { label: label && required ? label + " *" : label, notched: true, endAdornment: children, sx: {
+                            cursor: "default",
+                            display: "flex",
+                            flexWrap: "wrap",
+                            gap: 1,
+                            paddingX: 2,
+                            paddingY: "7px",
+                            width: fullWidth ? "100%" : "auto",
+                            "& input": {
+                                display: "none"
+                            }
+                        } })] }), helperText && ((0, jsx_runtime_1.jsx)(material_1.FormHelperText, { sx: { marginLeft: 2, marginRight: 2 }, children: helperText }))] }));
+}

package/lib/cjs/FileUploadButton.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FileUploadButton = FileUploadButton;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+/**
+ * File upload button
+ * @param props Props
+ * @returns Component
+ */
+function FileUploadButton(props) {
+    // Destruct
+    const { maxFiles, maxFileSize, inputProps, onFileInvalid, onUploadFiles, children, ...rest } = props;
+    const { onChange } = inputProps ?? {};
+    // Layout
+    return ((0, jsx_runtime_1.jsxs)(material_1.Button, { component: "label", ...rest, children: [children, (0, jsx_runtime_1.jsx)("input", { type: "file", hidden: true, onChange: (event) => {
+                    if (onChange)
+                        onChange(event);
+                    if (event.isDefaultPrevented())
+                        return;
+                    if (onUploadFiles) {
+                        const files = event.target.files;
+                        if (files == null)
+                            return;
+                        const fl = files.length;
+                        if (fl === 0)
+                            return;
+                        if (maxFiles && maxFiles > 0 && fl > maxFiles) {
+                            if (onFileInvalid)
+                                onFileInvalid([maxFiles, fl]);
+                            return;
+                        }
+                        if (maxFileSize && maxFileSize > 0) {
+                            for (let f = 0; f < fl; f++) {
+                                const file = files[f];
+                                if (file.size > maxFileSize) {
+                                    if (onFileInvalid)
+                                        onFileInvalid([maxFileSize, file.size], file);
+                                    return;
+                                }
+                            }
+                        }
+                        onUploadFiles(files);
+                    }
+                }, ...inputProps })] }));
+}

package/lib/cjs/FlexBox.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HBox = HBox;
+exports.VBox = VBox;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+/**
+ * Horizonal box
+ * @param props Props
+ * @returns Component
+ */
+function HBox(props) {
+    return (0, jsx_runtime_1.jsx)(material_1.Stack, { direction: "row", width: "100%", ...props });
+}
+/**
+ * Vertial box
+ * @param props Props
+ * @returns Component
+ */
+function VBox(props) {
+    return (0, jsx_runtime_1.jsx)(material_1.Stack, { direction: "column", ...props });
+}

package/lib/cjs/GridDataCacheType.js

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

package/lib/cjs/GridDataFormat.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GridDataFormat = GridDataFormat;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@etsoo/react");
+const shared_1 = require("@etsoo/shared");
+const DateText_1 = require("./texts/DateText");
+/**
+ * Grid data format
+ * @param data Input data
+ * @param type Data type
+ * @param renderProps Render props
+ * @returns Result
+ */
+function GridDataFormat(data, type, renderProps) {
+    // Null
+    if (data == null)
+        return undefined;
+    // For date time
+    // Conversion if necessary
+    if (type === react_1.GridDataType.Date || type === react_1.GridDataType.DateTime) {
+        const dateValue = data instanceof Date
+            ? data
+            : typeof data === "number" || typeof data === "string"
+                ? new Date(data)
+                : undefined;
+        if (dateValue == null)
+            return undefined;
+        const option = type === react_1.GridDataType.DateTime ? "ds" : "d";
+        const nearDays = renderProps?.nearDays;
+        if (nearDays != null) {
+            return ((0, jsx_runtime_1.jsx)(DateText_1.DateText, { value: dateValue, locale: renderProps?.culture, timeZone: renderProps?.timeZone, options: option, nearDays: nearDays }));
+        }
+        return shared_1.DateUtils.format(dateValue, renderProps?.culture, option, renderProps?.timeZone);
+    }
+    // For numbers
+    if (typeof data === "number") {
+        if (type === react_1.GridDataType.Money || type === react_1.GridDataType.IntMoney)
+            return shared_1.NumberUtils.formatMoney(data, renderProps?.currency, renderProps?.culture, type === react_1.GridDataType.IntMoney, renderProps?.numberFormatOptions);
+        else
+            return shared_1.NumberUtils.format(data, renderProps?.culture, renderProps?.numberFormatOptions);
+    }
+    if (typeof data === "string")
+        return data;
+    return `${data}`;
+}