@etsoo/materialui 1.4.67 → 1.4.69

package/lib/cjs/GridUtils.js

@@ -0,0 +1,90 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GridUtils = void 0;
+const react_1 = require("@etsoo/react");
+/**
+ * Grid utilities
+ */
+var GridUtils;
+(function (GridUtils) {
+    /**
+     * Create data loader
+     * @param props Props
+     * @param template Field template
+     * @param cacheKey Cache key
+     * @param keepSource Keep source or not
+     * @returns Request data
+     */
+    function createLoader(props, template, cacheKey, keepSource) {
+        const { data, ...rest } = props;
+        const formData = (0, react_1.GridDataGetData)(data, template, keepSource);
+        if (cacheKey)
+            sessionStorage.setItem(`${cacheKey}-searchbar`, JSON.stringify(formData));
+        return { ...formData, ...rest };
+    }
+    GridUtils.createLoader = createLoader;
+    /**
+     * Get cache data
+     * @param cacheKey Cache key
+     * @param cacheMinutes Cache minutes
+     * @returns
+     */
+    function getCacheData(cacheKey, cacheMinutes) {
+        const cacheSource = sessionStorage.getItem(cacheKey);
+        if (cacheSource) {
+            const cacheData = JSON.parse(cacheSource);
+            if (new Date().valueOf() - cacheData.creation > cacheMinutes * 60000) {
+                sessionStorage.removeItem(`${cacheKey}-searchbar`);
+                sessionStorage.removeItem(cacheKey);
+                return;
+            }
+            return cacheData;
+        }
+    }
+    GridUtils.getCacheData = getCacheData;
+    /**
+     * Get search data
+     * @param cacheKey Cache key
+     * @returns Result
+     */
+    function getSearchData(cacheKey) {
+        if (cacheKey) {
+            const data = sessionStorage.getItem(`${cacheKey}-searchbar`);
+            if (data) {
+                return JSON.parse(data);
+            }
+        }
+    }
+    GridUtils.getSearchData = getSearchData;
+    /**
+     * Get update rows handler
+     * @param cacheKey Cache key
+     * @returns Handler
+     */
+    function getUpdateRowsHandler(cacheKey) {
+        return (rows, state) => {
+            const page = state.queryPaging.currentPage ?? 0;
+            if (page > 0 && cacheKey) {
+                const data = {
+                    rows,
+                    state,
+                    creation: new Date().valueOf()
+                };
+                sessionStorage.setItem(cacheKey, JSON.stringify(data));
+            }
+        };
+    }
+    GridUtils.getUpdateRowsHandler = getUpdateRowsHandler;
+    /**
+     * Merget search date to state
+     * @param state State
+     * @param searchData Search data
+     */
+    function mergeSearchData(state, searchData) {
+        if (searchData == null)
+            return;
+        state.data ??= {};
+        Object.assign(state.data, searchData);
+    }
+    GridUtils.mergeSearchData = mergeSearchData;
+})(GridUtils || (exports.GridUtils = GridUtils = {}));

package/lib/cjs/HiSelector.js

