@etsoo/materialui 1.1.12 → 1.1.14

package/lib/OptionGroup.js

@@ -94,11 +94,11 @@ export function OptionGroup(props) {
     return (React.createElement(React.Fragment, null,
         React.createElement(FormControl, { component: "fieldset", fullWidth: fullWidth, ...rest },
             label && (React.createElement(InputLabel, { required: required, variant: variant, shrink: true }, label)),
-            React.createElement(Box, { paddingLeft: 2, paddingY: "7px" }, group),
             variant === "outlined" && (React.createElement(NotchedOutline, { label: label && required ? label + " *" : label, notched: true, style: {
                     position: "absolute",
                     borderRadius: theme.shape.borderRadius,
                     width: fullWidth ? "100%" : "auto"
-                } }))),
+                } })),
+            React.createElement(Box, { paddingLeft: 2, paddingY: "7px" }, group)),
         helperText && React.createElement(FormHelperText, null, helperText)));
 }

package/lib/index.d.ts

@@ -1,80 +1,83 @@
-export * from './app/CommonApp';
-export * from './app/IServiceApp';
-export * from './app/IServiceAppSettings';
-export * from './app/IServicePage';
-export * from './app/IServiceUser';
-export * from './app/ISmartERPUser';
-export * from './app/Labels';
-export * from './app/ReactApp';
-export * from './app/ServiceApp';
-export * from './pages/CommonPage';
-export * from './pages/CommonPageProps';
-export * from './pages/DataGridPage';
-export * from './pages/DataGridPageProps';
-export * from './pages/EditPage';
-export * from './pages/FixedListPage';
-export * from './pages/ListPage';
-export * from './pages/ListPageProps';
-export * from './pages/ResponsivePage';
-export * from './pages/ResponsivePageProps';
-export * from './pages/SearchPageProps';
-export * from './pages/TablePage';
-export * from './pages/ViewPage';
-export * from './texts/DateText';
-export * from './texts/MoneyText';
-export * from './texts/NumberText';
-export * from './AuditDisplay';
-export * from './AutocompleteExtendedProps';
-export * from './BackButton';
-export * from './BridgeCloseButton';
-export * from './ButtonLink';
-export * from './ComboBox';
-export * from './CountdownButton';
-export * from './CountryList';
-export * from './CustomFabProps';
-export * from './DataGridEx';
-export * from './DataGridRenderers';
-export * from './DataSteps';
-export * from './DialogButton';
-export * from './DnDList';
-export * from './DraggablePaperComponent';
-export * from './EmailInput';
-export * from './FabBox';
-export * from './FlexBox';
-export * from './GridDataFormat';
-export * from './HiSelector';
-export * from './IconButtonLink';
-export * from './InputField';
-export * from './ItemList';
-export * from './ListChooser';
-export * from './ListItemRightIcon';
-export * from './ListMoreDisplay';
-export * from './LoadingButton';
-export * from './MaskInput';
-export * from './MobileListItemRenderer';
-export * from './MoreFab';
-export * from './MUGlobal';
-export * from './NotifierMU';
-export * from './OptionGroup';
-export * from './PList';
-export * from './ProgressCount';
-export * from './PullToRefreshUI';
-export * from './ResponsibleContainer';
-export * from './ScrollerListEx';
-export * from './ScrollTopFab';
-export * from './SearchBar';
-export * from './SearchField';
-export * from './SearchOptionGroup';
-export * from './SelectBool';
-export * from './SelectEx';
-export * from './ShowDataComparison';
-export * from './Switch';
-export * from './SwitchAnt';
-export * from './TabBox';
-export * from './TableEx';
-export * from './TextFieldEx';
-export * from './Tiplist';
-export * from './TwoFieldInput';
-export * from './TooltipClick';
-export * from './UserAvatar';
-export * from './UserAvatarEditor';
+export * from "./app/CommonApp";
+export * from "./app/IServiceApp";
+export * from "./app/IServiceAppSettings";
+export * from "./app/IServicePage";
+export * from "./app/IServiceUser";
+export * from "./app/ISmartERPUser";
+export * from "./app/Labels";
+export * from "./app/ReactApp";
+export * from "./app/ServiceApp";
+export * from "./pages/CommonPage";
+export * from "./pages/CommonPageProps";
+export * from "./pages/DataGridPage";
+export * from "./pages/DataGridPageProps";
+export * from "./pages/DrawerHeader";
+export * from "./pages/EditPage";
+export * from "./pages/FixedListPage";
+export * from "./pages/LeftDrawer";
+export * from "./pages/ListPage";
+export * from "./pages/ListPageProps";
+export * from "./pages/ResponsivePage";
+export * from "./pages/ResponsivePageProps";
+export * from "./pages/SearchPageProps";
+export * from "./pages/TablePage";
+export * from "./pages/UserMenu";
+export * from "./pages/ViewPage";
+export * from "./texts/DateText";
+export * from "./texts/MoneyText";
+export * from "./texts/NumberText";
+export * from "./AuditDisplay";
+export * from "./AutocompleteExtendedProps";
+export * from "./BackButton";
+export * from "./BridgeCloseButton";
+export * from "./ButtonLink";
+export * from "./ComboBox";
+export * from "./CountdownButton";
+export * from "./CountryList";
+export * from "./CustomFabProps";
+export * from "./DataGridEx";
+export * from "./DataGridRenderers";
+export * from "./DataSteps";
+export * from "./DialogButton";
+export * from "./DnDList";
+export * from "./DraggablePaperComponent";
+export * from "./EmailInput";
+export * from "./FabBox";
+export * from "./FlexBox";
+export * from "./GridDataFormat";
+export * from "./HiSelector";
+export * from "./IconButtonLink";
+export * from "./InputField";
+export * from "./ItemList";
+export * from "./ListChooser";
+export * from "./ListItemRightIcon";
+export * from "./ListMoreDisplay";
+export * from "./LoadingButton";
+export * from "./MaskInput";
+export * from "./MobileListItemRenderer";
+export * from "./MoreFab";
+export * from "./MUGlobal";
+export * from "./NotifierMU";
+export * from "./OptionGroup";
+export * from "./PList";
+export * from "./ProgressCount";
+export * from "./PullToRefreshUI";
+export * from "./ResponsibleContainer";
+export * from "./ScrollerListEx";
+export * from "./ScrollTopFab";
+export * from "./SearchBar";
+export * from "./SearchField";
+export * from "./SearchOptionGroup";
+export * from "./SelectBool";
+export * from "./SelectEx";
+export * from "./ShowDataComparison";
+export * from "./Switch";
+export * from "./SwitchAnt";
+export * from "./TabBox";
+export * from "./TableEx";
+export * from "./TextFieldEx";
+export * from "./Tiplist";
+export * from "./TwoFieldInput";
+export * from "./TooltipClick";
+export * from "./UserAvatar";
+export * from "./UserAvatarEditor";

