@entur-partner/common 8.0.1 → 8.0.4
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/UserMenu/components/CustomOverflowMenu.d.ts +11 -0
- package/dist/UserMenu/components/CustomOverflowMenuItem.d.ts +3 -0
- package/dist/UserMenu/components/LanguageSwitchMenuItem.d.ts +10 -0
- package/dist/UserMenu/components/LogOutMenuItem.d.ts +9 -0
- package/dist/UserMenu/components/UserMenuItem.d.ts +9 -0
- package/dist/UserMenu/components/VersionMenuItem.d.ts +5 -0
- package/dist/{UserMenu.d.ts → UserMenu/index.d.ts} +3 -7
- package/dist/UserMenu/useOutsideClick.d.ts +2 -0
- package/dist/common.cjs.development.js +167 -125
- package/dist/common.cjs.development.js.map +1 -1
- package/dist/common.cjs.production.min.js +1 -1
- package/dist/common.cjs.production.min.js.map +1 -1
- package/dist/common.esm.js +169 -127
- package/dist/common.esm.js.map +1 -1
- package/dist/styles.css +60 -60
- package/package.json +5 -5
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import '../index.scss';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { Environment } from '../../environment';
|
|
4
|
+
export declare const CustomOverflowMenu: React.FC<{
|
|
5
|
+
className?: string;
|
|
6
|
+
children: React.ReactNode;
|
|
7
|
+
userName: string;
|
|
8
|
+
open: boolean;
|
|
9
|
+
onOpenChange: (open: boolean) => void;
|
|
10
|
+
environment?: Environment;
|
|
11
|
+
}>;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import '../index.scss';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
type Props = {
|
|
4
|
+
language: string;
|
|
5
|
+
onLanguageChange: (language: string) => void;
|
|
6
|
+
setOpen: (open: boolean) => void;
|
|
7
|
+
name: string;
|
|
8
|
+
};
|
|
9
|
+
export declare const LanguageSwitchMenuItem: ({ language, onLanguageChange, setOpen, name, }: Props) => React.JSX.Element;
|
|
10
|
+
export {};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import '../index.scss';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
type Props = {
|
|
4
|
+
name: string;
|
|
5
|
+
setOpen: (open: boolean) => void;
|
|
6
|
+
onNavigateToMyProfile: () => void;
|
|
7
|
+
};
|
|
8
|
+
export declare const UserMenuItem: ({ name, setOpen, onNavigateToMyProfile, }: Props) => React.JSX.Element;
|
|
9
|
+
export {};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import './
|
|
2
|
-
import
|
|
3
|
-
import { Environment } from '
|
|
1
|
+
import './index.scss';
|
|
2
|
+
import { FC } from 'react';
|
|
3
|
+
import { Environment } from '../environment';
|
|
4
4
|
interface UserMenuProps {
|
|
5
5
|
userName: string;
|
|
6
6
|
messages: {
|
|
@@ -19,8 +19,4 @@ interface UserMenuProps {
|
|
|
19
19
|
onNavigateToMyProfile: () => void;
|
|
20
20
|
}
|
|
21
21
|
export declare const UserMenu: FC<UserMenuProps>;
|
|
22
|
-
export declare const VersionCustomOverflowMenuItems: React.FC<{
|
|
23
|
-
title: string;
|
|
24
|
-
setOpen: (isOpen: boolean) => void;
|
|
25
|
-
}>;
|
|
26
22
|
export {};
|
|
@@ -309,97 +309,51 @@ var Content = function Content(_ref) {
|
|
|
309
309
|
}, children);
|
|
310
310
|
};
|
|
311
311
|
|
|
312
|
+
function useOutsideClick(ref, buttonRef, handler) {
|
|
313
|
+
React__default["default"].useEffect(function () {
|
|
314
|
+
var listener = function listener(event) {
|
|
315
|
+
if (elementContainsEventTarget(ref.current, event) || elementContainsEventTarget(buttonRef.current, event)) {
|
|
316
|
+
return;
|
|
317
|
+
}
|
|
318
|
+
handler();
|
|
319
|
+
};
|
|
320
|
+
document.addEventListener('mousedown', listener);
|
|
321
|
+
document.addEventListener('touchstart', listener);
|
|
322
|
+
return function () {
|
|
323
|
+
document.removeEventListener('mousedown', listener);
|
|
324
|
+
document.removeEventListener('touchstart', listener);
|
|
325
|
+
};
|
|
326
|
+
}, [ref, buttonRef, handler]);
|
|
327
|
+
}
|
|
328
|
+
function elementContainsEventTarget(element, event) {
|
|
329
|
+
if (!element) {
|
|
330
|
+
return false;
|
|
331
|
+
}
|
|
332
|
+
if (element.contains(event.target)) {
|
|
333
|
+
return true;
|
|
334
|
+
}
|
|
335
|
+
// For elements inside a Shadow DOM we need to check the composedPath
|
|
336
|
+
if (event.composed && event.composedPath) {
|
|
337
|
+
var contains = event.composedPath().find(function (target) {
|
|
338
|
+
if (target === window) {
|
|
339
|
+
return false;
|
|
340
|
+
}
|
|
341
|
+
return element.contains(target);
|
|
342
|
+
});
|
|
343
|
+
return !!contains;
|
|
344
|
+
}
|
|
345
|
+
return false;
|
|
346
|
+
}
|
|
347
|
+
|
|
312
348
|
var _excluded$b = ["className", "children", "userName", "open", "onOpenChange", "environment"];
|
|
313
|
-
var
|
|
349
|
+
var CustomOverflowMenu = function CustomOverflowMenu(_ref) {
|
|
314
350
|
var className = _ref.className,
|
|
315
|
-
|
|
316
|
-
onLogout = _ref.onLogout,
|
|
317
|
-
onLanguageChange = _ref.onLanguageChange,
|
|
351
|
+
children = _ref.children,
|
|
318
352
|
userName = _ref.userName,
|
|
319
|
-
|
|
353
|
+
open = _ref.open,
|
|
354
|
+
onOpenChange = _ref.onOpenChange,
|
|
320
355
|
environment = _ref.environment,
|
|
321
|
-
|
|
322
|
-
showMyProfileItem = _ref.showMyProfileItem,
|
|
323
|
-
onNavigateToMyProfile = _ref.onNavigateToMyProfile;
|
|
324
|
-
var triggerClassList = cx__default["default"](['eps-user-menu__trigger-button', className]);
|
|
325
|
-
var _useState = React.useState(false),
|
|
326
|
-
open = _useState[0],
|
|
327
|
-
setOpen = _useState[1];
|
|
328
|
-
return React__default["default"].createElement("div", {
|
|
329
|
-
id: "eps-user-menu"
|
|
330
|
-
}, React__default["default"].createElement(CustomOverflowMenu, {
|
|
331
|
-
open: open,
|
|
332
|
-
onOpenChange: setOpen,
|
|
333
|
-
className: triggerClassList,
|
|
334
|
-
userName: userName,
|
|
335
|
-
environment: environment
|
|
336
|
-
}, React__default["default"].createElement("div", {
|
|
337
|
-
id: "eps-overflow-menu"
|
|
338
|
-
}, language === 'en' ? React__default["default"].createElement(CustomOverflowMenuItem, {
|
|
339
|
-
onClick: function onClick() {
|
|
340
|
-
onLanguageChange('nb');
|
|
341
|
-
setOpen(false);
|
|
342
|
-
},
|
|
343
|
-
className: "eps-overflow-menu__item"
|
|
344
|
-
}, React__default["default"].createElement("span", {
|
|
345
|
-
"aria-hidden": true,
|
|
346
|
-
className: "eps-overflow-menu__icon-margin"
|
|
347
|
-
}, React__default["default"].createElement(icons.NorwayIcon, {
|
|
348
|
-
size: "1rem",
|
|
349
|
-
inline: true
|
|
350
|
-
})), messages.switchLanguage) : React__default["default"].createElement(CustomOverflowMenuItem, {
|
|
351
|
-
onClick: function onClick() {
|
|
352
|
-
onLanguageChange('en');
|
|
353
|
-
setOpen(false);
|
|
354
|
-
},
|
|
355
|
-
className: "eps-overflow-menu__item"
|
|
356
|
-
}, React__default["default"].createElement("span", {
|
|
357
|
-
"aria-hidden": true,
|
|
358
|
-
className: "eps-overflow-menu__icon-margin"
|
|
359
|
-
}, React__default["default"].createElement(icons.UKIcon, {
|
|
360
|
-
size: "1rem",
|
|
361
|
-
inline: true
|
|
362
|
-
})), messages.switchLanguage), showVersionItem && messages.appVersion && React__default["default"].createElement(VersionCustomOverflowMenuItems, {
|
|
363
|
-
title: messages.appVersion,
|
|
364
|
-
setOpen: setOpen
|
|
365
|
-
}), showMyProfileItem && messages.myProfile && React__default["default"].createElement(reactRouterDom.Link, {
|
|
366
|
-
to: "/permission-admin/my-profile",
|
|
367
|
-
style: {
|
|
368
|
-
textDecoration: 'none'
|
|
369
|
-
}
|
|
370
|
-
}, React__default["default"].createElement(CustomOverflowMenuItem, {
|
|
371
|
-
onClick: function onClick() {
|
|
372
|
-
setOpen(false);
|
|
373
|
-
onNavigateToMyProfile();
|
|
374
|
-
},
|
|
375
|
-
className: "eps-overflow-menu__item"
|
|
376
|
-
}, React__default["default"].createElement("span", {
|
|
377
|
-
"aria-hidden": true
|
|
378
|
-
}, React__default["default"].createElement(icons.UserIcon, {
|
|
379
|
-
size: "1rem",
|
|
380
|
-
inline: true
|
|
381
|
-
})), messages.myProfile)), React__default["default"].createElement(CustomOverflowMenuItem, {
|
|
382
|
-
onClick: function onClick() {
|
|
383
|
-
onLogout();
|
|
384
|
-
setOpen(false);
|
|
385
|
-
},
|
|
386
|
-
"data-testid": "user-menu-logout",
|
|
387
|
-
className: "eps-overflow-menu__item"
|
|
388
|
-
}, React__default["default"].createElement("span", {
|
|
389
|
-
"aria-hidden": true
|
|
390
|
-
}, React__default["default"].createElement(icons.LogOutIcon, {
|
|
391
|
-
size: "1rem",
|
|
392
|
-
inline: true
|
|
393
|
-
})), messages.logout))));
|
|
394
|
-
};
|
|
395
|
-
var CustomOverflowMenu = function CustomOverflowMenu(_ref2) {
|
|
396
|
-
var className = _ref2.className,
|
|
397
|
-
children = _ref2.children,
|
|
398
|
-
userName = _ref2.userName,
|
|
399
|
-
open = _ref2.open,
|
|
400
|
-
onOpenChange = _ref2.onOpenChange,
|
|
401
|
-
environment = _ref2.environment,
|
|
402
|
-
rest = _objectWithoutPropertiesLoose(_ref2, _excluded$b);
|
|
356
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$b);
|
|
403
357
|
var overflowItemsClasses = cx__default["default"]('eps-overflow-menu__group', {
|
|
404
358
|
'eps-overflow-menu__group--open': open
|
|
405
359
|
});
|
|
@@ -440,15 +394,52 @@ var CustomOverflowMenu = function CustomOverflowMenu(_ref2) {
|
|
|
440
394
|
ref: overflowContentRef
|
|
441
395
|
}, children));
|
|
442
396
|
};
|
|
397
|
+
|
|
443
398
|
var CustomOverflowMenuItem = function CustomOverflowMenuItem(props) {
|
|
444
399
|
return React__default["default"].createElement("button", _extends({
|
|
445
400
|
className: cx__default["default"](props.className, 'eps-overflow-menu__item'),
|
|
446
401
|
role: "menuitem"
|
|
447
402
|
}, props));
|
|
448
403
|
};
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
404
|
+
|
|
405
|
+
var LanguageSwitchMenuItem = function LanguageSwitchMenuItem(_ref) {
|
|
406
|
+
var language = _ref.language,
|
|
407
|
+
onLanguageChange = _ref.onLanguageChange,
|
|
408
|
+
setOpen = _ref.setOpen,
|
|
409
|
+
name = _ref.name;
|
|
410
|
+
var useB47LanguageKey = useFeatureToggle('USE_BCP-47_LANGUAGE_KEY');
|
|
411
|
+
var norwegianLanguageKey = useB47LanguageKey ? 'nb-NO' : 'nb';
|
|
412
|
+
var englishLanguageKey = useB47LanguageKey ? 'en-GB' : 'en';
|
|
413
|
+
return React__default["default"].createElement(React__default["default"].Fragment, null, language === englishLanguageKey ? React__default["default"].createElement(CustomOverflowMenuItem, {
|
|
414
|
+
onClick: function onClick() {
|
|
415
|
+
onLanguageChange(norwegianLanguageKey);
|
|
416
|
+
setOpen(false);
|
|
417
|
+
},
|
|
418
|
+
className: "eps-overflow-menu__item"
|
|
419
|
+
}, React__default["default"].createElement("span", {
|
|
420
|
+
"aria-hidden": true,
|
|
421
|
+
className: "eps-overflow-menu__icon-margin"
|
|
422
|
+
}, React__default["default"].createElement(icons.NorwayIcon, {
|
|
423
|
+
size: "1rem",
|
|
424
|
+
inline: true
|
|
425
|
+
})), name) : React__default["default"].createElement(CustomOverflowMenuItem, {
|
|
426
|
+
onClick: function onClick() {
|
|
427
|
+
onLanguageChange(englishLanguageKey);
|
|
428
|
+
setOpen(false);
|
|
429
|
+
},
|
|
430
|
+
className: "eps-overflow-menu__item"
|
|
431
|
+
}, React__default["default"].createElement("span", {
|
|
432
|
+
"aria-hidden": true,
|
|
433
|
+
className: "eps-overflow-menu__icon-margin"
|
|
434
|
+
}, React__default["default"].createElement(icons.UKIcon, {
|
|
435
|
+
size: "1rem",
|
|
436
|
+
inline: true
|
|
437
|
+
})), name));
|
|
438
|
+
};
|
|
439
|
+
|
|
440
|
+
var VersionMenuItem = function VersionMenuItem(_ref) {
|
|
441
|
+
var title = _ref.title,
|
|
442
|
+
setOpen = _ref.setOpen;
|
|
452
443
|
var navigate = reactRouterDom.useNavigate(); // Hide useNavigate from standalone micro-frontends because it is not under RouterProvider
|
|
453
444
|
return React__default["default"].createElement(CustomOverflowMenuItem, {
|
|
454
445
|
onClick: function onClick() {
|
|
@@ -464,41 +455,92 @@ var VersionCustomOverflowMenuItems = function VersionCustomOverflowMenuItems(_re
|
|
|
464
455
|
inline: true
|
|
465
456
|
})), title);
|
|
466
457
|
};
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
}
|
|
482
|
-
|
|
483
|
-
}
|
|
484
|
-
|
|
485
|
-
}
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
}
|
|
500
|
-
|
|
501
|
-
|
|
458
|
+
|
|
459
|
+
var UserMenuItem = function UserMenuItem(_ref) {
|
|
460
|
+
var name = _ref.name,
|
|
461
|
+
setOpen = _ref.setOpen,
|
|
462
|
+
onNavigateToMyProfile = _ref.onNavigateToMyProfile;
|
|
463
|
+
return React__default["default"].createElement(reactRouterDom.Link, {
|
|
464
|
+
to: "/permission-admin/my-profile",
|
|
465
|
+
style: {
|
|
466
|
+
textDecoration: 'none'
|
|
467
|
+
}
|
|
468
|
+
}, React__default["default"].createElement(CustomOverflowMenuItem, {
|
|
469
|
+
onClick: function onClick() {
|
|
470
|
+
setOpen(false);
|
|
471
|
+
onNavigateToMyProfile();
|
|
472
|
+
},
|
|
473
|
+
className: "eps-overflow-menu__item"
|
|
474
|
+
}, React__default["default"].createElement("span", {
|
|
475
|
+
"aria-hidden": true
|
|
476
|
+
}, React__default["default"].createElement(icons.UserIcon, {
|
|
477
|
+
size: "1rem",
|
|
478
|
+
inline: true
|
|
479
|
+
})), name));
|
|
480
|
+
};
|
|
481
|
+
|
|
482
|
+
var LogOutMenuItem = function LogOutMenuItem(_ref) {
|
|
483
|
+
var name = _ref.name,
|
|
484
|
+
setOpen = _ref.setOpen,
|
|
485
|
+
onLogout = _ref.onLogout;
|
|
486
|
+
return React__default["default"].createElement(CustomOverflowMenuItem, {
|
|
487
|
+
onClick: function onClick() {
|
|
488
|
+
onLogout();
|
|
489
|
+
setOpen(false);
|
|
490
|
+
},
|
|
491
|
+
"data-testid": "user-menu-logout",
|
|
492
|
+
className: "eps-overflow-menu__item"
|
|
493
|
+
}, React__default["default"].createElement("span", {
|
|
494
|
+
"aria-hidden": true
|
|
495
|
+
}, React__default["default"].createElement(icons.LogOutIcon, {
|
|
496
|
+
size: "1rem",
|
|
497
|
+
inline: true
|
|
498
|
+
})), name);
|
|
499
|
+
};
|
|
500
|
+
|
|
501
|
+
var UserMenu = function UserMenu(_ref) {
|
|
502
|
+
var className = _ref.className,
|
|
503
|
+
messages = _ref.messages,
|
|
504
|
+
onLogout = _ref.onLogout,
|
|
505
|
+
onLanguageChange = _ref.onLanguageChange,
|
|
506
|
+
userName = _ref.userName,
|
|
507
|
+
language = _ref.language,
|
|
508
|
+
environment = _ref.environment,
|
|
509
|
+
showVersionItem = _ref.showVersionItem,
|
|
510
|
+
showMyProfileItem = _ref.showMyProfileItem,
|
|
511
|
+
onNavigateToMyProfile = _ref.onNavigateToMyProfile;
|
|
512
|
+
var triggerClassList = cx__default["default"](['eps-user-menu__trigger-button', className]);
|
|
513
|
+
var _useState = React.useState(false),
|
|
514
|
+
open = _useState[0],
|
|
515
|
+
setOpen = _useState[1];
|
|
516
|
+
return React__default["default"].createElement("div", {
|
|
517
|
+
id: "eps-user-menu"
|
|
518
|
+
}, React__default["default"].createElement(CustomOverflowMenu, {
|
|
519
|
+
open: open,
|
|
520
|
+
onOpenChange: setOpen,
|
|
521
|
+
className: triggerClassList,
|
|
522
|
+
userName: userName,
|
|
523
|
+
environment: environment
|
|
524
|
+
}, React__default["default"].createElement("div", {
|
|
525
|
+
id: "eps-overflow-menu"
|
|
526
|
+
}, React__default["default"].createElement(LanguageSwitchMenuItem, {
|
|
527
|
+
name: messages.switchLanguage,
|
|
528
|
+
language: language,
|
|
529
|
+
onLanguageChange: onLanguageChange,
|
|
530
|
+
setOpen: setOpen
|
|
531
|
+
}), showVersionItem && messages.appVersion && React__default["default"].createElement(VersionMenuItem, {
|
|
532
|
+
title: messages.appVersion,
|
|
533
|
+
setOpen: setOpen
|
|
534
|
+
}), showMyProfileItem && messages.myProfile && React__default["default"].createElement(UserMenuItem, {
|
|
535
|
+
name: messages.myProfile,
|
|
536
|
+
setOpen: setOpen,
|
|
537
|
+
onNavigateToMyProfile: onNavigateToMyProfile
|
|
538
|
+
}), React__default["default"].createElement(LogOutMenuItem, {
|
|
539
|
+
name: messages.logout,
|
|
540
|
+
setOpen: setOpen,
|
|
541
|
+
onLogout: onLogout
|
|
542
|
+
}))));
|
|
543
|
+
};
|
|
502
544
|
|
|
503
545
|
var _excluded$a = ["label", "organisations", "onChange", "selectedOrganisationId"];
|
|
504
546
|
var OrganisationDropDown = function OrganisationDropDown(_ref) {
|