@@ -0,0 +1,49 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HiSelector = HiSelector;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const react_1 = __importDefault(require("react"));
+const SelectEx_1 = require("./SelectEx");
+/**
+ * Hierarchy selector
+ * @param props Prop
+ * @returns Component
+ */
+function HiSelector(props) {
+    // Destruct
+    const { breakPoints = { xs: 6, md: 4, lg: 3 }, idField = "id", error, helperText, name, label, labelField = "name", labels = ["1", "2", "3", "4"], loadData, onChange, onSelectChange, onItemChange, required, search = true, values = [], variant = "outlined" } = props;
+    const [localValues, setValues] = react_1.default.useState(values);
+    const updateValue = (value) => {
+        if (onChange)
+            onChange(value);
+    };
+    const doChange = (event, index) => {
+        const value = event.target.value;
+        const itemValue = value === "" ? undefined : value;
+        const newValues = [...localValues.slice(0, index)];
+        if (itemValue != null)
+            newValues.push(itemValue);
+        setValues(newValues);
+        if (onSelectChange)
+            onSelectChange(event);
+    };
+    const doItemChange = (option, userAction) => {
+        if (onItemChange == null)
+            return;
+        if (!userAction && (option == null || option[idField] !== values.at(-1)))
+            return;
+        onItemChange(option, userAction);
+    };
+    react_1.default.useEffect(() => {
+        setValues(values);
+    }, [values.toString()]);
+    const currentValue = localValues.at(-1);
+    react_1.default.useEffect(() => {
+        updateValue(currentValue);
+    }, [currentValue]);
+    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [label && ((0, jsx_runtime_1.jsx)(material_1.Grid2, { size: { xs: 12 }, children: (0, jsx_runtime_1.jsx)(material_1.FormLabel, { required: required, sx: { fontSize: (theme) => theme.typography.caption }, children: label }) })), (0, jsx_runtime_1.jsx)("input", { type: "hidden", name: name, value: `${currentValue ?? ""}` }), (0, jsx_runtime_1.jsx)(material_1.Grid2, { size: breakPoints, children: (0, jsx_runtime_1.jsx)(SelectEx_1.SelectEx, { idField: idField, label: labels[0], labelField: labelField, name: "tab1", search: search, fullWidth: true, loadData: () => loadData(), value: values[0], onChange: (event) => doChange(event, 0), onItemChange: doItemChange, required: required, error: error, helperText: helperText, variant: variant }) }), localValues[0] != null && ((0, jsx_runtime_1.jsx)(material_1.Grid2, { size: breakPoints, children: (0, jsx_runtime_1.jsx)(SelectEx_1.SelectEx, { idField: idField, label: labels[1], labelField: labelField, name: "tab2", search: search, fullWidth: true, loadData: () => loadData(localValues[0]), value: values[1], onChange: (event) => doChange(event, 1), onItemChange: doItemChange, variant: variant }, `${localValues[0]}`) })), localValues[1] != null && ((0, jsx_runtime_1.jsx)(material_1.Grid2, { size: breakPoints, children: (0, jsx_runtime_1.jsx)(SelectEx_1.SelectEx, { idField: idField, label: labels[2], labelField: labelField, name: "tab3", search: search, fullWidth: true, loadData: () => loadData(localValues[1]), value: values[2], onChange: (event) => doChange(event, 2), onItemChange: doItemChange, variant: variant }, `${localValues[1]}`) })), localValues[2] != null && ((0, jsx_runtime_1.jsx)(material_1.Grid2, { size: breakPoints, children: (0, jsx_runtime_1.jsx)(SelectEx_1.SelectEx, { idField: idField, label: labels[3], labelField: labelField, name: "tab4", search: search, fullWidth: true, loadData: () => loadData(localValues[2]), value: values[3], onChange: (event) => doChange(event, 3), onItemChange: doItemChange, variant: variant }, `${localValues[2]}`) }))] }));
+}

