@etsoo/materialui 1.4.74 → 1.4.76

package/src/AuditDisplay.tsx

@@ -1,10 +1,10 @@
 import { Utils } from "@etsoo/shared";
 import { Button, Divider, Theme, Typography, useTheme } from "@mui/material";
 import React, { CSSProperties } from "react";
-import { globalApp } from "./app/ReactApp";
 import { ListMoreDisplay, ListMoreDisplayProps } from "./ListMoreDisplay";
 import { ShowDataComparison } from "./ShowDataComparison";
 import { AuditLineDto } from "@etsoo/appscript";
+import { useAppContext } from "./app/ReactApp";
 
 /**
  * Audit display props
@@ -32,17 +32,6 @@ export interface AuditDisplayProps
   itemRenderer?: (data: AuditLineDto, index: number) => React.ReactNode;
 }
 
-// Get label
-const getLabel = (key: string) => {
-  return globalApp?.get(Utils.formatInitial(key)) ?? key;
-};
-
-// Format date
-const formatDate = (date: Date) => {
-  if (globalApp) return globalApp.formatDate(date, "ds");
-  return date.toUTCString();
-};
-
 /**
  * Audit display
  * @param props Props
@@ -52,6 +41,19 @@ export function AuditDisplay(props: AuditDisplayProps) {
   // Theme
   const theme = useTheme();
 
+  // Global app
+  const app = useAppContext();
+
+  // Get label
+  const getLabel = (key: string) => {
+    return app?.get(Utils.formatInitial(key)) ?? key;
+  };
+
+  // Format date
+  const formatDate = (date: Date) => {
+    return app?.formatDate(date, "ds") ?? date.toUTCString();
+  };
+
   // Title
   var title = getLabel("dataComparison");
 

package/src/BridgeCloseButton.tsx

@@ -2,7 +2,7 @@ import { BridgeUtils, IBridgeHost } from "@etsoo/appscript";
 import CloseIcon from "@mui/icons-material/Close";
 import { Box, BoxProps, IconButton, IconButtonProps } from "@mui/material";
 import React from "react";
-import { globalApp } from "./app/ReactApp";
+import { useAppContext } from "./app/ReactApp";
 
 /**
  * Bridge close button props
@@ -26,11 +26,14 @@ export interface BridgeCloseButtonProps extends IconButtonProps {
  * @returns Component
  */
 export function BridgeCloseButton(props: BridgeCloseButtonProps) {
+  // Global app
+  const app = useAppContext();
+
   // Destruct
   const {
     boxProps,
     onClick,
-    title = globalApp?.get("close") ?? "Close",
+    title = app?.get("close") ?? "Close",
     validate,
     ...rest
   } = props;

package/src/ButtonPopover.tsx

@@ -1,4 +1,4 @@
-import { Popover } from "@mui/material";
+import { Popover, PopoverOrigin } from "@mui/material";
 import React from "react";
 
 /**
@@ -24,6 +24,11 @@ export type ButtonPopoverProps<T> = {
    * @returns Data promise
    */
   loadData?: () => Promise<T | undefined>;
+
+  /**
+   * Position
+   */
+  position?: PopoverOrigin["horizontal"];
 };
 
 /**
@@ -33,7 +38,7 @@ export type ButtonPopoverProps<T> = {
  */
 export function ButtonPopover<T>(props: ButtonPopoverProps<T>) {
   // Destruct
-  const { button, children, loadData } = props;
+  const { button, children, loadData, position = "right" } = props;
 
   // States
   const [anchorEl, setAnchorEl] = React.useState<HTMLElement | null>(null);
@@ -61,6 +66,8 @@ export function ButtonPopover<T>(props: ButtonPopoverProps<T>) {
     setAnchorEl(null);
   };
 
+  const styles = position === "left" ? { left: 14 } : { right: 14 };
+
   // Layout
   return (
     <React.Fragment>
@@ -70,8 +77,8 @@ export function ButtonPopover<T>(props: ButtonPopoverProps<T>) {
         open={open}
         onClose={handleClose}
         onClick={handleClose}
-        transformOrigin={{ horizontal: "right", vertical: "top" }}
-        anchorOrigin={{ horizontal: "right", vertical: "bottom" }}
+        transformOrigin={{ horizontal: position, vertical: "top" }}
+        anchorOrigin={{ horizontal: position, vertical: "bottom" }}
         slotProps={{
           paper: {
             elevation: 0,
@@ -84,12 +91,12 @@ export function ButtonPopover<T>(props: ButtonPopoverProps<T>) {
                 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/src/ComboBox.tsx

@@ -18,7 +18,7 @@ import AddIcon from "@mui/icons-material/Add";
 import type { AutocompleteExtendedProps } from "./AutocompleteExtendedProps";
 import { SearchField } from "./SearchField";
 import { InputField } from "./InputField";
-import { globalApp } from "./app/ReactApp";
+import { useAppContext } from "./app/ReactApp";
 
 /**
  * ComboBox props
@@ -79,8 +79,11 @@ export function ComboBox<
   D extends DataTypes.Keys<T> = IdDefaultType<T>,
   L extends DataTypes.Keys<T, string> = LabelDefaultType<T>
 >(props: ComboBoxProps<T, D, L>) {
+  // Global app
+  const app = useAppContext();
+
   // Labels
-  const labels = globalApp?.getLabels("noOptions", "loading", "open", "add");
+  const labels = app?.getLabels("noOptions", "loading", "open", "add");
 
   // Destruct
   const {

package/src/ComboBoxMultiple.tsx

@@ -19,7 +19,7 @@ import CheckBoxIcon from "@mui/icons-material/CheckBox";
 import type { AutocompleteExtendedProps } from "./AutocompleteExtendedProps";
 import { SearchField } from "./SearchField";
 import { InputField } from "./InputField";
-import { globalApp } from "./app/ReactApp";
+import { useAppContext } from "./app/ReactApp";
 
 const icon = <CheckBoxOutlineBlankIcon fontSize="small" />;
 const checkedIcon = <CheckBoxIcon fontSize="small" />;
@@ -78,8 +78,11 @@ export function ComboBoxMultiple<
   D extends DataTypes.Keys<T> = IdDefaultType<T>,
   L extends DataTypes.Keys<T, string> = LabelDefaultType<T>
 >(props: ComboBoxMultipleProps<T, D, L>) {
+  // Global app
+  const app = useAppContext();
+
   // Labels
-  const labels = globalApp?.getLabels("noOptions", "loading");
+  const labels = app?.getLabels("noOptions", "loading");
 
   // Destruct
   const {

package/src/ComboBoxPro.tsx

@@ -1,8 +1,8 @@
 import { Autocomplete, AutocompleteProps } from "@mui/material";
 import React from "react";
-import { globalApp } from "./app/ReactApp";
 import { InputField, InputFieldProps } from "./InputField";
 import { DataTypes, ListType2 } from "@etsoo/shared";
+import { useAppContext } from "./app/ReactApp";
 
 export type ComboBoxProProps<D extends ListType2 = ListType2> = Omit<
   AutocompleteProps<D, false, false, true>,
@@ -43,12 +43,15 @@ export type ComboBoxProProps<D extends ListType2 = ListType2> = Omit<
 export function ComboBoxPro<D extends ListType2 = ListType2>(
   props: ComboBoxProProps<D>
 ) {
+  // Global app
+  const app = useAppContext();
+
   // Labels
   const {
     noOptions,
     loading: loadingLabel,
     open: openDefault
-  } = globalApp?.getLabels("noOptions", "loading", "open") ?? {};
+  } = app?.getLabels("noOptions", "loading", "open") ?? {};
 
   // Destruct
   const {

package/src/CultureDataTable.tsx

@@ -1,8 +1,8 @@
 import { DataTable, DataTableProps } from "./DataTable";
 import React from "react";
-import { globalApp } from "./app/ReactApp";
 import { ListType1 } from "@etsoo/shared";
 import { GridRenderCellParams } from "@mui/x-data-grid";
+import { useAppContext } from "./app/ReactApp";
 
 /**
  * Culture table props
@@ -22,14 +22,17 @@ export type CultureDataTableProps = Omit<DataTableProps, "columns"> & {
  * @returns Component
  */
 export function CultureDataTable(props: CultureDataTableProps) {
+  // Global app
+  const app = useAppContext();
+
   // Destruct
   const {
     cultures,
-    cultureLabel = globalApp?.get("culture"),
+    cultureLabel = app?.get("culture"),
     editable = true,
     titleLabel,
     hasDescription = false,
-    descriptionLabel = globalApp?.get("description"),
+    descriptionLabel = app?.get("description"),
     ...rest
   } = props;
 

package/src/DataSteps.tsx

@@ -13,8 +13,8 @@ import StartIcon from "@mui/icons-material/Start";
 import { InputDialogProps } from "@etsoo/react";
 import React from "react";
 import { HBox } from "./FlexBox";
-import { globalApp } from "./app/ReactApp";
 import { MUGlobal } from "./MUGlobal";
+import { useRequiredAppContext } from "./app/ReactApp";
 
 /**
  * Data step
@@ -60,11 +60,8 @@ export type DataStepsProps<T extends object> = Omit<
  * @returns Component
  */
 export function DataSteps<T extends object>(props: DataStepsProps<T>) {
-  // 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");

package/src/DataTable.tsx

@@ -6,7 +6,7 @@ import {
 } from "@mui/x-data-grid";
 import { DataGridProps } from "@mui/x-data-grid/models/props/DataGridProps";
 import React from "react";
-import { globalApp } from "./app/ReactApp";
+import { useAppContext } from "./app/ReactApp";
 
 /**
  * Data table selected cell params
@@ -40,6 +40,9 @@ export type DataTableProps<R extends GridValidRowModel = any> = Omit<
 export function DataTable<R extends GridValidRowModel = any>(
   props: DataTableProps<R>
 ) {
+  // Global app
+  const app = useAppContext();
+
   // Destructor
   const {
     localeText = {},
@@ -51,7 +54,7 @@ export function DataTable<R extends GridValidRowModel = any>(
   } = props;
 
   // Labels
-  const { noRows } = globalApp?.getLabels("noRows") ?? {};
+  const noRows = app?.get("noRows");
   if (noRows && !localeText.noRowsLabel) localeText.noRowsLabel = noRows;
 
   const [cellModesModel, setCellModesModel] =

package/src/InputTipField.tsx

@@ -2,8 +2,8 @@ import { DataTypes } from "@etsoo/shared";
 import { InputAdornment, List, ListItem, Popover } from "@mui/material";
 import Typography, { TypographyProps } from "@mui/material/Typography";
 import React from "react";
-import { globalApp } from "./app/ReactApp";
 import { InputField, InputFieldProps } from "./InputField";
+import { useAppContext } from "./app/ReactApp";
 
 type ItemType = DataTypes.IdLabelItem<string | number>;
 
@@ -46,6 +46,9 @@ export type InputTipFieldProps<T extends ItemType = ItemType> =
 export function InputTipField<T extends ItemType = ItemType>(
   props: InputTipFieldProps<T>
 ) {
+  // Global app
+  const app = useAppContext();
+
   // State
   const [title, setTitle] = React.useState<string>();
   const [anchorEl, setAnchorEl] = React.useState<HTMLElement>();
@@ -54,31 +57,20 @@ export function InputTipField<T extends ItemType = ItemType>(
   // Destruct
   const {
     labelProps = {
-      title: globalApp?.get("clickForDetails"),
+      title: app?.get("clickForDetails"),
       sx: { color: (theme) => theme.palette.error.main, cursor: "pointer" }
     },
-    InputProps = {
-      endAdornment: title ? (
-        <InputAdornment position="end">
-          <Typography
-            onClick={(event) => {
-              setAnchorEl(event.currentTarget);
-            }}
-            {...labelProps}
-          >
-            {title}
-          </Typography>
-        </InputAdornment>
-      ) : undefined
-    },
     changeDelay = 480,
     onChangeDelay,
     loadData,
     itemLabel = (item) => item.label,
     renderItem = (item) => <ListItem key={item.id}>{itemLabel(item)}</ListItem>,
+    slotProps = {},
     ...rest
   } = props;
 
+  const { input, ...slotRests } = slotProps;
+
   const load = (value: string) => {
     if (value.length < 2) {
       setTitle(undefined);
@@ -110,7 +102,24 @@ export function InputTipField<T extends ItemType = ItemType>(
           load(event.target.value);
           if (onChangeDelay) onChangeDelay(event);
         }}
-        InputProps={InputProps}
+        slotProps={{
+          input: {
+            endAdornment: title ? (
+              <InputAdornment position="end">
+                <Typography
+                  onClick={(event) => {
+                    setAnchorEl(event.currentTarget);
+                  }}
+                  {...labelProps}
+                >
+                  {title}
+                </Typography>
+              </InputAdornment>
+            ) : undefined,
+            ...input
+          },
+          ...slotRests
+        }}
         {...rest}
       />
     </React.Fragment>

package/src/ListMoreDisplay.tsx

@@ -1,4 +1,3 @@
-import { DataTypes } from "@etsoo/shared";
 import {
   Card,
   CardActions,
@@ -16,7 +15,7 @@ import {
   GridLoaderStates
 } from "@etsoo/react";
 import { LoadingButton } from "./LoadingButton";
-import { globalApp } from "./app/ReactApp";
+import { useAppContext } from "./app/ReactApp";
 
 /**
  * ListMoreDisplay props
@@ -68,6 +67,9 @@ type states<T> = {
 export function ListMoreDisplay<T extends object>(
   props: ListMoreDisplayProps<T>
 ) {
+  // Global app
+  const app = useAppContext();
+
   // Destruct
   const {
     batchSize = 6,
@@ -78,7 +80,7 @@ export function ListMoreDisplay<T extends object>(
     headerTitle,
     loadBatchSize,
     loadData,
-    moreLabel = globalApp ? globalApp.get("more") + "..." : undefined,
+    moreLabel = app?.get("more1"),
     fieldTemplate,
     threshold,
     ...rest

package/src/OptionBool.tsx

@@ -1,6 +1,5 @@
 import { ListType1 } from "@etsoo/shared";
-import React from "react";
-import { globalApp } from "./app/ReactApp";
+import { useAppContext } from "./app/ReactApp";
 import { OptionGroup, OptionGroupProps } from "./OptionGroup";
 
 /**
@@ -17,8 +16,11 @@ export type OptionBoolProps = Omit<
  * @returns Component
  */
 export function OptionBool(props: OptionBoolProps) {
+  // Global app
+  const app = useAppContext();
+
   // Options
-  const options = globalApp?.getBools() ?? [];
+  const options = app?.getBools() ?? [];
 
   // Layout
   return (

package/src/QuickList.tsx

@@ -11,8 +11,8 @@ import {
 } from "@mui/material";
 import React from "react";
 import { InputField, InputFieldProps } from "./InputField";
-import { globalApp } from "./app/ReactApp";
 import { VBox } from "./FlexBox";
+import { useAppContext } from "./app/ReactApp";
 
 /**
  * Quick list props
@@ -77,6 +77,9 @@ export type QuickListProps<T extends ListType2 = ListType2> = StackProps & {
 export function QuickList<T extends ListType2 = ListType2>(
   props: QuickListProps<T>
 ) {
+  // Global app
+  const app = useAppContext();
+
   // Destruct
   const {
     buttonProps = {},
@@ -86,7 +89,7 @@ export function QuickList<T extends ListType2 = ListType2>(
     itemRenderer = (item: T) => itemLabel(item),
     itemProps,
     loadData,
-    noMatchesLabel = globalApp?.get("noMatches"),
+    noMatchesLabel = app?.get("noMatches"),
     gap = 1,
     height = "480px",
     onItemClick,

package/src/SelectBool.tsx

@@ -1,7 +1,6 @@
 import { ListType1, Utils } from "@etsoo/shared";
-import React from "react";
-import { globalApp } from "./app/ReactApp";
 import { SelectEx, SelectExProps } from "./SelectEx";
+import { useAppContext } from "./app/ReactApp";
 
 /**
  * SelectBool props
@@ -17,11 +16,14 @@ export type SelectBoolProps = Omit<
  * @returns Component
  */
 export function SelectBool(props: SelectBoolProps) {
+  // 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);
 

package/src/ShowDataComparison.tsx

@@ -8,7 +8,7 @@ import {
   TableHead,
   TableRow
 } from "@mui/material";
-import { globalApp } from "./app/ReactApp";
+import { useRequiredAppContext } from "./app/ReactApp";
 
 /**
  * Check obj is instance of AuditLineChangesDto
@@ -45,11 +45,8 @@ export const ShowDataComparison = (
   getLabel?: (field: string) => string,
   equalCheck: boolean = 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(

package/src/SwitchAnt.tsx

@@ -1,7 +1,7 @@
 import { Stack, Typography } from "@mui/material";
 import Switch, { SwitchProps } from "@mui/material/Switch";
 import React from "react";
-import { globalApp } from "./app/ReactApp";
+import { useAppContext } from "./app/ReactApp";
 
 /**
  * Ant style switch props
@@ -29,8 +29,11 @@ export interface SwitchAntProps extends SwitchProps {
  * @returns Component
  */
 export function SwitchAnt(props: SwitchAntProps) {
+  // 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 {

package/src/TagList.tsx

@@ -3,7 +3,7 @@ import CheckBoxOutlineBlankIcon from "@mui/icons-material/CheckBoxOutlineBlank";
 import CheckBoxIcon from "@mui/icons-material/CheckBox";
 import React from "react";
 import { InputField, InputFieldProps } from "./InputField";
-import { globalApp } from "./app/ReactApp";
+import { useAppContext } from "./app/ReactApp";
 
 export type TagListProps = Omit<
   AutocompleteProps<string, true, false, true>,
@@ -34,13 +34,16 @@ export type TagListProps = Omit<
 };
 
 export function TagList(props: TagListProps) {
+  // Global app
+  const app = useAppContext();
+
   // Labels
   const {
     noOptions,
     loading: loadingLabel,
     more = "More",
     open: openDefault
-  } = globalApp?.getLabels("noOptions", "loading", "more", "open") ?? {};
+  } = app?.getLabels("noOptions", "loading", "more", "open") ?? {};
 
   const moreLabel = more + "...";
 

package/src/TagListPro.tsx

@@ -3,8 +3,8 @@ import CheckBoxOutlineBlankIcon from "@mui/icons-material/CheckBoxOutlineBlank";
 import CheckBoxIcon from "@mui/icons-material/CheckBox";
 import React from "react";
 import { InputField, InputFieldProps } from "./InputField";
-import { globalApp } from "./app/ReactApp";
 import { DataTypes, ListType2 } from "@etsoo/shared";
+import { useAppContext } from "./app/ReactApp";
 
 export type TagListProProps<D extends ListType2 = ListType2> = Omit<
   AutocompleteProps<D, true, false, false>,
@@ -37,13 +37,16 @@ export type TagListProProps<D extends ListType2 = ListType2> = Omit<
 export function TagListPro<D extends ListType2 = ListType2>(
   props: TagListProProps<D>
 ) {
+  // Global app
+  const app = useAppContext();
+
   // Labels
   const {
     noOptions,
     loading: loadingLabel,
     more = "More",
     open: openDefault
-  } = globalApp?.getLabels("noOptions", "loading", "more", "open") ?? {};
+  } = app?.getLabels("noOptions", "loading", "more", "open") ?? {};
 
   const moreLabel = more + "...";
 

package/src/TextFieldEx.tsx

@@ -9,7 +9,7 @@ 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";
 
 /**
  * Extended text field props
@@ -73,9 +73,11 @@ export const TextFieldEx = React.forwardRef<
   TextFieldExMethods,
   TextFieldExProps
 >((props, ref) => {
+  // Global app
+  const app = useAppContext();
+
   // Labels
-  const { showIt, clearInput } =
-    globalApp?.getLabels("showIt", "clearInput") ?? {};
+  const { showIt, clearInput } = app?.getLabels("showIt", "clearInput") ?? {};
 
   // Destructure
   const {

package/src/Tiplist.tsx

@@ -3,9 +3,9 @@ import { DataTypes, IdDefaultType, ListType2 } from "@etsoo/shared";
 import { Autocomplete, AutocompleteRenderInputParams } from "@mui/material";
 import React from "react";
 import type { AutocompleteExtendedProps } from "./AutocompleteExtendedProps";
-import { globalApp } from "./app/ReactApp";
 import { SearchField } from "./SearchField";
 import { InputField } from "./InputField";
+import { useAppContext } from "./app/ReactApp";
 
 /**
  * Tiplist props
@@ -56,13 +56,16 @@ export function Tiplist<
   T extends object = ListType2,
   D extends DataTypes.Keys<T> = IdDefaultType<T>
 >(props: TiplistProps<T, D>) {
+  // Global app
+  const app = useAppContext();
+
   // Labels
   const {
     noOptions,
     loading,
-    more,
+    more1 = "More",
     open: openDefault
-  } = globalApp?.getLabels("noOptions", "loading", "more", "open") ?? {};
+  } = app?.getLabels("noOptions", "loading", "more1", "open") ?? {};
 
   // Destruct
   const {
@@ -378,7 +381,7 @@ export function Tiplist<
         }}
         getOptionLabel={(item) => {
           if (typeof item !== "object") return `${item}`;
-          if (item[idField] === "n/a") return (more ?? "More") + "...";
+          if (item[idField] === "n/a") return more1;
           return getOptionLabel
             ? getOptionLabel(item)
             : DataTypes.getObjectItemLabel(item);

package/src/TiplistPro.tsx

@@ -3,7 +3,7 @@ import { DataTypes, ListType2 } from "@etsoo/shared";
 import { Autocomplete, AutocompleteProps } from "@mui/material";
 import React, { ChangeEventHandler } from "react";
 import { InputField, InputFieldProps } from "./InputField";
-import { globalApp } from "./app/ReactApp";
+import { useAppContext } from "./app/ReactApp";
 
 /**
  * TiplistPro props
@@ -89,13 +89,16 @@ interface States<T extends object> {
 export function TiplistPro<T extends ListType2 = ListType2>(
   props: TiplistProProps<T>
 ) {
+  // Global app
+  const app = useAppContext();
+
   // Labels
   const {
     noOptions,
     loading,
     more,
     open: openDefault
-  } = globalApp?.getLabels("noOptions", "loading", "more", "open") ?? {};
+  } = app?.getLabels("noOptions", "loading", "more", "open") ?? {};
 
   // Destruct
   const {