package/lib/index.js

@@ -1,80 +1,83 @@
-export * from './app/CommonApp';
-export * from './app/IServiceApp';
-export * from './app/IServiceAppSettings';
-export * from './app/IServicePage';
-export * from './app/IServiceUser';
-export * from './app/ISmartERPUser';
-export * from './app/Labels';
-export * from './app/ReactApp';
-export * from './app/ServiceApp';
-export * from './pages/CommonPage';
-export * from './pages/CommonPageProps';
-export * from './pages/DataGridPage';
-export * from './pages/DataGridPageProps';
-export * from './pages/EditPage';
-export * from './pages/FixedListPage';
-export * from './pages/ListPage';
-export * from './pages/ListPageProps';
-export * from './pages/ResponsivePage';
-export * from './pages/ResponsivePageProps';
-export * from './pages/SearchPageProps';
-export * from './pages/TablePage';
-export * from './pages/ViewPage';
-export * from './texts/DateText';
-export * from './texts/MoneyText';
-export * from './texts/NumberText';
-export * from './AuditDisplay';
-export * from './AutocompleteExtendedProps';
-export * from './BackButton';
-export * from './BridgeCloseButton';
-export * from './ButtonLink';
-export * from './ComboBox';
-export * from './CountdownButton';
-export * from './CountryList';
-export * from './CustomFabProps';
-export * from './DataGridEx';
-export * from './DataGridRenderers';
-export * from './DataSteps';
-export * from './DialogButton';
-export * from './DnDList';
-export * from './DraggablePaperComponent';
-export * from './EmailInput';
-export * from './FabBox';
-export * from './FlexBox';
-export * from './GridDataFormat';
-export * from './HiSelector';
-export * from './IconButtonLink';
-export * from './InputField';
-export * from './ItemList';
-export * from './ListChooser';
-export * from './ListItemRightIcon';
-export * from './ListMoreDisplay';
-export * from './LoadingButton';
-export * from './MaskInput';
-export * from './MobileListItemRenderer';
-export * from './MoreFab';
-export * from './MUGlobal';
-export * from './NotifierMU';
-export * from './OptionGroup';
-export * from './PList';
-export * from './ProgressCount';
-export * from './PullToRefreshUI';
-export * from './ResponsibleContainer';
-export * from './ScrollerListEx';
-export * from './ScrollTopFab';
-export * from './SearchBar';
-export * from './SearchField';
-export * from './SearchOptionGroup';
-export * from './SelectBool';
-export * from './SelectEx';
-export * from './ShowDataComparison';
-export * from './Switch';
-export * from './SwitchAnt';
-export * from './TabBox';
-export * from './TableEx';
-export * from './TextFieldEx';
-export * from './Tiplist';
-export * from './TwoFieldInput';
-export * from './TooltipClick';
-export * from './UserAvatar';
-export * from './UserAvatarEditor';
+export * from "./app/CommonApp";
+export * from "./app/IServiceApp";
+export * from "./app/IServiceAppSettings";
+export * from "./app/IServicePage";
+export * from "./app/IServiceUser";
+export * from "./app/ISmartERPUser";
+export * from "./app/Labels";
+export * from "./app/ReactApp";
+export * from "./app/ServiceApp";
+export * from "./pages/CommonPage";
+export * from "./pages/CommonPageProps";
+export * from "./pages/DataGridPage";
+export * from "./pages/DataGridPageProps";
+export * from "./pages/DrawerHeader";
+export * from "./pages/EditPage";
+export * from "./pages/FixedListPage";
+export * from "./pages/LeftDrawer";
+export * from "./pages/ListPage";
+export * from "./pages/ListPageProps";
+export * from "./pages/ResponsivePage";
+export * from "./pages/ResponsivePageProps";
+export * from "./pages/SearchPageProps";
+export * from "./pages/TablePage";
+export * from "./pages/UserMenu";
+export * from "./pages/ViewPage";
+export * from "./texts/DateText";
+export * from "./texts/MoneyText";
+export * from "./texts/NumberText";
+export * from "./AuditDisplay";
+export * from "./AutocompleteExtendedProps";
+export * from "./BackButton";
+export * from "./BridgeCloseButton";
+export * from "./ButtonLink";
+export * from "./ComboBox";
+export * from "./CountdownButton";
+export * from "./CountryList";
+export * from "./CustomFabProps";
+export * from "./DataGridEx";
+export * from "./DataGridRenderers";
+export * from "./DataSteps";
+export * from "./DialogButton";
+export * from "./DnDList";
+export * from "./DraggablePaperComponent";
+export * from "./EmailInput";
+export * from "./FabBox";
+export * from "./FlexBox";
+export * from "./GridDataFormat";
+export * from "./HiSelector";
+export * from "./IconButtonLink";
+export * from "./InputField";
+export * from "./ItemList";
+export * from "./ListChooser";
+export * from "./ListItemRightIcon";
+export * from "./ListMoreDisplay";
+export * from "./LoadingButton";
+export * from "./MaskInput";
+export * from "./MobileListItemRenderer";
+export * from "./MoreFab";
+export * from "./MUGlobal";
+export * from "./NotifierMU";
+export * from "./OptionGroup";
+export * from "./PList";
+export * from "./ProgressCount";
+export * from "./PullToRefreshUI";
+export * from "./ResponsibleContainer";
+export * from "./ScrollerListEx";
+export * from "./ScrollTopFab";
+export * from "./SearchBar";
+export * from "./SearchField";
+export * from "./SearchOptionGroup";
+export * from "./SelectBool";
+export * from "./SelectEx";
+export * from "./ShowDataComparison";
+export * from "./Switch";
+export * from "./SwitchAnt";
+export * from "./TabBox";
+export * from "./TableEx";
+export * from "./TextFieldEx";
+export * from "./Tiplist";
+export * from "./TwoFieldInput";
+export * from "./TooltipClick";
+export * from "./UserAvatar";
+export * from "./UserAvatarEditor";