package/lib/cjs/HiSelectorTL.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.HiSelectorTL = HiSelectorTL;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const react_1 = __importDefault(require("react"));
+const Tiplist_1 = require("./Tiplist");
+/**
+ * Hierarchy tiplist selector
+ * @param props Prop
+ * @returns Component
+ */
+function HiSelectorTL(props) {
+    // Destruct
+    const { breakPoints = { xs: 6, md: 4, lg: 3 }, idField = "id", error, helperText, name, label = name, labels = ["1", "2", "3", "4"], loadData, onChange, onItemChange, required, search = false, values = [] } = props;
+    const [localValues, setValues] = react_1.default.useState(values);
+    const updateValue = (value) => {
+        if (onChange)
+            onChange(value);
+    };
+    const doChange = (index, event, value, reason) => {
+        if (onItemChange) {
+            onItemChange(event, value, reason);
+            if (event.isDefaultPrevented())
+                return;
+        }
+        const newValues = [...localValues.slice(0, index)];
+        if (value)
+            newValues.push(value[idField]);
+        setValues(newValues);
+    };
+    react_1.default.useEffect(() => {
+        setValues(values);
+    }, [values.toString()]);
+    const currentValue = localValues.at(-1);
+    react_1.default.useEffect(() => {
+        updateValue(currentValue);
+    }, [currentValue]);
+    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [label && ((0, jsx_runtime_1.jsx)(material_1.Grid2, { size: { xs: 12 }, children: (0, jsx_runtime_1.jsx)(material_1.FormLabel, { required: required, sx: { fontSize: (theme) => theme.typography.caption }, children: label }) })), (0, jsx_runtime_1.jsx)("input", { type: "hidden", name: name, value: `${currentValue ?? ""}` }), (0, jsx_runtime_1.jsx)(material_1.Grid2, { size: breakPoints, children: (0, jsx_runtime_1.jsx)(Tiplist_1.Tiplist, { idField: idField, label: labels[0], name: "tab1", search: search, fullWidth: true, idValue: values[0], loadData: (keyword, id, items) => loadData(keyword, id, items), inputRequired: required, inputError: error, inputHelperText: helperText, onChange: (event, value, reason) => doChange(0, event, value, reason) }) }), localValues[0] != null && ((0, jsx_runtime_1.jsx)(material_1.Grid2, { size: breakPoints, children: (0, jsx_runtime_1.jsx)(Tiplist_1.Tiplist, { label: labels[1], idField: idField, name: "tab2", search: search, fullWidth: true, loadData: (keyword, id, items) => loadData(keyword, id, items, localValues[0]), idValue: values[1], onChange: (event, value, reason) => doChange(1, event, value, reason) }, `${localValues[0]}`) })), localValues[1] != null && ((0, jsx_runtime_1.jsx)(material_1.Grid2, { size: breakPoints, children: (0, jsx_runtime_1.jsx)(Tiplist_1.Tiplist, { label: labels[2], idField: idField, name: "tab3", search: search, fullWidth: true, loadData: (keyword, id, items) => loadData(keyword, id, items, localValues[1]), idValue: values[2], onChange: (event, value, reason) => doChange(2, event, value, reason) }, `${localValues[1]}`) })), localValues[2] != null && ((0, jsx_runtime_1.jsx)(material_1.Grid2, { size: breakPoints, children: (0, jsx_runtime_1.jsx)(Tiplist_1.Tiplist, { label: labels[3], idField: idField, name: "tab4", search: search, fullWidth: true, loadData: (keyword, id, items) => loadData(keyword, id, items, localValues[2]), idValue: values[3], onChange: (event, value, reason) => doChange(3, event, value, reason) }, `${localValues[2]}`) }))] }));
+}

package/lib/cjs/IconButtonLink.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IconButtonLink = IconButtonLink;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const react_router_1 = require("react-router");
+/**
+ * IconButtonLink
+ * @param props Props
+ * @returns Component
+ */
+function IconButtonLink(props) {
+    // Destruct
+    const { href, state, ...rest } = props;
+    // Navigate
+    const navigate = (0, react_router_1.useNavigate)();
+    // Layout
+    return (0, jsx_runtime_1.jsx)(material_1.IconButton, { ...rest, onClick: () => navigate(href, { state }) });
+}

