@capillarytech/blaze-ui 6.1.4 → 6.1.6-beta.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.
Files changed (87) hide show
  1. package/CapDragReorder/Card.d.ts +2 -2
  2. package/CapDragReorder/Card.d.ts.map +1 -1
  3. package/CapDragReorder/Card.js +53 -51
  4. package/CapDragReorder/index.d.ts +2 -9
  5. package/CapDragReorder/index.d.ts.map +1 -1
  6. package/CapDragReorder/index.js +26 -15
  7. package/CapDragReorder/styles.css +12 -2
  8. package/CapDragReorder/styles.d.ts +2 -12
  9. package/CapDragReorder/styles.d.ts.map +1 -1
  10. package/CapDragReorder/styles.js +1 -1
  11. package/CapDragReorder/styles.module.scss.js +29 -0
  12. package/CapDragReorder/styles.scss +23 -10
  13. package/CapDragReorder/tests/CapDragReorder.mockData.d.ts +4 -0
  14. package/CapDragReorder/tests/CapDragReorder.mockData.d.ts.map +1 -0
  15. package/CapDragReorder/types.d.ts +32 -0
  16. package/CapDragReorder/types.d.ts.map +1 -0
  17. package/CapDragReorder/types.js +1 -0
  18. package/CapNavigationSPA/CapNavigationSPASidebar/index.d.ts +10 -0
  19. package/CapNavigationSPA/CapNavigationSPASidebar/index.d.ts.map +1 -0
  20. package/CapNavigationSPA/CapNavigationSPASidebar/index.js +373 -0
  21. package/CapNavigationSPA/CapNavigationSPASidebar/styles.css +318 -0
  22. package/CapNavigationSPA/CapNavigationSPASidebar/styles.module.scss.js +56 -0
  23. package/CapNavigationSPA/CapNavigationSPASidebar/styles.scss +385 -0
  24. package/CapNavigationSPA/CapNavigationSPASidebar/types.d.ts +31 -0
  25. package/CapNavigationSPA/CapNavigationSPASidebar/types.d.ts.map +1 -0
  26. package/CapNavigationSPA/CapNavigationSPASidebar/types.js +1 -0
  27. package/CapNavigationSPA/CapNavigationSPATopBar/index.d.ts +10 -0
  28. package/CapNavigationSPA/CapNavigationSPATopBar/index.d.ts.map +1 -0
  29. package/CapNavigationSPA/CapNavigationSPATopBar/index.js +119 -0
  30. package/CapNavigationSPA/CapNavigationSPATopBar/styles.css +141 -0
  31. package/CapNavigationSPA/CapNavigationSPATopBar/styles.module.scss.js +19 -0
  32. package/CapNavigationSPA/CapNavigationSPATopBar/styles.scss +163 -0
  33. package/CapNavigationSPA/CapNavigationSPATopBar/types.d.ts +28 -0
  34. package/CapNavigationSPA/CapNavigationSPATopBar/types.d.ts.map +1 -0
  35. package/CapNavigationSPA/CapNavigationSPATopBar/types.js +1 -0
  36. package/CapNavigationSPA/constants.d.ts +2 -0
  37. package/CapNavigationSPA/constants.d.ts.map +1 -0
  38. package/CapNavigationSPA/constants.js +4 -0
  39. package/CapNavigationSPA/index.d.ts +10 -0
  40. package/CapNavigationSPA/index.d.ts.map +1 -0
  41. package/CapNavigationSPA/index.js +436 -0
  42. package/CapNavigationSPA/messages.d.ts +13 -0
  43. package/CapNavigationSPA/messages.d.ts.map +1 -0
  44. package/CapNavigationSPA/messages.js +16 -0
  45. package/CapNavigationSPA/mockdata.d.ts +6 -0
  46. package/CapNavigationSPA/mockdata.d.ts.map +1 -0
  47. package/CapNavigationSPA/mockdata.js +4 -0
  48. package/CapNavigationSPA/styles.css +59 -0
  49. package/CapNavigationSPA/styles.module.scss.js +10 -0
  50. package/CapNavigationSPA/styles.scss +60 -0
  51. package/CapNavigationSPA/tests/CapNavigationSPA.mockData.d.ts +31 -0
  52. package/CapNavigationSPA/tests/CapNavigationSPA.mockData.d.ts.map +1 -0
  53. package/CapNavigationSPA/types.d.ts +39 -0
  54. package/CapNavigationSPA/types.d.ts.map +1 -0
  55. package/CapNavigationSPA/types.js +1 -0
  56. package/CapSelectFilter/index.js +2 -2
  57. package/CapTreeView/index.d.ts +6 -28
  58. package/CapTreeView/index.d.ts.map +1 -1
  59. package/CapTreeView/index.js +63 -78
  60. package/CapTreeView/styles.css +12 -22
  61. package/CapTreeView/styles.module.scss.js +16 -0
  62. package/CapTreeView/styles.scss +26 -39
  63. package/CapTreeView/tests/CapTreeView.mockData.d.ts +5 -0
  64. package/CapTreeView/tests/CapTreeView.mockData.d.ts.map +1 -0
  65. package/CapTreeView/types.d.ts +16 -0
  66. package/CapTreeView/types.d.ts.map +1 -0
  67. package/CapTreeView/types.js +1 -0
  68. package/assets/svgIcons/Icons/AiraNav.js +23 -0
  69. package/assets/svgIcons/Icons/CreativesNav.js +22 -0
  70. package/assets/svgIcons/Icons/DataManagement.js +22 -0
  71. package/assets/svgIcons/Icons/EngageNav.js +23 -0
  72. package/assets/svgIcons/Icons/InsightsNav.js +22 -0
  73. package/assets/svgIcons/Icons/LoyaltyTag.js +22 -0
  74. package/assets/svgIcons/Icons/Members.js +22 -0
  75. package/assets/svgIcons/Icons/RewardsOutline.js +4 -6
  76. package/assets/svgIcons/Icons/SidebarCollapse.js +17 -0
  77. package/assets/svgIcons/Icons/SidebarExpand.js +22 -0
  78. package/assets/svgIcons/Icons/ThreeStars.js +36 -18
  79. package/assets/svgIcons/component.js +27 -0
  80. package/assets/svgIcons/index.js +612 -594
  81. package/index.d.ts +6 -0
  82. package/index.d.ts.map +1 -1
  83. package/index.js +195 -189
  84. package/package.json +1 -1
  85. package/utils/getCapThemeConfig.d.ts.map +1 -1
  86. package/utils/getCapThemeConfig.js +11 -2
  87. package/.npmrc +0 -3
