@etsoo/materialui 1.4.74 → 1.4.76

package/__tests__/ResponsePage.tsx

@@ -2,6 +2,7 @@ import { act, render } from "@testing-library/react";
 import {
   MUGlobal,
   MobileListItemRenderer,
+  ReactAppContext,
   ResponsivePage,
   SearchField
 } from "../src";
@@ -35,38 +36,40 @@ it("Render ResponsePage", async () => {
   act(() => {
     // Act
     render(
-      <ResponsivePage<Data, typeof fieldTemplate>
-        fields={[<SearchField label="Keyword" name="keyword" minChars={2} />]}
-        height={200}
-        itemSize={[118, MUGlobal.pagePaddings]}
-        fieldTemplate={fieldTemplate}
-        loadData={({ id }) =>
-          Promise.resolve([
-            { id: 1, name: "Name 1" },
-            { id: 2, name: "Name 2" },
-            { id: id ?? 0, name: "auto" }
-          ])
-        }
-        columns={[
-          { field: "id", header: "ID" },
-          { field: "name", header: "Name" },
-          {
-            field: "deviceName",
-            header: "Value",
-            valueFormatter: ({ data }) => data?.deviceName ?? data?.name
+      <ReactAppContext.Provider value={null}>
+        <ResponsivePage<Data, typeof fieldTemplate>
+          fields={[<SearchField label="Keyword" name="keyword" minChars={2} />]}
+          height={200}
+          itemSize={[118, MUGlobal.pagePaddings]}
+          fieldTemplate={fieldTemplate}
+          loadData={({ id }) =>
+            Promise.resolve([
+              { id: 1, name: "Name 1" },
+              { id: 2, name: "Name 2" },
+              { id: id ?? 0, name: "auto" }
+            ])
           }
-        ]}
-        innerItemRenderer={(props) =>
-          MobileListItemRenderer(props, (data) => {
-            return [
-              data.name,
-              undefined,
-              [],
-              <React.Fragment></React.Fragment>
-            ];
-          })
-        }
-      />
+          columns={[
+            { field: "id", header: "ID" },
+            { field: "name", header: "Name" },
+            {
+              field: "deviceName",
+              header: "Value",
+              valueFormatter: ({ data }) => data?.deviceName ?? data?.name
+            }
+          ]}
+          innerItemRenderer={(props) =>
+            MobileListItemRenderer(props, (data) => {
+              return [
+                data.name,
+                undefined,
+                [],
+                <React.Fragment></React.Fragment>
+              ];
+            })
+          }
+        />
+      </ReactAppContext.Provider>
     );
 
     // Fast forward

package/lib/cjs/AddresSelector.js

@@ -8,9 +8,9 @@ exports.AddressSelector = AddressSelector;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
 const react_1 = __importDefault(require("react"));
-const ReactApp_1 = require("./app/ReactApp");
 const ComboBox_1 = require("./ComboBox");
 const Tiplist_1 = require("./Tiplist");
+const ReactApp_1 = require("./app/ReactApp");
 /**
  * Address field
  */
@@ -26,8 +26,10 @@ var AddressField;
  * @param props Props
  */
 function AddressSelector(props) {
+    // Global app
+    const app = (0, ReactApp_1.useAppContext)();
     // Labels
-    const { city: cityDefault = "City", district: districtDefault = "District", region: regionDefault = "Region", state: stateDefault = "State" } = ReactApp_1.globalApp?.getLabels("region", "state", "city", "district") ?? {};
+    const { city: cityDefault = "City", district: districtDefault = "District", region: regionDefault = "Region", state: stateDefault = "State" } = app?.getLabels("region", "state", "city", "district") ?? {};
     // Destruct
     const { api, city, cityLabel = cityDefault, district, districtLabel = districtDefault, error, favoredIds, helperText, hideRegion, label, onChange, region, regionLabel = regionDefault, required, search, state, stateLabel = stateDefault, breakPoints = { xs: 12, md: 6, lg: hideRegion ? 4 : 3 } } = props;
     const isMounted = react_1.default.useRef(true);

package/lib/cjs/AuditDisplay.js

@@ -8,19 +8,9 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const shared_1 = require("@etsoo/shared");
 const material_1 = require("@mui/material");
 const react_1 = __importDefault(require("react"));
-const ReactApp_1 = require("./app/ReactApp");
 const ListMoreDisplay_1 = require("./ListMoreDisplay");
 const ShowDataComparison_1 = require("./ShowDataComparison");
-// Get label
-const getLabel = (key) => {
-    return ReactApp_1.globalApp?.get(shared_1.Utils.formatInitial(key)) ?? key;
-};
-// Format date
-const formatDate = (date) => {
-    if (ReactApp_1.globalApp)
-        return ReactApp_1.globalApp.formatDate(date, "ds");
-    return date.toUTCString();
-};
+const ReactApp_1 = require("./app/ReactApp");
 /**
  * Audit display
  * @param props Props
@@ -29,6 +19,16 @@ const formatDate = (date) => {
 function AuditDisplay(props) {
     // Theme
     const theme = (0, material_1.useTheme)();
+    // Global app
+    const app = (0, ReactApp_1.useAppContext)();
+    // Get label
+    const getLabel = (key) => {
+        return app?.get(shared_1.Utils.formatInitial(key)) ?? key;
+    };
+    // Format date
+    const formatDate = (date) => {
+        return app?.formatDate(date, "ds") ?? date.toUTCString();
+    };
     // Title
     var title = getLabel("dataComparison");
     // Destruct

package/lib/cjs/BridgeCloseButton.js

@@ -16,8 +16,10 @@ const ReactApp_1 = require("./app/ReactApp");
  * @returns Component
  */
 function BridgeCloseButton(props) {
+    // Global app
+    const app = (0, ReactApp_1.useAppContext)();
     // Destruct
-    const { boxProps, onClick, title = ReactApp_1.globalApp?.get("close") ?? "Close", validate, ...rest } = props;
+    const { boxProps, onClick, title = app?.get("close") ?? "Close", validate, ...rest } = props;
     // Host
     const host = appscript_1.BridgeUtils.host;
     if (host == null ||

package/lib/cjs/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/cjs/ButtonPopover.js

@@ -14,7 +14,7 @@ const react_1 = __importDefault(require("react"));
  */
 function ButtonPopover(props) {
     // Destruct
-    const { button, children, loadData } = props;
+    const { button, children, loadData, position = "right" } = props;
     // States
     const [anchorEl, setAnchorEl] = react_1.default.useState(null);
     const [data, setData] = react_1.default.useState(null);
@@ -37,8 +37,9 @@ function ButtonPopover(props) {
     const handleClose = () => {
         setAnchorEl(null);
     };
+    const styles = position === "left" ? { left: 14 } : { right: 14 };
     // Layout
-    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [button((handler) => setAnchorEl(handler)), (0, jsx_runtime_1.jsx)(material_1.Popover, { anchorEl: anchorEl, open: open, onClose: handleClose, onClick: handleClose, transformOrigin: { horizontal: "right", vertical: "top" }, anchorOrigin: { horizontal: "right", vertical: "bottom" }, slotProps: {
+    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [button((handler) => setAnchorEl(handler)), (0, jsx_runtime_1.jsx)(material_1.Popover, { anchorEl: anchorEl, open: open, onClose: handleClose, onClick: handleClose, transformOrigin: { horizontal: position, vertical: "top" }, anchorOrigin: { horizontal: position, vertical: "bottom" }, slotProps: {
                     paper: {
                         elevation: 0,
                         sx: {
@@ -50,12 +51,12 @@ 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/cjs/ComboBox.js

@@ -20,8 +20,10 @@ const ReactApp_1 = require("./app/ReactApp");
  * @returns Component
  */
 function ComboBox(props) {
+    // Global app
+    const app = (0, ReactApp_1.useAppContext)();
     // Labels
-    const labels = ReactApp_1.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/cjs/ComboBoxMultiple.js

@@ -23,8 +23,10 @@ const checkedIcon = (0, jsx_runtime_1.jsx)(CheckBox_1.default, { fontSize: "smal
  * @returns Component
  */
 function ComboBoxMultiple(props) {
+    // Global app
+    const app = (0, ReactApp_1.useAppContext)();
     // Labels
-    const labels = ReactApp_1.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 }) => ((0, jsx_runtime_1.jsxs)("li", { ...props, children: [(0, jsx_runtime_1.jsx)(material_1.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/cjs/ComboBoxPro.js

@@ -7,12 +7,14 @@ exports.ComboBoxPro = ComboBoxPro;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
 const react_1 = __importDefault(require("react"));
-const ReactApp_1 = require("./app/ReactApp");
 const InputField_1 = require("./InputField");
 const shared_1 = require("@etsoo/shared");
+const ReactApp_1 = require("./app/ReactApp");
 function ComboBoxPro(props) {
+    // Global app
+    const app = (0, ReactApp_1.useAppContext)();
     // Labels
-    const { noOptions, loading: loadingLabel, open: openDefault } = ReactApp_1.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_1.default.useState(false);

package/lib/cjs/CultureDataTable.js

@@ -14,8 +14,10 @@ const ReactApp_1 = require("./app/ReactApp");
  * @returns Component
  */
 function CultureDataTable(props) {
+    // Global app
+    const app = (0, ReactApp_1.useAppContext)();
     // Destruct
-    const { cultures, cultureLabel = ReactApp_1.globalApp?.get("culture"), editable = true, titleLabel, hasDescription = false, descriptionLabel = ReactApp_1.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_1.default.useCallback((value) => cultures.find((c) => c.id == value.id)?.label ?? `${value.value}`, [cultures]);
     return ((0, jsx_runtime_1.jsx)(DataTable_1.DataTable, { columns: [
             {

package/lib/cjs/DataSteps.js

@@ -13,19 +13,16 @@ const Check_1 = __importDefault(require("@mui/icons-material/Check"));
 const Start_1 = __importDefault(require("@mui/icons-material/Start"));
 const react_1 = __importDefault(require("react"));
 const FlexBox_1 = require("./FlexBox");
-const ReactApp_1 = require("./app/ReactApp");
 const MUGlobal_1 = require("./MUGlobal");
+const ReactApp_1 = require("./app/ReactApp");
 /**
  * Data collecting steps component
  * @param props Props
  * @returns Component
  */
 function DataSteps(props) {
-    // App
-    const app = ReactApp_1.globalApp;
-    if (app == null) {
-        throw new Error("No globalApp");
-    }
+    // Global app
+    const app = (0, ReactApp_1.useRequiredAppContext)();
     // Labels
     const labels = app.getLabels("close", "nextStep", "previousStep", "submit");
     // Destruct

package/lib/cjs/DataTable.js

@@ -14,10 +14,12 @@ const ReactApp_1 = require("./app/ReactApp");
  * @returns Component
  */
 function DataTable(props) {
+    // Global app
+    const app = (0, ReactApp_1.useAppContext)();
     // Destructor
     const { localeText = {}, onCellSelection, onProcessRowUpdateError = (error) => console.log("onProcessRowUpdateError", error), slotProps, ...rest } = props;
     // Labels
-    const { noRows } = ReactApp_1.globalApp?.getLabels("noRows") ?? {};
+    const noRows = app?.get("noRows");
     if (noRows && !localeText.noRowsLabel)
         localeText.noRowsLabel = noRows;
     const [cellModesModel, setCellModesModel] = react_1.default.useState({});

package/lib/cjs/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/cjs/InputTipField.js

@@ -8,27 +8,26 @@ 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");
+const ReactApp_1 = require("./app/ReactApp");
 /**
  * InputField with tips
  * @param props Props
  * @returns Component
  */
 function InputTipField(props) {
+    // Global app
+    const app = (0, ReactApp_1.useAppContext)();
     // 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"),
+        title: app?.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;
+    }, changeDelay = 480, onChangeDelay, loadData, itemLabel = (item) => item.label, renderItem = (item) => (0, jsx_runtime_1.jsx)(material_1.ListItem, { children: itemLabel(item) }, item.id), slotProps = {}, ...rest } = props;
+    const { input, ...slotRests } = slotProps;
     const load = (value) => {
         if (value.length < 2) {
             setTitle(undefined);
@@ -46,5 +45,13 @@ function InputTipField(props) {
                     load(event.target.value);
                     if (onChangeDelay)
                         onChangeDelay(event);
-                }, InputProps: InputProps, ...rest })] }));
+                }, slotProps: {
+                    input: {
+                        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,
+                        ...input
+                    },
+                    ...slotRests
+                }, ...rest })] }));
 }

package/lib/cjs/ListMoreDisplay.js

@@ -16,8 +16,10 @@ const ReactApp_1 = require("./app/ReactApp");
  * @returns Component
  */
 function ListMoreDisplay(props) {
+    // Global app
+    const app = (0, ReactApp_1.useAppContext)();
     // Destruct
-    const { batchSize = 6, children, defaultOrderBy, headerRenderer, autoLoad = headerRenderer == null, headerTitle, loadBatchSize, loadData, moreLabel = ReactApp_1.globalApp ? ReactApp_1.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_1.default.useRef({
         queryPaging: {

package/lib/cjs/OptionBool.js

@@ -10,8 +10,10 @@ const OptionGroup_1 = require("./OptionGroup");
  * @returns Component
  */
 function OptionBool(props) {
+    // Global app
+    const app = (0, ReactApp_1.useAppContext)();
     // Options
-    const options = ReactApp_1.globalApp?.getBools() ?? [];
+    const options = app?.getBools() ?? [];
     // Layout
     return ((0, jsx_runtime_1.jsx)(OptionGroup_1.OptionGroup, { options: options, row: true, multiple: false, ...props }));
 }

package/lib/cjs/QuickList.js

@@ -9,16 +9,18 @@ const shared_1 = require("@etsoo/shared");
 const material_1 = require("@mui/material");
 const react_1 = __importDefault(require("react"));
 const InputField_1 = require("./InputField");
-const ReactApp_1 = require("./app/ReactApp");
 const FlexBox_1 = require("./FlexBox");
+const ReactApp_1 = require("./app/ReactApp");
 /**
  * Quick list
  * @param props Props
  * @returns Component
  */
 function QuickList(props) {
+    // Global app
+    const app = (0, ReactApp_1.useAppContext)();
     // Destruct
-    const { buttonProps = {}, label, inputProps, itemLabel = shared_1.DataTypes.getListItemLabel, itemRenderer = (item) => itemLabel(item), itemProps, loadData, noMatchesLabel = ReactApp_1.globalApp?.get("noMatches"), gap = 1, height = "480px", onItemClick, ...rest } = props;
+    const { buttonProps = {}, label, inputProps, itemLabel = shared_1.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_1.default.useState(false);

package/lib/cjs/SelectBool.js

@@ -3,18 +3,20 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SelectBool = SelectBool;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const shared_1 = require("@etsoo/shared");
-const ReactApp_1 = require("./app/ReactApp");
 const SelectEx_1 = require("./SelectEx");
+const ReactApp_1 = require("./app/ReactApp");
 /**
  * SelectBool (yes/no)
  * @param props Props
  * @returns Component
  */
 function SelectBool(props) {
+    // Global app
+    const app = (0, ReactApp_1.useAppContext)();
     // Destruct
     const { search = true, autoAddBlankItem = search, ...rest } = props;
     // Options
-    const options = ReactApp_1.globalApp?.getBools() ?? [];
+    const options = app?.getBools() ?? [];
     if (autoAddBlankItem)
         shared_1.Utils.addBlankItem(options);
     // Layout

package/lib/cjs/ShowDataComparison.js

@@ -35,11 +35,8 @@ const formatValue = (value, app) => {
  * @param equalCheck Equal check for properties
  */
 const ShowDataComparison = (data, modelTitle, getLabel, equalCheck = true) => {
-    // Validate app
-    const app = ReactApp_1.globalApp;
-    if (app == null) {
-        throw new Error("No globalApp");
-    }
+    // Global app
+    const app = (0, ReactApp_1.useRequiredAppContext)();
     // Labels
     const { dataComparison, field, newValue, oldValue } = app.getLabels("dataComparison", "field", "newValue", "oldValue");
     modelTitle ??= dataComparison;

package/lib/cjs/SwitchAnt.js

@@ -15,8 +15,10 @@ const ReactApp_1 = require("./app/ReactApp");
  * @returns Component
  */
 function SwitchAnt(props) {
+    // Global app
+    const app = (0, ReactApp_1.useAppContext)();
     // Labels
-    const { yes = "Yes", no = "No" } = ReactApp_1.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/cjs/TagList.js

@@ -12,8 +12,10 @@ const react_1 = __importDefault(require("react"));
 const InputField_1 = require("./InputField");
 const ReactApp_1 = require("./app/ReactApp");
 function TagList(props) {
+    // Global app
+    const app = (0, ReactApp_1.useAppContext)();
     // Labels
-    const { noOptions, loading: loadingLabel, more = "More", open: openDefault } = ReactApp_1.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 }) => ((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;

package/lib/cjs/TagListPro.js

@@ -10,11 +10,13 @@ const CheckBoxOutlineBlank_1 = __importDefault(require("@mui/icons-material/Chec
 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 shared_1 = require("@etsoo/shared");
+const ReactApp_1 = require("./app/ReactApp");
 function TagListPro(props) {
+    // Global app
+    const app = (0, ReactApp_1.useAppContext)();
     // Labels
-    const { noOptions, loading: loadingLabel, more = "More", open: openDefault } = ReactApp_1.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) => shared_1.DataTypes.getListItemLabel(item);
     // Destruct

package/lib/cjs/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/cjs/TextFieldEx.js

@@ -13,8 +13,10 @@ const shared_1 = require("@etsoo/shared");
 const react_2 = require("@etsoo/react");
 const ReactApp_1 = require("./app/ReactApp");
 exports.TextFieldEx = react_1.default.forwardRef((props, ref) => {
+    // Global app
+    const app = (0, ReactApp_1.useAppContext)();
     // Labels
-    const { showIt, clearInput } = ReactApp_1.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_1.MUGlobal.textFieldVariant, ...rest } = props;
     // Shrink

package/lib/cjs/Tiplist.js

@@ -9,17 +9,19 @@ 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 ReactApp_1 = require("./app/ReactApp");
 const SearchField_1 = require("./SearchField");
 const InputField_1 = require("./InputField");
+const ReactApp_1 = require("./app/ReactApp");
 /**
  * Tiplist
  * @param props Props
  * @returns Component
  */
 function Tiplist(props) {
+    // Global app
+    const app = (0, ReactApp_1.useAppContext)();
     // Labels
-    const { noOptions, loading, more, open: openDefault } = ReactApp_1.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)
@@ -203,7 +205,7 @@ function Tiplist(props) {
                     if (typeof item !== "object")
                         return `${item}`;
                     if (item[idField] === "n/a")
-                        return (more ?? "More") + "...";
+                        return more1;
                     return getOptionLabel
                         ? getOptionLabel(item)
                         : shared_1.DataTypes.getObjectItemLabel(item);

package/lib/cjs/TiplistPro.js

@@ -17,8 +17,10 @@ const ReactApp_1 = require("./app/ReactApp");
  * @returns Component
  */
 function TiplistPro(props) {
+    // Global app
+    const app = (0, ReactApp_1.useAppContext)();
     // Labels
-    const { noOptions, loading, more, open: openDefault } = ReactApp_1.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/cjs/UserAvatar.js

@@ -11,9 +11,11 @@ const ReactApp_1 = require("./app/ReactApp");
  * @returns Component
  */
 function UserAvatar(props) {
+    // Global app
+    const app = (0, ReactApp_1.useAppContext)();
     // Destruct
     const { src, title, formatTitle = (title) => {
-        return appscript_1.BusinessUtils.formatAvatarTitle(title, 3, ReactApp_1.globalApp?.get("me") ?? "ME");
+        return appscript_1.BusinessUtils.formatAvatarTitle(title, 3, app?.get("me") ?? "ME");
     } } = props;
     // Format
     const fTitle = formatTitle(title);

package/lib/cjs/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