package/lib/cjs/InputField.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.InputField = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@etsoo/react");
+const material_1 = require("@mui/material");
+const react_2 = __importDefault(require("react"));
+const MUGlobal_1 = require("./MUGlobal");
+/**
+ * Input field
+ * @param props Props
+ * @returns Component
+ */
+exports.InputField = react_2.default.forwardRef((props, ref) => {
+    // Destruct
+    const { changeDelay, InputLabelProps = {}, InputProps = {}, inputProps = {}, onChange, onChangeDelay, readOnly, size = MUGlobal_1.MUGlobal.inputFieldSize, variant = MUGlobal_1.MUGlobal.inputFieldVariant, minChars = 0, ...rest } = props;
+    // Shrink
+    InputLabelProps.shrink ??= MUGlobal_1.MUGlobal.searchFieldShrink;
+    // Read only
+    if (readOnly != null)
+        InputProps.readOnly = readOnly;
+    // Min characters
+    inputProps["data-min-chars"] = minChars;
+    const isMounted = react_2.default.useRef(true);
+    const createDelayed = () => {
+        if (changeDelay != null && changeDelay >= 1) {
+            const changeHandler = onChangeDelay ?? onChange;
+            if (changeHandler)
+                return (0, react_1.useDelayedExecutor)(changeHandler, changeDelay);
+        }
+        return undefined;
+    };
+    const delayed = createDelayed();
+    const onChangeEx = (event) => {
+        // Min characters check
+        const len = event.target.value.length;
+        if (len > 0 && len < minChars)
+            return;
+        if (onChange && (delayed == null || onChangeDelay != null))
+            onChange(event);
+        delayed?.call(undefined, event);
+    };
+    react_2.default.useEffect(() => {
+        return () => {
+            isMounted.current = false;
+            delayed?.clear();
+        };
+    }, []);
+    // Layout
+    return ((0, jsx_runtime_1.jsx)(material_1.TextField, { ref: ref, InputLabelProps: InputLabelProps, InputProps: InputProps, inputProps: inputProps, onChange: onChangeEx, size: size, variant: variant, ...rest }));
+});

package/lib/cjs/InputTipField.js

@@ -0,0 +1,50 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InputTipField = InputTipField;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const Typography_1 = __importDefault(require("@mui/material/Typography"));
+const react_1 = __importDefault(require("react"));
+const ReactApp_1 = require("./app/ReactApp");
+const InputField_1 = require("./InputField");
+/**
+ * InputField with tips
+ * @param props Props
+ * @returns Component
+ */
+function InputTipField(props) {
+    // State
+    const [title, setTitle] = react_1.default.useState();
+    const [anchorEl, setAnchorEl] = react_1.default.useState();
+    const [data, setData] = react_1.default.useState();
+    // Destruct
+    const { labelProps = {
+        title: ReactApp_1.globalApp?.get("clickForDetails"),
+        sx: { color: (theme) => theme.palette.error.main, cursor: "pointer" }
+    }, InputProps = {
+        endAdornment: title ? ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, { position: "end", children: (0, jsx_runtime_1.jsx)(Typography_1.default, { onClick: (event) => {
+                    setAnchorEl(event.currentTarget);
+                }, ...labelProps, children: title }) })) : undefined
+    }, changeDelay = 480, onChangeDelay, loadData, itemLabel = (item) => item.label, renderItem = (item) => (0, jsx_runtime_1.jsx)(material_1.ListItem, { children: itemLabel(item) }, item.id), ...rest } = props;
+    const load = (value) => {
+        if (value.length < 2) {
+            setTitle(undefined);
+            return;
+        }
+        loadData(value).then(([data, title]) => {
+            setData(data);
+            setTitle(title);
+        });
+    };
+    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Popover, { open: anchorEl != null, anchorEl: anchorEl, onClose: () => setAnchorEl(undefined), anchorOrigin: {
+                    vertical: "bottom",
+                    horizontal: "left"
+                }, children: data && (0, jsx_runtime_1.jsx)(material_1.List, { children: data.map((item) => renderItem(item)) }) }), (0, jsx_runtime_1.jsx)(InputField_1.InputField, { changeDelay: changeDelay, onChangeDelay: (event) => {
+                    load(event.target.value);
+                    if (onChangeDelay)
+                        onChangeDelay(event);
+                }, InputProps: InputProps, ...rest })] }));
+}

package/lib/cjs/IntInputField.js