package/lib/pages/DrawerHeader.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+/**
+ * Common drawer header
+ */
+export declare const DrawerHeader: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/lib/pages/DrawerHeader.js

@@ -0,0 +1,13 @@
+import { styled } from "@mui/material";
+/**
+ * Common drawer header
+ */
+export const DrawerHeader = styled("div")(({ theme }) => ({
+    // necessary for content to be below app bar
+    ...theme.mixins.toolbar,
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(1),
+    padding: theme.spacing(0, 1, 0, 2),
+    justifyContent: "flex-start"
+}));

package/lib/pages/LeftDrawer.d.ts

@@ -0,0 +1,35 @@
+import React from "react";
+/**
+ * Left drawer methods
+ */
+export interface LeftDrawerMethods {
+    open(): void;
+}
+/**
+ * Left drawer props
+ */
+export interface LeftDrawerProps {
+    /**
+     * Show when md up
+     */
+    mdUp: boolean;
+    /**
+     * Organization
+     */
+    organization?: number;
+    /**
+     * Width
+     */
+    width: number;
+    /**
+     * Application name
+     */
+    appName: string;
+    /**
+     * Minimize hanlder
+     */
+    onMinimize?: () => void;
+}
+export declare const LeftDrawer: React.ForwardRefExoticComponent<LeftDrawerProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<LeftDrawerMethods>>;