@@ -0,0 +1,436 @@
1
+ import { jsxs, jsx } from "react/jsx-runtime";
2
+ import classNames from "classnames";
3
+ import { isEmpty, forOwn } from "lodash";
4
+ import { useState, useRef, useEffect, useMemo } from "react";
5
+ import { injectIntl } from "react-intl";
6
+ import CapDropdown from "../CapDropdown/index.js";
7
+ import CapSecondaryTopBar from "../CapSecondaryTopBar/index.js";
8
+ import WrappedCapUserProfile from "../CapUserProfile/index.js";
9
+ import CapNavigationSPASidebar from "./CapNavigationSPASidebar/index.js";
10
+ import CapNavigationSPATopBar from "./CapNavigationSPATopBar/index.js";
11
+ import { USER_PROFILE_KEY } from "./constants.js";
12
+ import messages from "./messages.js";
13
+ import styles from "./styles.module.scss.js";
14
+ const DEFAULT_MODULE = "campaign";
15
+ const PRODUCT_MASTERS = "masters";
16
+ const CapNavigationSPA = (allProps) => {
17
+ var _a, _b, _c, _d, _e, _f, _g;
18
+ const { config, children, intl: injectedIntl } = allProps;
19
+ const {
20
+ className,
21
+ userData = {},
22
+ topbarMenuData,
23
+ topbarSelectedMenuData,
24
+ dropdownMenuProps,
25
+ topbarIcons,
26
+ sidebarMenuData = [],
27
+ sidebarMenuItemsPosition,
28
+ loadStorageItem,
29
+ selectProduct,
30
+ selectOrganization,
31
+ organization,
32
+ noResultText,
33
+ settingsLabel,
34
+ defaultSelectedProduct,
35
+ showSecondaryTopBar = false,
36
+ secondaryTopBarActionHandler,
37
+ fixedOrg = false,
38
+ showDocumentationBot: _showDocumentationBot,
39
+ isLatestLeftNavigationEnabled: _isLatestLeftNavigationEnabled = false,
40
+ setLeftNavbarExpandedProp: _setLeftNavbarExpandedProp = () => {
41
+ },
42
+ defaultActiveKey = "",
43
+ sidebarCollapsed = false,
44
+ onSidebarCollapseExpand,
45
+ disableSidebarNavigation = false,
46
+ headerOverideCss: _headerOverideCss = {},
47
+ request: _request = async () => ({}),
48
+ getAPICallObject: _getAPICallObject = () => ({}),
49
+ changeOrgEntity,
50
+ sidebarMenuItemClick,
51
+ insights,
52
+ connectPlus
53
+ } = config;
54
+ const intl = injectedIntl ?? config.intl;
55
+ const safeDropdownMenuProps = dropdownMenuProps || [];
56
+ const formatMessage = (intl == null ? void 0 : intl.formatMessage) || ((msg) => msg.defaultMessage || msg.id);
57
+ const [showUserProfile, setShowUserProfile] = useState(false);
58
+ const componentWrapperRef = useRef(null);
59
+ const renderUserProfile = () => /* @__PURE__ */ jsx(
60
+ WrappedCapUserProfile,
61
+ {
62
+ show: showUserProfile,
63
+ setShowUserProfile,
64
+ onClose: () => setShowUserProfile(false),
65
+ userData
66
+ }
67
+ );
68
+ if (!safeDropdownMenuProps.find((item) => item.key === USER_PROFILE_KEY)) {
69
+ safeDropdownMenuProps.unshift({
70
+ label: formatMessage(messages.userProfile),
71
+ key: USER_PROFILE_KEY,
72
+ onClickHandler: () => setShowUserProfile(true)
73
+ });
74
+ }
75
+ const handleProductChange = (product) => {
76
+ updateSelectedProduct(product.value || "");
77
+ if (product.url && product.url !== window.location.pathname) {
78
+ window.location.pathname = product.url;
79
+ }
80
+ };
81
+ const handleOrgEntityChange = (orgID, _entityItem, ouId) => {
82
+ changeOrgEntity == null ? void 0 : changeOrgEntity(orgID, ouId);
83
+ };
84
+ const handleTopbarMenuChange = (option) => {
85
+ if (option == null ? void 0 : option.onClickHandler) {
86
+ option.onClickHandler(option);
87
+ } else if (option == null ? void 0 : option.link) {
88
+ window.location.pathname = option.link;
89
+ }
90
+ };
91
+ const handleSideBarLinkClick = (item) => {
92
+ updateSelectedSidebarMenuItem(item.key || "");
93
+ sidebarMenuItemClick == null ? void 0 : sidebarMenuItemClick(item);
94
+ };
95
+ const getDefaultSidebarMenuItem = () => {
96
+ const { pathname } = window.location;
97
+ let selectedMenuItem = defaultActiveKey || "";
98
+ sidebarMenuData.forEach((obj) => {
99
+ var _a2;
100
+ if (obj.link === pathname && obj.key) {
101
+ selectedMenuItem = obj.key;
102
+ }
103
+ (_a2 = obj.children) == null ? void 0 : _a2.forEach((child) => {
104
+ if (child.link === pathname && child.key) {
105
+ selectedMenuItem = child.key;
106
+ }
107
+ });
108
+ });
109
+ return selectedMenuItem;
110
+ };
111
+ const getProxyOrgList = () => {
112
+ var _a2, _b2;
113
+ const proxyOrgList2 = [];
114
+ if (userData && userData.user && typeof userData.user === "object") {
115
+ const { orgDetails = {}, user = {} } = userData;
116
+ const { name: selectedOrgName } = orgDetails;
117
+ let { org_id: selectedOrgId } = orgDetails;
118
+ const orgList = user.proxyOrgList || [];
119
+ const accessibleOUList = user.accessibleOUList;
120
+ if (!isEmpty(selectedOrgId)) {
121
+ selectedOrgId = Number(selectedOrgId);
122
+ const selectedOrg2 = {
123
+ label: selectedOrgName,
124
+ value: selectedOrgId,
125
+ key: selectedOrgId
126
+ };
127
+ if (!isEmpty(accessibleOUList)) {
128
+ selectedOrg2.accessibleOus = [];
129
+ forOwn(accessibleOUList, (ouId, ouName) => {
130
+ selectedOrg2.accessibleOus.push({
131
+ label: ouName,
132
+ value: ouId,
133
+ key: ouId
134
+ });
135
+ });
136
+ }
137
+ proxyOrgList2.push(selectedOrg2);
138
+ } else {
139
+ const defaultOrgName = (_a2 = userData == null ? void 0 : userData.user) == null ? void 0 : _a2.orgName;
140
+ const defaultOrgId = (_b2 = userData == null ? void 0 : userData.user) == null ? void 0 : _b2.orgID;
141
+ proxyOrgList2.push({
142
+ label: defaultOrgName,
143
+ value: defaultOrgId ?? 0,
144
+ key: defaultOrgId ?? 0
145
+ });
146
+ }
147
+ if (orgList == null ? void 0 : orgList.length) {
148
+ orgList.forEach((item) => {
149
+ const itemOrgId = typeof item.orgID === "string" ? parseInt(item.orgID, 10) : item.orgID;
150
+ const selectedOrgIdNum = typeof selectedOrgId === "string" ? parseInt(selectedOrgId, 10) : selectedOrgId;
151
+ if (itemOrgId !== selectedOrgIdNum) {
152
+ const id = item.orgID;
153
+ const name = item.orgName;
154
+ const orgObj = { label: name, value: id, key: id };
155
+ if (item.ouList) {
156
+ orgObj.accessibleOus = getOuList(item);
157
+ }
158
+ proxyOrgList2.push(orgObj);
159
+ }
160
+ });
161
+ }
162
+ }
163
+ return proxyOrgList2;
164
+ };
165
+ const getOuList = (orgItem) => {
166
+ const { ouList = [] } = orgItem;
167
+ const accessibleOus = [];
168
+ if (ouList == null ? void 0 : ouList.length) {
169
+ ouList.forEach((item) => {
170
+ accessibleOus.push({ label: item.ouName, value: item.ouID, key: item.ouID });
171
+ });
172
+ }
173
+ return accessibleOus;
174
+ };
175
+ const getProductList = () => {
176
+ const { currentOrgDetails = {} } = userData;
177
+ const { module_details: moduleDetails = [] } = currentOrgDetails;
178
+ const productsList2 = [];
179
+ if (!isEmpty(currentOrgDetails)) {
180
+ const props = config;
181
+ moduleDetails.forEach((module) => {
182
+ var _a2, _b2;
183
+ if (((_a2 = module.name) == null ? void 0 : _a2.toLowerCase()) !== PRODUCT_MASTERS) {
184
+ const productName = module.namespace;
185
+ const intlProductName = productName ? props[productName] : void 0;
186
+ const moduleName = intlProductName || ((_b2 = module.name) == null ? void 0 : _b2.toLowerCase());
187
+ productsList2.push({
188
+ value: moduleName,
189
+ url: module.url,
190
+ key: module.code
191
+ });
192
+ }
193
+ });
194
+ if (insights) {
195
+ productsList2.push({
196
+ value: insights,
197
+ url: "analytics/v2/",
198
+ key: "insights"
199
+ });
200
+ }
201
+ if (!productsList2.find((product) => product.key === "connect-plus/ui") && connectPlus) {
202
+ productsList2.push({
203
+ value: connectPlus,
204
+ url: "connect/ui",
205
+ key: "connectPlus"
206
+ });
207
+ }
208
+ }
209
+ return productsList2;
210
+ };
211
+ const renderSecondaryTopbar = (proxyOrgList2) => {
212
+ const selectedOrg2 = (loadStorageItem == null ? void 0 : loadStorageItem("orgID")) || null;
213
+ const selectedOrgObj2 = proxyOrgList2.find((o) => o.value == selectedOrg2);
214
+ return /* @__PURE__ */ jsx(
215
+ CapSecondaryTopBar,
216
+ {
217
+ primaryMenuItem: {
218
+ key: "primaryMenu",
219
+ label: selectedProduct || ""
220
+ },
221
+ secondaryMenuItem: {
222
+ key: "secondaryMenu",
223
+ label: (selectedOrgObj2 == null ? void 0 : selectedOrgObj2.label) || ""
224
+ },
225
+ menuActions: [{ key: "close-icon", iconType: "close" }],
226
+ menuActionHandler: secondaryTopBarActionHandler
227
+ }
228
+ );
229
+ };
230
+ const proxyOrgList = getProxyOrgList();
231
+ const productsList = getProductList();
232
+ const [selectedProduct, updateSelectedProduct] = useState(defaultSelectedProduct || "");
233
+ const orgIdRaw = (loadStorageItem == null ? void 0 : loadStorageItem("orgID")) || void 0;
234
+ const ouIdRaw = (loadStorageItem == null ? void 0 : loadStorageItem("ouId")) || void 0;
235
+ const [selectedOrg] = useState(orgIdRaw);
236
+ const [selectedOu] = useState(ouIdRaw);
237
+ const [selectedSidebarMenuItem, updateSelectedSidebarMenuItem] = useState(
238
+ getDefaultSidebarMenuItem()
239
+ );
240
+ const [breadcrumbs] = useState([]);
241
+ const [_leftNavbarExpanded, _setLeftNavbarExpanded] = useState(true);
242
+ const showSidebar = sidebarMenuData.length > 0 && sidebarMenuItemsPosition === "left";
243
+ useEffect(() => {
244
+ if (defaultSelectedProduct) {
245
+ updateSelectedProduct(defaultSelectedProduct);
246
+ }
247
+ }, [defaultSelectedProduct]);
248
+ const handleProductChangeWrapper = useMemo(
249
+ () => (product) => {
250
+ handleProductChange(product);
251
+ },
252
+ [handleProductChange]
253
+ );
254
+ const handleOrgEntityChangeWrapper = useMemo(
255
+ () => (value, item, ouValue) => {
256
+ if (value !== void 0) {
257
+ handleOrgEntityChange(value, item, ouValue);
258
+ }
259
+ },
260
+ [handleOrgEntityChange]
261
+ );
262
+ const handleMenuItemClick = useMemo(
263
+ () => (item) => {
264
+ const menuItem = topbarMenuData == null ? void 0 : topbarMenuData.find((m) => m.key === item.key);
265
+ if (menuItem) {
266
+ handleTopbarMenuChange({
267
+ onClickHandler: menuItem.onClickHandler ? (opt) => {
268
+ var _a2;
269
+ return (_a2 = menuItem.onClickHandler) == null ? void 0 : _a2.call(menuItem, opt);
270
+ } : void 0,
271
+ link: menuItem.link
272
+ });
273
+ }
274
+ },
275
+ [topbarMenuData, handleTopbarMenuChange]
276
+ );
277
+ useMemo(
278
+ () => ({
279
+ productsList,
280
+ selectedProduct,
281
+ handleProductChange: handleProductChangeWrapper,
282
+ title: selectProduct,
283
+ closable: false,
284
+ placement: "left",
285
+ width: 320
286
+ }),
287
+ [productsList, selectedProduct, handleProductChangeWrapper, selectProduct]
288
+ );
289
+ useMemo(
290
+ () => ({
291
+ items: proxyOrgList,
292
+ selectedItem: selectedOrg,
293
+ selectedOuItem: selectedOu,
294
+ handleItemChange: handleOrgEntityChangeWrapper,
295
+ selectPlaceholder: selectOrganization || formatMessage(messages.selectOrganization),
296
+ showSearch: true,
297
+ showHeader: false,
298
+ title: formatMessage(messages.selectOrganization),
299
+ placeholder: organization,
300
+ noResultText,
301
+ fixedOrg: fixedOrg || !proxyOrgList.length
302
+ }),
303
+ [
304
+ proxyOrgList,
305
+ selectedOrg,
306
+ selectedOu,
307
+ handleOrgEntityChangeWrapper,
308
+ selectOrganization,
309
+ formatMessage,
310
+ organization,
311
+ noResultText,
312
+ fixedOrg
313
+ ]
314
+ );
315
+ useMemo(
316
+ () => topbarMenuData ? {
317
+ items: topbarMenuData.map((item) => ({
318
+ key: item.key || "",
319
+ label: item.label || ""
320
+ })),
321
+ defaultSelectedKeys: topbarSelectedMenuData || [DEFAULT_MODULE],
322
+ selectedKeys: topbarSelectedMenuData || [DEFAULT_MODULE],
323
+ onMenuItemClick: handleMenuItemClick
324
+ } : void 0,
325
+ [topbarMenuData, topbarSelectedMenuData, handleMenuItemClick]
326
+ );
327
+ const normalizedDropdownMenuProps = useMemo(
328
+ () => safeDropdownMenuProps.map((item) => ({
329
+ key: item.key || "",
330
+ label: item.label || "",
331
+ onClickHandler: item.onClickHandler
332
+ })),
333
+ [safeDropdownMenuProps]
334
+ );
335
+ const normalizedTopbarIcons = useMemo(
336
+ () => topbarIcons == null ? void 0 : topbarIcons.map((icon) => ({
337
+ ...icon,
338
+ iconType: icon.iconType || icon.type || "help"
339
+ })),
340
+ [topbarIcons]
341
+ );
342
+ useMemo(
343
+ () => breadcrumbs.length > 0 ? breadcrumbs.join(" / ") : void 0,
344
+ [breadcrumbs]
345
+ );
346
+ const selectedOrgObj = useMemo(
347
+ () => proxyOrgList.find((o) => o.value == ((loadStorageItem == null ? void 0 : loadStorageItem("orgID")) ?? selectedOrg)),
348
+ [proxyOrgList, loadStorageItem, selectedOrg]
349
+ );
350
+ const orgDisplayName = organization || (selectedOrgObj == null ? void 0 : selectedOrgObj.label) || ((_a = userData == null ? void 0 : userData.orgDetails) == null ? void 0 : _a.name) || "";
351
+ const sidebarItems = useMemo(
352
+ () => sidebarMenuData.map((item) => {
353
+ var _a2;
354
+ return {
355
+ key: item.key || "",
356
+ title: item.label || item.key || "",
357
+ link: item.link,
358
+ target: item.target,
359
+ iconType: item.iconType,
360
+ children: (_a2 = item.children) == null ? void 0 : _a2.map((child) => ({
361
+ key: child.key || "",
362
+ title: child.label || child.key || "",
363
+ link: child.link,
364
+ target: child.target,
365
+ iconType: child.iconType
366
+ }))
367
+ };
368
+ }),
369
+ [sidebarMenuData]
370
+ );
371
+ const userMenuOverlay = useMemo(
372
+ () => normalizedDropdownMenuProps.length > 0 ? {
373
+ items: normalizedDropdownMenuProps.map((item) => ({
374
+ key: item.key,
375
+ label: item.label,
376
+ onClick: item.onClickHandler
377
+ }))
378
+ } : void 0,
379
+ [normalizedDropdownMenuProps]
380
+ );
381
+ return /* @__PURE__ */ jsxs("div", { className: classNames(styles["cap-navigation-spa"], className), ref: componentWrapperRef, children: [
382
+ showSidebar ? /* @__PURE__ */ jsx(
383
+ CapNavigationSPASidebar,
384
+ {
385
+ items: sidebarItems,
386
+ selectedKey: selectedSidebarMenuItem,
387
+ onItemClick: (item) => {
388
+ handleSideBarLinkClick({ key: item.key, label: item.title, link: item.link });
389
+ },
390
+ settingsLabel,
391
+ collapsed: sidebarCollapsed,
392
+ onCollapseExpand: onSidebarCollapseExpand,
393
+ navigateToLink: !disableSidebarNavigation
394
+ }
395
+ ) : null,
396
+ /* @__PURE__ */ jsxs("div", { className: styles["cap-navigation-spa__right"], children: [
397
+ showSecondaryTopBar ? renderSecondaryTopbar(proxyOrgList) : /* @__PURE__ */ jsx(
398
+ CapNavigationSPATopBar,
399
+ {
400
+ searchPlaceholder: "Search in org",
401
+ searchShortcut: "⌘+K",
402
+ orgName: orgDisplayName,
403
+ environmentLabel: config.environmentLabel ?? "Production",
404
+ onOrgEnvClick: () => {
405
+ },
406
+ onHelpClick: (_b = normalizedTopbarIcons == null ? void 0 : normalizedTopbarIcons.find((i) => i.iconType === "question-circle")) == null ? void 0 : _b.onClickHandler,
407
+ onNotificationClick: (_c = normalizedTopbarIcons == null ? void 0 : normalizedTopbarIcons.find((i) => i.iconType === "bell")) == null ? void 0 : _c.onClickHandler,
408
+ showNotificationBadge: false,
409
+ onUserClick: void 0,
410
+ userDisplay: userMenuOverlay ? /* @__PURE__ */ jsx(CapDropdown, { menu: userMenuOverlay, trigger: ["click"], placement: "bottomRight", children: /* @__PURE__ */ jsx(
411
+ "button",
412
+ {
413
+ type: "button",
414
+ className: styles["cap-navigation-spa__user-trigger"],
415
+ "aria-label": "User menu",
416
+ children: /* @__PURE__ */ jsx("span", { className: styles["cap-navigation-spa__user-avatar"], children: ((_e = (_d = userData == null ? void 0 : userData.user) == null ? void 0 : _d.firstName) == null ? void 0 : _e[0]) ?? ((_g = (_f = userData == null ? void 0 : userData.user) == null ? void 0 : _f.loginName) == null ? void 0 : _g[0]) ?? "?" })
417
+ }
418
+ ) }) : void 0
419
+ }
420
+ ),
421
+ /* @__PURE__ */ jsx(
422
+ "div",
423
+ {
424
+ className: styles["cap-navigation-spa__main"],
425
+ "data-testid": "cap-navigation-spa-nav-inner",
426
+ children
427
+ }
428
+ )
429
+ ] }),
430
+ showUserProfile && renderUserProfile()
431
+ ] });
432
+ };
433
+ const index = injectIntl(CapNavigationSPA);
434
+ export {
435
+ index as default
436
+ };
@@ -0,0 +1,13 @@
1
+ export declare const scope = "app.commonUtils.capUiLibrary.CapNavigationSPA.selectOrganization";
2
+ declare const _default: {
3
+ selectOrganization: {
4
+ id: string;
5
+ defaultMessage: string;
6
+ };
7
+ userProfile: {
8
+ id: string;
9
+ defaultMessage: string;
10
+ };
11
+ };
12
+ export default _default;
13
+ //# sourceMappingURL=messages.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"messages.d.ts","sourceRoot":"","sources":["../../components/CapNavigationSPA/messages.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,KAAK,qEAAqE,CAAC;;;;;;;;;;;AAExF,wBASG"}
@@ -0,0 +1,16 @@
1
+ import { defineMessages } from "react-intl";
2
+ const scope = "app.commonUtils.capUiLibrary.CapNavigationSPA.selectOrganization";
3
+ const messages = defineMessages({
4
+ selectOrganization: {
5
+ id: `${scope}.selectOrganization`,
6
+ defaultMessage: "Select Organization"
7
+ },
8
+ userProfile: {
9
+ id: `${scope}.userProfile`,
10
+ defaultMessage: "User Profile"
11
+ }
12
+ });
13
+ export {
14
+ messages as default,
15
+ scope
16
+ };
@@ -0,0 +1,6 @@
1
+ /**
2
+ * Re-use CapNavigation mock data for Storybook and demos.
3
+ * Same userData/org structure as CapNavigation for API consistency.
4
+ */
5
+ export { userData } from '../CapNavigation/mockdata';
6
+ //# sourceMappingURL=mockdata.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"mockdata.d.ts","sourceRoot":"","sources":["../../components/CapNavigationSPA/mockdata.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC"}
@@ -0,0 +1,4 @@
1
+ import { userData } from "../CapNavigation/mockdata.js";
2
+ export {
3
+ userData
4
+ };
@@ -0,0 +1,59 @@
1
+ /* Color Palette */
2
+ /* Fonts */
3
+ /* Backward Compatibility Aliases */
4
+ /* Component Heights */
5
+ /* Border Radius */
6
+ /* Border Width */
7
+ /* Transition */
8
+ /* Timezones Footer */
9
+ .cap-navigation-spa {
10
+ display: flex;
11
+ flex-direction: row;
12
+ width: 100%;
13
+ min-height: 100vh;
14
+ height: 100vh;
15
+ background-color: #ffffff;
16
+ }
17
+ .cap-navigation-spa__right {
18
+ display: flex;
19
+ flex-direction: column;
20
+ flex: 1 1 auto;
21
+ min-width: 0;
22
+ min-height: 0;
23
+ overflow: hidden;
24
+ }
25
+ .cap-navigation-spa__main {
26
+ flex: 1 1 auto;
27
+ min-height: 0;
28
+ overflow: auto;
29
+ background-color: #fafbfc;
30
+ }
31
+ .cap-navigation-spa__user-trigger {
32
+ display: flex;
33
+ align-items: center;
34
+ justify-content: center;
35
+ width: 2.286rem;
36
+ height: 2.286rem;
37
+ padding: 0;
38
+ border: none;
39
+ background: transparent;
40
+ border-radius: 50%;
41
+ cursor: pointer;
42
+ font-family: "Roboto", sans-serif;
43
+ font-size: 1rem;
44
+ font-weight: 500;
45
+ color: #091e42;
46
+ background-color: #ebecf0;
47
+ }
48
+ .cap-navigation-spa__user-trigger:hover {
49
+ background-color: #dfe2e7;
50
+ }
51
+ .cap-navigation-spa__user-avatar {
52
+ display: flex;
53
+ align-items: center;
54
+ justify-content: center;
55
+ width: 100%;
56
+ height: 100%;
57
+ border-radius: 50%;
58
+ text-transform: uppercase;
59
+ }
@@ -0,0 +1,10 @@
1
+ import './styles.css';const styles = {
2
+ "cap-navigation-spa": "cap-navigation-spa",
3
+ "cap-navigation-spa__right": "cap-navigation-spa__right",
4
+ "cap-navigation-spa__main": "cap-navigation-spa__main",
5
+ "cap-navigation-spa__user-trigger": "cap-navigation-spa__user-trigger",
6
+ "cap-navigation-spa__user-avatar": "cap-navigation-spa__user-avatar"
7
+ };
8
+ export {
9
+ styles as default
10
+ };
@@ -0,0 +1,60 @@
1
+ @import '../styles/_variables.scss';
2
+
3
+ // BEM: Block = cap-navigation-spa | Elements = __right, __main, __user-trigger, __user-avatar
4
+ // New navigation Figma: sidebar full height left (240px), then top bar + content right
5
+ .cap-navigation-spa {
6
+ display: flex;
7
+ flex-direction: row;
8
+ width: 100%;
9
+ min-height: 100vh;
10
+ height: 100vh;
11
+ background-color: $CAP_WHITE;
12
+ }
13
+
14
+ .cap-navigation-spa__right {
15
+ display: flex;
16
+ flex-direction: column;
17
+ flex: 1 1 auto;
18
+ min-width: 0;
19
+ min-height: 0;
20
+ overflow: hidden;
21
+ }
22
+
23
+ .cap-navigation-spa__main {
24
+ flex: 1 1 auto;
25
+ min-height: 0;
26
+ overflow: auto;
27
+ background-color: $CAP_G10; // #fafbfc – content area bg from Figma
28
+ }
29
+
30
+ .cap-navigation-spa__user-trigger {
31
+ display: flex;
32
+ align-items: center;
33
+ justify-content: center;
34
+ width: 2.286rem;
35
+ height: 2.286rem;
36
+ padding: 0;
37
+ border: none;
38
+ background: transparent;
39
+ border-radius: 50%;
40
+ cursor: pointer;
41
+ font-family: $FONT_FAMILY;
42
+ font-size: $FONT_SIZE_M;
43
+ font-weight: $FONT_WEIGHT_MEDIUM;
44
+ color: $CAP_G01;
45
+ background-color: $CAP_G08;
46
+
47
+ &:hover {
48
+ background-color: $CAP_G07;
49
+ }
50
+ }
51
+
52
+ .cap-navigation-spa__user-avatar {
53
+ display: flex;
54
+ align-items: center;
55
+ justify-content: center;
56
+ width: 100%;
57
+ height: 100%;
58
+ border-radius: 50%;
59
+ text-transform: uppercase;
60
+ }
@@ -0,0 +1,31 @@
1
+ import type { CapNavigationSPAConfig, UserData } from '../types';
2
+ export declare const mockLoadStorageItem: jest.Mock<string, [key: string], any>;
3
+ export declare const mockChangeOrgEntity: jest.Mock<any, any, any>;
4
+ export declare const mockSidebarMenuItemClick: jest.Mock<any, any, any>;
5
+ export declare const mockSecondaryTopBarActionHandler: jest.Mock<any, any, any>;
6
+ export declare const mockSetLeftNavbarExpandedProp: jest.Mock<any, any, any>;
7
+ export declare const mockHandleGTMDataPush: jest.Mock<any, any, any>;
8
+ export declare const mockRequest: jest.Mock<any, any, any>;
9
+ export declare const mockGetAPICallObject: jest.Mock<any, any, any>;
10
+ export declare const defaultConfig: Partial<CapNavigationSPAConfig>;
11
+ export declare const topbarMenuData: {
12
+ key: string;
13
+ label: string;
14
+ link: string;
15
+ }[];
16
+ export declare const sidebarMenuData: {
17
+ key: string;
18
+ label: string;
19
+ link: string;
20
+ }[];
21
+ export declare const dropdownMenuProps: {
22
+ key: string;
23
+ label: string;
24
+ onClickHandler: jest.Mock<any, any, any>;
25
+ }[];
26
+ export declare const userDataWithPreferredOrg: UserData;
27
+ export declare const userDataWithoutProxyOrg: UserData;
28
+ export declare const userDataWithConnectPlus: UserData;
29
+ /** UserData with proxyOrgList containing another org that has ouList (for getProxyOrgList + getOuList coverage) */
30
+ export declare const userDataWithProxyOrgAndOuList: UserData;
31
+ //# sourceMappingURL=CapNavigationSPA.mockData.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"CapNavigationSPA.mockData.d.ts","sourceRoot":"","sources":["../../../components/CapNavigationSPA/tests/CapNavigationSPA.mockData.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,sBAAsB,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAEjE,eAAO,MAAM,mBAAmB,uCAM9B,CAAC;AAEH,eAAO,MAAM,mBAAmB,0BAAY,CAAC;AAC7C,eAAO,MAAM,wBAAwB,0BAAY,CAAC;AAClD,eAAO,MAAM,gCAAgC,0BAAY,CAAC;AAC1D,eAAO,MAAM,6BAA6B,0BAAY,CAAC;AACvD,eAAO,MAAM,qBAAqB,0BAAY,CAAC;AAC/C,eAAO,MAAM,WAAW,0BAAY,CAAC;AACrC,eAAO,MAAM,oBAAoB,0BAAY,CAAC;AAE9C,eAAO,MAAM,aAAa,EAAE,OAAO,CAAC,sBAAsB,CAgBzD,CAAC;AAEF,eAAO,MAAM,cAAc;;;;GAI1B,CAAC;AAEF,eAAO,MAAM,eAAe;;;;GAI3B,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;GAG7B,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,QAUtC,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,QAMrC,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,QAcrC,CAAC;AAEF,mHAAmH;AACnH,eAAO,MAAM,6BAA6B,EAAE,QAoB3C,CAAC"}