@@ -0,0 +1,116 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IntInputField = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const Add_1 = __importDefault(require("@mui/icons-material/Add"));
+const Remove_1 = __importDefault(require("@mui/icons-material/Remove"));
+const react_1 = __importDefault(require("react"));
+const shared_1 = require("@etsoo/shared");
+const InputField_1 = require("./InputField");
+/**
+ * Integer input field (controlled)
+ */
+exports.IntInputField = react_1.default.forwardRef((props, ref) => {
+    // Destruct
+    const { min = 0, step = 1, max = 9999999, inputStyle = { textAlign: "right" }, boxProps, buttons, endSymbol, symbol, value, changeDelay = 600, onChangeDelay, onChange, onFocus = (event) => event.currentTarget.select(), onValueChange, required, ...rest } = props;
+    // State
+    const [localValue, setLocalValue] = react_1.default.useState();
+    const setValue = (value, source, init = false) => {
+        if (onValueChange) {
+            const newValue = onValueChange(value, source, init);
+            if (newValue === false)
+                return;
+            if (newValue === null) {
+                setLocalValue(undefined);
+                return;
+            }
+            if (newValue === true || newValue === undefined)
+                setLocalValue(value);
+            else
+                setLocalValue(newValue);
+        }
+        else {
+            setLocalValue(value);
+        }
+    };
+    react_1.default.useEffect(() => {
+        setValue(value, undefined, true);
+    }, [value]);
+    // Layout
+    const layout = ((0, jsx_runtime_1.jsx)(InputField_1.InputField, { ref: ref, type: "number", value: localValue == null ? (required ? min : "") : localValue, 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
+        }, sx: buttons
+            ? {
+                "& input[type=number]::-webkit-inner-spin-button": {
+                    WebkitAppearance: "none",
+                    margin: 0
+                },
+                "& input[type=number]::-webkit-outer-spin-button": {
+                    WebkitAppearance: "none",
+                    margin: 0
+                }
+            }
+            : undefined, onChange: (event) => {
+            const source = event.target.value;
+            setLocalValue(source);
+            if (onChange)
+                onChange(event);
+        }, changeDelay: changeDelay, onChangeDelay: (event) => {
+            const source = event.target.value;
+            const value = parseFloat(source);
+            if (isNaN(value))
+                setValue(undefined, source);
+            else if (value > max)
+                setValue(max, source);
+            else if (value < min)
+                setValue(value === 0 ? undefined : min, source);
+            // 0 is a special case
+            else
+                setValue(value, source);
+            if (onChangeDelay)
+                onChangeDelay(event);
+        }, onFocus: onFocus, required: required, ...rest }));
+    if (buttons)
+        return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                display: "flex",
+                alignItems: "center",
+                width: "100%",
+                gap: 0.5,
+                ...boxProps
+            }, children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "small", onClick: () => {
+                        if (localValue == null)
+                            return;
+                        const value = shared_1.NumberUtils.parse(localValue);
+                        if (value == null)
+                            return;
+                        if (value <= min)
+                            setValue(undefined, "SUB");
+                        else
+                            setValue(value - step, "SUB");
+                    }, children: (0, jsx_runtime_1.jsx)(Remove_1.default, {}) }), layout, (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "small", onClick: () => {
+                        if (localValue == null) {
+                            setValue(min, "ADD");
+                            return;
+                        }
+                        const value = shared_1.NumberUtils.parse(localValue);
+                        if (value == null)
+                            return;
+                        if (value >= max)
+                            return;
+                        else
+                            setValue(value + step, "ADD");
+                    }, children: (0, jsx_runtime_1.jsx)(Add_1.default, { color: localValue == null ? undefined : "primary" }) })] }));
+    else
+        return layout;
+});

package/lib/cjs/ItemList.js

