@etsoo/materialui 1.5.2 → 1.5.3

package/lib/cjs/SwitchAnt.js

@@ -5,10 +5,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SwitchAnt = SwitchAnt;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
-const Switch_1 = __importDefault(require("@mui/material/Switch"));
 const react_1 = __importDefault(require("react"));
 const ReactApp_1 = require("./app/ReactApp");
+const Switch_1 = __importDefault(require("@mui/material/Switch"));
+const Stack_1 = __importDefault(require("@mui/material/Stack"));
+const Typography_1 = __importDefault(require("@mui/material/Typography"));
 /**
  * Ant style switch
  * @param props Props
@@ -36,12 +37,12 @@ function SwitchAnt(props) {
         setControlChecked(checked);
     };
     // Layout
-    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", spacing: 1, alignItems: "center", children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { onClick: () => controlChecked && ref.current?.click(), sx: {
+    return ((0, jsx_runtime_1.jsxs)(Stack_1.default, { direction: "row", spacing: 1, alignItems: "center", children: [(0, jsx_runtime_1.jsx)(Typography_1.default, { onClick: () => controlChecked && ref.current?.click(), sx: {
                     cursor: "pointer",
                     color: controlChecked
                         ? undefined
                         : (theme) => activeColor ?? theme.palette.warning.main
-                }, children: startLabel }), (0, jsx_runtime_1.jsx)(Switch_1.default, { checked: controlChecked, inputRef: ref, value: value, onChange: onChangeLocal, ...rest }), (0, jsx_runtime_1.jsx)(material_1.Typography, { onClick: () => !controlChecked && ref.current?.click(), sx: {
+                }, children: startLabel }), (0, jsx_runtime_1.jsx)(Switch_1.default, { checked: controlChecked, inputRef: ref, value: value, onChange: onChangeLocal, ...rest }), (0, jsx_runtime_1.jsx)(Typography_1.default, { onClick: () => !controlChecked && ref.current?.click(), sx: {
                     cursor: "pointer",
                     color: controlChecked
                         ? (theme) => activeColor ?? theme.palette.warning.main

package/lib/cjs/SwitchField.d.ts

@@ -1,5 +1,5 @@
-import { FormControlProps } from "@mui/material";
 import React from "react";
+import { FormControlProps } from "@mui/material/FormControl";
 /**
  * SwitchField props
  */

package/lib/cjs/SwitchField.js

@@ -5,10 +5,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SwitchField = SwitchField;
 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"));
 const SwitchAnt_1 = require("./SwitchAnt");
+const FormControl_1 = __importDefault(require("@mui/material/FormControl"));
+const InputLabel_1 = __importDefault(require("@mui/material/InputLabel"));
+const Box_1 = __importDefault(require("@mui/material/Box"));
+const FormHelperText_1 = __importDefault(require("@mui/material/FormHelperText"));
 /**
  * SwitchField
  * @param props Props
@@ -22,7 +25,7 @@ function SwitchField(props) {
     // Group
     const group = ((0, jsx_runtime_1.jsx)(SwitchAnt_1.SwitchAnt, { activeColor: activeColor, name: name, startLabel: startLabel, endLabel: endLabel, value: value, checked: checked }));
     // 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: {
+    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsxs)(FormControl_1.default, { fullWidth: fullWidth, ...rest, children: [label && ((0, jsx_runtime_1.jsx)(InputLabel_1.default, { 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,
@@ -32,5 +35,5 @@ function SwitchField(props) {
                             "& 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, { children: helperText })] }));
+                        } })) : ((0, jsx_runtime_1.jsx)(Box_1.default, { paddingLeft: 2, paddingY: "7px", children: group }))] }), helperText && (0, jsx_runtime_1.jsx)(FormHelperText_1.default, { children: helperText })] }));
 }

package/lib/cjs/TabBox.d.ts

@@ -1,4 +1,6 @@
-import { BoxProps, TabProps, TabsProps } from "@mui/material";
+import { BoxProps } from "@mui/material/Box";
+import { TabProps } from "@mui/material/Tab";
+import { TabsProps } from "@mui/material/Tabs";
 import React from "react";
 /**
  * Tab with box panel props

package/lib/cjs/TabBox.js

@@ -6,7 +6,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TabBox = TabBox;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const shared_1 = require("@etsoo/shared");
-const material_1 = require("@mui/material");
+const Box_1 = __importDefault(require("@mui/material/Box"));
+const Tab_1 = __importDefault(require("@mui/material/Tab"));
+const Tabs_1 = __importDefault(require("@mui/material/Tabs"));
 const react_1 = __importDefault(require("react"));
 const react_router_1 = require("react-router");
 /**
@@ -26,9 +28,9 @@ function TabBox(props) {
         setValue(index);
     }, [index]);
     // Layout
-    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [inputName && (0, jsx_runtime_1.jsx)("input", { type: "hidden", name: inputName, value: value }), (0, jsx_runtime_1.jsx)(material_1.Box, { ...root, children: (0, jsx_runtime_1.jsx)(material_1.Tabs, { value: value, onChange: (event, newValue) => {
+    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [inputName && (0, jsx_runtime_1.jsx)("input", { type: "hidden", name: inputName, value: value }), (0, jsx_runtime_1.jsx)(Box_1.default, { ...root, children: (0, jsx_runtime_1.jsx)(Tabs_1.default, { value: value, onChange: (event, newValue) => {
                         setValue(newValue);
                         if (onChange)
                             onChange(event, newValue);
-                    }, ...rest, children: tabs.map(({ children, panelProps, ...tabRest }, index) => ((0, jsx_runtime_1.jsx)(material_1.Tab, { value: index, LinkComponent: tabRest.to ? react_router_1.Link : undefined, ...tabRest }, index))) }) }), tabs.map(({ children, panelProps }, index) => ((0, jsx_runtime_1.jsx)(material_1.Box, { hidden: value !== index, ...tabProps, ...panelProps, children: shared_1.Utils.getResult(children, value === index) }, index)))] }));
+                    }, ...rest, children: tabs.map(({ children, panelProps, ...tabRest }, index) => ((0, jsx_runtime_1.jsx)(Tab_1.default, { value: index, LinkComponent: tabRest.to ? react_router_1.Link : undefined, ...tabRest }, index))) }) }), tabs.map(({ children, panelProps }, index) => ((0, jsx_runtime_1.jsx)(Box_1.default, { hidden: value !== index, ...tabProps, ...panelProps, children: shared_1.Utils.getResult(children, value === index) }, index)))] }));
 }

package/lib/cjs/TableEx.d.ts

@@ -1,7 +1,7 @@
 import { GridColumn, GridLoader, GridMethodRef } from "@etsoo/react";
 import { DataTypes, IdDefaultType } from "@etsoo/shared";
-import { TableProps } from "@mui/material";
 import React from "react";
+import { TableProps } from "@mui/material/Table";
 /**
  * Extended table min width for width-unset column
  */