package/lib/pages/LeftDrawer.js

@@ -0,0 +1,44 @@
+import { Avatar, Divider, Drawer, IconButton, List, Typography } from "@mui/material";
+import React from "react";
+import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
+import { DrawerHeader } from "./DrawerHeader";
+import { globalApp } from "../app/ReactApp";
+export const LeftDrawer = React.forwardRef((props, ref) => {
+    var _a;
+    // Destruct
+    const { mdUp, width, appName, onMinimize, children } = props;
+    // Menu open/close state
+    const [open, setOpen] = React.useState();
+    const handleDrawerClose = () => {
+        if (onMinimize)
+            onMinimize();
+        setOpen(false);
+    };
+    React.useImperativeHandle(ref, () => ({
+        open() {
+            setOpen(true);
+        }
+    }));
+    // Ready
+    React.useEffect(() => {
+        setOpen(mdUp);
+    }, [mdUp]);
+    return (React.createElement(Drawer, { sx: {
+            width: open ? width : 0,
+            flexShrink: 0,
+            "& .MuiDrawer-paper": {
+                width: open ? width : 0,
+                boxSizing: "border-box"
+            }
+        }, anchor: "left", variant: mdUp ? "persistent" : "temporary", open: open, onClose: mdUp ? undefined : handleDrawerClose, ModalProps: {
+            keepMounted: true // Better open performance on mobile.
+        } },
+        React.createElement(DrawerHeader, null,
+            React.createElement("a", { href: "https://www.etsoo.com", title: (_a = globalApp === null || globalApp === void 0 ? void 0 : globalApp.get("etsoo")) !== null && _a !== void 0 ? _a : "ETSOO", target: "_blank", rel: "noreferrer" },
+                React.createElement(Avatar, { src: process.env.PUBLIC_URL + "/logo192.png", variant: "square", sx: { marginLeft: -0.5, marginRight: 1.5, marginBottom: 1 } })),
+            React.createElement(Typography, { noWrap: true, component: "div", title: appName }, appName),
+            React.createElement(IconButton, { size: "small", onClick: handleDrawerClose },
+                React.createElement(ChevronLeftIcon, null))),
+        React.createElement(Divider, null),
+        React.createElement(List, { onClick: mdUp ? undefined : handleDrawerClose }, children)));
+});

package/lib/pages/UserMenu.d.ts