@@ -0,0 +1,71 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ItemList = ItemList;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const material_1 = require("@mui/material");
+const shared_1 = require("@etsoo/shared");
+/**
+ * Item list component
+ * @param props Properties
+ */
+function ItemList(props) {
+    //  properties destructure
+    const { buttonLabel, className, color = "primary", keepClick = false, items, idField = "id", labelField = "label", minWidth, icon, onClose, selectedValue, size = "medium", title, variant = "outlined" } = props;
+    // Get label
+    const getLabel = (item) => {
+        if (typeof labelField === "function") {
+            return labelField(item);
+        }
+        else {
+            return shared_1.DataTypes.convert(item[labelField], "string") ?? "";
+        }
+    };
+    // Dialog open or not state
+    const [open, setOpen] = react_1.default.useState(false);
+    // Default state
+    const defaultItem = items.find((item) => item[idField] === selectedValue);
+    // Current item
+    const [currentItem, setCurrentItem] = react_1.default.useState(defaultItem);
+    // Click handler
+    const clickHandler = () => {
+        if (items.length < 1 ||
+            (items.length === 1 && !keepClick && defaultItem != null)) {
+            return;
+        }
+        // Open the dialog
+        setOpen(true);
+    };
+    // Close handler
+    const closeHandler = () => {
+        if (!open)
+            return;
+        // Close the dialog
+        setOpen(false);
+        // Emit close event
+        if (onClose) {
+            onClose(currentItem, false);
+        }
+    };
+    // Close item handler
+    const closeItemHandler = (item) => {
+        if (!keepClick) {
+            // Update the current item
+            setCurrentItem(item);
+        }
+        // Close the dialog
+        setOpen(false);
+        // Emit close event
+        if (onClose) {
+            onClose(item, true);
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { className: className, variant: variant, startIcon: icon, color: color, size: size, onClick: clickHandler, children: buttonLabel ?? (currentItem ? getLabel(currentItem) : undefined) }), (0, jsx_runtime_1.jsxs)(material_1.Dialog, { "aria-labelledby": "dialog-title", open: open, onClose: closeHandler, children: [title && (0, jsx_runtime_1.jsx)(material_1.DialogTitle, { id: "dialog-title", children: title }), (0, jsx_runtime_1.jsx)(material_1.DialogContent, { sx: { minWidth }, children: (0, jsx_runtime_1.jsx)(material_1.List, { children: items.map((item) => {
+                                const id = item[idField];
+                                return ((0, jsx_runtime_1.jsx)(material_1.ListItemButton, { disabled: id === (currentItem ? currentItem[idField] : undefined) &&
+                                        !keepClick, onClick: () => closeItemHandler(item), children: (0, jsx_runtime_1.jsx)(material_1.ListItemText, { children: getLabel(item) }) }, id));
+                            }) }) })] })] }));
+}

package/lib/{LineChart.d.ts → cjs/LineChart.d.ts}

@@ -1,4 +1,4 @@
-import type { ChartData, LineControllerChartOptions } from "chart.js";
+import type { ChartData, LineControllerChartOptions } from "chart.js" with { "resolution-mode": "import" };
 /**
  * Line chart
  */

package/lib/cjs/LineChart.js

@@ -0,0 +1,59 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LineChart = LineChart;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const react_1 = __importDefault(require("react"));
+/**
+ * Line chart
+ * @param props Props
+ * @returns Component
+ */
+function LineChart(props) {
+    // Destruct
+    const { data, options, subtitle, title } = props;
+    // State
+    const [LineType, setLineType] = react_1.default.useState();
+    react_1.default.useEffect(() => {
+        Promise.all([
+            import("react-chartjs-2"),
+            import("chart.js"),
+            import("chartjs-plugin-datalabels")
+        ]).then(([{ Line }, { Chart: ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend }, ChartDataLabels]) => {
+            // https://www.chartjs.org/docs/latest/getting-started/
+            ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend, ChartDataLabels // CommonJS says 'id' is missing
+            );
+            setLineType(Line);
+        });
+    }, []);
+    return LineType == null ? ((0, jsx_runtime_1.jsx)(material_1.LinearProgress, {})) : ((0, jsx_runtime_1.jsx)(LineType, { options: {
+            scales: {
+                x: {
+                    ticks: {
+                        display: false //this will remove only the label
+                    }
+                }
+            },
+            responsive: true,
+            plugins: {
+                datalabels: {
+                    display: (context) => context.dataset.data.length <= 31,
+                    align: "end"
+                },
+                legend: {
+                    position: "top"
+                },
+                subtitle: subtitle ? { text: subtitle, display: true } : undefined,
+                title: title
+                    ? {
+                        text: title,
+                        display: true
+                    }
+                    : undefined
+            },
+            ...options
+        }, data: data }));
+}