package/lib/cjs/TableEx.js

@@ -8,9 +8,19 @@ exports.TableEx = TableEx;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@etsoo/react");
 const shared_1 = require("@etsoo/shared");
-const material_1 = require("@mui/material");
 const react_2 = __importDefault(require("react"));
 const DataGridRenderers_1 = require("./DataGridRenderers");
+const Table_1 = __importDefault(require("@mui/material/Table"));
+const styles_1 = require("@mui/material/styles");
+const Paper_1 = __importDefault(require("@mui/material/Paper"));
+const TableContainer_1 = __importDefault(require("@mui/material/TableContainer"));
+const TableHead_1 = __importDefault(require("@mui/material/TableHead"));
+const TableRow_1 = __importDefault(require("@mui/material/TableRow"));
+const TableCell_1 = __importDefault(require("@mui/material/TableCell"));
+const Checkbox_1 = __importDefault(require("@mui/material/Checkbox"));
+const TableSortLabel_1 = __importDefault(require("@mui/material/TableSortLabel"));
+const TableBody_1 = __importDefault(require("@mui/material/TableBody"));
+const TablePagination_1 = __importDefault(require("@mui/material/TablePagination"));
 /**
  * Extended table min width for width-unset column
  */
@@ -22,7 +32,7 @@ exports.TableExMinWidth = 180;
  */
 function TableEx(props) {
     // Theme
-    const theme = (0, material_1.useTheme)();
+    const theme = (0, styles_1.useTheme)();
     // Destruct
     const { alternatingColors = [theme.palette.action.hover, undefined], autoLoad = true, columns, defaultOrderBy, headerColors = [undefined, undefined], idField = "id", loadBatchSize, loadData, maxHeight, mRef, onSelectChange, rowHeight = 53, otherHeight = 110, threshold, ...rest } = props;
     const selectable = onSelectChange != null;
@@ -213,12 +223,12 @@ function TableEx(props) {
         };
     }, []);
     // Layout