@@ -0,0 +1,29 @@
+import React from "react";
+/**
+ * User menu props
+ */
+export interface UserMenuProps {
+    /**
+     * Organization id
+     */
+    organization: number | undefined;
+    /**
+     * User name
+     */
+    name: string;
+    /**
+     * User avatar
+     */
+    avatar: string | undefined;
+    /**
+     * Children
+     * @param handleMenuClose Handler
+     */
+    children(handleMenuClose: () => void): React.ReactNode;
+}
+/**
+ * User menu
+ * @param props Props
+ * @returns Component
+ */
+export declare function UserMenu(props: UserMenuProps): JSX.Element;

package/lib/pages/UserMenu.js

@@ -0,0 +1,58 @@
+import { IconButton, Menu } from "@mui/material";
+import React from "react";
+import { UserAvatar } from "../UserAvatar";
+/**
+ * User menu
+ * @param props Props
+ * @returns Component
+ */
+export function UserMenu(props) {
+    // Destruct
+    const { children, name, avatar } = props;
+    // User menu anchor
+    const [anchorEl, setAnchorEl] = React.useState();
+    // User menu open or not
+    const isMenuOpen = Boolean(anchorEl);
+    // User menu
+    const handleUserMenuOpen = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleMenuClose = () => {
+        setAnchorEl(undefined);
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(IconButton, { edge: "end", "aria-haspopup": "true", onClick: handleUserMenuOpen, color: "inherit" },
+            React.createElement(UserAvatar, { title: name, src: avatar })),
+        React.createElement(Menu, { PaperProps: {
+                elevation: 0,
+                sx: {
+                    overflow: "visible",
+                    filter: "drop-shadow(0px 2px 8px rgba(0,0,0,0.32))",
+                    mt: -0.4,
+                    "& .MuiAvatar-root": {
+                        width: 32,
+                        height: 32,
+                        ml: -0.5,
+                        mr: 1
+                    },
+                    "&:before": {
+                        content: '""',
+                        display: "block",
+                        position: "absolute",
+                        top: 0,
+                        right: 14,
+                        width: 10,
+                        height: 10,
+                        bgcolor: "background.paper",
+                        transform: "translateY(-50%) rotate(45deg)",
+                        zIndex: 0
+                    }
+                }
+            }, disableScrollLock: true, anchorEl: anchorEl, anchorOrigin: {
+                vertical: "bottom",
+                horizontal: "right"
+            }, keepMounted: true, transformOrigin: {
+                vertical: "top",
+                horizontal: "right"
+            }, open: isMenuOpen, onClick: handleMenuClose, onClose: handleMenuClose }, children(handleMenuClose))));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.1.12",
+  "version": "1.1.14",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -55,10 +55,10 @@
     "@etsoo/react": "^1.6.42",
     "@etsoo/shared": "^1.1.88",
     "@mui/icons-material": "^5.11.0",
-    "@mui/material": "^5.11.5",
+    "@mui/material": "^5.11.6",
     "@types/pica": "^9.0.1",
     "@types/pulltorefreshjs": "^0.1.5",
-    "@types/react": "^18.0.26",
+    "@types/react": "^18.0.27",
     "@types/react-avatar-editor": "^13.0.0",
     "@types/react-dom": "^18.0.10",
     "@types/react-input-mask": "^3.0.2",
@@ -70,7 +70,7 @@
     "react-dom": "^18.2.0",
     "react-draggable": "^4.4.5",
     "react-imask": "^6.4.3",
-    "react-router-dom": "^6.6.2",
+    "react-router-dom": "^6.7.0",
     "react-window": "^1.8.8"
   },
   "devDependencies": {
@@ -80,14 +80,14 @@
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
-    "@babel/runtime-corejs3": "^7.20.7",
+    "@babel/runtime-corejs3": "^7.20.13",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
-    "@types/jest": "^29.2.5",
-    "@typescript-eslint/eslint-plugin": "^5.48.2",
-    "@typescript-eslint/parser": "^5.48.2",
-    "jest": "^29.3.1",
-    "jest-environment-jsdom": "^29.3.1",
+    "@types/jest": "^29.4.0",
+    "@typescript-eslint/eslint-plugin": "^5.49.0",
+    "@typescript-eslint/parser": "^5.49.0",
+    "jest": "^29.4.0",
+    "jest-environment-jsdom": "^29.4.0",
     "typescript": "^4.9.4"
   }
 }

package/src/OptionGroup.tsx

