@veracity/vui 2.14.8-beta.2 → 2.15.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/header/header.types.d.ts +9 -4
- package/dist/cjs/header/header.types.d.ts.map +1 -1
- package/dist/cjs/header/loggedInHeader.d.ts.map +1 -1
- package/dist/cjs/header/loggedInHeader.js +44 -41
- package/dist/cjs/header/loggedOutHeader.d.ts.map +1 -1
- package/dist/cjs/header/loggedOutHeader.js +17 -3
- package/dist/cjs/input/consts.js +2 -2
- package/dist/cjs/menu/menu.types.d.ts +5 -1
- package/dist/cjs/menu/menu.types.d.ts.map +1 -1
- package/dist/cjs/menu/menuList.d.ts.map +1 -1
- package/dist/cjs/menu/menuList.js +6 -1
- package/dist/esm/header/header.types.d.ts +9 -4
- package/dist/esm/header/header.types.d.ts.map +1 -1
- package/dist/esm/header/loggedInHeader.d.ts.map +1 -1
- package/dist/esm/header/loggedInHeader.js +38 -35
- package/dist/esm/header/loggedOutHeader.d.ts.map +1 -1
- package/dist/esm/header/loggedOutHeader.js +18 -4
- package/dist/esm/input/consts.js +2 -2
- package/dist/esm/menu/menu.types.d.ts +5 -1
- package/dist/esm/menu/menu.types.d.ts.map +1 -1
- package/dist/esm/menu/menuList.d.ts.map +1 -1
- package/dist/esm/menu/menuList.js +6 -1
- package/package.json +1 -1
- package/src/header/header.types.ts +31 -25
- package/src/header/loggedInHeader.tsx +115 -93
- package/src/header/loggedOutHeader.tsx +39 -4
- package/src/input/consts.ts +2 -2
- package/src/menu/menu.types.ts +5 -1
- package/src/menu/menuList.tsx +15 -1
|
@@ -69,12 +69,12 @@ export type HeaderServicesProps = MenuProps & HeaderServicesData & {
|
|
|
69
69
|
showTopBorder?: boolean;
|
|
70
70
|
};
|
|
71
71
|
export type HeaderSupportProps = MenuProps & HeaderServicesData & {};
|
|
72
|
-
export type
|
|
72
|
+
export type HeaderButtonData = {
|
|
73
73
|
/** Provides href to the button link. */
|
|
74
74
|
url?: string;
|
|
75
75
|
};
|
|
76
|
-
export type HeaderSignInProps = ButtonProps &
|
|
77
|
-
export type LoggedInHeaderProps = HeaderProps & {
|
|
76
|
+
export type HeaderSignInProps = ButtonProps & HeaderButtonData;
|
|
77
|
+
export type LoggedInHeaderProps = HeaderProps & HeaderButtonData & {
|
|
78
78
|
/** Socket for account popover icon on the right side. */
|
|
79
79
|
account?: HeaderAccountData | JSX.Element;
|
|
80
80
|
supportLinks?: HeaderServicesData;
|
|
@@ -82,6 +82,7 @@ export type LoggedInHeaderProps = HeaderProps & {
|
|
|
82
82
|
applicationName?: string;
|
|
83
83
|
applicationUrl?: string;
|
|
84
84
|
isApplication?: boolean;
|
|
85
|
+
isCleanLayout?: boolean;
|
|
85
86
|
isSticky?: boolean;
|
|
86
87
|
/** Socket for logo on the left side. */
|
|
87
88
|
logo?: LogoData | JSX.Element;
|
|
@@ -99,6 +100,10 @@ export type LoggedInHeaderProps = HeaderProps & {
|
|
|
99
100
|
showMainLinks?: boolean;
|
|
100
101
|
};
|
|
101
102
|
export type LoggedOutHeaderProps = HeaderProps & {
|
|
103
|
+
/** Socket for the app name on the left side. */
|
|
104
|
+
applicationName?: string;
|
|
105
|
+
applicationUrl?: string;
|
|
106
|
+
isApplication?: boolean;
|
|
102
107
|
/** Socket for create account prompt on the right side. */
|
|
103
108
|
createAccount?: HeaderCreateAccountData | JSX.Element;
|
|
104
109
|
isSticky?: boolean;
|
|
@@ -107,6 +112,6 @@ export type LoggedOutHeaderProps = HeaderProps & {
|
|
|
107
112
|
/** Socket for links in the middle-right section. */
|
|
108
113
|
mainLinks?: HeaderLinkData[] | JSX.Element;
|
|
109
114
|
/** Socket for sign in button on the right side. */
|
|
110
|
-
signIn?:
|
|
115
|
+
signIn?: HeaderButtonData | JSX.Element;
|
|
111
116
|
};
|
|
112
117
|
//# sourceMappingURL=header.types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"header.types.d.ts","sourceRoot":"","sources":["../../../src/header/header.types.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"header.types.d.ts","sourceRoot":"","sources":["../../../src/header/header.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAE3D,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AACjC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AACnC,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAA;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AACnC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AACvC,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAA;AAEzD,MAAM,MAAM,kBAAkB,GAAG,QAAQ,CAAA;AAEzC,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG;IAC9D,SAAS,EAAE,OAAO,CAAA;IAClB,QAAQ,EAAE,OAAO,CAAA;IACjB,YAAY,EAAE,OAAO,CAAA;IACrB,KAAK,EAAE,SAAS,CAAA;IAChB,gBAAgB,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;IAC/C,eAAe,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;IAC9C,eAAe,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAA;CACnD,CAAA;AAED,MAAM,MAAM,uBAAuB,GAAG;IACpC,2CAA2C;IAC3C,GAAG,CAAC,EAAE,MAAM,CAAA;CACb,CAAA;AAED,MAAM,MAAM,wBAAwB,GAAG,QAAQ,GAAG,uBAAuB,CAAA;AAEzE,MAAM,MAAM,cAAc,GAAG;IAC3B,sDAAsD;IACtD,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,kEAAkE;IAClE,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,8CAA8C;IAC9C,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,4DAA4D;IAC5D,GAAG,CAAC,EAAE,MAAM,CAAA;CACb,CAAA;AAED,MAAM,MAAM,mBAAmB,GAAG,aAAa,GAAG,cAAc,CAAA;AAEhE,MAAM,MAAM,oBAAoB,GAAG,SAAS,GAAG;IAC7C,gDAAgD;IAChD,KAAK,CAAC,EAAE,cAAc,EAAE,CAAA;CACzB,CAAA;AAED,MAAM,MAAM,uBAAuB,GAAG;IACpC,2DAA2D;IAC3D,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,sCAAsC;IACtC,GAAG,CAAC,EAAE,MAAM,CAAA;CACb,CAAA;AAED,MAAM,MAAM,wBAAwB,GAAG,WAAW,GAAG,uBAAuB,CAAA;AAE5E,MAAM,MAAM,WAAW,GAAG,WAAW,GACnC,YAAY,CAAC,QAAQ,CAAC,GAAG;IACvB,yIAAyI;IACzI,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAEH,MAAM,MAAM,kBAAkB,GAAG;IAC/B,wDAAwD;IACxD,KAAK,CAAC,EAAE,cAAc,EAAE,CAAA;CACzB,CAAA;AAED,MAAM,MAAM,mBAAmB,GAAG,SAAS,GACzC,kBAAkB,GAAG;IACnB,uDAAuD;IACvD,WAAW,CAAC,EAAE,WAAW,CAAA;IACzB,gDAAgD;IAChD,QAAQ,CAAC,EAAE,KAAK,CAAA;IAChB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,qDAAqD;IACrD,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,2EAA2E;IAC3E,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB,CAAA;AAEH,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,kBAAkB,GAAG,EAAE,CAAA;AAEpE,MAAM,MAAM,gBAAgB,GAAG;IAC7B,wCAAwC;IACxC,GAAG,CAAC,EAAE,MAAM,CAAA;CACb,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG,WAAW,GAAG,gBAAgB,CAAA;AAE9D,MAAM,MAAM,mBAAmB,GAAG,WAAW,GAC3C,gBAAgB,GAAG;IACjB,yDAAyD;IACzD,OAAO,CAAC,EAAE,iBAAiB,GAAG,GAAG,CAAC,OAAO,CAAA;IACzC,YAAY,CAAC,EAAE,kBAAkB,CAAA;IACjC,gDAAgD;IAChD,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,wCAAwC;IACxC,IAAI,CAAC,EAAE,QAAQ,GAAG,GAAG,CAAC,OAAO,CAAA;IAC7B,iDAAiD;IACjD,SAAS,CAAC,EAAE,cAAc,EAAE,GAAG,GAAG,CAAC,OAAO,CAAA;IAC1C,uDAAuD;IACvD,aAAa,CAAC,EAAE,uBAAuB,GAAG,GAAG,CAAC,OAAO,CAAA;IACrD,uDAAuD;IACvD,QAAQ,CAAC,EAAE,kBAAkB,GAAG,GAAG,CAAC,OAAO,CAAA;IAC3C,mKAAmK;IACnK,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,wGAAwG;IACxG,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,qHAAqH;IACrH,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB,CAAA;AAEH,MAAM,MAAM,oBAAoB,GAAG,WAAW,GAAG;IAC/C,gDAAgD;IAChD,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,0DAA0D;IAC1D,aAAa,CAAC,EAAE,uBAAuB,GAAG,GAAG,CAAC,OAAO,CAAA;IACrD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,wCAAwC;IACxC,IAAI,CAAC,EAAE,QAAQ,GAAG,GAAG,CAAC,OAAO,CAAA;IAC7B,oDAAoD;IACpD,SAAS,CAAC,EAAE,cAAc,EAAE,GAAG,GAAG,CAAC,OAAO,CAAA;IAC1C,mDAAmD;IACnD,MAAM,CAAC,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,CAAA;CACxC,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"loggedInHeader.d.ts","sourceRoot":"","sources":["../../../src/header/loggedInHeader.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"loggedInHeader.d.ts","sourceRoot":"","sources":["../../../src/header/loggedInHeader.tsx"],"names":[],"mappings":"AASA,OAAO,EAAkB,mBAAmB,EAAE,MAAM,gBAAgB,CAAA;AAIpE,uHAAuH;AACvH,eAAO,MAAM,cAAc,4DAiLzB,CAAA;AAIF,eAAe,cAAc,CAAA"}
|
|
@@ -17,6 +17,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
17
17
|
exports.LoggedInHeader = void 0;
|
|
18
18
|
const react_1 = __importDefault(require("react"));
|
|
19
19
|
const box_1 = __importDefault(require("../box"));
|
|
20
|
+
const button_1 = __importDefault(require("../button"));
|
|
20
21
|
const core_1 = require("../core");
|
|
21
22
|
const list_1 = __importDefault(require("../list"));
|
|
22
23
|
const utils_1 = require("../utils");
|
|
@@ -26,7 +27,7 @@ const headerAccountUserInfo_1 = __importDefault(require("./headerAccountUserInfo
|
|
|
26
27
|
const headerServicesMessage_1 = __importDefault(require("./headerServicesMessage"));
|
|
27
28
|
/** Displays Header content appropriate for logged-in users, such as services, notifications or account information. */
|
|
28
29
|
exports.LoggedInHeader = (0, core_1.vui)((props, ref) => {
|
|
29
|
-
const { account, supportLinks, applicationName, applicationUrl, children, className, isApplication = false, logo, mainLinks, services, showAltUserInfo = true, showMainLinks = isApplication ? false : true, showServices = true, notifications } = props, rest = __rest(props, ["account", "supportLinks", "applicationName", "applicationUrl", "children", "className", "isApplication", "logo", "mainLinks", "services", "showAltUserInfo", "showMainLinks", "showServices", "notifications"]);
|
|
30
|
+
const { account, supportLinks, applicationName, applicationUrl, children, className, isApplication = false, isCleanLayout = false, logo, mainLinks, services, showAltUserInfo = true, showMainLinks = isApplication ? false : true, showServices = true, notifications, url } = props, rest = __rest(props, ["account", "supportLinks", "applicationName", "applicationUrl", "children", "className", "isApplication", "isCleanLayout", "logo", "mainLinks", "services", "showAltUserInfo", "showMainLinks", "showServices", "notifications", "url"]);
|
|
30
31
|
if (isApplication) {
|
|
31
32
|
if (!applicationName) {
|
|
32
33
|
console.error('Header: isApplication is true but applicationName is not set.');
|
|
@@ -38,7 +39,7 @@ exports.LoggedInHeader = (0, core_1.vui)((props, ref) => {
|
|
|
38
39
|
const servicesLinks = (0, utils_1.isJsx)(services) ? [] : (services === null || services === void 0 ? void 0 : services.links) || [];
|
|
39
40
|
const styles = (0, core_1.useStyleConfig)('Header', (0, context_1.useHeaderContext)());
|
|
40
41
|
const localTextColor = (rest === null || rest === void 0 ? void 0 : rest.variant) === 'dark' ? 'white' : 'darkBlue.main';
|
|
41
|
-
return (react_1.default.createElement(header_1.default, Object.assign({ className: (0, utils_1.cs)('vui-loggedInHeader', isApplication ? 'vui-loggedInAppHeader' :
|
|
42
|
+
return (react_1.default.createElement(header_1.default, Object.assign({ className: (0, utils_1.cs)('vui-loggedInHeader', isApplication ? 'vui-loggedInAppHeader' : undefined, className), mb: isApplication && isSmallScreen ? '41px' : 'inherited', ref: ref }, rest),
|
|
42
43
|
react_1.default.createElement(header_1.default.Content, null,
|
|
43
44
|
(!isApplication || !isLessThanMD) && react_1.default.createElement(react_1.default.Fragment, null,
|
|
44
45
|
" ",
|
|
@@ -49,46 +50,48 @@ exports.LoggedInHeader = (0, core_1.vui)((props, ref) => {
|
|
|
49
50
|
react_1.default.createElement(header_1.default.ApplicationName, { color: localTextColor, title: applicationName, url: applicationUrl || '/' }))),
|
|
50
51
|
!isApplication && react_1.default.createElement(core_1.RenderOnScreen, { minWidth: "lg" }, children),
|
|
51
52
|
react_1.default.createElement(box_1.default, { ml: "auto" }),
|
|
52
|
-
|
|
53
|
-
react_1.default.createElement(
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
react_1.default.createElement(
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
react_1.default.createElement(
|
|
60
|
-
react_1.default.createElement(
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
(0, utils_1.isJsx)(services) ? services : react_1.default.createElement(header_1.default.Services, Object.assign({}, services)))),
|
|
77
|
-
(0, utils_1.isJsx)(notifications) ? notifications : react_1.default.createElement(header_1.default.Notifications, Object.assign({}, notifications)),
|
|
78
|
-
!showMainLinks &&
|
|
79
|
-
showAltUserInfo &&
|
|
80
|
-
((0, utils_1.isJsx)(userInfo) ? (userInfo) : (react_1.default.createElement(react_1.default.Fragment, null,
|
|
81
|
-
react_1.default.createElement(header_1.default.Divider, { ml: 2 }),
|
|
82
|
-
react_1.default.createElement(headerAccountUserInfo_1.default, Object.assign({ className: "vui-altUserInfo", color: localTextColor, isApplication: true }, userInfo))))),
|
|
83
|
-
(0, utils_1.isJsx)(account) ? account : react_1.default.createElement(header_1.default.Account, Object.assign({}, account)),
|
|
84
|
-
react_1.default.createElement(core_1.RenderOnScreen, { maxWidth: "lg" },
|
|
85
|
-
isApplication && react_1.default.createElement(header_1.default.Divider, { ml: 1 }),
|
|
86
|
-
!isApplication && (account !== undefined || notifications !== undefined) && react_1.default.createElement(header_1.default.Divider, { ml: 1 }),
|
|
87
|
-
react_1.default.createElement(header_1.default.MobileToggle, null),
|
|
88
|
-
react_1.default.createElement(header_1.default.MobileContent, null,
|
|
89
|
-
!isApplication && children,
|
|
53
|
+
isCleanLayout ? (react_1.default.createElement(react_1.default.Fragment, null, !!url && (react_1.default.createElement(box_1.default, null,
|
|
54
|
+
react_1.default.createElement(button_1.default, { as: "a", className: (0, utils_1.cs)('vui-headerSignOut'), href: url, size: "lg", variant: "secondaryDark" }, "Sign out"))))) : (react_1.default.createElement(react_1.default.Fragment, null,
|
|
55
|
+
isApplication && (react_1.default.createElement(react_1.default.Fragment, null,
|
|
56
|
+
react_1.default.createElement(core_1.RenderOnScreen, { minWidth: "lg" },
|
|
57
|
+
showMainLinks && mainLinks !== undefined && (react_1.default.createElement(react_1.default.Fragment, null,
|
|
58
|
+
(0, utils_1.isJsx)(mainLinks) ? mainLinks : react_1.default.createElement(header_1.default.MainLinks, { links: mainLinks }),
|
|
59
|
+
react_1.default.createElement(header_1.default.Divider, { mx: 1 }))),
|
|
60
|
+
!showMainLinks && mainLinks && (react_1.default.createElement(react_1.default.Fragment, null,
|
|
61
|
+
react_1.default.createElement(header_1.default.MobileToggle, { ml: 0 }),
|
|
62
|
+
react_1.default.createElement(header_1.default.MobileContent, null,
|
|
63
|
+
react_1.default.createElement(react_1.default.Fragment, null,
|
|
64
|
+
(0, utils_1.isJsx)(mainLinks) ? (mainLinks) : (react_1.default.createElement(box_1.default, { column: true, w: 1 },
|
|
65
|
+
react_1.default.createElement(list_1.default, { py: 1 }, mainLinks === null || mainLinks === void 0 ? void 0 : mainLinks.map((_a, index) => {
|
|
66
|
+
var { icon, url } = _a, rest = __rest(_a, ["icon", "url"]);
|
|
67
|
+
return (react_1.default.createElement(list_1.default.Item, Object.assign({ iconLeft: icon, key: index, linkProps: { href: url } }, rest)));
|
|
68
|
+
})))),
|
|
69
|
+
!showServices && servicesLinks && (react_1.default.createElement(box_1.default, { column: true, w: 1 },
|
|
70
|
+
react_1.default.createElement(list_1.default, Object.assign({ className: "vui-headerHiddenServicesLargeScreen", heading: "My Services", maxH: 295, right: 0, w: 320 }, styles.services.list, { borderTop: 1, borderTopColor: "sandstone.main", pt: 1 }), servicesLinks.length > 0 ? (servicesLinks === null || servicesLinks === void 0 ? void 0 : servicesLinks.map((_a, index) => {
|
|
71
|
+
var { url } = _a, rest = __rest(_a, ["url"]);
|
|
72
|
+
return (react_1.default.createElement(list_1.default.Item, Object.assign({ key: index, linkProps: { href: url } }, rest)));
|
|
73
|
+
})) : (react_1.default.createElement(headerServicesMessage_1.default, null))))))))),
|
|
74
|
+
showServices && services && (react_1.default.createElement(react_1.default.Fragment, null, (0, utils_1.isJsx)(services) ? services : react_1.default.createElement(header_1.default.Services, Object.assign({ isApplication: isApplication }, services))))),
|
|
75
|
+
react_1.default.createElement(header_1.default.Support, Object.assign({}, supportLinks)))),
|
|
76
|
+
!isApplication && (react_1.default.createElement(core_1.RenderOnScreen, { minWidth: "lg" },
|
|
90
77
|
(0, utils_1.isJsx)(mainLinks) ? mainLinks : react_1.default.createElement(header_1.default.MainLinks, { links: mainLinks }),
|
|
91
|
-
|
|
78
|
+
mainLinks !== undefined && react_1.default.createElement(header_1.default.Divider, { mx: 1 }),
|
|
79
|
+
(0, utils_1.isJsx)(services) ? services : react_1.default.createElement(header_1.default.Services, Object.assign({}, services)))),
|
|
80
|
+
(0, utils_1.isJsx)(notifications) ? notifications : react_1.default.createElement(header_1.default.Notifications, Object.assign({}, notifications)),
|
|
81
|
+
!showMainLinks &&
|
|
82
|
+
showAltUserInfo &&
|
|
83
|
+
((0, utils_1.isJsx)(userInfo) ? (userInfo) : (react_1.default.createElement(react_1.default.Fragment, null,
|
|
84
|
+
react_1.default.createElement(header_1.default.Divider, { ml: 2 }),
|
|
85
|
+
react_1.default.createElement(headerAccountUserInfo_1.default, Object.assign({ className: "vui-altUserInfo", color: localTextColor, isApplication: true }, userInfo))))),
|
|
86
|
+
(0, utils_1.isJsx)(account) ? account : react_1.default.createElement(header_1.default.Account, Object.assign({}, account)),
|
|
87
|
+
react_1.default.createElement(core_1.RenderOnScreen, { maxWidth: "lg" },
|
|
88
|
+
isApplication && react_1.default.createElement(header_1.default.Divider, { ml: 1 }),
|
|
89
|
+
!isApplication && (account !== undefined || notifications !== undefined) && react_1.default.createElement(header_1.default.Divider, { ml: 1 }),
|
|
90
|
+
react_1.default.createElement(header_1.default.MobileToggle, null),
|
|
91
|
+
react_1.default.createElement(header_1.default.MobileContent, null,
|
|
92
|
+
!isApplication && children,
|
|
93
|
+
(0, utils_1.isJsx)(mainLinks) ? mainLinks : react_1.default.createElement(header_1.default.MainLinks, { links: mainLinks }),
|
|
94
|
+
(0, utils_1.isJsx)(services) ? (services) : (react_1.default.createElement(header_1.default.Services, Object.assign({}, services, { showTopBorder: mainLinks ? true : false }))))))))));
|
|
92
95
|
});
|
|
93
96
|
exports.LoggedInHeader.displayName = 'LoggedInHeader';
|
|
94
97
|
exports.default = exports.LoggedInHeader;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"loggedOutHeader.d.ts","sourceRoot":"","sources":["../../../src/header/loggedOutHeader.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAA;AAErD,iHAAiH;AACjH,eAAO,MAAM,eAAe,
|
|
1
|
+
{"version":3,"file":"loggedOutHeader.d.ts","sourceRoot":"","sources":["../../../src/header/loggedOutHeader.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAA;AAErD,iHAAiH;AACjH,eAAO,MAAM,eAAe,6DA2E1B,CAAA;AAIF,eAAe,eAAe,CAAA"}
|
|
@@ -22,10 +22,24 @@ const utils_1 = require("../utils");
|
|
|
22
22
|
const header_1 = __importDefault(require("./header"));
|
|
23
23
|
/** Displays Header content appropriate for logged out users, such as sign in button or create account prompt. */
|
|
24
24
|
exports.LoggedOutHeader = (0, core_1.vui)((props, ref) => {
|
|
25
|
-
const { children, className, createAccount, logo, mainLinks, signIn } = props, rest = __rest(props, ["children", "className", "createAccount", "logo", "mainLinks", "signIn"]);
|
|
26
|
-
|
|
25
|
+
const { applicationName, applicationUrl, children, className, isApplication = false, createAccount, logo, mainLinks, signIn } = props, rest = __rest(props, ["applicationName", "applicationUrl", "children", "className", "isApplication", "createAccount", "logo", "mainLinks", "signIn"]);
|
|
26
|
+
if (isApplication) {
|
|
27
|
+
if (!applicationName) {
|
|
28
|
+
console.error('Header: isApplication is true but applicationName is not set.');
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
const isSmallScreen = (0, core_1.useDown)('md');
|
|
32
|
+
const isLessThanMD = (0, core_1.useDown)('sm');
|
|
33
|
+
const localTextColor = (rest === null || rest === void 0 ? void 0 : rest.variant) === 'dark' ? 'white' : 'darkBlue.main';
|
|
34
|
+
return (react_1.default.createElement(header_1.default, Object.assign({ className: (0, utils_1.cs)('vui-loggedOutHeader', isApplication ? 'vui-loggedOutAppHeader' : undefined, className), mb: isApplication && isSmallScreen ? '41px' : 'inherited', ref: ref }, rest),
|
|
27
35
|
react_1.default.createElement(header_1.default.Content, null,
|
|
28
|
-
(
|
|
36
|
+
(!isApplication || !isLessThanMD) && react_1.default.createElement(react_1.default.Fragment, null,
|
|
37
|
+
" ",
|
|
38
|
+
(0, utils_1.isJsx)(logo) ? logo : react_1.default.createElement(header_1.default.Logo, Object.assign({}, logo))),
|
|
39
|
+
isApplication && (react_1.default.createElement(react_1.default.Fragment, null,
|
|
40
|
+
react_1.default.createElement(core_1.RenderOnScreen, { minWidth: "sm" },
|
|
41
|
+
react_1.default.createElement(header_1.default.Divider, { mr: 2 })),
|
|
42
|
+
react_1.default.createElement(header_1.default.ApplicationName, { color: localTextColor, title: applicationName, url: applicationUrl || '/' }))),
|
|
29
43
|
react_1.default.createElement(core_1.RenderOnScreen, { minWidth: "lg" }, children),
|
|
30
44
|
react_1.default.createElement(box_1.default, { ml: "auto" }),
|
|
31
45
|
react_1.default.createElement(core_1.RenderOnScreen, { minWidth: "lg" },
|
package/dist/cjs/input/consts.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { RefObject } from 'react';
|
|
1
|
+
import { ReactNode, RefObject } from 'react';
|
|
2
2
|
import { ListProps } from '../list';
|
|
3
3
|
import { PopoverContentProps, PopoverProps } from '../popover';
|
|
4
4
|
import { ThemingProps } from '../theme';
|
|
@@ -7,6 +7,10 @@ export type MenuListProps = ListProps & {
|
|
|
7
7
|
contentProps?: PopoverContentProps;
|
|
8
8
|
/** Ref passed to the inner PopoverContent. */
|
|
9
9
|
contentRef?: RefObject<HTMLDivElement>;
|
|
10
|
+
/** Custom content displayed at the bottom of the panel */
|
|
11
|
+
slotBottom?: ReactNode;
|
|
12
|
+
/** Custom content displayed at the top of the panel */
|
|
13
|
+
slotTop?: ReactNode;
|
|
10
14
|
};
|
|
11
15
|
export type MenuProps = ThemingProps<'Menu'> & PopoverProps & {
|
|
12
16
|
/** Content closes when clicking on a list item. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu.types.d.ts","sourceRoot":"","sources":["../../../src/menu/menu.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"menu.types.d.ts","sourceRoot":"","sources":["../../../src/menu/menu.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAE5C,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AACnC,OAAO,EAAE,mBAAmB,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG;IACtC,uDAAuD;IACvD,YAAY,CAAC,EAAE,mBAAmB,CAAA;IAClC,8CAA8C;IAC9C,UAAU,CAAC,EAAE,SAAS,CAAC,cAAc,CAAC,CAAA;IACtC,0DAA0D;IAC1D,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,uDAAuD;IACvD,OAAO,CAAC,EAAE,SAAS,CAAA;CACpB,CAAA;AAED,MAAM,MAAM,SAAS,GAAG,YAAY,CAAC,MAAM,CAAC,GAC1C,YAAY,GAAG;IACb,mDAAmD;IACnD,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menuList.d.ts","sourceRoot":"","sources":["../../../src/menu/menuList.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"menuList.d.ts","sourceRoot":"","sources":["../../../src/menu/menuList.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAuB,YAAY,EAAE,MAAM,SAAS,CAAA;AAC3D,OAAO,IAAI,MAAM,SAAS,CAAA;AAI1B,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA;AAE5C,kEAAkE;AAClE,eAAO,MAAM,QAAQ;aAuBV,OAAO,KAAK,OAAO;aACnB,OAAO,KAAK,OAAO;UACtB,OAAO,KAAK,IAAI;UAChB,OAAO,KAAK,IAAI;UAChB,OAAO,SAAS;CACvB,CAAA;AAQD,eAAe,QAAQ,CAAA"}
|
|
@@ -16,6 +16,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
16
16
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
17
|
exports.MenuList = void 0;
|
|
18
18
|
const react_1 = __importDefault(require("react"));
|
|
19
|
+
const box_1 = require("../box");
|
|
19
20
|
const core_1 = require("../core");
|
|
20
21
|
const list_1 = __importDefault(require("../list"));
|
|
21
22
|
const popover_1 = require("../popover");
|
|
@@ -24,9 +25,13 @@ const context_1 = require("./context");
|
|
|
24
25
|
/** Displays a list of menu items in a popover content element. */
|
|
25
26
|
exports.MenuList = (0, core_1.vui)((props, ref) => {
|
|
26
27
|
const { className, contentProps, contentRef } = props, rest = __rest(props, ["className", "contentProps", "contentRef"]);
|
|
28
|
+
const { slotTop, slotBottom } = props;
|
|
27
29
|
const styles = (0, core_1.useStyleConfig)('Menu', (0, context_1.useMenuContext)());
|
|
28
30
|
return (react_1.default.createElement(popover_1.PopoverContent, Object.assign({ borderRadius: 0, ref: contentRef }, contentProps),
|
|
29
|
-
react_1.default.createElement(
|
|
31
|
+
react_1.default.createElement(box_1.Box, { flexDirection: "column" },
|
|
32
|
+
slotTop,
|
|
33
|
+
react_1.default.createElement(list_1.default, Object.assign({ className: (0, utils_1.cs)('vui-menuList', className), py: 1, ref: ref, w: "100%" }, styles.list, rest, { maxH: 295 })),
|
|
34
|
+
slotBottom)));
|
|
30
35
|
});
|
|
31
36
|
exports.MenuList.Divider = list_1.default.Divider;
|
|
32
37
|
exports.MenuList.Heading = list_1.default.Heading;
|
|
@@ -69,12 +69,12 @@ export type HeaderServicesProps = MenuProps & HeaderServicesData & {
|
|
|
69
69
|
showTopBorder?: boolean;
|
|
70
70
|
};
|
|
71
71
|
export type HeaderSupportProps = MenuProps & HeaderServicesData & {};
|
|
72
|
-
export type
|
|
72
|
+
export type HeaderButtonData = {
|
|
73
73
|
/** Provides href to the button link. */
|
|
74
74
|
url?: string;
|
|
75
75
|
};
|
|
76
|
-
export type HeaderSignInProps = ButtonProps &
|
|
77
|
-
export type LoggedInHeaderProps = HeaderProps & {
|
|
76
|
+
export type HeaderSignInProps = ButtonProps & HeaderButtonData;
|
|
77
|
+
export type LoggedInHeaderProps = HeaderProps & HeaderButtonData & {
|
|
78
78
|
/** Socket for account popover icon on the right side. */
|
|
79
79
|
account?: HeaderAccountData | JSX.Element;
|
|
80
80
|
supportLinks?: HeaderServicesData;
|
|
@@ -82,6 +82,7 @@ export type LoggedInHeaderProps = HeaderProps & {
|
|
|
82
82
|
applicationName?: string;
|
|
83
83
|
applicationUrl?: string;
|
|
84
84
|
isApplication?: boolean;
|
|
85
|
+
isCleanLayout?: boolean;
|
|
85
86
|
isSticky?: boolean;
|
|
86
87
|
/** Socket for logo on the left side. */
|
|
87
88
|
logo?: LogoData | JSX.Element;
|
|
@@ -99,6 +100,10 @@ export type LoggedInHeaderProps = HeaderProps & {
|
|
|
99
100
|
showMainLinks?: boolean;
|
|
100
101
|
};
|
|
101
102
|
export type LoggedOutHeaderProps = HeaderProps & {
|
|
103
|
+
/** Socket for the app name on the left side. */
|
|
104
|
+
applicationName?: string;
|
|
105
|
+
applicationUrl?: string;
|
|
106
|
+
isApplication?: boolean;
|
|
102
107
|
/** Socket for create account prompt on the right side. */
|
|
103
108
|
createAccount?: HeaderCreateAccountData | JSX.Element;
|
|
104
109
|
isSticky?: boolean;
|
|
@@ -107,6 +112,6 @@ export type LoggedOutHeaderProps = HeaderProps & {
|
|
|
107
112
|
/** Socket for links in the middle-right section. */
|
|
108
113
|
mainLinks?: HeaderLinkData[] | JSX.Element;
|
|
109
114
|
/** Socket for sign in button on the right side. */
|
|
110
|
-
signIn?:
|
|
115
|
+
signIn?: HeaderButtonData | JSX.Element;
|
|
111
116
|
};
|
|
112
117
|
//# sourceMappingURL=header.types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"header.types.d.ts","sourceRoot":"","sources":["../../../src/header/header.types.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"header.types.d.ts","sourceRoot":"","sources":["../../../src/header/header.types.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"loggedInHeader.d.ts","sourceRoot":"","sources":["../../../src/header/loggedInHeader.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"loggedInHeader.d.ts","sourceRoot":"","sources":["../../../src/header/loggedInHeader.tsx"],"names":[],"mappings":"AASA,OAAO,EAAkB,mBAAmB,EAAE,MAAM,gBAAgB,CAAA;AAIpE,uHAAuH;AACvH,eAAO,MAAM,cAAc,4DAiLzB,CAAA;AAIF,eAAe,cAAc,CAAA"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import Box from '../box';
|
|
3
|
+
import Button from '../button';
|
|
3
4
|
import { RenderOnScreen, useDown, useStyleConfig, vui } from '../core';
|
|
4
5
|
import List from '../list';
|
|
5
6
|
import { cs, isJsx } from '../utils';
|
|
@@ -9,7 +10,7 @@ import HeaderAccountUserInfo from './headerAccountUserInfo';
|
|
|
9
10
|
import HeaderServicesMessage from './headerServicesMessage';
|
|
10
11
|
/** Displays Header content appropriate for logged-in users, such as services, notifications or account information. */
|
|
11
12
|
export const LoggedInHeader = vui((props, ref) => {
|
|
12
|
-
const { account, supportLinks, applicationName, applicationUrl, children, className, isApplication = false, logo, mainLinks, services, showAltUserInfo = true, showMainLinks = isApplication ? false : true, showServices = true, notifications, ...rest } = props;
|
|
13
|
+
const { account, supportLinks, applicationName, applicationUrl, children, className, isApplication = false, isCleanLayout = false, logo, mainLinks, services, showAltUserInfo = true, showMainLinks = isApplication ? false : true, showServices = true, notifications, url, ...rest } = props;
|
|
13
14
|
if (isApplication) {
|
|
14
15
|
if (!applicationName) {
|
|
15
16
|
console.error('Header: isApplication is true but applicationName is not set.');
|
|
@@ -21,7 +22,7 @@ export const LoggedInHeader = vui((props, ref) => {
|
|
|
21
22
|
const servicesLinks = isJsx(services) ? [] : services?.links || [];
|
|
22
23
|
const styles = useStyleConfig('Header', useHeaderContext());
|
|
23
24
|
const localTextColor = rest?.variant === 'dark' ? 'white' : 'darkBlue.main';
|
|
24
|
-
return (React.createElement(Header, { className: cs('vui-loggedInHeader', isApplication ? 'vui-loggedInAppHeader' :
|
|
25
|
+
return (React.createElement(Header, { className: cs('vui-loggedInHeader', isApplication ? 'vui-loggedInAppHeader' : undefined, className), mb: isApplication && isSmallScreen ? '41px' : 'inherited', ref: ref, ...rest },
|
|
25
26
|
React.createElement(Header.Content, null,
|
|
26
27
|
(!isApplication || !isLessThanMD) && React.createElement(React.Fragment, null,
|
|
27
28
|
" ",
|
|
@@ -32,40 +33,42 @@ export const LoggedInHeader = vui((props, ref) => {
|
|
|
32
33
|
React.createElement(Header.ApplicationName, { color: localTextColor, title: applicationName, url: applicationUrl || '/' }))),
|
|
33
34
|
!isApplication && React.createElement(RenderOnScreen, { minWidth: "lg" }, children),
|
|
34
35
|
React.createElement(Box, { ml: "auto" }),
|
|
35
|
-
|
|
36
|
-
React.createElement(
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
React.createElement(
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
React.createElement(
|
|
43
|
-
React.createElement(
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
isJsx(services) ? services : React.createElement(Header.Services, { ...services }))),
|
|
54
|
-
isJsx(notifications) ? notifications : React.createElement(Header.Notifications, { ...notifications }),
|
|
55
|
-
!showMainLinks &&
|
|
56
|
-
showAltUserInfo &&
|
|
57
|
-
(isJsx(userInfo) ? (userInfo) : (React.createElement(React.Fragment, null,
|
|
58
|
-
React.createElement(Header.Divider, { ml: 2 }),
|
|
59
|
-
React.createElement(HeaderAccountUserInfo, { className: "vui-altUserInfo", color: localTextColor, isApplication: true, ...userInfo })))),
|
|
60
|
-
isJsx(account) ? account : React.createElement(Header.Account, { ...account }),
|
|
61
|
-
React.createElement(RenderOnScreen, { maxWidth: "lg" },
|
|
62
|
-
isApplication && React.createElement(Header.Divider, { ml: 1 }),
|
|
63
|
-
!isApplication && (account !== undefined || notifications !== undefined) && React.createElement(Header.Divider, { ml: 1 }),
|
|
64
|
-
React.createElement(Header.MobileToggle, null),
|
|
65
|
-
React.createElement(Header.MobileContent, null,
|
|
66
|
-
!isApplication && children,
|
|
36
|
+
isCleanLayout ? (React.createElement(React.Fragment, null, !!url && (React.createElement(Box, null,
|
|
37
|
+
React.createElement(Button, { as: "a", className: cs('vui-headerSignOut'), href: url, size: "lg", variant: "secondaryDark" }, "Sign out"))))) : (React.createElement(React.Fragment, null,
|
|
38
|
+
isApplication && (React.createElement(React.Fragment, null,
|
|
39
|
+
React.createElement(RenderOnScreen, { minWidth: "lg" },
|
|
40
|
+
showMainLinks && mainLinks !== undefined && (React.createElement(React.Fragment, null,
|
|
41
|
+
isJsx(mainLinks) ? mainLinks : React.createElement(Header.MainLinks, { links: mainLinks }),
|
|
42
|
+
React.createElement(Header.Divider, { mx: 1 }))),
|
|
43
|
+
!showMainLinks && mainLinks && (React.createElement(React.Fragment, null,
|
|
44
|
+
React.createElement(Header.MobileToggle, { ml: 0 }),
|
|
45
|
+
React.createElement(Header.MobileContent, null,
|
|
46
|
+
React.createElement(React.Fragment, null,
|
|
47
|
+
isJsx(mainLinks) ? (mainLinks) : (React.createElement(Box, { column: true, w: 1 },
|
|
48
|
+
React.createElement(List, { py: 1 }, mainLinks?.map(({ icon, url, ...rest }, index) => (React.createElement(List.Item, { iconLeft: icon, key: index, linkProps: { href: url }, ...rest })))))),
|
|
49
|
+
!showServices && servicesLinks && (React.createElement(Box, { column: true, w: 1 },
|
|
50
|
+
React.createElement(List, { className: "vui-headerHiddenServicesLargeScreen", heading: "My Services", maxH: 295, right: 0, w: 320, ...styles.services.list, borderTop: 1, borderTopColor: "sandstone.main", pt: 1 }, servicesLinks.length > 0 ? (servicesLinks?.map(({ url, ...rest }, index) => (React.createElement(List.Item, { key: index, linkProps: { href: url }, ...rest })))) : (React.createElement(HeaderServicesMessage, null))))))))),
|
|
51
|
+
showServices && services && (React.createElement(React.Fragment, null, isJsx(services) ? services : React.createElement(Header.Services, { isApplication: isApplication, ...services })))),
|
|
52
|
+
React.createElement(Header.Support, { ...supportLinks }))),
|
|
53
|
+
!isApplication && (React.createElement(RenderOnScreen, { minWidth: "lg" },
|
|
67
54
|
isJsx(mainLinks) ? mainLinks : React.createElement(Header.MainLinks, { links: mainLinks }),
|
|
68
|
-
|
|
55
|
+
mainLinks !== undefined && React.createElement(Header.Divider, { mx: 1 }),
|
|
56
|
+
isJsx(services) ? services : React.createElement(Header.Services, { ...services }))),
|
|
57
|
+
isJsx(notifications) ? notifications : React.createElement(Header.Notifications, { ...notifications }),
|
|
58
|
+
!showMainLinks &&
|
|
59
|
+
showAltUserInfo &&
|
|
60
|
+
(isJsx(userInfo) ? (userInfo) : (React.createElement(React.Fragment, null,
|
|
61
|
+
React.createElement(Header.Divider, { ml: 2 }),
|
|
62
|
+
React.createElement(HeaderAccountUserInfo, { className: "vui-altUserInfo", color: localTextColor, isApplication: true, ...userInfo })))),
|
|
63
|
+
isJsx(account) ? account : React.createElement(Header.Account, { ...account }),
|
|
64
|
+
React.createElement(RenderOnScreen, { maxWidth: "lg" },
|
|
65
|
+
isApplication && React.createElement(Header.Divider, { ml: 1 }),
|
|
66
|
+
!isApplication && (account !== undefined || notifications !== undefined) && React.createElement(Header.Divider, { ml: 1 }),
|
|
67
|
+
React.createElement(Header.MobileToggle, null),
|
|
68
|
+
React.createElement(Header.MobileContent, null,
|
|
69
|
+
!isApplication && children,
|
|
70
|
+
isJsx(mainLinks) ? mainLinks : React.createElement(Header.MainLinks, { links: mainLinks }),
|
|
71
|
+
isJsx(services) ? (services) : (React.createElement(Header.Services, { ...services, showTopBorder: mainLinks ? true : false })))))))));
|
|
69
72
|
});
|
|
70
73
|
LoggedInHeader.displayName = 'LoggedInHeader';
|
|
71
74
|
export default LoggedInHeader;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"loggedOutHeader.d.ts","sourceRoot":"","sources":["../../../src/header/loggedOutHeader.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAA;AAErD,iHAAiH;AACjH,eAAO,MAAM,eAAe,
|
|
1
|
+
{"version":3,"file":"loggedOutHeader.d.ts","sourceRoot":"","sources":["../../../src/header/loggedOutHeader.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAA;AAErD,iHAAiH;AACjH,eAAO,MAAM,eAAe,6DA2E1B,CAAA;AAIF,eAAe,eAAe,CAAA"}
|
|
@@ -1,14 +1,28 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import Box from '../box';
|
|
3
|
-
import { RenderOnScreen, vui } from '../core';
|
|
3
|
+
import { RenderOnScreen, useDown, vui } from '../core';
|
|
4
4
|
import { cs, isJsx } from '../utils';
|
|
5
5
|
import Header from './header';
|
|
6
6
|
/** Displays Header content appropriate for logged out users, such as sign in button or create account prompt. */
|
|
7
7
|
export const LoggedOutHeader = vui((props, ref) => {
|
|
8
|
-
const { children, className, createAccount, logo, mainLinks, signIn, ...rest } = props;
|
|
9
|
-
|
|
8
|
+
const { applicationName, applicationUrl, children, className, isApplication = false, createAccount, logo, mainLinks, signIn, ...rest } = props;
|
|
9
|
+
if (isApplication) {
|
|
10
|
+
if (!applicationName) {
|
|
11
|
+
console.error('Header: isApplication is true but applicationName is not set.');
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
const isSmallScreen = useDown('md');
|
|
15
|
+
const isLessThanMD = useDown('sm');
|
|
16
|
+
const localTextColor = rest?.variant === 'dark' ? 'white' : 'darkBlue.main';
|
|
17
|
+
return (React.createElement(Header, { className: cs('vui-loggedOutHeader', isApplication ? 'vui-loggedOutAppHeader' : undefined, className), mb: isApplication && isSmallScreen ? '41px' : 'inherited', ref: ref, ...rest },
|
|
10
18
|
React.createElement(Header.Content, null,
|
|
11
|
-
|
|
19
|
+
(!isApplication || !isLessThanMD) && React.createElement(React.Fragment, null,
|
|
20
|
+
" ",
|
|
21
|
+
isJsx(logo) ? logo : React.createElement(Header.Logo, { ...logo })),
|
|
22
|
+
isApplication && (React.createElement(React.Fragment, null,
|
|
23
|
+
React.createElement(RenderOnScreen, { minWidth: "sm" },
|
|
24
|
+
React.createElement(Header.Divider, { mr: 2 })),
|
|
25
|
+
React.createElement(Header.ApplicationName, { color: localTextColor, title: applicationName, url: applicationUrl || '/' }))),
|
|
12
26
|
React.createElement(RenderOnScreen, { minWidth: "lg" }, children),
|
|
13
27
|
React.createElement(Box, { ml: "auto" }),
|
|
14
28
|
React.createElement(RenderOnScreen, { minWidth: "lg" },
|
package/dist/esm/input/consts.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { RefObject } from 'react';
|
|
1
|
+
import { ReactNode, RefObject } from 'react';
|
|
2
2
|
import { ListProps } from '../list';
|
|
3
3
|
import { PopoverContentProps, PopoverProps } from '../popover';
|
|
4
4
|
import { ThemingProps } from '../theme';
|
|
@@ -7,6 +7,10 @@ export type MenuListProps = ListProps & {
|
|
|
7
7
|
contentProps?: PopoverContentProps;
|
|
8
8
|
/** Ref passed to the inner PopoverContent. */
|
|
9
9
|
contentRef?: RefObject<HTMLDivElement>;
|
|
10
|
+
/** Custom content displayed at the bottom of the panel */
|
|
11
|
+
slotBottom?: ReactNode;
|
|
12
|
+
/** Custom content displayed at the top of the panel */
|
|
13
|
+
slotTop?: ReactNode;
|
|
10
14
|
};
|
|
11
15
|
export type MenuProps = ThemingProps<'Menu'> & PopoverProps & {
|
|
12
16
|
/** Content closes when clicking on a list item. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu.types.d.ts","sourceRoot":"","sources":["../../../src/menu/menu.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"menu.types.d.ts","sourceRoot":"","sources":["../../../src/menu/menu.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAE5C,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AACnC,OAAO,EAAE,mBAAmB,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG;IACtC,uDAAuD;IACvD,YAAY,CAAC,EAAE,mBAAmB,CAAA;IAClC,8CAA8C;IAC9C,UAAU,CAAC,EAAE,SAAS,CAAC,cAAc,CAAC,CAAA;IACtC,0DAA0D;IAC1D,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,uDAAuD;IACvD,OAAO,CAAC,EAAE,SAAS,CAAA;CACpB,CAAA;AAED,MAAM,MAAM,SAAS,GAAG,YAAY,CAAC,MAAM,CAAC,GAC1C,YAAY,GAAG;IACb,mDAAmD;IACnD,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menuList.d.ts","sourceRoot":"","sources":["../../../src/menu/menuList.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"menuList.d.ts","sourceRoot":"","sources":["../../../src/menu/menuList.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAuB,YAAY,EAAE,MAAM,SAAS,CAAA;AAC3D,OAAO,IAAI,MAAM,SAAS,CAAA;AAI1B,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA;AAE5C,kEAAkE;AAClE,eAAO,MAAM,QAAQ;aAuBV,OAAO,KAAK,OAAO;aACnB,OAAO,KAAK,OAAO;UACtB,OAAO,KAAK,IAAI;UAChB,OAAO,KAAK,IAAI;UAChB,OAAO,SAAS;CACvB,CAAA;AAQD,eAAe,QAAQ,CAAA"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import { Box } from '../box';
|
|
2
3
|
import { useStyleConfig, vui } from '../core';
|
|
3
4
|
import List from '../list';
|
|
4
5
|
import { PopoverContent } from '../popover';
|
|
@@ -7,9 +8,13 @@ import { useMenuContext } from './context';
|
|
|
7
8
|
/** Displays a list of menu items in a popover content element. */
|
|
8
9
|
export const MenuList = vui((props, ref) => {
|
|
9
10
|
const { className, contentProps, contentRef, ...rest } = props;
|
|
11
|
+
const { slotTop, slotBottom } = props;
|
|
10
12
|
const styles = useStyleConfig('Menu', useMenuContext());
|
|
11
13
|
return (React.createElement(PopoverContent, { borderRadius: 0, ref: contentRef, ...contentProps },
|
|
12
|
-
React.createElement(
|
|
14
|
+
React.createElement(Box, { flexDirection: "column" },
|
|
15
|
+
slotTop,
|
|
16
|
+
React.createElement(List, { className: cs('vui-menuList', className), py: 1, ref: ref, w: "100%", ...styles.list, ...rest, maxH: 295 }),
|
|
17
|
+
slotBottom)));
|
|
13
18
|
});
|
|
14
19
|
MenuList.Divider = List.Divider;
|
|
15
20
|
MenuList.Heading = List.Heading;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@veracity/vui",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.15.1",
|
|
4
4
|
"description": "Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.",
|
|
5
5
|
"module": "./dist/esm/index.js",
|
|
6
6
|
"main": "./dist/cjs/index.js",
|
|
@@ -86,39 +86,45 @@ export type HeaderServicesProps = MenuProps &
|
|
|
86
86
|
|
|
87
87
|
export type HeaderSupportProps = MenuProps & HeaderServicesData & {}
|
|
88
88
|
|
|
89
|
-
export type
|
|
89
|
+
export type HeaderButtonData = {
|
|
90
90
|
/** Provides href to the button link. */
|
|
91
91
|
url?: string
|
|
92
92
|
}
|
|
93
93
|
|
|
94
|
-
export type HeaderSignInProps = ButtonProps &
|
|
94
|
+
export type HeaderSignInProps = ButtonProps & HeaderButtonData
|
|
95
95
|
|
|
96
|
-
export type LoggedInHeaderProps = HeaderProps &
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
96
|
+
export type LoggedInHeaderProps = HeaderProps &
|
|
97
|
+
HeaderButtonData & {
|
|
98
|
+
/** Socket for account popover icon on the right side. */
|
|
99
|
+
account?: HeaderAccountData | JSX.Element
|
|
100
|
+
supportLinks?: HeaderServicesData
|
|
101
|
+
/** Socket for the app name on the left side. */
|
|
102
|
+
applicationName?: string
|
|
103
|
+
applicationUrl?: string
|
|
104
|
+
isApplication?: boolean
|
|
105
|
+
isCleanLayout?: boolean
|
|
106
|
+
isSticky?: boolean
|
|
107
|
+
/** Socket for logo on the left side. */
|
|
108
|
+
logo?: LogoData | JSX.Element
|
|
109
|
+
/** Socket for main links in the middle-right. */
|
|
110
|
+
mainLinks?: HeaderLinkData[] | JSX.Element
|
|
111
|
+
/** Socket for notifications icon on the right side. */
|
|
112
|
+
notifications?: HeaderNotificationsData | JSX.Element
|
|
113
|
+
/** Socket for services menu icon on the right side. */
|
|
114
|
+
services?: HeaderServicesData | JSX.Element
|
|
115
|
+
/** Socket for showing the 'alternative' user Info with role (alternative: 3 lines, role. default: 2 lines, no role); introduced for APP; by default it is true. */
|
|
116
|
+
showAltUserInfo?: boolean
|
|
117
|
+
/** Socket for showing the services trigger up front; introduced for APP; by default it is displayed. */
|
|
118
|
+
showServices?: boolean
|
|
119
|
+
/** Socket for showing the main Links up front in case of APP. by default they are folded into the hamburger menu. */
|
|
120
|
+
showMainLinks?: boolean
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
export type LoggedOutHeaderProps = HeaderProps & {
|
|
100
124
|
/** Socket for the app name on the left side. */
|
|
101
125
|
applicationName?: string
|
|
102
126
|
applicationUrl?: string
|
|
103
127
|
isApplication?: boolean
|
|
104
|
-
isSticky?: boolean
|
|
105
|
-
/** Socket for logo on the left side. */
|
|
106
|
-
logo?: LogoData | JSX.Element
|
|
107
|
-
/** Socket for main links in the middle-right. */
|
|
108
|
-
mainLinks?: HeaderLinkData[] | JSX.Element
|
|
109
|
-
/** Socket for notifications icon on the right side. */
|
|
110
|
-
notifications?: HeaderNotificationsData | JSX.Element
|
|
111
|
-
/** Socket for services menu icon on the right side. */
|
|
112
|
-
services?: HeaderServicesData | JSX.Element
|
|
113
|
-
/** Socket for showing the 'alternative' user Info with role (alternative: 3 lines, role. default: 2 lines, no role); introduced for APP; by default it is true. */
|
|
114
|
-
showAltUserInfo?: boolean
|
|
115
|
-
/** Socket for showing the services trigger up front; introduced for APP; by default it is displayed. */
|
|
116
|
-
showServices?: boolean
|
|
117
|
-
/** Socket for showing the main Links up front in case of APP. by default they are folded into the hamburger menu. */
|
|
118
|
-
showMainLinks?: boolean
|
|
119
|
-
}
|
|
120
|
-
|
|
121
|
-
export type LoggedOutHeaderProps = HeaderProps & {
|
|
122
128
|
/** Socket for create account prompt on the right side. */
|
|
123
129
|
createAccount?: HeaderCreateAccountData | JSX.Element
|
|
124
130
|
isSticky?: boolean
|
|
@@ -127,5 +133,5 @@ export type LoggedOutHeaderProps = HeaderProps & {
|
|
|
127
133
|
/** Socket for links in the middle-right section. */
|
|
128
134
|
mainLinks?: HeaderLinkData[] | JSX.Element
|
|
129
135
|
/** Socket for sign in button on the right side. */
|
|
130
|
-
signIn?:
|
|
136
|
+
signIn?: HeaderButtonData | JSX.Element
|
|
131
137
|
}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React from 'react'
|
|
2
2
|
|
|
3
3
|
import Box from '../box'
|
|
4
|
+
import Button from '../button'
|
|
4
5
|
import { RenderOnScreen, useDown, useStyleConfig, vui } from '../core'
|
|
5
6
|
import List from '../list'
|
|
6
7
|
import { cs, isJsx } from '../utils'
|
|
@@ -20,6 +21,7 @@ export const LoggedInHeader = vui<'div', LoggedInHeaderProps>((props, ref) => {
|
|
|
20
21
|
children,
|
|
21
22
|
className,
|
|
22
23
|
isApplication = false,
|
|
24
|
+
isCleanLayout = false,
|
|
23
25
|
logo,
|
|
24
26
|
mainLinks,
|
|
25
27
|
services,
|
|
@@ -27,6 +29,7 @@ export const LoggedInHeader = vui<'div', LoggedInHeaderProps>((props, ref) => {
|
|
|
27
29
|
showMainLinks = isApplication ? false : true,
|
|
28
30
|
showServices = true,
|
|
29
31
|
notifications,
|
|
32
|
+
url,
|
|
30
33
|
...rest
|
|
31
34
|
} = props
|
|
32
35
|
|
|
@@ -47,7 +50,7 @@ export const LoggedInHeader = vui<'div', LoggedInHeaderProps>((props, ref) => {
|
|
|
47
50
|
|
|
48
51
|
return (
|
|
49
52
|
<Header
|
|
50
|
-
className={cs('vui-loggedInHeader', isApplication ? 'vui-loggedInAppHeader' :
|
|
53
|
+
className={cs('vui-loggedInHeader', isApplication ? 'vui-loggedInAppHeader' : undefined, className)}
|
|
51
54
|
mb={isApplication && isSmallScreen ? '41px' : 'inherited'}
|
|
52
55
|
ref={ref}
|
|
53
56
|
{...rest}
|
|
@@ -64,106 +67,125 @@ export const LoggedInHeader = vui<'div', LoggedInHeaderProps>((props, ref) => {
|
|
|
64
67
|
)}
|
|
65
68
|
{!isApplication && <RenderOnScreen minWidth="lg">{children}</RenderOnScreen>}
|
|
66
69
|
<Box ml="auto" />
|
|
67
|
-
{
|
|
70
|
+
{isCleanLayout ? (
|
|
68
71
|
<>
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
72
|
+
{!!url && (
|
|
73
|
+
<Box>
|
|
74
|
+
<Button as="a" className={cs('vui-headerSignOut')} href={url} size="lg" variant="secondaryDark">
|
|
75
|
+
Sign out
|
|
76
|
+
</Button>
|
|
77
|
+
</Box>
|
|
78
|
+
)}
|
|
79
|
+
</>
|
|
80
|
+
) : (
|
|
81
|
+
<>
|
|
82
|
+
{isApplication && (
|
|
83
|
+
<>
|
|
84
|
+
<RenderOnScreen minWidth="lg">
|
|
85
|
+
{showMainLinks && mainLinks !== undefined && (
|
|
86
|
+
<>
|
|
87
|
+
{isJsx(mainLinks) ? mainLinks : <Header.MainLinks links={mainLinks} />}
|
|
88
|
+
<Header.Divider mx={1} />
|
|
89
|
+
</>
|
|
90
|
+
)}
|
|
76
91
|
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
<>
|
|
80
|
-
<Header.MobileToggle ml={0} />
|
|
81
|
-
<Header.MobileContent>
|
|
92
|
+
{/* the main-links are folded into the hamburger menu by default */}
|
|
93
|
+
{!showMainLinks && mainLinks && (
|
|
82
94
|
<>
|
|
83
|
-
{
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
95
|
+
<Header.MobileToggle ml={0} />
|
|
96
|
+
<Header.MobileContent>
|
|
97
|
+
<>
|
|
98
|
+
{isJsx(mainLinks) ? (
|
|
99
|
+
mainLinks
|
|
100
|
+
) : (
|
|
101
|
+
<Box column w={1}>
|
|
102
|
+
<List py={1}>
|
|
103
|
+
{mainLinks?.map(({ icon, url, ...rest }, index) => (
|
|
104
|
+
<List.Item iconLeft={icon} key={index} linkProps={{ href: url }} {...rest} />
|
|
105
|
+
))}
|
|
106
|
+
</List>
|
|
107
|
+
</Box>
|
|
108
|
+
)}
|
|
109
|
+
|
|
110
|
+
{!showServices && servicesLinks && (
|
|
111
|
+
<Box column w={1}>
|
|
112
|
+
<List
|
|
113
|
+
className="vui-headerHiddenServicesLargeScreen"
|
|
114
|
+
heading="My Services"
|
|
115
|
+
maxH={295}
|
|
116
|
+
right={0}
|
|
117
|
+
w={320}
|
|
118
|
+
{...styles.services.list}
|
|
119
|
+
borderTop={1}
|
|
120
|
+
borderTopColor="sandstone.main"
|
|
121
|
+
pt={1}
|
|
122
|
+
>
|
|
123
|
+
{servicesLinks.length > 0 ? (
|
|
124
|
+
servicesLinks?.map(({ url, ...rest }, index: number) => (
|
|
125
|
+
<List.Item key={index} linkProps={{ href: url }} {...rest} />
|
|
126
|
+
))
|
|
127
|
+
) : (
|
|
128
|
+
<HeaderServicesMessage />
|
|
129
|
+
)}
|
|
130
|
+
</List>
|
|
131
|
+
</Box>
|
|
132
|
+
)}
|
|
133
|
+
</>
|
|
134
|
+
</Header.MobileContent>
|
|
118
135
|
</>
|
|
119
|
-
|
|
136
|
+
)}
|
|
137
|
+
{showServices && services && (
|
|
138
|
+
<>{isJsx(services) ? services : <Header.Services isApplication={isApplication} {...services} />}</>
|
|
139
|
+
)}
|
|
140
|
+
</RenderOnScreen>
|
|
141
|
+
|
|
142
|
+
<Header.Support {...supportLinks} />
|
|
143
|
+
</>
|
|
144
|
+
)}
|
|
145
|
+
{!isApplication && (
|
|
146
|
+
<RenderOnScreen minWidth="lg">
|
|
147
|
+
{isJsx(mainLinks) ? mainLinks : <Header.MainLinks links={mainLinks} />}
|
|
148
|
+
|
|
149
|
+
{mainLinks !== undefined && <Header.Divider mx={1} />}
|
|
150
|
+
|
|
151
|
+
{isJsx(services) ? services : <Header.Services {...services} />}
|
|
152
|
+
</RenderOnScreen>
|
|
153
|
+
)}
|
|
154
|
+
{isJsx(notifications) ? notifications : <Header.Notifications {...notifications} />}
|
|
155
|
+
{!showMainLinks &&
|
|
156
|
+
showAltUserInfo &&
|
|
157
|
+
(isJsx(userInfo) ? (
|
|
158
|
+
userInfo
|
|
159
|
+
) : (
|
|
160
|
+
<>
|
|
161
|
+
<Header.Divider ml={2} />
|
|
162
|
+
<HeaderAccountUserInfo
|
|
163
|
+
className="vui-altUserInfo"
|
|
164
|
+
color={localTextColor}
|
|
165
|
+
isApplication
|
|
166
|
+
{...userInfo}
|
|
167
|
+
/>
|
|
120
168
|
</>
|
|
121
|
-
)}
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
169
|
+
))}
|
|
170
|
+
{isJsx(account) ? account : <Header.Account {...account} />}
|
|
171
|
+
<RenderOnScreen maxWidth="lg">
|
|
172
|
+
{isApplication && <Header.Divider ml={1} />}
|
|
173
|
+
{!isApplication && (account !== undefined || notifications !== undefined) && <Header.Divider ml={1} />}
|
|
174
|
+
|
|
175
|
+
<Header.MobileToggle />
|
|
176
|
+
|
|
177
|
+
<Header.MobileContent>
|
|
178
|
+
{!isApplication && children}
|
|
179
|
+
{isJsx(mainLinks) ? mainLinks : <Header.MainLinks links={mainLinks} />}
|
|
180
|
+
{isJsx(services) ? (
|
|
181
|
+
services
|
|
182
|
+
) : (
|
|
183
|
+
<Header.Services {...services} showTopBorder={mainLinks ? true : false} />
|
|
184
|
+
)}
|
|
185
|
+
</Header.MobileContent>
|
|
125
186
|
</RenderOnScreen>
|
|
126
|
-
|
|
127
|
-
<Header.Support {...supportLinks} />
|
|
128
187
|
</>
|
|
129
188
|
)}
|
|
130
|
-
{!isApplication && (
|
|
131
|
-
<RenderOnScreen minWidth="lg">
|
|
132
|
-
{isJsx(mainLinks) ? mainLinks : <Header.MainLinks links={mainLinks} />}
|
|
133
|
-
|
|
134
|
-
{mainLinks !== undefined && <Header.Divider mx={1} />}
|
|
135
|
-
|
|
136
|
-
{isJsx(services) ? services : <Header.Services {...services} />}
|
|
137
|
-
</RenderOnScreen>
|
|
138
|
-
)}
|
|
139
|
-
{isJsx(notifications) ? notifications : <Header.Notifications {...notifications} />}
|
|
140
|
-
|
|
141
|
-
{!showMainLinks &&
|
|
142
|
-
showAltUserInfo &&
|
|
143
|
-
(isJsx(userInfo) ? (
|
|
144
|
-
userInfo
|
|
145
|
-
) : (
|
|
146
|
-
<>
|
|
147
|
-
<Header.Divider ml={2} />
|
|
148
|
-
<HeaderAccountUserInfo className="vui-altUserInfo" color={localTextColor} isApplication {...userInfo} />
|
|
149
|
-
</>
|
|
150
|
-
))}
|
|
151
|
-
|
|
152
|
-
{isJsx(account) ? account : <Header.Account {...account} />}
|
|
153
|
-
<RenderOnScreen maxWidth="lg">
|
|
154
|
-
{isApplication && <Header.Divider ml={1} />}
|
|
155
|
-
{!isApplication && (account !== undefined || notifications !== undefined) && <Header.Divider ml={1} />}
|
|
156
|
-
|
|
157
|
-
<Header.MobileToggle />
|
|
158
|
-
|
|
159
|
-
<Header.MobileContent>
|
|
160
|
-
{!isApplication && children}
|
|
161
|
-
|
|
162
|
-
{isJsx(mainLinks) ? mainLinks : <Header.MainLinks links={mainLinks} />}
|
|
163
|
-
|
|
164
|
-
{isJsx(services) ? services : <Header.Services {...services} showTopBorder={mainLinks ? true : false} />}
|
|
165
|
-
</Header.MobileContent>
|
|
166
|
-
</RenderOnScreen>
|
|
167
189
|
</Header.Content>
|
|
168
190
|
</Header>
|
|
169
191
|
)
|
|
@@ -1,19 +1,54 @@
|
|
|
1
1
|
import React from 'react'
|
|
2
2
|
|
|
3
3
|
import Box from '../box'
|
|
4
|
-
import { RenderOnScreen, vui } from '../core'
|
|
4
|
+
import { RenderOnScreen, useDown, vui } from '../core'
|
|
5
5
|
import { cs, isJsx } from '../utils'
|
|
6
6
|
import Header from './header'
|
|
7
7
|
import { LoggedOutHeaderProps } from './header.types'
|
|
8
8
|
|
|
9
9
|
/** Displays Header content appropriate for logged out users, such as sign in button or create account prompt. */
|
|
10
10
|
export const LoggedOutHeader = vui<'div', LoggedOutHeaderProps>((props, ref) => {
|
|
11
|
-
const {
|
|
11
|
+
const {
|
|
12
|
+
applicationName,
|
|
13
|
+
applicationUrl,
|
|
14
|
+
children,
|
|
15
|
+
className,
|
|
16
|
+
isApplication = false,
|
|
17
|
+
createAccount,
|
|
18
|
+
logo,
|
|
19
|
+
mainLinks,
|
|
20
|
+
signIn,
|
|
21
|
+
...rest
|
|
22
|
+
} = props
|
|
23
|
+
|
|
24
|
+
if (isApplication) {
|
|
25
|
+
if (!applicationName) {
|
|
26
|
+
console.error('Header: isApplication is true but applicationName is not set.')
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
const isSmallScreen = useDown('md')
|
|
31
|
+
const isLessThanMD = useDown('sm')
|
|
32
|
+
|
|
33
|
+
const localTextColor = rest?.variant === 'dark' ? 'white' : 'darkBlue.main'
|
|
12
34
|
|
|
13
35
|
return (
|
|
14
|
-
<Header
|
|
36
|
+
<Header
|
|
37
|
+
className={cs('vui-loggedOutHeader', isApplication ? 'vui-loggedOutAppHeader' : undefined, className)}
|
|
38
|
+
mb={isApplication && isSmallScreen ? '41px' : 'inherited'}
|
|
39
|
+
ref={ref}
|
|
40
|
+
{...rest}
|
|
41
|
+
>
|
|
15
42
|
<Header.Content>
|
|
16
|
-
{isJsx(logo) ? logo : <Header.Logo {...logo} />}
|
|
43
|
+
{(!isApplication || !isLessThanMD) && <> {isJsx(logo) ? logo : <Header.Logo {...logo} />}</>}
|
|
44
|
+
{isApplication && (
|
|
45
|
+
<>
|
|
46
|
+
<RenderOnScreen minWidth="sm">
|
|
47
|
+
<Header.Divider mr={2} />
|
|
48
|
+
</RenderOnScreen>
|
|
49
|
+
<Header.ApplicationName color={localTextColor} title={applicationName} url={applicationUrl || '/'} />
|
|
50
|
+
</>
|
|
51
|
+
)}
|
|
17
52
|
|
|
18
53
|
<RenderOnScreen minWidth="lg">{children}</RenderOnScreen>
|
|
19
54
|
|
package/src/input/consts.ts
CHANGED
package/src/menu/menu.types.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { RefObject } from 'react'
|
|
1
|
+
import { ReactNode, RefObject } from 'react'
|
|
2
2
|
|
|
3
3
|
import { ListProps } from '../list'
|
|
4
4
|
import { PopoverContentProps, PopoverProps } from '../popover'
|
|
@@ -9,6 +9,10 @@ export type MenuListProps = ListProps & {
|
|
|
9
9
|
contentProps?: PopoverContentProps
|
|
10
10
|
/** Ref passed to the inner PopoverContent. */
|
|
11
11
|
contentRef?: RefObject<HTMLDivElement>
|
|
12
|
+
/** Custom content displayed at the bottom of the panel */
|
|
13
|
+
slotBottom?: ReactNode
|
|
14
|
+
/** Custom content displayed at the top of the panel */
|
|
15
|
+
slotTop?: ReactNode
|
|
12
16
|
}
|
|
13
17
|
|
|
14
18
|
export type MenuProps = ThemingProps<'Menu'> &
|
package/src/menu/menuList.tsx
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React from 'react'
|
|
2
2
|
|
|
3
|
+
import { Box } from '../box'
|
|
3
4
|
import { useStyleConfig, vui, VuiComponent } from '../core'
|
|
4
5
|
import List from '../list'
|
|
5
6
|
import { PopoverContent } from '../popover'
|
|
@@ -10,11 +11,24 @@ import { MenuListProps } from './menu.types'
|
|
|
10
11
|
/** Displays a list of menu items in a popover content element. */
|
|
11
12
|
export const MenuList = vui<'ul', MenuListProps>((props, ref) => {
|
|
12
13
|
const { className, contentProps, contentRef, ...rest } = props
|
|
14
|
+
const { slotTop, slotBottom } = props
|
|
13
15
|
const styles = useStyleConfig('Menu', useMenuContext())
|
|
14
16
|
|
|
15
17
|
return (
|
|
16
18
|
<PopoverContent borderRadius={0} ref={contentRef} {...contentProps}>
|
|
17
|
-
<
|
|
19
|
+
<Box flexDirection="column">
|
|
20
|
+
{slotTop}
|
|
21
|
+
<List
|
|
22
|
+
className={cs('vui-menuList', className)}
|
|
23
|
+
py={1}
|
|
24
|
+
ref={ref}
|
|
25
|
+
w="100%"
|
|
26
|
+
{...styles.list}
|
|
27
|
+
{...rest}
|
|
28
|
+
maxH={295}
|
|
29
|
+
/>
|
|
30
|
+
{slotBottom}
|
|
31
|
+
</Box>
|
|
18
32
|
</PopoverContent>
|
|
19
33
|
)
|
|
20
34
|
}) as VuiComponent<'ul', MenuListProps> & {
|