-    return ((0, jsx_runtime_1.jsxs)(material_1.Paper, { children: [(0, jsx_runtime_1.jsx)(material_1.TableContainer, { sx: { maxHeight }, children: (0, jsx_runtime_1.jsxs)(material_1.Table, { ...rest, children: [(0, jsx_runtime_1.jsx)(material_1.TableHead, { children: (0, jsx_runtime_1.jsxs)(material_1.TableRow, { sx: {
+    return ((0, jsx_runtime_1.jsxs)(Paper_1.default, { children: [(0, jsx_runtime_1.jsx)(TableContainer_1.default, { sx: { maxHeight }, children: (0, jsx_runtime_1.jsxs)(Table_1.default, { ...rest, children: [(0, jsx_runtime_1.jsx)(TableHead_1.default, { children: (0, jsx_runtime_1.jsxs)(TableRow_1.default, { sx: {
                                     "& th": {
                                         backgroundColor: headerColors[0],
                                         color: headerColors[1]
                                     }
-                                }, children: [selectable && ((0, jsx_runtime_1.jsx)(material_1.TableCell, { padding: "checkbox", children: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { color: "primary", indeterminate: pageSelectedItems > 0 && pageSelectedItems < rows.length, checked: pageSelectedItems > 0, onChange: (_event, checked) => handleSelectAll(checked) }) })), columns.map((column, index) => {
+                                }, children: [selectable && ((0, jsx_runtime_1.jsx)(TableCell_1.default, { padding: "checkbox", children: (0, jsx_runtime_1.jsx)(Checkbox_1.default, { color: "primary", indeterminate: pageSelectedItems > 0 && pageSelectedItems < rows.length, checked: pageSelectedItems > 0, onChange: (_event, checked) => handleSelectAll(checked) }) })), columns.map((column, index) => {
                                         // Destruct
                                         const { align, field, header, minWidth, sortable, sortAsc = true, type, width } = column;
                                         // Header text
@@ -227,7 +237,7 @@ function TableEx(props) {
                                         let sortLabel;
                                         if (sortable && field != null) {
                                             const active = queryPaging.orderBy?.some((o) => o.field.toLowerCase() === field.toLowerCase());
-                                            sortLabel = ((0, jsx_runtime_1.jsx)(material_1.TableSortLabel, { active: active, direction: sortAsc ? "asc" : "desc", onClick: (_event) => {
+                                            sortLabel = ((0, jsx_runtime_1.jsx)(TableSortLabel_1.default, { active: active, direction: sortAsc ? "asc" : "desc", onClick: (_event) => {
                                                     if (active)
                                                         column.sortAsc = !sortAsc;
                                                     handleSort(field, column.sortAsc);
@@ -236,14 +246,14 @@ function TableEx(props) {
                                         else {
                                             sortLabel = headerText;
                                         }
-                                        return ((0, jsx_runtime_1.jsx)(material_1.TableCell, { align: (0, react_1.GridAlignGet)(align, type), width: width, sx: {
+                                        return ((0, jsx_runtime_1.jsx)(TableCell_1.default, { align: (0, react_1.GridAlignGet)(align, type), width: width, sx: {
                                                 minWidth: minWidth == null
                                                     ? width == null
                                                         ? exports.TableExMinWidth
                                                         : undefined
                                                     : minWidth
                                             }, children: sortLabel }, field ?? index.toString()));
-                                    })] }) }), (0, jsx_runtime_1.jsx)(material_1.TableBody, { sx: {
+                                    })] }) }), (0, jsx_runtime_1.jsx)(TableBody_1.default, { sx: {
                                 "& tr:nth-of-type(odd):not(.Mui-selected)": {
                                     backgroundColor: alternatingColors[0]
                                 },
@@ -259,7 +269,7 @@ function TableEx(props) {
                                 const isItemSelected = selectable
                                     ? selectedItems.some((item) => item[idField] === rowId)
                                     : false;
-                                return ((0, jsx_runtime_1.jsxs)(material_1.TableRow, { selected: isItemSelected, children: [selectable && ((0, jsx_runtime_1.jsx)(material_1.TableCell, { padding: "checkbox", children: row && ((0, jsx_runtime_1.jsx)(material_1.Checkbox, { color: "primary", checked: isItemSelected, onChange: (_event, checked) => handleSelect(row, checked) })) })), columns.map(({ align, cellRenderer = DataGridRenderers_1.DataGridRenderers.defaultCellRenderer, field, type, valueFormatter }, columnIndex) => {
+                                return ((0, jsx_runtime_1.jsxs)(TableRow_1.default, { selected: isItemSelected, children: [selectable && ((0, jsx_runtime_1.jsx)(TableCell_1.default, { padding: "checkbox", children: row && ((0, jsx_runtime_1.jsx)(Checkbox_1.default, { color: "primary", checked: isItemSelected, onChange: (_event, checked) => handleSelect(row, checked) })) })), columns.map(({ align, cellRenderer = DataGridRenderers_1.DataGridRenderers.defaultCellRenderer, field, type, valueFormatter }, columnIndex) => {
                                             const formatProps = {
                                                 data: row,
                                                 field,
@@ -283,9 +293,9 @@ function TableEx(props) {
                                                 cellProps,
                                                 setItems
                                             })) : ((0, jsx_runtime_1.jsx)(react_2.default.Fragment, { children: "\u00A0" }));
-                                            return ((0, jsx_runtime_1.jsx)(material_1.TableCell, { ...cellProps, children: child }, `${rowId}${columnIndex}`));
+                                            return ((0, jsx_runtime_1.jsx)(TableCell_1.default, { ...cellProps, children: child }, `${rowId}${columnIndex}`));
                                         })] }, rowId));
-                            }) })] }) }), (0, jsx_runtime_1.jsx)(material_1.TablePagination, { component: "div", showFirstButton: true, count: totalRows, rowsPerPage: batchSize, page: currentPage, onPageChange: handleChangePage, onRowsPerPageChange: handleChangeRowsPerPage, rowsPerPageOptions: [
+                            }) })] }) }), (0, jsx_runtime_1.jsx)(TablePagination_1.default, { component: "div", showFirstButton: true, count: totalRows, rowsPerPage: batchSize, page: currentPage, onPageChange: handleChangePage, onRowsPerPageChange: handleChangeRowsPerPage, rowsPerPageOptions: [
                     batchSize,
                     2 * batchSize,
                     5 * batchSize,

package/lib/cjs/TagList.d.ts

@@ -1,5 +1,5 @@
-import { AutocompleteProps } from "@mui/material";
 import { InputFieldProps } from "./InputField";
+import { AutocompleteProps } from "@mui/material/Autocomplete";
 export type TagListProps = Omit<AutocompleteProps<string, true, false, true>, "open" | "multiple" | "freeSolo" | "options" | "renderInput"> & {
     /**
      * Label

package/lib/cjs/TagList.js

@@ -5,12 +5,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TagList = TagList;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
 const CheckBoxOutlineBlank_1 = __importDefault(require("@mui/icons-material/CheckBoxOutlineBlank"));
 const CheckBox_1 = __importDefault(require("@mui/icons-material/CheckBox"));
 const react_1 = __importDefault(require("react"));
 const InputField_1 = require("./InputField");
 const ReactApp_1 = require("./app/ReactApp");
+const Autocomplete_1 = __importDefault(require("@mui/material/Autocomplete"));
+const Checkbox_1 = __importDefault(require("@mui/material/Checkbox"));
+const Chip_1 = __importDefault(require("@mui/material/Chip"));
 function TagList(props) {
     // Global app
     const app = (0, ReactApp_1.useAppContext)();
@@ -18,7 +20,7 @@ function TagList(props) {
     const { noOptions, loading: loadingLabel, more = "More", open: openDefault } = app?.getLabels("noOptions", "loading", "more", "open") ?? {};
     const moreLabel = more + "...";
     // Destruct
-    const { renderOption = (props, option, { selected }) => ((0, jsx_runtime_1.jsxs)("li", { ...props, children: [(0, jsx_runtime_1.jsx)(material_1.Checkbox, { icon: (0, jsx_runtime_1.jsx)(CheckBoxOutlineBlank_1.default, { fontSize: "small" }), checkedIcon: (0, jsx_runtime_1.jsx)(CheckBox_1.default, { fontSize: "small" }), style: { marginRight: 8 }, checked: selected }), option] })), renderTags = (value, getTagProps) => value.map((option, index) => ((0, jsx_runtime_1.jsx)(material_1.Chip, { variant: "outlined", label: option, ...getTagProps({ index }) }))), noOptionsText = noOptions, loadingText = loadingLabel, openText = openDefault, loadData, maxItems = 16, disableCloseOnSelect = true, openOnFocus = true, label, inputProps, onChange, value, ...rest } = props;
+    const { renderOption = (props, option, { selected }) => ((0, jsx_runtime_1.jsxs)("li", { ...props, children: [(0, jsx_runtime_1.jsx)(Checkbox_1.default, { icon: (0, jsx_runtime_1.jsx)(CheckBoxOutlineBlank_1.default, { fontSize: "small" }), checkedIcon: (0, jsx_runtime_1.jsx)(CheckBox_1.default, { fontSize: "small" }), style: { marginRight: 8 }, checked: selected }), option] })), renderTags = (value, getTagProps) => value.map((option, index) => ((0, jsx_runtime_1.jsx)(Chip_1.default, { variant: "outlined", label: option, ...getTagProps({ index }) }))), noOptionsText = noOptions, loadingText = loadingLabel, openText = openDefault, loadData, maxItems = 16, disableCloseOnSelect = true, openOnFocus = true, label, inputProps, onChange, value, ...rest } = props;
     const [open, setOpen] = react_1.default.useState(false);
     const [options, setOptions] = react_1.default.useState([]);
     const [loading, setLoading] = react_1.default.useState(false);
@@ -42,7 +44,7 @@ function TagList(props) {
         setOptions(result);
         setLoading(false);
     };
-    return ((0, jsx_runtime_1.jsx)(material_1.Autocomplete, { multiple: true, freeSolo: true, filterOptions: (options, _state) => options, open: open, onOpen: () => {
+    return ((0, jsx_runtime_1.jsx)(Autocomplete_1.default, { multiple: true, freeSolo: true, filterOptions: (options, _state) => options, open: open, onOpen: () => {
             setOpen(true);
             if (options.length === 0) {
                 loadDataLocal();

package/lib/cjs/TagListPro.d.ts

@@ -1,6 +1,6 @@
-import { AutocompleteProps } from "@mui/material";
 import { InputFieldProps } from "./InputField";
 import { ListType2 } from "@etsoo/shared";
+import { AutocompleteProps } from "@mui/material/Autocomplete";
 export type TagListProProps<D extends ListType2 = ListType2> = Omit<AutocompleteProps<D, true, false, false>, "open" | "multiple" | "options" | "renderInput"> & {
     /**
      * Label

package/lib/cjs/TagListPro.js

@@ -5,13 +5,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TagListPro = TagListPro;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
 const CheckBoxOutlineBlank_1 = __importDefault(require("@mui/icons-material/CheckBoxOutlineBlank"));
 const CheckBox_1 = __importDefault(require("@mui/icons-material/CheckBox"));
 const react_1 = __importDefault(require("react"));
 const InputField_1 = require("./InputField");
 const shared_1 = require("@etsoo/shared");
 const ReactApp_1 = require("./app/ReactApp");
+const Autocomplete_1 = __importDefault(require("@mui/material/Autocomplete"));
+const Checkbox_1 = __importDefault(require("@mui/material/Checkbox"));
+const Chip_1 = __importDefault(require("@mui/material/Chip"));
 function TagListPro(props) {
     // Global app
     const app = (0, ReactApp_1.useAppContext)();
@@ -20,7 +22,7 @@ function TagListPro(props) {
     const moreLabel = more + "...";
     const getLabel = (item) => shared_1.DataTypes.getListItemLabel(item);
     // Destruct
-    const { renderOption = (props, option, { selected }) => ((0, jsx_runtime_1.jsx)("li", { ...props, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Checkbox, { icon: (0, jsx_runtime_1.jsx)(CheckBoxOutlineBlank_1.default, { fontSize: "small" }), checkedIcon: (0, jsx_runtime_1.jsx)(CheckBox_1.default, { fontSize: "small" }), style: { marginRight: 8 }, checked: selected }), getLabel(option)] }) })), renderTags = (value, getTagProps) => value.map((option, index) => ((0, jsx_runtime_1.jsx)(material_1.Chip, { variant: "outlined", label: getLabel(option), ...getTagProps({ index }) }))), noOptionsText = noOptions, loadingText = loadingLabel, openText = openDefault, loadData, maxItems = 16, disableCloseOnSelect = true, openOnFocus = true, label, inputProps, onChange, value, ...rest } = props;
+    const { renderOption = (props, option, { selected }) => ((0, jsx_runtime_1.jsx)("li", { ...props, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Checkbox_1.default, { icon: (0, jsx_runtime_1.jsx)(CheckBoxOutlineBlank_1.default, { fontSize: "small" }), checkedIcon: (0, jsx_runtime_1.jsx)(CheckBox_1.default, { fontSize: "small" }), style: { marginRight: 8 }, checked: selected }), getLabel(option)] }) })), renderTags = (value, getTagProps) => value.map((option, index) => ((0, jsx_runtime_1.jsx)(Chip_1.default, { variant: "outlined", label: getLabel(option), ...getTagProps({ index }) }))), noOptionsText = noOptions, loadingText = loadingLabel, openText = openDefault, loadData, maxItems = 16, disableCloseOnSelect = true, openOnFocus = true, label, inputProps, onChange, value, ...rest } = props;
     const [open, setOpen] = react_1.default.useState(false);
     const [options, setOptions] = react_1.default.useState([]);
     const [loading, setLoading] = react_1.default.useState(false);
@@ -44,7 +46,7 @@ function TagListPro(props) {
         setOptions(result);
         setLoading(false);
     };
-    return ((0, jsx_runtime_1.jsx)(material_1.Autocomplete, { multiple: true, filterOptions: (options, _state) => options, open: open, onOpen: () => {
+    return ((0, jsx_runtime_1.jsx)(Autocomplete_1.default, { multiple: true, filterOptions: (options, _state) => options, open: open, onOpen: () => {
             setOpen(true);
             if (options.length === 0) {
                 loadDataLocal();

package/lib/cjs/TextFieldEx.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { TextFieldProps } from "@mui/material";
+import { TextFieldProps } from "@mui/material/TextField";
 /**
  * Extended text field props
  */
@@ -49,7 +49,7 @@ export interface TextFieldExMethods {
      */
     setError(error: React.ReactNode): void;
 }
-export declare const TextFieldEx: React.ForwardRefExoticComponent<(Omit<import("@mui/material").StandardTextFieldProps & {
+export declare const TextFieldEx: React.ForwardRefExoticComponent<(Omit<import("@mui/material/TextField").StandardTextFieldProps & {
     /**
      * Change delay (ms) to avoid repeatly dispatch onChange
      */
@@ -84,7 +84,7 @@ export declare const TextFieldEx: React.ForwardRefExoticComponent<(Omit<import("
      * Show password button
      */
     showPassword?: boolean;
-}, "ref"> | Omit<import("@mui/material").OutlinedTextFieldProps & {
+}, "ref"> | Omit<import("@mui/material/TextField").OutlinedTextFieldProps & {
     /**
      * Change delay (ms) to avoid repeatly dispatch onChange
      */
@@ -119,7 +119,7 @@ export declare const TextFieldEx: React.ForwardRefExoticComponent<(Omit<import("
      * Show password button
      */
     showPassword?: boolean;
-}, "ref"> | Omit<import("@mui/material").FilledTextFieldProps & {
+}, "ref"> | Omit<import("@mui/material/TextField").FilledTextFieldProps & {
     /**
      * Change delay (ms) to avoid repeatly dispatch onChange
      */

package/lib/cjs/TextFieldEx.js

@@ -6,12 +6,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextFieldEx = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importDefault(require("react"));
-const material_1 = require("@mui/material");
 const MUGlobal_1 = require("./MUGlobal");
-const icons_material_1 = require("@mui/icons-material");
+const Visibility_1 = __importDefault(require("@mui/icons-material/Visibility"));
+const Clear_1 = __importDefault(require("@mui/icons-material/Clear"));
 const shared_1 = require("@etsoo/shared");
 const react_2 = require("@etsoo/react");
 const ReactApp_1 = require("./app/ReactApp");
+const TextField_1 = __importDefault(require("@mui/material/TextField"));
+const InputAdornment_1 = __importDefault(require("@mui/material/InputAdornment"));
+const IconButton_1 = __importDefault(require("@mui/material/IconButton"));
 exports.TextFieldEx = react_1.default.forwardRef((props, ref) => {
     // Global app
     const app = (0, ReactApp_1.useAppContext)();
@@ -87,7 +90,7 @@ exports.TextFieldEx = react_1.default.forwardRef((props, ref) => {
     };
     // Show password and/or clear button
     if (!empty && (showPassword || showClear)) {
-        InputProps.endAdornment = ((0, jsx_runtime_1.jsxs)(material_1.InputAdornment, { position: "end", children: [showPassword && ((0, jsx_runtime_1.jsx)(material_1.IconButton, { tabIndex: -1, onContextMenu: (event) => event.preventDefault(), onMouseDown: touchStart, onMouseUp: touchEnd, onTouchStart: touchStart, onTouchCancel: touchEnd, onTouchEnd: touchEnd, title: showIt, children: (0, jsx_runtime_1.jsx)(icons_material_1.Visibility, {}) })), showClear && ((0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: clearClick, tabIndex: -1, title: clearLabel, children: (0, jsx_runtime_1.jsx)(icons_material_1.Clear, {}) }))] }));
+        InputProps.endAdornment = ((0, jsx_runtime_1.jsxs)(InputAdornment_1.default, { position: "end", children: [showPassword && ((0, jsx_runtime_1.jsx)(IconButton_1.default, { tabIndex: -1, onContextMenu: (event) => event.preventDefault(), onMouseDown: touchStart, onMouseUp: touchEnd, onTouchStart: touchStart, onTouchCancel: touchEnd, onTouchEnd: touchEnd, title: showIt, children: (0, jsx_runtime_1.jsx)(Visibility_1.default, {}) })), showClear && ((0, jsx_runtime_1.jsx)(IconButton_1.default, { onClick: clearClick, tabIndex: -1, title: clearLabel, children: (0, jsx_runtime_1.jsx)(Clear_1.default, {}) }))] }));
     }
     // Extend key precess
     const onKeyPressEx = onEnter == null
@@ -143,5 +146,5 @@ exports.TextFieldEx = react_1.default.forwardRef((props, ref) => {
         };
     }, []);
     // Textfield
-    return ((0, jsx_runtime_1.jsx)(material_1.TextField, { error: errorEx, fullWidth: fullWidth, helperText: helperTextEx, inputRef: (0, react_2.useCombinedRefs)(inputRef, localRef), InputProps: InputProps, InputLabelProps: InputLabelProps, onChange: onChangeEx, onKeyDown: onKeyPressEx, type: typeEx, variant: variant, ...rest }));
+    return ((0, jsx_runtime_1.jsx)(TextField_1.default, { error: errorEx, fullWidth: fullWidth, helperText: helperTextEx, inputRef: (0, react_2.useCombinedRefs)(inputRef, localRef), InputProps: InputProps, InputLabelProps: InputLabelProps, onChange: onChangeEx, onKeyDown: onKeyPressEx, type: typeEx, variant: variant, ...rest }));
 });

package/lib/cjs/Tiplist.js

@@ -7,11 +7,11 @@ exports.Tiplist = Tiplist;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@etsoo/react");
 const shared_1 = require("@etsoo/shared");
-const material_1 = require("@mui/material");
 const react_2 = __importDefault(require("react"));
 const SearchField_1 = require("./SearchField");
 const InputField_1 = require("./InputField");
 const ReactApp_1 = require("./app/ReactApp");
+const Autocomplete_1 = __importDefault(require("@mui/material/Autocomplete"));
 /**
  * Tiplist
  * @param props Props
@@ -172,7 +172,7 @@ function Tiplist(props) {
         };
     }, []);
     // Layout
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("input", { ref: inputRef, "data-reset": inputReset ?? true, type: "text", style: { display: "none" }, name: name, value: `${inputValue ?? (state.current.idSet ? "" : localIdValue ?? "")}`, readOnly: true, onChange: inputOnChange }), (0, jsx_runtime_1.jsx)(material_1.Autocomplete, { filterOptions: (options, _state) => options, value: states.value, options: states.options, onChange: (event, value, reason, details) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("input", { ref: inputRef, "data-reset": inputReset ?? true, type: "text", style: { display: "none" }, name: name, value: `${inputValue ?? (state.current.idSet ? "" : localIdValue ?? "")}`, readOnly: true, onChange: inputOnChange }), (0, jsx_runtime_1.jsx)(Autocomplete_1.default, { filterOptions: (options, _state) => options, value: states.value, options: states.options, onChange: (event, value, reason, details) => {
                     // Set value
                     setInputValue(value);
                     // Custom

package/lib/cjs/TiplistPro.d.ts

@@ -1,7 +1,7 @@
 import { ListType2 } from "@etsoo/shared";
-import { AutocompleteProps } from "@mui/material";
 import { ChangeEventHandler } from "react";
 import { InputFieldProps } from "./InputField";
+import { AutocompleteProps } from "@mui/material/Autocomplete";
 /**
  * TiplistPro props
  */

package/lib/cjs/TiplistPro.js

@@ -7,10 +7,10 @@ exports.TiplistPro = TiplistPro;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@etsoo/react");
 const shared_1 = require("@etsoo/shared");
-const material_1 = require("@mui/material");
 const react_2 = __importDefault(require("react"));
 const InputField_1 = require("./InputField");
 const ReactApp_1 = require("./app/ReactApp");
+const Autocomplete_1 = __importDefault(require("@mui/material/Autocomplete"));
 /**
  * TiplistPro
  * @param props Props
@@ -158,7 +158,7 @@ function TiplistPro(props) {
         };
     }, []);
     // Layout
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("input", { ref: inputRef, "data-reset": inputReset ?? true, type: "text", style: { display: "none" }, name: name, value: inputValue ?? (state.current.idSet ? "" : localIdValue ?? ""), readOnly: true, onChange: inputOnChange }), (0, jsx_runtime_1.jsx)(material_1.Autocomplete, { filterOptions: (options, _state) => options, value: states.value, options: states.options, freeSolo: true, clearOnBlur: false, onChange: (event, value, reason, details) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("input", { ref: inputRef, "data-reset": inputReset ?? true, type: "text", style: { display: "none" }, name: name, value: inputValue ?? (state.current.idSet ? "" : localIdValue ?? ""), readOnly: true, onChange: inputOnChange }), (0, jsx_runtime_1.jsx)(Autocomplete_1.default, { filterOptions: (options, _state) => options, value: states.value, options: states.options, freeSolo: true, clearOnBlur: false, onChange: (event, value, reason, details) => {
                     if (typeof value === "object") {
                         // Set value
                         setInputValue(value);

package/lib/cjs/TooltipClick.d.ts

@@ -1,4 +1,4 @@
-import { TooltipProps } from "@mui/material";
+import { TooltipProps } from "@mui/material/Tooltip";
 import React from "react";
 /**
  * Tooltip with click visibility props

package/lib/cjs/TooltipClick.js

@@ -6,7 +6,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TooltipClick = TooltipClick;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@etsoo/react");
-const material_1 = require("@mui/material");
+const ClickAwayListener_1 = __importDefault(require("@mui/material/ClickAwayListener"));
+const Tooltip_1 = __importDefault(require("@mui/material/Tooltip"));
 const react_2 = __importDefault(require("react"));
 /**
  * Tooltip with click visibility
@@ -36,7 +37,7 @@ function TooltipClick(props) {
         };
     }, []);
     // Layout
-    return ((0, jsx_runtime_1.jsx)(material_1.ClickAwayListener, { onClickAway: () => setOpen(false), children: (0, jsx_runtime_1.jsx)(material_1.Tooltip, { slotProps: {
+    return ((0, jsx_runtime_1.jsx)(ClickAwayListener_1.default, { onClickAway: () => setOpen(false), children: (0, jsx_runtime_1.jsx)(Tooltip_1.default, { slotProps: {
                 popper: {
                     disablePortal: true
                 }

package/lib/cjs/TwoFieldInput.js

@@ -5,12 +5,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TwoFieldInput = TwoFieldInput;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
 const ArrowRightAlt_1 = __importDefault(require("@mui/icons-material/ArrowRightAlt"));
 const react_1 = require("@etsoo/react");
 const react_2 = __importDefault(require("react"));
 const shared_1 = require("@etsoo/shared");
 const InputField_1 = require("./InputField");
+const InputAdornment_1 = __importDefault(require("@mui/material/InputAdornment"));
+const Input_1 = __importDefault(require("@mui/material/Input"));
 /**
  * TwoField Input
  * @param props Props
@@ -60,10 +61,10 @@ function TwoFieldInput(props) {
     }, [localValues]);
     // Layout
     return ((0, jsx_runtime_1.jsx)(InputField_1.InputField, { name: `${name}-start`, type: type, value: formatValue(localValues[0], type), ref: dimensions[0][0], inputProps: inputProps, InputProps: {
-            endAdornment: ((0, jsx_runtime_1.jsxs)(material_1.InputAdornment, { position: "end", sx: {
+            endAdornment: ((0, jsx_runtime_1.jsxs)(InputAdornment_1.default, { position: "end", sx: {
                     display: "flex",
                     alignItems: "center",
                     gap: 1
-                }, children: [(0, jsx_runtime_1.jsx)(ArrowRightAlt_1.default, {}), (0, jsx_runtime_1.jsx)(material_1.Input, { type: type, name: `${name}-end`, value: formatValue(localValues[1], type), disableUnderline: true, onInput: onInput, onChange: handleChange, inputProps: inputProps })] }))
+                }, children: [(0, jsx_runtime_1.jsx)(ArrowRightAlt_1.default, {}), (0, jsx_runtime_1.jsx)(Input_1.default, { type: type, name: `${name}-end`, value: formatValue(localValues[1], type), disableUnderline: true, onInput: onInput, onChange: handleChange, inputProps: inputProps })] }))
         }, onInput: onInput, onChange: handleChange, ...rest }));
 }

package/lib/cjs/UserAvatar.js

@@ -1,10 +1,13 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.UserAvatar = UserAvatar;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
 const appscript_1 = require("@etsoo/appscript");
 const ReactApp_1 = require("./app/ReactApp");
+const Avatar_1 = __importDefault(require("@mui/material/Avatar"));
 /**
  * User avatar
  * @param props Props
@@ -20,7 +23,7 @@ function UserAvatar(props) {
     // Format
     const fTitle = formatTitle(title);
     const count = fTitle.length;
-    return ((0, jsx_runtime_1.jsx)(material_1.Avatar, { title: title, src: src, sx: {
+    return ((0, jsx_runtime_1.jsx)(Avatar_1.default, { title: title, src: src, sx: {
             width: 48,
             height: 32,
             fontSize: count <= 2 ? "15px" : "12px"

package/lib/cjs/UserAvatarEditor.js

@@ -5,7 +5,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.UserAvatarEditor = UserAvatarEditor;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
 const react_1 = __importDefault(require("react"));
 const RotateLeft_1 = __importDefault(require("@mui/icons-material/RotateLeft"));
 const RotateRight_1 = __importDefault(require("@mui/icons-material/RotateRight"));
@@ -16,6 +15,12 @@ const Remove_1 = __importDefault(require("@mui/icons-material/Remove"));
 const Add_1 = __importDefault(require("@mui/icons-material/Add"));
 const Labels_1 = require("./app/Labels");
 const FileUploadButton_1 = require("./FileUploadButton");
+const Stack_1 = __importDefault(require("@mui/material/Stack"));
+const Skeleton_1 = __importDefault(require("@mui/material/Skeleton"));
+const ButtonGroup_1 = __importDefault(require("@mui/material/ButtonGroup"));
+const Button_1 = __importDefault(require("@mui/material/Button"));
+const IconButton_1 = __importDefault(require("@mui/material/IconButton"));
+const Slider_1 = __importDefault(require("@mui/material/Slider"));
 const defaultSize = 300;
 const defaultState = {
     scale: 1,
@@ -164,6 +169,6 @@ function UserAvatarEditor(props) {
     };
     // Load the component
     const AE = react_1.default.lazy(() => import("react-avatar-editor"));
-    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "column", spacing: 0.5, width: containerWidth, children: [(0, jsx_runtime_1.jsx)(FileUploadButton_1.FileUploadButton, { variant: "outlined", size: "medium", startIcon: (0, jsx_runtime_1.jsx)(Image_1.default, {}), fullWidth: true, onUploadFiles: handleFileUpload, inputProps: { multiple: false, accept: "image/png, image/jpeg" }, children: selectFileLabel }), (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", spacing: 0.5, children: [(0, jsx_runtime_1.jsx)(react_1.default.Suspense, { fallback: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rounded", width: width, height: localHeight }), children: (0, jsx_runtime_1.jsx)(AE, { ref: ref, border: border, width: width, height: localHeight, onLoadSuccess: handleLoad, image: previewImage ??
-                                "data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=", scale: editorState.scale, rotate: editorState.rotate }) }), (0, jsx_runtime_1.jsxs)(material_1.ButtonGroup, { size: "small", orientation: "vertical", disabled: !ready, children: [(0, jsx_runtime_1.jsx)(material_1.Button, { onClick: () => handleRotate(90), title: labels.rotateRight, children: (0, jsx_runtime_1.jsx)(RotateRight_1.default, {}) }), (0, jsx_runtime_1.jsx)(material_1.Button, { onClick: () => handleRotate(-90), title: labels.rotateLeft, children: (0, jsx_runtime_1.jsx)(RotateLeft_1.default, {}) }), (0, jsx_runtime_1.jsx)(material_1.Button, { onClick: handleReset, title: labels.reset, children: (0, jsx_runtime_1.jsx)(ClearAll_1.default, {}) })] })] }), (0, jsx_runtime_1.jsxs)(material_1.Stack, { spacing: 0.5, direction: "row", sx: { paddingBottom: 2 }, alignItems: "center", children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "small", disabled: !ready || editorState.scale <= min, onClick: () => adjustScale(false), children: (0, jsx_runtime_1.jsx)(Remove_1.default, {}) }), (0, jsx_runtime_1.jsx)(material_1.Slider, { title: labels.zoom, disabled: !ready, min: min, max: max, step: step, value: editorState.scale, valueLabelDisplay: "auto", valueLabelFormat: (value) => `${Math.round(100 * value) / 100}`, marks: marks, onChange: handleZoom }), (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "small", disabled: !ready || editorState.scale >= max, onClick: () => adjustScale(true), children: (0, jsx_runtime_1.jsx)(Add_1.default, {}) })] }), (0, jsx_runtime_1.jsx)(material_1.Button, { ref: buttonRef, variant: "contained", startIcon: (0, jsx_runtime_1.jsx)(Done_1.default, {}), disabled: !ready, onClick: handleDone, children: labels.done })] }));
+    return ((0, jsx_runtime_1.jsxs)(Stack_1.default, { direction: "column", spacing: 0.5, width: containerWidth, children: [(0, jsx_runtime_1.jsx)(FileUploadButton_1.FileUploadButton, { variant: "outlined", size: "medium", startIcon: (0, jsx_runtime_1.jsx)(Image_1.default, {}), fullWidth: true, onUploadFiles: handleFileUpload, inputProps: { multiple: false, accept: "image/png, image/jpeg" }, children: selectFileLabel }), (0, jsx_runtime_1.jsxs)(Stack_1.default, { direction: "row", spacing: 0.5, children: [(0, jsx_runtime_1.jsx)(react_1.default.Suspense, { fallback: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { variant: "rounded", width: width, height: localHeight }), children: (0, jsx_runtime_1.jsx)(AE, { ref: ref, border: border, width: width, height: localHeight, onLoadSuccess: handleLoad, image: previewImage ??
+                                "data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=", scale: editorState.scale, rotate: editorState.rotate }) }), (0, jsx_runtime_1.jsxs)(ButtonGroup_1.default, { size: "small", orientation: "vertical", disabled: !ready, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { onClick: () => handleRotate(90), title: labels.rotateRight, children: (0, jsx_runtime_1.jsx)(RotateRight_1.default, {}) }), (0, jsx_runtime_1.jsx)(Button_1.default, { onClick: () => handleRotate(-90), title: labels.rotateLeft, children: (0, jsx_runtime_1.jsx)(RotateLeft_1.default, {}) }), (0, jsx_runtime_1.jsx)(Button_1.default, { onClick: handleReset, title: labels.reset, children: (0, jsx_runtime_1.jsx)(ClearAll_1.default, {}) })] })] }), (0, jsx_runtime_1.jsxs)(Stack_1.default, { spacing: 0.5, direction: "row", sx: { paddingBottom: 2 }, alignItems: "center", children: [(0, jsx_runtime_1.jsx)(IconButton_1.default, { size: "small", disabled: !ready || editorState.scale <= min, onClick: () => adjustScale(false), children: (0, jsx_runtime_1.jsx)(Remove_1.default, {}) }), (0, jsx_runtime_1.jsx)(Slider_1.default, { title: labels.zoom, disabled: !ready, min: min, max: max, step: step, value: editorState.scale, valueLabelDisplay: "auto", valueLabelFormat: (value) => `${Math.round(100 * value) / 100}`, marks: marks, onChange: handleZoom }), (0, jsx_runtime_1.jsx)(IconButton_1.default, { size: "small", disabled: !ready || editorState.scale >= max, onClick: () => adjustScale(true), children: (0, jsx_runtime_1.jsx)(Add_1.default, {}) })] }), (0, jsx_runtime_1.jsx)(Button_1.default, { ref: buttonRef, variant: "contained", startIcon: (0, jsx_runtime_1.jsx)(Done_1.default, {}), disabled: !ready, onClick: handleDone, children: labels.done })] }));
 }

package/lib/cjs/ViewContainer.d.ts

@@ -1,7 +1,8 @@
-import { Breakpoint, Grid2Props } from "@mui/material";
 import React from "react";
 import { DataTypes } from "@etsoo/shared";
 import { GridColumnRenderProps, GridDataType } from "@etsoo/react";
+import { GridProps } from "@mui/material/Grid";
+import { Breakpoint } from "@mui/material/styles";
 /**
  * View page item size
  */
@@ -26,7 +27,7 @@ export type ViewPageRowType = boolean | "default" | "small" | "medium" | "large"
 /**
  * View page grid item properties
  */
-export type ViewPageGridItemProps = Grid2Props & {
+export type ViewPageGridItemProps = GridProps & {
     data: React.ReactNode;
     label?: React.ReactNode;
     singleRow?: ViewPageRowType;
@@ -40,7 +41,7 @@ export declare function ViewPageGridItem(props: ViewPageGridItemProps): import("
 /**
  * View page display field
  */
-export interface ViewPageField<T extends object> extends Grid2Props {
+export interface ViewPageField<T extends object> extends GridProps {
     /**
      * Data field
      */
@@ -91,7 +92,7 @@ export type ViewContainerProps<T extends DataTypes.StringRecord> = {
     /**
      * Left container properties
      */
-    leftContainerProps?: Omit<Grid2Props, "size"> & {
+    leftContainerProps?: Omit<GridProps, "size"> & {
         size?: ViewPageItemSize;
     };
     /**