@@ -282,9 +282,6 @@ export function OptionGroup<
             {label}
           </InputLabel>
         )}
-        <Box paddingLeft={2} paddingY="7px">
-          {group}
-        </Box>
         {variant === "outlined" && (
           <NotchedOutline
             label={label && required ? label + " *" : label}
@@ -296,6 +293,9 @@ export function OptionGroup<
             }}
           />
         )}
+        <Box paddingLeft={2} paddingY="7px">
+          {group}
+        </Box>
       </FormControl>
       {helperText && <FormHelperText>{helperText}</FormHelperText>}
     </React.Fragment>

package/src/index.ts

@@ -1,83 +1,86 @@
-export * from './app/CommonApp';
-export * from './app/IServiceApp';
-export * from './app/IServiceAppSettings';
-export * from './app/IServicePage';
-export * from './app/IServiceUser';
-export * from './app/ISmartERPUser';
-export * from './app/Labels';
-export * from './app/ReactApp';
-export * from './app/ServiceApp';
+export * from "./app/CommonApp";
+export * from "./app/IServiceApp";
+export * from "./app/IServiceAppSettings";
+export * from "./app/IServicePage";
+export * from "./app/IServiceUser";
+export * from "./app/ISmartERPUser";
+export * from "./app/Labels";
+export * from "./app/ReactApp";
+export * from "./app/ServiceApp";
 
-export * from './pages/CommonPage';
-export * from './pages/CommonPageProps';
-export * from './pages/DataGridPage';
-export * from './pages/DataGridPageProps';
-export * from './pages/EditPage';
-export * from './pages/FixedListPage';
-export * from './pages/ListPage';
-export * from './pages/ListPageProps';
-export * from './pages/ResponsivePage';
-export * from './pages/ResponsivePageProps';
-export * from './pages/SearchPageProps';
-export * from './pages/TablePage';
-export * from './pages/ViewPage';
+export * from "./pages/CommonPage";
+export * from "./pages/CommonPageProps";
+export * from "./pages/DataGridPage";
+export * from "./pages/DataGridPageProps";
+export * from "./pages/DrawerHeader";
+export * from "./pages/EditPage";
+export * from "./pages/FixedListPage";
+export * from "./pages/LeftDrawer";
+export * from "./pages/ListPage";
+export * from "./pages/ListPageProps";
+export * from "./pages/ResponsivePage";
+export * from "./pages/ResponsivePageProps";
+export * from "./pages/SearchPageProps";
+export * from "./pages/TablePage";
+export * from "./pages/UserMenu";
+export * from "./pages/ViewPage";
 
-export * from './texts/DateText';
-export * from './texts/MoneyText';
-export * from './texts/NumberText';
+export * from "./texts/DateText";
+export * from "./texts/MoneyText";
+export * from "./texts/NumberText";
 
