@etsoo/materialui 1.4.74 → 1.4.76

package/lib/mjs/ButtonPopover.d.ts

@@ -1,3 +1,4 @@
+import { PopoverOrigin } from "@mui/material";
 import React from "react";
 /**
  * Button popover props
@@ -20,6 +21,10 @@ export type ButtonPopoverProps<T> = {
      * @returns Data promise
      */
     loadData?: () => Promise<T | undefined>;
+    /**
+     * Position
+     */
+    position?: PopoverOrigin["horizontal"];
 };
 /**
  * Button popover component

package/lib/mjs/ButtonPopover.js

@@ -8,7 +8,7 @@ import React from "react";
  */
 export function ButtonPopover(props) {
     // Destruct
-    const { button, children, loadData } = props;
+    const { button, children, loadData, position = "right" } = props;
     // States
     const [anchorEl, setAnchorEl] = React.useState(null);
     const [data, setData] = React.useState(null);
@@ -31,8 +31,9 @@ export function ButtonPopover(props) {
     const handleClose = () => {
         setAnchorEl(null);
     };
+    const styles = position === "left" ? { left: 14 } : { right: 14 };
     // Layout
-    return (_jsxs(React.Fragment, { children: [button((handler) => setAnchorEl(handler)), _jsx(Popover, { anchorEl: anchorEl, open: open, onClose: handleClose, onClick: handleClose, transformOrigin: { horizontal: "right", vertical: "top" }, anchorOrigin: { horizontal: "right", vertical: "bottom" }, slotProps: {
+    return (_jsxs(React.Fragment, { children: [button((handler) => setAnchorEl(handler)), _jsx(Popover, { anchorEl: anchorEl, open: open, onClose: handleClose, onClick: handleClose, transformOrigin: { horizontal: position, vertical: "top" }, anchorOrigin: { horizontal: position, vertical: "bottom" }, slotProps: {
                     paper: {
                         elevation: 0,
                         sx: {
@@ -44,12 +45,12 @@ export function ButtonPopover(props) {
                                 display: "block",
                                 position: "absolute",
                                 top: 0,
-                                right: 14,
                                 width: 10,
                                 height: 10,
                                 bgcolor: "background.paper",
                                 transform: "translateY(-50%) rotate(45deg)",
-                                zIndex: 0
+                                zIndex: 0,
+                                ...styles
                             }
                         }
                     }

package/lib/mjs/ComboBox.js

@@ -7,15 +7,17 @@ import { ReactUtils } from "@etsoo/react";
 import AddIcon from "@mui/icons-material/Add";
 import { SearchField } from "./SearchField";
 import { InputField } from "./InputField";
-import { globalApp } from "./app/ReactApp";
+import { useAppContext } from "./app/ReactApp";
 /**
  * ComboBox
  * @param props Props
  * @returns Component
  */
 export function ComboBox(props) {
+    // Global app
+    const app = useAppContext();
     // Labels
-    const labels = globalApp?.getLabels("noOptions", "loading", "open", "add");
+    const labels = app?.getLabels("noOptions", "loading", "open", "add");
     // Destruct
     const { search = false, autoAddBlankItem = search, idField = "id", idValue, inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputReset, inputVariant, defaultValue, label, labelField = "label", loadData, onLoadData, name, inputAutoComplete = "off", options, dataReadonly = true, readOnly, onChange, onValueChange, openOnFocus = true, value, disableCloseOnSelect = false, getOptionLabel = (option) => `${option[labelField]}`, sx = { minWidth: "150px", flexGrow: 2 }, noOptionsText = labels?.noOptions, loadingText = labels?.loading, openText = labels?.open, addLabel = labels?.add, onAdd, getOptionKey = (option) => `${option[idField]}`, ...rest } = props;
     // Value input ref

package/lib/mjs/ComboBoxMultiple.js

@@ -8,7 +8,7 @@ import CheckBoxOutlineBlankIcon from "@mui/icons-material/CheckBoxOutlineBlank";
 import CheckBoxIcon from "@mui/icons-material/CheckBox";
 import { SearchField } from "./SearchField";
 import { InputField } from "./InputField";
-import { globalApp } from "./app/ReactApp";
+import { useAppContext } from "./app/ReactApp";
 const icon = _jsx(CheckBoxOutlineBlankIcon, { fontSize: "small" });
 const checkedIcon = _jsx(CheckBoxIcon, { fontSize: "small" });
 /**
@@ -17,8 +17,10 @@ const checkedIcon = _jsx(CheckBoxIcon, { fontSize: "small" });
  * @returns Component
  */
 export function ComboBoxMultiple(props) {
+    // Global app
+    const app = useAppContext();
     // Labels
-    const labels = globalApp?.getLabels("noOptions", "loading");
+    const labels = app?.getLabels("noOptions", "loading");
     // Destruct
     const { search = false, autoAddBlankItem = search, idField = "id", idValue, idValues, inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputReset, inputVariant, defaultValue, label, labelField = "label", loadData, onLoadData, name, inputAutoComplete = "off", options, dataReadonly = true, readOnly, onChange, openOnFocus = true, value, disableCloseOnSelect = true, renderOption = (props, option, { selected }) => (_jsxs("li", { ...props, children: [_jsx(Checkbox, { icon: icon, checkedIcon: checkedIcon, style: { marginRight: 8 }, checked: selected }), `${option[labelField]}`] })), getOptionLabel = (option) => `${option[labelField]}`, sx = { minWidth: "150px" }, noOptionsText = labels?.noOptions, loadingText = labels?.loading, ...rest } = props;
     // Value input ref

package/lib/mjs/ComboBoxPro.js

@@ -1,12 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Autocomplete } from "@mui/material";
 import React from "react";
-import { globalApp } from "./app/ReactApp";
 import { InputField } from "./InputField";
 import { DataTypes } from "@etsoo/shared";
+import { useAppContext } from "./app/ReactApp";
 export function ComboBoxPro(props) {
+    // Global app
+    const app = useAppContext();
     // Labels
-    const { noOptions, loading: loadingLabel, open: openDefault } = globalApp?.getLabels("noOptions", "loading", "open") ?? {};
+    const { noOptions, loading: loadingLabel, open: openDefault } = app?.getLabels("noOptions", "loading", "open") ?? {};
     // Destruct
     const { noOptionsText = noOptions, loadingText = loadingLabel, openText = openDefault, options, openOnFocus = true, label, inputProps, name, value, idValue, onChange, onValueChange, ...rest } = props;
     const [open, setOpen] = React.useState(false);

package/lib/mjs/CultureDataTable.js

@@ -1,15 +1,17 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { DataTable } from "./DataTable";
 import React from "react";
-import { globalApp } from "./app/ReactApp";
+import { useAppContext } from "./app/ReactApp";
 /**
  * Culture DataTable
  * @param props Props
  * @returns Component
  */
 export function CultureDataTable(props) {
+    // Global app
+    const app = useAppContext();
     // Destruct
-    const { cultures, cultureLabel = globalApp?.get("culture"), editable = true, titleLabel, hasDescription = false, descriptionLabel = globalApp?.get("description"), ...rest } = props;
+    const { cultures, cultureLabel = app?.get("culture"), editable = true, titleLabel, hasDescription = false, descriptionLabel = app?.get("description"), ...rest } = props;
     const getCultureLabel = React.useCallback((value) => cultures.find((c) => c.id == value.id)?.label ?? `${value.value}`, [cultures]);
     return (_jsx(DataTable, { columns: [
             {

package/lib/mjs/DataSteps.js

@@ -7,19 +7,16 @@ import CheckIcon from "@mui/icons-material/Check";
 import StartIcon from "@mui/icons-material/Start";
 import React from "react";
 import { HBox } from "./FlexBox";
-import { globalApp } from "./app/ReactApp";
 import { MUGlobal } from "./MUGlobal";
+import { useRequiredAppContext } from "./app/ReactApp";
 /**
  * Data collecting steps component
  * @param props Props
  * @returns Component
  */
 export function DataSteps(props) {
-    // App
-    const app = globalApp;
-    if (app == null) {
-        throw new Error("No globalApp");
-    }
+    // Global app
+    const app = useRequiredAppContext();
     // Labels
     const labels = app.getLabels("close", "nextStep", "previousStep", "submit");
     // Destruct

package/lib/mjs/DataTable.js

@@ -1,17 +1,19 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { DataGrid } from "@mui/x-data-grid";
 import React from "react";
-import { globalApp } from "./app/ReactApp";
+import { useAppContext } from "./app/ReactApp";
 /**
  * Data table
  * @param props Props
  * @returns Component
  */
 export function DataTable(props) {
+    // Global app
+    const app = useAppContext();
     // Destructor
     const { localeText = {}, onCellSelection, onProcessRowUpdateError = (error) => console.log("onProcessRowUpdateError", error), slotProps, ...rest } = props;
     // Labels
-    const { noRows } = globalApp?.getLabels("noRows") ?? {};
+    const noRows = app?.get("noRows");
     if (noRows && !localeText.noRowsLabel)
         localeText.noRowsLabel = noRows;
     const [cellModesModel, setCellModesModel] = React.useState({});

package/lib/mjs/InputField.d.ts

@@ -26,7 +26,7 @@ export type InputFieldProps = TextFieldProps & {
  * @param props Props
  * @returns Component
  */
-export declare const InputField: React.ForwardRefExoticComponent<(Omit<import("@mui/material").OutlinedTextFieldProps & {
+export declare const InputField: React.ForwardRefExoticComponent<(Omit<import("@mui/material").StandardTextFieldProps & {
     /**
      * Change delay (ms) to avoid repeatly dispatch onChange
      */
@@ -43,7 +43,7 @@ export declare const InputField: React.ForwardRefExoticComponent<(Omit<import("@
      * Minimum characters to trigger the change event
      */
     minChars?: number;
-}, "ref"> | Omit<import("@mui/material").FilledTextFieldProps & {
+}, "ref"> | Omit<import("@mui/material").OutlinedTextFieldProps & {
     /**
      * Change delay (ms) to avoid repeatly dispatch onChange
      */
@@ -60,7 +60,7 @@ export declare const InputField: React.ForwardRefExoticComponent<(Omit<import("@
      * Minimum characters to trigger the change event
      */
     minChars?: number;
-}, "ref"> | Omit<import("@mui/material").StandardTextFieldProps & {
+}, "ref"> | Omit<import("@mui/material").FilledTextFieldProps & {
     /**
      * Change delay (ms) to avoid repeatly dispatch onChange
      */

package/lib/mjs/InputTipField.js

@@ -2,27 +2,26 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { InputAdornment, List, ListItem, Popover } from "@mui/material";
 import Typography from "@mui/material/Typography";
 import React from "react";
-import { globalApp } from "./app/ReactApp";
 import { InputField } from "./InputField";
+import { useAppContext } from "./app/ReactApp";
 /**
  * InputField with tips
  * @param props Props
  * @returns Component
  */
 export function InputTipField(props) {
+    // Global app
+    const app = useAppContext();
     // State
     const [title, setTitle] = React.useState();
     const [anchorEl, setAnchorEl] = React.useState();
     const [data, setData] = React.useState();
     // Destruct
     const { labelProps = {
-        title: globalApp?.get("clickForDetails"),
+        title: app?.get("clickForDetails"),
         sx: { color: (theme) => theme.palette.error.main, cursor: "pointer" }
-    }, InputProps = {
-        endAdornment: title ? (_jsx(InputAdornment, { position: "end", children: _jsx(Typography, { onClick: (event) => {
-                    setAnchorEl(event.currentTarget);
-                }, ...labelProps, children: title }) })) : undefined
-    }, changeDelay = 480, onChangeDelay, loadData, itemLabel = (item) => item.label, renderItem = (item) => _jsx(ListItem, { children: itemLabel(item) }, item.id), ...rest } = props;
+    }, changeDelay = 480, onChangeDelay, loadData, itemLabel = (item) => item.label, renderItem = (item) => _jsx(ListItem, { children: itemLabel(item) }, item.id), slotProps = {}, ...rest } = props;
+    const { input, ...slotRests } = slotProps;
     const load = (value) => {
         if (value.length < 2) {
             setTitle(undefined);
@@ -40,5 +39,13 @@ export function InputTipField(props) {
                     load(event.target.value);
                     if (onChangeDelay)
                         onChangeDelay(event);
-                }, InputProps: InputProps, ...rest })] }));
+                }, slotProps: {
+                    input: {
+                        endAdornment: title ? (_jsx(InputAdornment, { position: "end", children: _jsx(Typography, { onClick: (event) => {
+                                    setAnchorEl(event.currentTarget);
+                                }, ...labelProps, children: title }) })) : undefined,
+                        ...input
+                    },
+                    ...slotRests
+                }, ...rest })] }));
 }

package/lib/mjs/ListMoreDisplay.js

@@ -3,15 +3,17 @@ import { Card, CardActions, CardContent, CardHeader, CircularProgress } from "@m
 import React from "react";
 import { GridDataGet } from "@etsoo/react";
 import { LoadingButton } from "./LoadingButton";
-import { globalApp } from "./app/ReactApp";
+import { useAppContext } from "./app/ReactApp";
 /**
  * ListMoreDisplay
  * @param props Props
  * @returns Component
  */
 export function ListMoreDisplay(props) {
+    // Global app
+    const app = useAppContext();
     // Destruct
-    const { batchSize = 6, children, defaultOrderBy, headerRenderer, autoLoad = headerRenderer == null, headerTitle, loadBatchSize, loadData, moreLabel = globalApp ? globalApp.get("more") + "..." : undefined, fieldTemplate, threshold, ...rest } = props;
+    const { batchSize = 6, children, defaultOrderBy, headerRenderer, autoLoad = headerRenderer == null, headerTitle, loadBatchSize, loadData, moreLabel = app?.get("more1"), fieldTemplate, threshold, ...rest } = props;
     // Refs
     const refs = React.useRef({
         queryPaging: {

package/lib/mjs/OptionBool.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { globalApp } from "./app/ReactApp";
+import { useAppContext } from "./app/ReactApp";
 import { OptionGroup } from "./OptionGroup";
 /**
  * OptionBool (yes/no)
@@ -7,8 +7,10 @@ import { OptionGroup } from "./OptionGroup";
  * @returns Component
  */
 export function OptionBool(props) {
+    // Global app
+    const app = useAppContext();
     // Options
-    const options = globalApp?.getBools() ?? [];
+    const options = app?.getBools() ?? [];
     // Layout
     return (_jsx(OptionGroup, { options: options, row: true, multiple: false, ...props }));
 }

package/lib/mjs/QuickList.js

@@ -3,16 +3,18 @@ import { DataTypes } from "@etsoo/shared";
 import { LinearProgress, List, ListItem, ListItemButton, Typography } from "@mui/material";
 import React from "react";
 import { InputField } from "./InputField";
-import { globalApp } from "./app/ReactApp";
 import { VBox } from "./FlexBox";
+import { useAppContext } from "./app/ReactApp";
 /**
  * Quick list
  * @param props Props
  * @returns Component
  */
 export function QuickList(props) {
+    // Global app
+    const app = useAppContext();
     // Destruct
-    const { buttonProps = {}, label, inputProps, itemLabel = DataTypes.getListItemLabel, itemRenderer = (item) => itemLabel(item), itemProps, loadData, noMatchesLabel = globalApp?.get("noMatches"), gap = 1, height = "480px", onItemClick, ...rest } = props;
+    const { buttonProps = {}, label, inputProps, itemLabel = DataTypes.getListItemLabel, itemRenderer = (item) => itemLabel(item), itemProps, loadData, noMatchesLabel = app?.get("noMatches"), gap = 1, height = "480px", onItemClick, ...rest } = props;
     const { onClick, ...buttonRest } = buttonProps;
     // States
     const [loading, setLoading] = React.useState(false);

package/lib/mjs/SelectBool.js

@@ -1,17 +1,19 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Utils } from "@etsoo/shared";
-import { globalApp } from "./app/ReactApp";
 import { SelectEx } from "./SelectEx";
+import { useAppContext } from "./app/ReactApp";
 /**
  * SelectBool (yes/no)
  * @param props Props
  * @returns Component
  */
 export function SelectBool(props) {
+    // Global app
+    const app = useAppContext();
     // Destruct
     const { search = true, autoAddBlankItem = search, ...rest } = props;
     // Options
-    const options = globalApp?.getBools() ?? [];
+    const options = app?.getBools() ?? [];
     if (autoAddBlankItem)
         Utils.addBlankItem(options);
     // Layout

package/lib/mjs/ShowDataComparison.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { NotificationMessageType } from "@etsoo/notificationbase";
 import { Utils } from "@etsoo/shared";
 import { Table, TableBody, TableCell, TableHead, TableRow } from "@mui/material";
-import { globalApp } from "./app/ReactApp";
+import { useRequiredAppContext } from "./app/ReactApp";
 /**
  * Check obj is instance of AuditLineChangesDto
  * @param obj Input
@@ -31,11 +31,8 @@ const formatValue = (value, app) => {
  * @param equalCheck Equal check for properties
  */
 export const ShowDataComparison = (data, modelTitle, getLabel, equalCheck = true) => {
-    // Validate app
-    const app = globalApp;
-    if (app == null) {
-        throw new Error("No globalApp");
-    }
+    // Global app
+    const app = useRequiredAppContext();
     // Labels
     const { dataComparison, field, newValue, oldValue } = app.getLabels("dataComparison", "field", "newValue", "oldValue");
     modelTitle ??= dataComparison;

package/lib/mjs/SwitchAnt.js

@@ -2,15 +2,17 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Stack, Typography } from "@mui/material";
 import Switch from "@mui/material/Switch";
 import React from "react";
-import { globalApp } from "./app/ReactApp";
+import { useAppContext } from "./app/ReactApp";
 /**
  * Ant style switch
  * @param props Props
  * @returns Component
  */
 export function SwitchAnt(props) {
+    // Global app
+    const app = useAppContext();
     // Labels
-    const { yes = "Yes", no = "No" } = globalApp?.getLabels("yes", "no") ?? {};
+    const { yes = "Yes", no = "No" } = app?.getLabels("yes", "no") ?? {};
     // Destruct
     const { activeColor, checked, defaultChecked, defaultValue, endLabel = yes, startLabel = no, onChange, value = "true", ...rest } = props;
     // Checked state

package/lib/mjs/TagList.js

@@ -4,10 +4,12 @@ import CheckBoxOutlineBlankIcon from "@mui/icons-material/CheckBoxOutlineBlank";
 import CheckBoxIcon from "@mui/icons-material/CheckBox";
 import React from "react";
 import { InputField } from "./InputField";
-import { globalApp } from "./app/ReactApp";
+import { useAppContext } from "./app/ReactApp";
 export function TagList(props) {
+    // Global app
+    const app = useAppContext();
     // Labels
-    const { noOptions, loading: loadingLabel, more = "More", open: openDefault } = globalApp?.getLabels("noOptions", "loading", "more", "open") ?? {};
+    const { noOptions, loading: loadingLabel, more = "More", open: openDefault } = app?.getLabels("noOptions", "loading", "more", "open") ?? {};
     const moreLabel = more + "...";
     // Destruct
     const { renderOption = (props, option, { selected }) => (_jsxs("li", { ...props, children: [_jsx(Checkbox, { icon: _jsx(CheckBoxOutlineBlankIcon, { fontSize: "small" }), checkedIcon: _jsx(CheckBoxIcon, { fontSize: "small" }), style: { marginRight: 8 }, checked: selected }), option] })), renderTags = (value, getTagProps) => value.map((option, index) => (_jsx(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;

package/lib/mjs/TagListPro.js

@@ -4,11 +4,13 @@ import CheckBoxOutlineBlankIcon from "@mui/icons-material/CheckBoxOutlineBlank";
 import CheckBoxIcon from "@mui/icons-material/CheckBox";
 import React from "react";
 import { InputField } from "./InputField";
-import { globalApp } from "./app/ReactApp";
 import { DataTypes } from "@etsoo/shared";
+import { useAppContext } from "./app/ReactApp";
 export function TagListPro(props) {
+    // Global app
+    const app = useAppContext();
     // Labels
-    const { noOptions, loading: loadingLabel, more = "More", open: openDefault } = globalApp?.getLabels("noOptions", "loading", "more", "open") ?? {};
+    const { noOptions, loading: loadingLabel, more = "More", open: openDefault } = app?.getLabels("noOptions", "loading", "more", "open") ?? {};
     const moreLabel = more + "...";
     const getLabel = (item) => DataTypes.getListItemLabel(item);
     // Destruct

package/lib/mjs/TextFieldEx.d.ts

@@ -49,7 +49,7 @@ export interface TextFieldExMethods {
      */
     setError(error: React.ReactNode): void;
 }
-export declare const TextFieldEx: React.ForwardRefExoticComponent<(Omit<import("@mui/material").OutlinedTextFieldProps & {
+export declare const TextFieldEx: React.ForwardRefExoticComponent<(Omit<import("@mui/material").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").FilledTextFieldProps & {
+}, "ref"> | Omit<import("@mui/material").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").StandardTextFieldProps & {
+}, "ref"> | Omit<import("@mui/material").FilledTextFieldProps & {
     /**
      * Change delay (ms) to avoid repeatly dispatch onChange
      */

package/lib/mjs/TextFieldEx.js

@@ -5,10 +5,12 @@ import { MUGlobal } from "./MUGlobal";
 import { Clear, Visibility } from "@mui/icons-material";
 import { Keyboard } from "@etsoo/shared";
 import { ReactUtils, useCombinedRefs, useDelayedExecutor } from "@etsoo/react";
-import { globalApp } from "./app/ReactApp";
+import { useAppContext } from "./app/ReactApp";
 export const TextFieldEx = React.forwardRef((props, ref) => {
+    // Global app
+    const app = useAppContext();
     // Labels
-    const { showIt, clearInput } = globalApp?.getLabels("showIt", "clearInput") ?? {};
+    const { showIt, clearInput } = app?.getLabels("showIt", "clearInput") ?? {};
     // Destructure
     const { changeDelay, clearLabel = clearInput, error, fullWidth = true, helperText, InputLabelProps = {}, InputProps = {}, onChange, onClear, onKeyDown, onEnter, onVisibility, inputRef, readOnly, showClear, showPassword, type, variant = MUGlobal.textFieldVariant, ...rest } = props;
     // Shrink

package/lib/mjs/Tiplist.js

@@ -3,17 +3,19 @@ import { ReactUtils, useDelayedExecutor } from "@etsoo/react";
 import { DataTypes } from "@etsoo/shared";
 import { Autocomplete } from "@mui/material";
 import React from "react";
-import { globalApp } from "./app/ReactApp";
 import { SearchField } from "./SearchField";
 import { InputField } from "./InputField";
+import { useAppContext } from "./app/ReactApp";
 /**
  * Tiplist
  * @param props Props
  * @returns Component
  */
 export function Tiplist(props) {
+    // Global app
+    const app = useAppContext();
     // Labels
-    const { noOptions, loading, more, open: openDefault } = globalApp?.getLabels("noOptions", "loading", "more", "open") ?? {};
+    const { noOptions, loading, more1 = "More", open: openDefault } = app?.getLabels("noOptions", "loading", "more1", "open") ?? {};
     // Destruct
     const { search = false, idField = "id", idValue, inputAutoComplete = "off", inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputReset, inputVariant, label, loadData, defaultValue, value, maxItems = 16, width = search ? 160 : undefined, name, readOnly, onChange, onValueChange, openOnFocus = true, noOptionsText = noOptions, loadingText = loading, openText = openDefault, getOptionLabel, getOptionDisabled, sx = {}, minChars, ...rest } = props;
     if (width && sx)
@@ -197,7 +199,7 @@ export function Tiplist(props) {
                     if (typeof item !== "object")
                         return `${item}`;
                     if (item[idField] === "n/a")
-                        return (more ?? "More") + "...";
+                        return more1;
                     return getOptionLabel
                         ? getOptionLabel(item)
                         : DataTypes.getObjectItemLabel(item);

package/lib/mjs/TiplistPro.js

@@ -4,15 +4,17 @@ import { DataTypes } from "@etsoo/shared";
 import { Autocomplete } from "@mui/material";
 import React from "react";
 import { InputField } from "./InputField";
-import { globalApp } from "./app/ReactApp";
+import { useAppContext } from "./app/ReactApp";
 /**
  * TiplistPro
  * @param props Props
  * @returns Component
  */
 export function TiplistPro(props) {
+    // Global app
+    const app = useAppContext();
     // Labels
-    const { noOptions, loading, more, open: openDefault } = globalApp?.getLabels("noOptions", "loading", "more", "open") ?? {};
+    const { noOptions, loading, more, open: openDefault } = app?.getLabels("noOptions", "loading", "more", "open") ?? {};
     // Destruct
     const { label, loadData, defaultValue, value, idValue, maxItems = 16, width, name, inputOnChange, inputProps, inputReset, sx, openOnFocus = true, noOptionsText = noOptions, loadingText = loading, openText = openDefault, getOptionDisabled, getOptionLabel, onChange, onValueChange, minChars, ...rest } = props;
     if (width && sx)

package/lib/mjs/UserAvatar.js

@@ -1,16 +1,18 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Avatar } from "@mui/material";
 import { BusinessUtils } from "@etsoo/appscript";
-import { globalApp } from "./app/ReactApp";
+import { useAppContext } from "./app/ReactApp";
 /**
  * User avatar
  * @param props Props
  * @returns Component
  */
 export function UserAvatar(props) {
+    // Global app
+    const app = useAppContext();
     // Destruct
     const { src, title, formatTitle = (title) => {
-        return BusinessUtils.formatAvatarTitle(title, 3, globalApp?.get("me") ?? "ME");
+        return BusinessUtils.formatAvatarTitle(title, 3, app?.get("me") ?? "ME");
     } } = props;
     // Format
     const fTitle = formatTitle(title);

package/lib/mjs/app/CommonApp.d.ts

@@ -1,11 +1,10 @@
 import { IAppSettings, IUser } from "@etsoo/appscript";
-import { IPageData } from "@etsoo/react";
 import { ReactApp } from "./ReactApp";
 /**
  * Common independent application
  * 通用独立程序
  */
-export declare abstract class CommonApp<U extends IUser = IUser, P extends IPageData = IPageData, S extends IAppSettings = IAppSettings> extends ReactApp<S, U, P> {
+export declare abstract class CommonApp<U extends IUser = IUser, S extends IAppSettings = IAppSettings> extends ReactApp<S, U> {
     /**
      * Constructor
      * @param settings Settings

package/lib/mjs/app/IServiceApp.d.ts

@@ -1,12 +1,7 @@
 import { ApiRefreshTokenDto, IApi, IApiPayload } from "@etsoo/appscript";
-import { ReactAppData, ReactAppType } from "./ReactApp";
+import { ReactAppType } from "./ReactApp";
 import { IServiceUser, ServiceUserToken } from "./IServiceUser";
 import { IActionResult } from "@etsoo/shared";
-import React from "react";
-/**
- * Service application context
- */
-export declare const ServiceAppContext: React.Context<ReactAppData<IServiceApp> | null>;
 /**
  * Service application interface
  */

package/lib/mjs/app/IServiceApp.js

@@ -1,5 +1 @@
-import React from "react";
-/**
- * Service application context
- */
-export const ServiceAppContext = React.createContext(null);
+export {};