package/lib/cjs/ListChooser.js

@@ -0,0 +1,95 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ListChooser = ListChooser;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@etsoo/react");
+const material_1 = require("@mui/material");
+const CheckBox_1 = __importDefault(require("@mui/icons-material/CheckBox"));
+const react_2 = __importDefault(require("react"));
+const FlexBox_1 = require("./FlexBox");
+/**
+ * List chooser
+ * @param props Props
+ * @returns Component
+ */
+function ListChooser(props) {
+    // Selected ids state
+    const [selectedIds, setSelectedIds] = react_2.default.useState([]);
+    const selectProps = (id) => ({
+        selected: selectedIds.includes(id),
+        onClick: () => {
+            if (multiple) {
+                const index = selectedIds.indexOf(id);
+                if (index === -1)
+                    selectedIds.push(id);
+                else
+                    selectedIds.splice(index, 1);
+                setSelectedIds([...selectedIds]);
+            }
+            else {
+                setSelectedIds([id]);
+            }
+        }
+    });
+    // Destruct
+    const { conditionField = "title", conditionRenderer = (rq, delayed) => ((0, jsx_runtime_1.jsx)(material_1.TextField, { autoFocus: true, margin: "dense", name: conditionField, label: title, fullWidth: true, variant: "standard", inputProps: { maxLength: 128 }, onChange: (event) => {
+            Reflect.set(rq, "title", event.target.value);
+            delayed.call();
+        } })), itemRenderer = (item, selectProps) => {
+        const id = item[idField];
+        const sp = selectProps(id);
+        const label = typeof labelField === "function"
+            ? labelField(item)
+            : Reflect.get(item, labelField);
+        return ((0, jsx_runtime_1.jsx)(material_1.ListItem, { disableGutters: true, secondaryAction: sp.selected ? (0, jsx_runtime_1.jsx)(CheckBox_1.default, { fontSize: "small" }) : undefined, children: (0, jsx_runtime_1.jsx)(material_1.ListItemButton, { ...sp, children: (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: label }) }) }, `${id}`));
+    }, idField = "id", labelField = "label", loadData, multiple = false, onItemChange, title, doubleClickEnabled = false, onDoubleClick, ...rest } = props;
+    // Default minimum height
+    rest.sx ??= { minHeight: "220px" };
+    // State
+    const [items, setItems] = react_2.default.useState([]);
+    // Query request data
+    const mounted = react_2.default.useRef(false);
+    const rq = react_2.default.useRef({});
+    // Delayed execution
+    const delayed = (0, react_1.useDelayedExecutor)(async () => {
+        const result = await loadData(rq.current);
+        if (result == null || !mounted.current)
+            return;
+        if (!multiple &&
+            selectedIds.length > 0 &&
+            !result.some((item) => selectedIds.includes(item[idField]))) {
+            setSelectedIds([]);
+        }
+        setItems(result);
+    }, 480);
+    react_2.default.useEffect(() => {
+        if (!mounted.current)
+            return;
+        onItemChange(items.filter((item) => selectedIds.includes(item[idField])), selectedIds);
+    }, [selectedIds]);
+    react_2.default.useEffect(() => {
+        mounted.current = true;
+        delayed.call(0);
+        return () => {
+            mounted.current = false;
+            delayed.clear();
+        };
+    }, [delayed]);
+    const onDoubleClickLocal = (event) => {
+        if (onDoubleClick)
+            onDoubleClick(event);
+        if (doubleClickEnabled) {
+            const button = event.currentTarget
+                .closest("form")
+                ?.elements.namedItem("okButton");
+            if (button) {
+                button.click();
+            }
+        }
+    };
+    // Layout
+    return ((0, jsx_runtime_1.jsxs)(FlexBox_1.VBox, { children: [conditionRenderer(rq.current, delayed), (0, jsx_runtime_1.jsx)(material_1.List, { onDoubleClick: onDoubleClickLocal, disablePadding: true, dense: true, ...rest, children: items.map((item) => itemRenderer(item, selectProps)) })] }));
+}