@proteinjs/ui 2.0.4 → 2.0.6

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.0.6](https://github.com/proteinjs/ui/compare/@proteinjs/ui@2.0.5...@proteinjs/ui@2.0.6) (2024-05-17)
+
+
+### Bug Fixes
+
+* allow custom account menu in page container ([9fdb291](https://github.com/proteinjs/ui/commit/9fdb291e8595d9ec8a05b395a413e4bc05ead59b))
+
+
+
+
+
 ## [2.0.4](https://github.com/proteinjs/ui/compare/@proteinjs/ui@2.0.3...@proteinjs/ui@2.0.4) (2024-05-10)
 
 

package/dist/index.d.ts

@@ -7,6 +7,7 @@ export * from './src/form/fields/TextField';
 export * from './src/form/container/FormPaper';
 export * from './src/form/container/FormPage';
 export * from './src/container/PageContainer';
+export * from './src/container/AccountAuth';
 export * from './src/container/NavMenu';
 export * from './src/list/NestedList';
 export * from './src/table/Table';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAElC,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,uBAAuB,CAAC;AAEtC,cAAc,6BAA6B,CAAC;AAE5C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,+BAA+B,CAAC;AAE9C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,yBAAyB,CAAC;AAExC,cAAc,uBAAuB,CAAC;AAEtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAElC,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,uBAAuB,CAAC;AAEtC,cAAc,6BAA6B,CAAC;AAE5C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,+BAA+B,CAAC;AAE9C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,yBAAyB,CAAC;AAExC,cAAc,uBAAuB,CAAC;AAEtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC"}

package/dist/index.js

@@ -23,6 +23,7 @@ __exportStar(require("./src/form/fields/TextField"), exports);
 __exportStar(require("./src/form/container/FormPaper"), exports);
 __exportStar(require("./src/form/container/FormPage"), exports);
 __exportStar(require("./src/container/PageContainer"), exports);
+__exportStar(require("./src/container/AccountAuth"), exports);
 __exportStar(require("./src/container/NavMenu"), exports);
 __exportStar(require("./src/list/NestedList"), exports);
 __exportStar(require("./src/table/Table"), exports);

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,sDAAoC;AACpC,oDAAkC;AAElC,kDAAgC;AAChC,mDAAiC;AACjC,wDAAsC;AAEtC,8DAA4C;AAE5C,iEAA+C;AAC/C,gEAA8C;AAE9C,gEAA8C;AAC9C,0DAAwC;AAExC,wDAAsC;AAEtC,oDAAkC;AAClC,0DAAwC;AACxC,0DAAwC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,sDAAoC;AACpC,oDAAkC;AAElC,kDAAgC;AAChC,mDAAiC;AACjC,wDAAsC;AAEtC,8DAA4C;AAE5C,iEAA+C;AAC/C,gEAA8C;AAE9C,gEAA8C;AAC9C,8DAA4C;AAC5C,0DAAwC;AAExC,wDAAsC;AAEtC,oDAAkC;AAClC,0DAAwC;AACxC,0DAAwC"}

package/dist/src/container/AccountAuth.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Page } from '../router/Page';
+import { LinkOrDialog } from './NavMenu';
+export type AccountAuth = {
+    isLoggedIn: boolean;
+    canViewPage: (page: Page) => boolean;
+    /** Either a dialog component, or a path to be redirected to */
+    login: LinkOrDialog;
+    logout: () => Promise<string>;
+};
+interface LoginProps {
+    auth: AccountAuth;
+    loginClicked: boolean;
+    setLoginClicked: React.Dispatch<React.SetStateAction<boolean>>;
+}
+export declare function LoginComponent({ auth, loginClicked, setLoginClicked }: LoginProps): React.JSX.Element | null;
+export declare function useAuthActions(auth: AccountAuth | undefined, loginClicked: boolean, setLoginClicked: React.Dispatch<React.SetStateAction<boolean>>): {
+    login: () => void;
+    logout: () => Promise<void>;
+};
+export declare function qualifiedPath(path: string): string;
+export {};
+//# sourceMappingURL=AccountAuth.d.ts.map

package/dist/src/container/AccountAuth.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccountAuth.d.ts","sourceRoot":"","sources":["../../../src/container/AccountAuth.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AACtC,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAGzC,MAAM,MAAM,WAAW,GAAG;IACxB,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC;IACrC,+DAA+D;IAC/D,KAAK,EAAE,YAAY,CAAC;IACpB,MAAM,EAAE,MAAM,OAAO,CAAC,MAAM,CAAC,CAAC;CAC/B,CAAC;AAEF,UAAU,UAAU;IAClB,IAAI,EAAE,WAAW,CAAC;IAClB,YAAY,EAAE,OAAO,CAAC;IACtB,eAAe,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;CAChE;AAED,wBAAgB,cAAc,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,eAAe,EAAE,EAAE,UAAU,4BAQjF;AAED,wBAAgB,cAAc,CAC5B,IAAI,EAAE,WAAW,GAAG,SAAS,EAC7B,YAAY,EAAE,OAAO,EACrB,eAAe,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;;;EAqB/D;AAED,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,UAMzC"}

package/dist/src/container/AccountAuth.js

@@ -0,0 +1,91 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.qualifiedPath = exports.useAuthActions = exports.LoginComponent = void 0;
+var react_1 = __importDefault(require("react"));
+var react_router_dom_1 = require("react-router-dom");
+function LoginComponent(_a) {
+    var auth = _a.auth, loginClicked = _a.loginClicked, setLoginClicked = _a.setLoginClicked;
+    if (!loginClicked || !auth || typeof auth.login === 'string') {
+        return null;
+    }
+    var LoginComponent = auth.login;
+    return react_1.default.createElement(LoginComponent, { onClose: function () { return setLoginClicked(false); } });
+}
+exports.LoginComponent = LoginComponent;
+function useAuthActions(auth, loginClicked, setLoginClicked) {
+    var _this = this;
+    var navigate = (0, react_router_dom_1.useNavigate)();
+    var logout = function () { return __awaiter(_this, void 0, void 0, function () {
+        var redirectPath;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!auth) {
+                        return [2 /*return*/];
+                    }
+                    return [4 /*yield*/, auth.logout()];
+                case 1:
+                    redirectPath = _a.sent();
+                    navigate(qualifiedPath(redirectPath));
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    var login = function () {
+        if (auth && typeof auth.login === 'string') {
+            navigate(qualifiedPath(auth.login));
+        }
+        else {
+            setLoginClicked(!loginClicked);
+        }
+    };
+    return { login: login, logout: logout };
+}
+exports.useAuthActions = useAuthActions;
+function qualifiedPath(path) {
+    if (path.startsWith('/')) {
+        return path;
+    }
+    return "/".concat(path);
+}
+exports.qualifiedPath = qualifiedPath;
+//# sourceMappingURL=AccountAuth.js.map

package/dist/src/container/AccountAuth.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccountAuth.js","sourceRoot":"","sources":["../../../src/container/AccountAuth.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAA0B;AAG1B,qDAA+C;AAgB/C,SAAgB,cAAc,CAAC,EAAmD;QAAjD,IAAI,UAAA,EAAE,YAAY,kBAAA,EAAE,eAAe,qBAAA;IAClE,IAAI,CAAC,YAAY,IAAI,CAAC,IAAI,IAAI,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,EAAE;QAC5D,OAAO,IAAI,CAAC;KACb;IAED,IAAM,cAAc,GAAG,IAAI,CAAC,KAAqD,CAAC;IAElF,OAAO,8BAAC,cAAc,IAAC,OAAO,EAAE,cAAM,OAAA,eAAe,CAAC,KAAK,CAAC,EAAtB,CAAsB,GAAI,CAAC;AACnE,CAAC;AARD,wCAQC;AAED,SAAgB,cAAc,CAC5B,IAA6B,EAC7B,YAAqB,EACrB,eAA8D;IAHhE,iBAwBC;IAnBC,IAAM,QAAQ,GAAG,IAAA,8BAAW,GAAE,CAAC;IAE/B,IAAM,MAAM,GAAG;;;;;oBACb,IAAI,CAAC,IAAI,EAAE;wBACT,sBAAO;qBACR;oBACoB,qBAAM,IAAI,CAAC,MAAM,EAAE,EAAA;;oBAAlC,YAAY,GAAG,SAAmB;oBACxC,QAAQ,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC,CAAC;;;;SACvC,CAAC;IAEF,IAAM,KAAK,GAAG;QACZ,IAAI,IAAI,IAAI,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,EAAE;YAC1C,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;SACrC;aAAM;YACL,eAAe,CAAC,CAAC,YAAY,CAAC,CAAC;SAChC;IACH,CAAC,CAAC;IAEF,OAAO,EAAE,KAAK,OAAA,EAAE,MAAM,QAAA,EAAE,CAAC;AAC3B,CAAC;AAxBD,wCAwBC;AAED,SAAgB,aAAa,CAAC,IAAY;IACxC,IAAI,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE;QACxB,OAAO,IAAI,CAAC;KACb;IAED,OAAO,WAAI,IAAI,CAAE,CAAC;AACpB,CAAC;AAND,sCAMC"}

package/dist/src/container/AccountIconButton.d.ts

@@ -1,19 +1,13 @@
 import React from 'react';
 import { LinkOrDialog } from './NavMenu';
-import { Page } from '../router/Page';
+import { AccountAuth } from './AccountAuth';
 export type AccountIconButtonProps = {
     loginClicked: boolean;
     setLoginClicked: React.Dispatch<React.SetStateAction<boolean>>;
-    auth?: {
-        isLoggedIn: boolean;
-        canViewPage: (page: Page) => boolean;
-        /** Either a dialog component, or a path to be redirected to */
-        login: LinkOrDialog;
-        logout: () => Promise<string>;
-    };
+    auth?: AccountAuth;
     profileMenuItems?: {
         menuItemChildren: React.ReactNode;
-        action: LinkOrDialog | (() => void);
+        action?: LinkOrDialog;
     }[];
 };
 export declare const AccountIconButton: ({ loginClicked, setLoginClicked, auth, profileMenuItems, }: AccountIconButtonProps) => React.JSX.Element | null;

package/dist/src/container/AccountIconButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AccountIconButton.d.ts","sourceRoot":"","sources":["../../../src/container/AccountIconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AAGtC,MAAM,MAAM,sBAAsB,GAAG;IACnC,YAAY,EAAE,OAAO,CAAC;IACtB,eAAe,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IAC/D,IAAI,CAAC,EAAE;QACL,UAAU,EAAE,OAAO,CAAC;QACpB,WAAW,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC;QACrC,+DAA+D;QAC/D,KAAK,EAAE,YAAY,CAAC;QACpB,MAAM,EAAE,MAAM,OAAO,CAAC,MAAM,CAAC,CAAC;KAC/B,CAAC;IACF,gBAAgB,CAAC,EAAE;QAAE,gBAAgB,EAAE,KAAK,CAAC,SAAS,CAAC;QAAC,MAAM,EAAE,YAAY,GAAG,CAAC,MAAM,IAAI,CAAC,CAAA;KAAE,EAAE,CAAC;CACjG,CAAC;AAEF,eAAO,MAAM,iBAAiB,+DAK3B,sBAAsB,6BA+GxB,CAAC"}
+{"version":3,"file":"AccountIconButton.d.ts","sourceRoot":"","sources":["../../../src/container/AccountIconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAEzC,OAAO,EAAE,WAAW,EAAiD,MAAM,eAAe,CAAC;AAE3F,MAAM,MAAM,sBAAsB,GAAG;IACnC,YAAY,EAAE,OAAO,CAAC;IACtB,eAAe,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IAC/D,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,gBAAgB,CAAC,EAAE;QAAE,gBAAgB,EAAE,KAAK,CAAC,SAAS,CAAC;QAAC,MAAM,CAAC,EAAE,YAAY,CAAA;KAAE,EAAE,CAAC;CACnF,CAAC;AAEF,eAAO,MAAM,iBAAiB,+DAK3B,sBAAsB,6BAqFxB,CAAC"}

package/dist/src/container/AccountIconButton.js

@@ -1,40 +1,4 @@
 "use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -45,12 +9,14 @@ var material_1 = require("@mui/material");
 var AccountCircle_1 = __importDefault(require("@mui/icons-material/AccountCircle"));
 var react_router_dom_1 = require("react-router-dom");
 var Logout_1 = __importDefault(require("@mui/icons-material/Logout"));
+var AccountAuth_1 = require("./AccountAuth");
 var AccountIconButton = function (_a) {
     var loginClicked = _a.loginClicked, setLoginClicked = _a.setLoginClicked, auth = _a.auth, profileMenuItems = _a.profileMenuItems;
     var navigate = (0, react_router_dom_1.useNavigate)();
-    var _b = react_1.default.useState(-1), selectedProfileMenuItem = _b[0], setSelectedProfileMenuItem = _b[1];
-    var _c = react_1.default.useState(1), selectedIndex = _c[0], setSelectedIndex = _c[1];
-    var _d = react_1.default.useState(null), anchorEl = _d[0], setAccountMenuAnchorEl = _d[1];
+    var _b = (0, AccountAuth_1.useAuthActions)(auth, loginClicked, setLoginClicked), logout = _b.logout, login = _b.login;
+    var _c = react_1.default.useState(-1), selectedProfileMenuItem = _c[0], setSelectedProfileMenuItem = _c[1];
+    var _d = react_1.default.useState(1), selectedIndex = _d[0], setSelectedIndex = _d[1];
+    var _e = react_1.default.useState(null), anchorEl = _e[0], setAccountMenuAnchorEl = _e[1];
     var open = Boolean(anchorEl);
     if (!auth) {
         return null;
@@ -69,7 +35,7 @@ var AccountIconButton = function (_a) {
                 profileMenuItems &&
                     profileMenuItems.map(function (profileMenuItem, index) { return (react_1.default.createElement(material_1.MenuItem, { key: index, onClick: function (event) {
                             if (typeof profileMenuItem.action === 'string') {
-                                navigate(qualifiedPath(profileMenuItem.action));
+                                navigate((0, AccountAuth_1.qualifiedPath)(profileMenuItem.action));
                                 return;
                             }
                             else if (isFunction(profileMenuItem.action)) {
@@ -80,28 +46,15 @@ var AccountIconButton = function (_a) {
                                 setSelectedIndex(index);
                             }
                         }, selected: selectedIndex === index }, profileMenuItem.menuItemChildren)); }),
-                react_1.default.createElement(material_1.MenuItem, { key: 'logout', onClick: function (event) { return __awaiter(void 0, void 0, void 0, function () {
-                        var redirectPath;
-                        return __generator(this, function (_a) {
-                            switch (_a.label) {
-                                case 0: return [4 /*yield*/, auth.logout()];
-                                case 1:
-                                    redirectPath = _a.sent();
-                                    navigate(qualifiedPath(redirectPath));
-                                    return [2 /*return*/];
-                            }
-                        });
-                    }); } },
+                react_1.default.createElement(material_1.MenuItem, { key: 'logout', onClick: logout },
                     react_1.default.createElement(material_1.ListItemIcon, null,
                         react_1.default.createElement(Logout_1.default, null)),
                     react_1.default.createElement(material_1.Typography, null, "Logout"))),
             react_1.default.createElement(ProfileMenuItemAction, null)));
     }
     return (react_1.default.createElement("div", null,
-        react_1.default.createElement(material_1.Button, { color: 'inherit', onClick: function (event) {
-                return auth && typeof auth.login === 'string' ? navigate(qualifiedPath(auth.login)) : setLoginClicked(!loginClicked);
-            } }, "Login"),
-        react_1.default.createElement(Login, null)));
+        react_1.default.createElement(material_1.Button, { color: 'inherit', onClick: login }, "Login"),
+        react_1.default.createElement(AccountAuth_1.LoginComponent, { auth: auth, loginClicked: loginClicked, setLoginClicked: setLoginClicked })));
     function ProfileMenuItemAction() {
         if (selectedProfileMenuItem == -1 || !auth || !profileMenuItems) {
             return null;
@@ -115,18 +68,6 @@ var AccountIconButton = function (_a) {
         }
         return null;
     }
-    function Login() {
-        if (!loginClicked || !auth || typeof auth.login === 'string') {
-            return null;
-        }
-        return react_1.default.createElement(auth.login, { onClose: function () { return setLoginClicked(false); } });
-    }
-    function qualifiedPath(path) {
-        if (path.startsWith('/')) {
-            return path;
-        }
-        return "/".concat(path);
-    }
 };
 exports.AccountIconButton = AccountIconButton;
 function isDialog(prop) {

package/dist/src/container/AccountIconButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccountIconButton.js","sourceRoot":"","sources":["../../../src/container/AccountIconButton.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"AccountIconButton.js","sourceRoot":"","sources":["../../../src/container/AccountIconButton.tsx"],"names":[],"mappings":"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"}

package/dist/src/container/PageContainer.d.ts

@@ -3,24 +3,22 @@ import { AppBarProps, ToolbarProps } from '@mui/material';
 import { NavigateFunction } from 'react-router-dom';
 import { Page } from '../router/Page';
 import { LinkOrDialog, NavMenuItem } from './NavMenu';
+import { AccountIconButtonProps } from './AccountIconButton';
+import { AccountAuth } from './AccountAuth';
 export type PageContainerProps = {
     page: Page;
-    auth?: {
-        isLoggedIn: boolean;
-        canViewPage: (page: Page) => boolean;
-        login: LinkOrDialog;
-        logout: () => Promise<string>;
-    };
+    auth?: AccountAuth;
     appName?: string;
     toolbarChildren?: React.ReactNode;
     /** An array of menu items, each containing a React node and an action triggered when selected, either a string, dialog component, or a function. */
     profileMenuItems?: {
         menuItemChildren: React.ReactNode;
-        action: LinkOrDialog | (() => void);
+        action?: LinkOrDialog;
     }[];
     navMenuItems?: NavMenuItem[];
     appBarProps?: AppBarProps;
     toolbarProps?: ToolbarProps;
+    CustomAccountIconButton?: React.ComponentType<AccountIconButtonProps>;
 };
 declare const Page: React.MemoExoticComponent<({ auth, page, navigate, loginClicked, setLoginClicked, }: {
     auth: PageContainerProps['auth'];

package/dist/src/container/PageContainer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PageContainer.d.ts","sourceRoot":"","sources":["../../../src/container/PageContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAgE,WAAW,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAExH,OAAO,EAAE,gBAAgB,EAAe,MAAM,kBAAkB,CAAC;AACjE,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AAEtC,OAAO,EAAE,YAAY,EAAW,WAAW,EAAE,MAAM,WAAW,CAAC;AAW/D,MAAM,MAAM,kBAAkB,GAAG;IAC/B,IAAI,EAAE,IAAI,CAAC;IACX,IAAI,CAAC,EAAE;QACL,UAAU,EAAE,OAAO,CAAC;QACpB,WAAW,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC;QACrC,KAAK,EAAE,YAAY,CAAC;QACpB,MAAM,EAAE,MAAM,OAAO,CAAC,MAAM,CAAC,CAAC;KAC/B,CAAC;IACF,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,oJAAoJ;IACpJ,gBAAgB,CAAC,EAAE;QAAE,gBAAgB,EAAE,KAAK,CAAC,SAAS,CAAC;QAAC,MAAM,EAAE,YAAY,GAAG,CAAC,MAAM,IAAI,CAAC,CAAA;KAAE,EAAE,CAAC;IAChG,YAAY,CAAC,EAAE,WAAW,EAAE,CAAC;IAC7B,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B,CAAC;AAEF,QAAA,MAAM,IAAI;UAQA,kBAAkB,CAAC,MAAM,CAAC;UAC1B,kBAAkB,CAAC,MAAM,CAAC;cACtB,gBAAgB;kBACZ,OAAO;oCACW,OAAO,KAAK,IAAI;+BAiBnD,CAAC;AAEF,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,qBAuEtD"}
+{"version":3,"file":"PageContainer.d.ts","sourceRoot":"","sources":["../../../src/container/PageContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAgD,WAAW,EAAE,YAAY,EAAa,MAAM,eAAe,CAAC;AAEnH,OAAO,EAAE,gBAAgB,EAAe,MAAM,kBAAkB,CAAC;AACjE,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AAEtC,OAAO,EAAE,YAAY,EAAW,WAAW,EAAE,MAAM,WAAW,CAAC;AAC/D,OAAO,EAAqB,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAChF,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAU5C,MAAM,MAAM,kBAAkB,GAAG;IAC/B,IAAI,EAAE,IAAI,CAAC;IACX,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,oJAAoJ;IACpJ,gBAAgB,CAAC,EAAE;QAAE,gBAAgB,EAAE,KAAK,CAAC,SAAS,CAAC;QAAC,MAAM,CAAC,EAAE,YAAY,CAAA;KAAE,EAAE,CAAC;IAClF,YAAY,CAAC,EAAE,WAAW,EAAE,CAAC;IAC7B,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,uBAAuB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,sBAAsB,CAAC,CAAC;CACvE,CAAC;AAEF,QAAA,MAAM,IAAI;UAQA,kBAAkB,CAAC,MAAM,CAAC;UAC1B,kBAAkB,CAAC,MAAM,CAAC;cACtB,gBAAgB;kBACZ,OAAO;oCACW,OAAO,KAAK,IAAI;+BAiBnD,CAAC;AAEF,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,qBAqFtD"}

package/dist/src/container/PageContainer.js

@@ -44,7 +44,7 @@ var Page = react_1.default.memo(function (_a) {
 });
 function PageContainer(props) {
     var navigate = (0, react_router_dom_1.useNavigate)();
-    var page = props.page, auth = props.auth, navMenuItems = props.navMenuItems, appName = props.appName, toolbarChildren = props.toolbarChildren, profileMenuItems = props.profileMenuItems, appBarProps = props.appBarProps, toolbarProps = props.toolbarProps;
+    var page = props.page, auth = props.auth, navMenuItems = props.navMenuItems, appName = props.appName, toolbarChildren = props.toolbarChildren, profileMenuItems = props.profileMenuItems, appBarProps = props.appBarProps, toolbarProps = props.toolbarProps, CustomAccountIconButton = props.CustomAccountIconButton;
     var _a = react_1.default.useState(false), loginClicked = _a[0], setLoginClicked = _a[1];
     var _b = react_1.default.useState(false), navMenuOpen = _b[0], setNavMenuOpen = _b[1];
     react_1.default.useEffect(function () {
@@ -79,7 +79,7 @@ function PageContainer(props) {
                 appName && (react_1.default.createElement(material_1.Typography, { variant: 'h5', sx: { flexGrow: 1, color: 'common.white' } }, appName)),
                 toolbarChildren,
                 react_1.default.createElement("div", { style: { flexGrow: 1 } }),
-                react_1.default.createElement(AccountIconButton_1.AccountIconButton, __assign({ loginClicked: loginClicked, setLoginClicked: setLoginClicked, auth: auth }, (profileMenuItems ? { profileMenuItems: profileMenuItems } : {}))))),
+                CustomAccountIconButton ? (react_1.default.createElement(CustomAccountIconButton, { loginClicked: loginClicked, setLoginClicked: setLoginClicked, auth: auth })) : (react_1.default.createElement(AccountIconButton_1.AccountIconButton, __assign({ loginClicked: loginClicked, setLoginClicked: setLoginClicked, auth: auth }, (profileMenuItems ? { profileMenuItems: profileMenuItems } : {})))))),
         navMenuItems && (react_1.default.createElement(NavMenu_1.NavMenu, { navMenuItems: navMenuItems, navMenuOpen: navMenuOpen, setNavMenuOpen: setNavMenuOpen })),
         react_1.default.createElement(Page, { auth: auth, page: page, navigate: navigate, loginClicked: loginClicked, setLoginClicked: setLoginClicked })));
 }

package/dist/src/container/PageContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageContainer.js","sourceRoot":"","sources":["../../../src/container/PageContainer.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"PageContainer.js","sourceRoot":"","sources":["../../../src/container/PageContainer.tsx"],"names":[],"mappings":"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"}

package/index.ts

@@ -11,6 +11,7 @@ export * from './src/form/container/FormPaper';
 export * from './src/form/container/FormPage';
 
 export * from './src/container/PageContainer';
+export * from './src/container/AccountAuth';
 export * from './src/container/NavMenu';
 
 export * from './src/list/NestedList';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proteinjs/ui",
-  "version": "2.0.4",
+  "version": "2.0.6",
   "description": "UI libs",
   "publishConfig": {
     "access": "public"
@@ -25,8 +25,8 @@
     "@emotion/styled": "11.11.0",
     "@mui/icons-material": "5.14.11",
     "@mui/material": "5.14.11",
-    "@proteinjs/reflection": "1.1.1",
-    "@proteinjs/util": "1.1.0",
+    "@proteinjs/reflection": "1.1.5",
+    "@proteinjs/util": "1.1.2",
     "history": "5.0.0",
     "moment": "2.29.4",
     "query-string": "6.13.2",
@@ -37,7 +37,7 @@
     "string": "3.3.3"
   },
   "devDependencies": {
-    "@proteinjs/reflection-build": "1.0.16",
+    "@proteinjs/reflection-build": "1.0.19",
     "@types/node": "14.0.13",
     "@types/react": "18.2.23",
     "@types/react-dom": "18.2.8",
@@ -53,5 +53,5 @@
   },
   "main": "./dist/generated/index.js",
   "types": "./dist/generated/index.d.ts",
-  "gitHead": "53f91d7ff1c0f2258033246151300b3fd7ef9ae2"
+  "gitHead": "a51c4c8944bc140db08655a5f1d059515165edae"
 }

package/src/container/AccountAuth.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { Page } from '../router/Page';
+import { LinkOrDialog } from './NavMenu';
+import { useNavigate } from 'react-router-dom';
+
+export type AccountAuth = {
+  isLoggedIn: boolean;
+  canViewPage: (page: Page) => boolean;
+  /** Either a dialog component, or a path to be redirected to */
+  login: LinkOrDialog;
+  logout: () => Promise<string>;
+};
+
+interface LoginProps {
+  auth: AccountAuth;
+  loginClicked: boolean;
+  setLoginClicked: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+export function LoginComponent({ auth, loginClicked, setLoginClicked }: LoginProps) {
+  if (!loginClicked || !auth || typeof auth.login === 'string') {
+    return null;
+  }
+
+  const LoginComponent = auth.login as React.ComponentType<{ onClose: () => void }>;
+
+  return <LoginComponent onClose={() => setLoginClicked(false)} />;
+}
+
+export function useAuthActions(
+  auth: AccountAuth | undefined,
+  loginClicked: boolean,
+  setLoginClicked: React.Dispatch<React.SetStateAction<boolean>>
+) {
+  const navigate = useNavigate();
+
+  const logout = async () => {
+    if (!auth) {
+      return;
+    }
+    const redirectPath = await auth.logout();
+    navigate(qualifiedPath(redirectPath));
+  };
+
+  const login = () => {
+    if (auth && typeof auth.login === 'string') {
+      navigate(qualifiedPath(auth.login));
+    } else {
+      setLoginClicked(!loginClicked);
+    }
+  };
+
+  return { login, logout };
+}
+
+export function qualifiedPath(path: string) {
+  if (path.startsWith('/')) {
+    return path;
+  }
+
+  return `/${path}`;
+}

package/src/container/AccountIconButton.tsx

@@ -3,20 +3,14 @@ import { Button, IconButton, ListItemIcon, Menu, MenuItem, Typography } from '@m
 import AccountCircle from '@mui/icons-material/AccountCircle';
 import { useNavigate } from 'react-router-dom';
 import { LinkOrDialog } from './NavMenu';
-import { Page } from '../router/Page';
 import LogoutIcon from '@mui/icons-material/Logout';
+import { AccountAuth, LoginComponent, qualifiedPath, useAuthActions } from './AccountAuth';
 
 export type AccountIconButtonProps = {
   loginClicked: boolean;
   setLoginClicked: React.Dispatch<React.SetStateAction<boolean>>;
-  auth?: {
-    isLoggedIn: boolean;
-    canViewPage: (page: Page) => boolean;
-    /** Either a dialog component, or a path to be redirected to */
-    login: LinkOrDialog;
-    logout: () => Promise<string>;
-  };
-  profileMenuItems?: { menuItemChildren: React.ReactNode; action: LinkOrDialog | (() => void) }[];
+  auth?: AccountAuth;
+  profileMenuItems?: { menuItemChildren: React.ReactNode; action?: LinkOrDialog }[];
 };
 
 export const AccountIconButton = ({
@@ -26,6 +20,7 @@ export const AccountIconButton = ({
   profileMenuItems,
 }: AccountIconButtonProps) => {
   const navigate = useNavigate();
+  const { logout, login } = useAuthActions(auth, loginClicked, setLoginClicked);
   const [selectedProfileMenuItem, setSelectedProfileMenuItem] = React.useState<number>(-1);
   const [selectedIndex, setSelectedIndex] = React.useState<number>(1);
   const [anchorEl, setAccountMenuAnchorEl] = React.useState<null | HTMLElement>(null);
@@ -71,13 +66,7 @@ export const AccountIconButton = ({
                 {profileMenuItem.menuItemChildren}
               </MenuItem>
             ))}
-          <MenuItem
-            key='logout'
-            onClick={async (event) => {
-              const redirectPath = await auth.logout();
-              navigate(qualifiedPath(redirectPath));
-            }}
-          >
+          <MenuItem key='logout' onClick={logout}>
             <ListItemIcon>
               <LogoutIcon />
             </ListItemIcon>
@@ -91,15 +80,10 @@ export const AccountIconButton = ({
 
   return (
     <div>
-      <Button
-        color='inherit'
-        onClick={(event) =>
-          auth && typeof auth.login === 'string' ? navigate(qualifiedPath(auth.login)) : setLoginClicked(!loginClicked)
-        }
-      >
+      <Button color='inherit' onClick={login}>
         Login
       </Button>
-      <Login />
+      <LoginComponent auth={auth} loginClicked={loginClicked} setLoginClicked={setLoginClicked} />
     </div>
   );
 
@@ -119,22 +103,6 @@ export const AccountIconButton = ({
 
     return null;
   }
-
-  function Login() {
-    if (!loginClicked || !auth || typeof auth.login === 'string') {
-      return null;
-    }
-
-    return <auth.login onClose={() => setLoginClicked(false)} />;
-  }
-
-  function qualifiedPath(path: string) {
-    if (path.startsWith('/')) {
-      return path;
-    }
-
-    return `/${path}`;
-  }
 };
 
 function isDialog(prop: any): prop is React.ComponentType<{ onClose: () => void }> {

package/src/container/PageContainer.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
-import { AppBar, Toolbar, Box, IconButton, Typography, Theme, SxProps, AppBarProps, ToolbarProps } from '@mui/material';
+import { AppBar, Toolbar, Box, IconButton, Typography, AppBarProps, ToolbarProps, MenuProps } from '@mui/material';
 import MenuIcon from '@mui/icons-material/Menu';
 import { NavigateFunction, useNavigate } from 'react-router-dom';
 import { Page } from '../router/Page';
 import { createUrlParams } from '../router/createUrlParams';
 import { LinkOrDialog, NavMenu, NavMenuItem } from './NavMenu';
-import { AccountIconButton } from './AccountIconButton';
+import { AccountIconButton, AccountIconButtonProps } from './AccountIconButton';
+import { AccountAuth } from './AccountAuth';
 
 function qualifiedPath(path: string) {
   if (path.startsWith('/')) {
@@ -17,19 +18,15 @@ function qualifiedPath(path: string) {
 
 export type PageContainerProps = {
   page: Page;
-  auth?: {
-    isLoggedIn: boolean;
-    canViewPage: (page: Page) => boolean;
-    login: LinkOrDialog;
-    logout: () => Promise<string>;
-  };
+  auth?: AccountAuth;
   appName?: string;
   toolbarChildren?: React.ReactNode;
   /** An array of menu items, each containing a React node and an action triggered when selected, either a string, dialog component, or a function. */
-  profileMenuItems?: { menuItemChildren: React.ReactNode; action: LinkOrDialog | (() => void) }[];
+  profileMenuItems?: { menuItemChildren: React.ReactNode; action?: LinkOrDialog }[];
   navMenuItems?: NavMenuItem[];
   appBarProps?: AppBarProps;
   toolbarProps?: ToolbarProps;
+  CustomAccountIconButton?: React.ComponentType<AccountIconButtonProps>;
 };
 
 const Page = React.memo(
@@ -65,7 +62,17 @@ const Page = React.memo(
 
 export function PageContainer(props: PageContainerProps) {
   const navigate = useNavigate();
-  const { page, auth, navMenuItems, appName, toolbarChildren, profileMenuItems, appBarProps, toolbarProps } = props;
+  const {
+    page,
+    auth,
+    navMenuItems,
+    appName,
+    toolbarChildren,
+    profileMenuItems,
+    appBarProps,
+    toolbarProps,
+    CustomAccountIconButton,
+  } = props;
   const [loginClicked, setLoginClicked] = React.useState(false);
   const [navMenuOpen, setNavMenuOpen] = React.useState(false);
 
@@ -120,12 +127,16 @@ export function PageContainer(props: PageContainerProps) {
           )}
           {toolbarChildren}
           <div style={{ flexGrow: 1 }}></div>
-          <AccountIconButton
-            loginClicked={loginClicked}
-            setLoginClicked={setLoginClicked}
-            auth={auth}
-            {...(profileMenuItems ? { profileMenuItems } : {})}
-          />
+          {CustomAccountIconButton ? (
+            <CustomAccountIconButton loginClicked={loginClicked} setLoginClicked={setLoginClicked} auth={auth} />
+          ) : (
+            <AccountIconButton
+              loginClicked={loginClicked}
+              setLoginClicked={setLoginClicked}
+              auth={auth}
+              {...(profileMenuItems ? { profileMenuItems } : {})}
+            />
+          )}
         </Toolbar>
       </AppBar>
       {navMenuItems && (