-export * from './AuditDisplay';
-export * from './AutocompleteExtendedProps';
-export * from './BackButton';
-export * from './BridgeCloseButton';
-export * from './ButtonLink';
-export * from './ComboBox';
-export * from './CountdownButton';
-export * from './CountryList';
-export * from './CustomFabProps';
-export * from './DataGridEx';
-export * from './DataGridRenderers';
-export * from './DataSteps';
-export * from './DialogButton';
-export * from './DnDList';
-export * from './DraggablePaperComponent';
-export * from './EmailInput';
-export * from './FabBox';
-export * from './FlexBox';
-export * from './GridDataFormat';
-export * from './HiSelector';
-export * from './IconButtonLink';
-export * from './InputField';
-export * from './ItemList';
-export * from './ListChooser';
-export * from './ListItemRightIcon';
-export * from './ListMoreDisplay';
-export * from './LoadingButton';
-export * from './MaskInput';
-export * from './MobileListItemRenderer';
-export * from './MoreFab';
-export * from './MUGlobal';
-export * from './NotifierMU';
-export * from './OptionGroup';
-export * from './PList';
-export * from './ProgressCount';
-export * from './PullToRefreshUI';
-export * from './ResponsibleContainer';
-export * from './ScrollerListEx';
-export * from './ScrollTopFab';
-export * from './SearchBar';
-export * from './SearchField';
-export * from './SearchOptionGroup';
-export * from './SelectBool';
-export * from './SelectEx';
-export * from './ShowDataComparison';
-export * from './Switch';
-export * from './SwitchAnt';
-export * from './TabBox';
-export * from './TableEx';
-export * from './TextFieldEx';
-export * from './Tiplist';
-export * from './TwoFieldInput';
-export * from './TooltipClick';
-export * from './UserAvatar';
-export * from './UserAvatarEditor';
+export * from "./AuditDisplay";
+export * from "./AutocompleteExtendedProps";
+export * from "./BackButton";
+export * from "./BridgeCloseButton";
+export * from "./ButtonLink";
+export * from "./ComboBox";
+export * from "./CountdownButton";
+export * from "./CountryList";
+export * from "./CustomFabProps";
+export * from "./DataGridEx";
+export * from "./DataGridRenderers";
+export * from "./DataSteps";
+export * from "./DialogButton";
+export * from "./DnDList";
+export * from "./DraggablePaperComponent";
+export * from "./EmailInput";
+export * from "./FabBox";
+export * from "./FlexBox";
+export * from "./GridDataFormat";
+export * from "./HiSelector";
+export * from "./IconButtonLink";
+export * from "./InputField";
+export * from "./ItemList";
+export * from "./ListChooser";
+export * from "./ListItemRightIcon";
+export * from "./ListMoreDisplay";
+export * from "./LoadingButton";
+export * from "./MaskInput";
+export * from "./MobileListItemRenderer";
+export * from "./MoreFab";
+export * from "./MUGlobal";
+export * from "./NotifierMU";
+export * from "./OptionGroup";
+export * from "./PList";
+export * from "./ProgressCount";
+export * from "./PullToRefreshUI";
+export * from "./ResponsibleContainer";
+export * from "./ScrollerListEx";
+export * from "./ScrollTopFab";
+export * from "./SearchBar";
+export * from "./SearchField";
+export * from "./SearchOptionGroup";
+export * from "./SelectBool";
+export * from "./SelectEx";
+export * from "./ShowDataComparison";
+export * from "./Switch";
+export * from "./SwitchAnt";
+export * from "./TabBox";
+export * from "./TableEx";
+export * from "./TextFieldEx";
+export * from "./Tiplist";
+export * from "./TwoFieldInput";
+export * from "./TooltipClick";
+export * from "./UserAvatar";
+export * from "./UserAvatarEditor";

package/src/pages/DrawerHeader.tsx

@@ -0,0 +1,14 @@
+import { styled } from "@mui/material";
+
+/**
+ * Common drawer header
+ */
+export const DrawerHeader = styled("div")(({ theme }) => ({
+  // necessary for content to be below app bar
+  ...theme.mixins.toolbar,
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing(1),
+  padding: theme.spacing(0, 1, 0, 2),
+  justifyContent: "flex-start"
+}));

package/src/pages/LeftDrawer.tsx

@@ -0,0 +1,119 @@
+import {
+  Avatar,
+  Divider,
+  Drawer,
+  IconButton,
+  List,
+  Typography
+} from "@mui/material";
+import React, { PropsWithChildren } from "react";
+import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
+import { DrawerHeader } from "./DrawerHeader";
+import { globalApp } from "../app/ReactApp";
+
+/**
+ * Left drawer methods
+ */
+export interface LeftDrawerMethods {
+  open(): void;
+}
+
+/**
+ * Left drawer props
+ */
+export interface LeftDrawerProps {
+  /**
+   * Show when md up
+   */
+  mdUp: boolean;
+
+  /**
+   * Organization
+   */
+  organization?: number;
+
+  /**
+   * Width
+   */
+  width: number;
+
+  /**
+   * Application name
+   */
+  appName: string;
+
+  /**
+   * Minimize hanlder
+   */
+  onMinimize?: () => void;
+}
+
+export const LeftDrawer = React.forwardRef<
+  LeftDrawerMethods,
+  PropsWithChildren<LeftDrawerProps>
+>((props, ref) => {
+  // Destruct
+  const { mdUp, width, appName, onMinimize, children } = props;
+
+  // Menu open/close state
+  const [open, setOpen] = React.useState<boolean>();
+
+  const handleDrawerClose = () => {
+    if (onMinimize) onMinimize();
+    setOpen(false);
+  };
+
+  React.useImperativeHandle(ref, () => ({
+    open() {
+      setOpen(true);
+    }
+  }));
+
+  // Ready
+  React.useEffect(() => {
+    setOpen(mdUp);
+  }, [mdUp]);
+
+  return (
+    <Drawer
+      sx={{
+        width: open ? width : 0,
+        flexShrink: 0,
+        "& .MuiDrawer-paper": {
+          width: open ? width : 0,
+          boxSizing: "border-box"
+        }
+      }}
+      anchor="left"
+      variant={mdUp ? "persistent" : "temporary"}
+      open={open}
+      onClose={mdUp ? undefined : handleDrawerClose}
+      ModalProps={{
+        keepMounted: true // Better open performance on mobile.
+      }}
+    >
+      <DrawerHeader>
+        <a
+          href="https://www.etsoo.com"
+          title={globalApp?.get("etsoo") ?? "ETSOO"}
+          target="_blank"
+          rel="noreferrer"
+        >
+          <Avatar
+            src={process.env.PUBLIC_URL + "/logo192.png"}
+            variant="square"
+            sx={{ marginLeft: -0.5, marginRight: 1.5, marginBottom: 1 }}
+          />
+        </a>
+        <Typography noWrap component="div" title={appName}>
+          {appName}
+        </Typography>
+        <IconButton size="small" onClick={handleDrawerClose}>
+          <ChevronLeftIcon />
+        </IconButton>
+      </DrawerHeader>
+      <Divider />
+      <List onClick={mdUp ? undefined : handleDrawerClose}>{children}</List>
+    </Drawer>
+  );
+});

package/src/pages/UserMenu.tsx

@@ -0,0 +1,111 @@
+import { IconButton, Menu } from "@mui/material";
+import React from "react";
+import { UserAvatar } from "../UserAvatar";
+
+/**
+ * User menu props
+ */
+export interface UserMenuProps {
+  /**
+   * Organization id
+   */
+  organization: number | undefined;
+
+  /**
+   * User name
+   */
+  name: string;
+
+  /**
+   * User avatar
+   */
+  avatar: string | undefined;
+
+  /**
+   * Children
+   * @param handleMenuClose Handler
+   */
+  children(handleMenuClose: () => void): React.ReactNode;
+}
+
+/**
+ * User menu
+ * @param props Props
+ * @returns Component
+ */
+export function UserMenu(props: UserMenuProps) {
+  // Destruct
+  const { children, name, avatar } = props;
+
+  // User menu anchor
+  const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement>();
+
+  // User menu open or not
+  const isMenuOpen = Boolean(anchorEl);
+
+  // User menu
+  const handleUserMenuOpen = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleMenuClose = () => {
+    setAnchorEl(undefined);
+  };
+
+  return (
+    <React.Fragment>
+      <IconButton
+        edge="end"
+        aria-haspopup="true"
+        onClick={handleUserMenuOpen}
+        color="inherit"
+      >
+        <UserAvatar title={name} src={avatar} />
+      </IconButton>
+      <Menu
+        PaperProps={{
+          elevation: 0,
+          sx: {
+            overflow: "visible",
+            filter: "drop-shadow(0px 2px 8px rgba(0,0,0,0.32))",
+            mt: -0.4,
+            "& .MuiAvatar-root": {
+              width: 32,
+              height: 32,
+              ml: -0.5,
+              mr: 1
+            },
+            "&:before": {
+              content: '""',
+              display: "block",
+              position: "absolute",
+              top: 0,
+              right: 14,
+              width: 10,
+              height: 10,
+              bgcolor: "background.paper",
+              transform: "translateY(-50%) rotate(45deg)",
+              zIndex: 0
+            }
+          }
+        }}
+        disableScrollLock
+        anchorEl={anchorEl}
+        anchorOrigin={{
+          vertical: "bottom",
+          horizontal: "right"
+        }}
+        keepMounted
+        transformOrigin={{
+          vertical: "top",
+          horizontal: "right"
+        }}
+        open={isMenuOpen}
+        onClick={handleMenuClose}
+        onClose={handleMenuClose}
+      >
+        {children(handleMenuClose)}
+      </Menu>
+    </React.Fragment>
+  );
+}