@laerdal/life-react-components 2.0.1-dev.11 → 2.0.1-dev.11.full
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/AuthPage/AuthPage.d.ts +1 -1
- package/dist/Banners/Banner.d.ts +1 -1
- package/dist/Banners/OverviewBanner.d.ts +1 -1
- package/dist/Breadcrumb/Breadcrumb.d.ts +1 -1
- package/dist/Card/HorizontalCard/HorizontalCardActions.d.ts +1 -1
- package/dist/Card/HorizontalCard/HorizontalCardBody.d.ts +1 -1
- package/dist/Card/HorizontalCard/HorizontalCardThumbnail.d.ts +1 -1
- package/dist/Card/HorizontalCard/types.d.ts +4 -4
- package/dist/Chips/ChipTypes.d.ts +2 -2
- package/dist/Dropdown/BasicDropdown.d.ts +3 -3
- package/dist/Dropdown/DropdownButtonTypes.d.ts +3 -3
- package/dist/GlobalNavigationBar/GlobalNavigationBar.d.ts +1 -1
- package/dist/GlobalNavigationBar/Logo.d.ts +1 -1
- package/dist/GlobalNavigationBar/desktop/ExtendedMainMenu.d.ts +1 -1
- package/dist/GlobalNavigationBar/desktop/MainMenu.d.ts +1 -1
- package/dist/GlobalNavigationBar/desktop/RightSideNav.d.ts +1 -1
- package/dist/GlobalNavigationBar/desktop/UserMenu.cjs +4 -2
- package/dist/GlobalNavigationBar/desktop/UserMenu.cjs.map +1 -1
- package/dist/GlobalNavigationBar/desktop/UserMenu.js +4 -2
- package/dist/GlobalNavigationBar/desktop/UserMenu.js.map +1 -1
- package/dist/GlobalNavigationBar/mobile/MobileMenu.d.ts +1 -1
- package/dist/GlobalNavigationBar/types.d.ts +7 -7
- package/dist/Image/ImageWithFallbacks.d.ts +1 -1
- package/dist/InputFields/Label.d.ts +1 -1
- package/dist/InputFields/QuickSearch.d.ts +1 -1
- package/dist/InputFields/ResponsiveComponentWrapper.d.ts +1 -1
- package/dist/InputFields/SearchBar.d.ts +1 -1
- package/dist/InputFields/components/SearchBarInput.d.ts +1 -1
- package/dist/InputFields/types.d.ts +3 -3
- package/dist/List/ListRow.d.ts +1 -1
- package/dist/LoadingIndicator/LoadingIndicator.d.ts +1 -1
- package/dist/MiniProductCard/MiniProductCard.d.ts +1 -1
- package/dist/Modals/Modal.d.ts +1 -1
- package/dist/Modals/ModalContainer.d.ts +2 -2
- package/dist/Modals/ModalTypes.d.ts +1 -1
- package/dist/NavItem/NavItem.d.ts +1 -1
- package/dist/Paginator/Paginator.d.ts +1 -1
- package/dist/Popover/Popover.d.ts +4 -4
- package/dist/ProfileButton/ProfileButton.d.ts +1 -1
- package/dist/QuizButton/QuizButton.d.ts +1 -1
- package/dist/SideMenu/types.d.ts +3 -3
- package/dist/SkipToContent/SkipToContent.d.ts +1 -1
- package/dist/Table/TableTypes.d.ts +4 -4
- package/dist/Tabs/TabLink.d.ts +1 -1
- package/dist/Tabs/Tabs.d.ts +1 -1
- package/dist/Tag/Tag.d.ts +2 -2
- package/dist/Tile/TileTypes.d.ts +8 -8
- package/dist/Toasters/Toast.d.ts +2 -2
- package/dist/Toasters/ToastContext.d.ts +2 -2
- package/dist/assets/index.d.ts +1 -1
- package/dist/icons/index.d.ts +2 -2
- package/dist/styles/typography.d.ts +2 -2
- package/package.json +10 -13
package/dist/Banners/Banner.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { Size } from '../types';
|
|
3
|
-
|
|
3
|
+
type BannerProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
4
4
|
size?: Size.Small | Size.Medium | Size.Large;
|
|
5
5
|
type?: 'warning' | 'critical' | 'positive' | 'neutral';
|
|
6
6
|
link?: string;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { Size } from '..';
|
|
3
3
|
import { BreadcrumbItem } from './BreadcrumbItem';
|
|
4
|
-
|
|
4
|
+
type BreadcrumbProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
5
5
|
homeIcon?: boolean;
|
|
6
6
|
homeLabel?: string;
|
|
7
7
|
homeUrl?: string;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { HorizontalCardProps } from './types';
|
|
3
|
-
|
|
3
|
+
type Props = Pick<HorizontalCardProps, 'actions' | 'disabled'>;
|
|
4
4
|
export declare const HorizontalCardActions: React.ForwardRefExoticComponent<Props & React.RefAttributes<React.RefObject<HTMLButtonElement>[]>>;
|
|
5
5
|
export {};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { HorizontalCardProps } from './types';
|
|
3
|
-
|
|
3
|
+
type Props = Pick<HorizontalCardProps, 'title' | 'description' | 'progress' | 'tags'>;
|
|
4
4
|
export declare const HorizontalCardBody: React.FunctionComponent<Props>;
|
|
5
5
|
export {};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { HorizontalCardProps } from './types';
|
|
3
|
-
|
|
3
|
+
type Props = Pick<HorizontalCardProps, 'image' | 'icon'>;
|
|
4
4
|
export declare const HorizontalCardThumbnail: React.FunctionComponent<Props>;
|
|
5
5
|
export {};
|
|
@@ -4,14 +4,14 @@ import { ToggleButtonProps } from '../../Toggles/ToggleButton';
|
|
|
4
4
|
import { DropdownButtonProps } from '../../Dropdown/DropdownButtonTypes';
|
|
5
5
|
import { TagVariants } from '../../Tag';
|
|
6
6
|
import { LinearProgressProps } from '../../LinearProgress/LinearProgress';
|
|
7
|
-
export
|
|
7
|
+
export type HorizontalCardIconButton = Pick<IconButtonProps, 'action' | 'disabled'> & {
|
|
8
8
|
componentType: 'icon';
|
|
9
9
|
icon: React.ReactNode;
|
|
10
10
|
};
|
|
11
|
-
export
|
|
11
|
+
export type HorizontalCardToggleButton = Pick<ToggleButtonProps, 'active' | 'onChange' | 'disabled' | 'defaultState' | 'activeState'> & {
|
|
12
12
|
componentType: 'toggle';
|
|
13
13
|
};
|
|
14
|
-
export
|
|
14
|
+
export type HorizontalCardDropdownButton = Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'itemsType' | 'action' | 'actionIcon' | 'actionLabel' | 'actionLoading' | 'actionVariant' | 'multiSelect' | 'scrollable' | 'pinTopItem' | 'maxHeight'> & {
|
|
15
15
|
componentType: 'dropdown';
|
|
16
16
|
icon: React.ReactNode;
|
|
17
17
|
};
|
|
@@ -20,7 +20,7 @@ export interface HorizontalCardTag {
|
|
|
20
20
|
icon?: React.ReactNode;
|
|
21
21
|
variant?: TagVariants;
|
|
22
22
|
}
|
|
23
|
-
export
|
|
23
|
+
export type HorizontalCardLinearProgression = Pick<LinearProgressProps, 'max' | 'value'>;
|
|
24
24
|
export interface HorizontalCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onClick' | 'onKeyDown' | 'onMouseDown'> {
|
|
25
25
|
variant?: 'outline' | 'elevated';
|
|
26
26
|
action?: () => void;
|
|
@@ -36,5 +36,5 @@ export interface ChipValue extends Omit<React.HTMLAttributes<HTMLDivElement>, 't
|
|
|
36
36
|
label: string;
|
|
37
37
|
size?: Size;
|
|
38
38
|
}
|
|
39
|
-
export
|
|
40
|
-
export
|
|
39
|
+
export type ChipIcons = 'Add' | 'ArrowDropDown' | 'ArrowDropUp' | 'ArrowLineDown' | 'ArrowLineLeft' | 'ArrowLineRight' | 'ArrowLineUp' | 'ArrowStopLeft' | 'ArrowStopRight' | 'Attachment' | 'Attention' | 'BackwardsFiveSec' | 'Book' | 'BookmarkOff' | 'BookmarkOn' | 'Bullet' | 'Calendar' | 'CheckboxOff' | 'CheckboxOn' | 'CheckboxSemi' | 'CheckMark' | 'ChevronDown' | 'ChevronLeft' | 'ChevronRight' | 'ChevronUp' | 'Clear' | 'Close' | 'ClosedCaptionOn' | 'CloudAttention' | 'CloudCheck' | 'CloudDownload' | 'CloudLocked' | 'CloudNoConnection' | 'CloudSyncing' | 'CloudUpload' | 'Cloud' | 'Dashboard' | 'Delete' | 'Download' | 'DragHandle' | 'DragIndicator' | 'Edit' | 'Educator' | 'Equals' | 'EventLog' | 'ExtendTextArea' | 'Filter' | 'Forward' | 'ForwardSlash' | 'ForwardFiveSec' | 'FullscreenExit' | 'Fullscreen' | 'GearSettings' | 'GridView' | 'Group' | 'GuidedTour' | 'Help' | 'Hierarchy' | 'History' | 'Home' | 'Information' | 'Institute' | 'Language' | 'ListView' | 'LoadingMedium' | 'LoadingSmall' | 'LockedOff' | 'LockedOn' | 'Login' | 'Logout' | 'Loop' | 'Mail' | 'Manikin' | 'MapPoint' | 'Menu' | 'Minus' | 'MoreHorizontal' | 'MoreVertical' | 'NotificationNew' | 'Notification' | 'OpenFolder' | 'OpenNewWindow' | 'Pause' | 'PlayOutline' | 'Play' | 'Plus' | 'PointDown' | 'PointLeft' | 'PointRight' | 'PointUp' | 'RadioButtonOff' | 'RadioButtonOn' | 'Record' | 'Refresh' | 'Replay' | 'Rewind' | 'Save' | 'Search' | 'Share' | 'ShoppingCart' | 'StarFilled' | 'StarOutlined' | 'Stop' | 'Support' | 'Team' | 'ThumbsDown' | 'ThumbsUp' | 'TimeLimited' | 'Time' | 'Tip' | 'Upload' | 'Usb' | 'User' | 'Video' | 'VisibleOff' | 'VisibleOn' | 'VolumeDown' | 'VolumeOff' | 'VolumeUp';
|
|
40
|
+
export type ChipVariant = States.Default | States.Invalid;
|
|
@@ -25,16 +25,16 @@ interface BasicDropdownCommonProps extends Omit<React.HTMLAttributes<HTMLDivElem
|
|
|
25
25
|
margin?: string;
|
|
26
26
|
minWidth?: string;
|
|
27
27
|
}
|
|
28
|
-
|
|
28
|
+
type DropdownFilterMultiSelectProps = BasicDropdownCommonProps & {
|
|
29
29
|
multiSelect: true;
|
|
30
30
|
value?: string[];
|
|
31
31
|
onSelect: (value: string[]) => void;
|
|
32
32
|
};
|
|
33
|
-
|
|
33
|
+
type DropdownFilterSingleSelectProps = BasicDropdownCommonProps & {
|
|
34
34
|
multiSelect?: false;
|
|
35
35
|
value?: string;
|
|
36
36
|
onSelect: (value: string) => void;
|
|
37
37
|
};
|
|
38
|
-
|
|
38
|
+
type DropdownFilterProps = DropdownFilterSingleSelectProps | DropdownFilterMultiSelectProps;
|
|
39
39
|
declare const BasicDropdown: React.ForwardRefExoticComponent<DropdownFilterProps & React.RefAttributes<unknown>>;
|
|
40
40
|
export default BasicDropdown;
|
|
@@ -22,13 +22,13 @@ export interface DropdownButtonBaseProps {
|
|
|
22
22
|
width?: string;
|
|
23
23
|
alignLeft?: boolean;
|
|
24
24
|
}
|
|
25
|
-
export
|
|
25
|
+
export type IconDropdownButtonProps = DropdownButtonBaseProps & {
|
|
26
26
|
type: 'icon';
|
|
27
27
|
icon: React.ReactNode;
|
|
28
28
|
};
|
|
29
|
-
export
|
|
29
|
+
export type TextDropdownButtonProps = DropdownButtonBaseProps & {
|
|
30
30
|
type: 'text';
|
|
31
31
|
label?: string;
|
|
32
32
|
keepLabel?: boolean;
|
|
33
33
|
};
|
|
34
|
-
export
|
|
34
|
+
export type DropdownButtonProps = IconDropdownButtonProps | TextDropdownButtonProps;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { DesktopNavigationMenuProps, MobileNavigationMenuProps, ProfileMenu } from './types';
|
|
3
|
-
|
|
3
|
+
type GlobalNavigationBarProps = {
|
|
4
4
|
isAuthenticated?: boolean;
|
|
5
5
|
useMaxWidth?: boolean;
|
|
6
6
|
maxWidth?: number;
|
|
@@ -48,15 +48,17 @@ var UserMenu = function UserMenu(_ref) {
|
|
|
48
48
|
navigate = _useNavigationHelper.navigate,
|
|
49
49
|
isActiveRoute = _useNavigationHelper.isActiveRoute;
|
|
50
50
|
React.useEffect(function () {
|
|
51
|
+
var _document;
|
|
51
52
|
if (!onHideUserMenu) return;
|
|
52
53
|
function handleKeyPress(e) {
|
|
53
54
|
if (e.key === 'Escape' || e.key === 'Esc') {
|
|
54
55
|
onHideUserMenu();
|
|
55
56
|
}
|
|
56
57
|
}
|
|
57
|
-
document.addEventListener('keydown', handleKeyPress, false);
|
|
58
|
+
(_document = document) === null || _document === void 0 ? void 0 : _document.addEventListener('keydown', handleKeyPress, false);
|
|
58
59
|
return function () {
|
|
59
|
-
|
|
60
|
+
var _document2;
|
|
61
|
+
(_document2 = document) === null || _document2 === void 0 ? void 0 : _document2.removeEventListener('keydown', handleKeyPress, false);
|
|
60
62
|
};
|
|
61
63
|
}, [onHideUserMenu]);
|
|
62
64
|
var renderItem = function renderItem(item, section, index) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UserMenu.cjs","names":["UserMenuScrollContainer","styled","div","UserMenuPinnedContainer","UserMenuWrapper","COLORS","white","Z_INDEXES","off_canvas","Breakpoints","MEDIUM","flowDown","BOXSHADOWS","BOXSHADOW_CENTERED","neutral_200","fixed_menu","MenuSection","SignOutActionWrapper","MenuSectionHeader","neutral_20","ComponentSStyling","ComponentTextStyle","Bold","neutral_500","MenuSectionList","UserMenuSectionListStyling","UserSectionAvatar","UserSectionInfo","UserSectionInfoName","ComponentLStyling","neutral_600","UserSectionInfoEmail","ComponentXSStyling","Regular","UserSectionInfoLink","UserSection","UserMenu","show","user","onHideUserMenu","sections","signOut","label","useNavigationHelper","navigate","isActiveRoute","React","useEffect","handleKeyPress","e","key","document","addEventListener","removeEventListener","renderItem","item","section","index","external","to","exact","value","disabled","icon","displayLabel","action","firstName","lastName","email","link","href","target","id","onClick","cloneElement","size","filter","a","pinned","map","divider","items","Size","Large","preventDefault"],"sources":["../../../src/GlobalNavigationBar/desktop/UserMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {Button} from '../../Button';\nimport {\n BOXSHADOWS,\n COLORS,\n ComponentLStyling,\n ComponentSStyling,\n ComponentTextStyle,\n ComponentXSStyling,\n Z_INDEXES\n} from '../../styles';\nimport {Size} from '../../types';\nimport {flowDown, UserMenuSectionListStyling} from '../mobile/CommonStyles';\nimport {SystemIcons} from '../../icons';\nimport {HyperLink} from '../../HyperLink';\nimport {MenuNavigationItem, MenuNavigationItemTypeItem, MenuNavigationSection, ProfileMenu} from '../types';\nimport MobileMenuHeader from '../mobile/MobileMenuHeader';\nimport Breakpoints from '../../styles/breakpoints';\nimport {MenuItem} from '../../MenuItem';\nimport {useNavigationHelper} from '../../common/NavigationHelper';\nimport {ProfileButton} from '../../ProfileButton';\n\nconst UserMenuScrollContainer = styled.div`\n flex: 1;\n`;\n\nconst UserMenuPinnedContainer = styled.div``;\n\n\nconst UserMenuWrapper = styled.div`\n margin: 0;\n background-color: ${COLORS.white};\n box-sizing: border-box;\n display: none;\n width: 320px;\n\n position: absolute;\n\n &.show {\n display: block;\n }\n\n top: 0;\n right: 0;\n z-index: ${Z_INDEXES.off_canvas};\n height: 100%;\n flex-flow: column;\n\n\n ${Breakpoints.MEDIUM} {\n flex-flow: initial;\n top: initial;\n right: initial;\n height: initial;\n animation: ${flowDown} 0.2s ease-in-out;\n box-shadow: ${BOXSHADOWS.BOXSHADOW_CENTERED};\n border-radius: 8px;\n border: 1px solid ${COLORS.neutral_200};\n z-index: ${Z_INDEXES.fixed_menu};\n padding: 24px 0;\n }\n`;\n\n\nconst MenuSection = styled.div`\n padding: 4px 0;\n display: flex;\n flex-direction: column;\n width: 100%;\n\n &.divider {\n border-top: 1px solid ${COLORS.neutral_200};\n }\n`;\n\nconst SignOutActionWrapper = styled(MenuSection)`\n align-items: center;\n justify-content: center;\n`;\n\nconst MenuSectionHeader = styled.div`\n display: flex;\n align-items: center;\n padding: 8px 24px 4px 24px;\n box-sizing: border-box;\n min-height: 32px;\n background-color: ${COLORS.neutral_20};\n\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_500)}\n`;\n\nconst MenuSectionList = styled.div`\n margin: 0;\n padding: 0;\n\n ${UserMenuSectionListStyling};\n`;\n\n\nconst UserSectionAvatar = styled.div`\n pointer-events: none;\n\n button {\n padding: 0 !important;\n }\n\n button > div {\n width: 48px !important;\n height: 48px !important;\n border-radius: 50% !important;\n }\n`;\n\nconst UserSectionInfo = styled.div`\n padding: 2px 0;\n display: flex;\n flex-direction: column;\n gap: 4px;\n`;\n\nconst UserSectionInfoName = styled.div`\n ${ComponentLStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n`;\n\nconst UserSectionInfoEmail = styled.div`\n word-break: break-all;\n ${ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_500)}\n`;\n\nconst UserSectionInfoLink = styled.div`\n padding: 2px 0;\n display: flex;\n align-items: center;\n gap: 4px;\n\n ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n svg {\n width: 16px;\n height: 16px;\n }\n`;\n\nconst UserSection = styled.div`\n display: flex;\n flex-direction: row;\n padding: 0 24px 8px 24px;\n gap: 16px;\n`;\n\ninterface UserMenuProps extends ProfileMenu {\n show?: boolean;\n onHideUserMenu: () => void;\n}\n\nconst UserMenu = ({show, user, onHideUserMenu, sections, signOut, label}: UserMenuProps) => {\n\n const {navigate, isActiveRoute} = useNavigationHelper();\n\n React.useEffect(() => {\n if (!onHideUserMenu) return;\n\n function handleKeyPress(e: any) {\n if (e.key === 'Escape' || e.key === 'Esc') {\n onHideUserMenu();\n }\n }\n\n document.addEventListener('keydown', handleKeyPress, false);\n return () => {\n document.removeEventListener('keydown', handleKeyPress, false);\n };\n }, [onHideUserMenu]);\n\n const renderItem = (item: MenuNavigationItem, section: MenuNavigationSection, index: number) =>\n <MenuItem key={index}\n id={`profile_${index}`}\n active={!item.external && isActiveRoute(item.to, !!item.exact)}\n item={{\n value: item.to,\n disabled: item.disabled,\n icon: item.icon,\n displayLabel: item.label,\n }}\n onClickHandler={(e) => {\n item.action && item.action(e);\n navigate(item.to, !!item.external);\n }}/>\n\n return (\n <UserMenuWrapper onClick={onHideUserMenu}\n className={show ? 'show' : ''}\n role=\"menu\"\n aria-labelledby=\"UserMenuButton\">\n <UserMenuScrollContainer>\n <UserSection>\n <UserSectionAvatar>\n <ProfileButton onClick={() => {\n }}\n tabIndex={-1}\n initials={user.firstName[0] + user.lastName[0]}/>\n </UserSectionAvatar>\n <UserSectionInfo>\n <UserSectionInfoName data-hj-suppress>{`${user.firstName} ${user.lastName}`}</UserSectionInfoName>\n <UserSectionInfoEmail data-hj-suppress>{user.email}</UserSectionInfoEmail>\n {\n user.link &&\n <HyperLink variant={'default'}\n href={user.link.href}\n target={user.link.target}\n id={user.link.id}\n onClick={user.link.onClick}>\n <UserSectionInfoLink>\n <span>\n {user.link.label}\n </span>\n {user.link.icon && React.cloneElement(user.link.icon, {size: '16px'})}\n </UserSectionInfoLink>\n </HyperLink>\n }\n </UserSectionInfo>\n </UserSection>\n {\n sections.filter(a => !a.pinned).map((section, index) =>\n <MenuSection key={index} className={section.divider ? 'divider' : ''}>\n {section.label && <MenuSectionHeader>{section.label}</MenuSectionHeader>}\n <MenuSectionList key={index}>\n {section.items.map((item, index) => renderItem(item, section, index))}\n </MenuSectionList>\n </MenuSection>\n )\n }\n </UserMenuScrollContainer>\n <UserMenuPinnedContainer>\n {\n sections.filter(a => !!a.pinned).map((section, index) =>\n <MenuSection key={index} className={section.divider || index === 0 ? 'divider' : ''}>\n {section.label && <MenuSectionHeader>{section.label}</MenuSectionHeader>}\n <MenuSectionList key={index}>\n {section.items.map((item, index) => renderItem(item, section, index))}\n </MenuSectionList>\n </MenuSection>\n )\n }\n {\n signOut &&\n <SignOutActionWrapper>\n <Button width={'272px'}\n variant=\"secondary\"\n icon={<SystemIcons.Logout/>}\n size={Size.Large}\n onClick={e => {\n e.preventDefault();\n signOut?.action();\n }}>\n {signOut?.label}\n </Button>\n </SignOutActionWrapper>\n }\n </UserMenuPinnedContainer>\n </UserMenuWrapper>\n );\n};\n\nexport default UserMenu;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"UserMenu.cjs","names":["UserMenuScrollContainer","styled","div","UserMenuPinnedContainer","UserMenuWrapper","COLORS","white","Z_INDEXES","off_canvas","Breakpoints","MEDIUM","flowDown","BOXSHADOWS","BOXSHADOW_CENTERED","neutral_200","fixed_menu","MenuSection","SignOutActionWrapper","MenuSectionHeader","neutral_20","ComponentSStyling","ComponentTextStyle","Bold","neutral_500","MenuSectionList","UserMenuSectionListStyling","UserSectionAvatar","UserSectionInfo","UserSectionInfoName","ComponentLStyling","neutral_600","UserSectionInfoEmail","ComponentXSStyling","Regular","UserSectionInfoLink","UserSection","UserMenu","show","user","onHideUserMenu","sections","signOut","label","useNavigationHelper","navigate","isActiveRoute","React","useEffect","handleKeyPress","e","key","document","addEventListener","removeEventListener","renderItem","item","section","index","external","to","exact","value","disabled","icon","displayLabel","action","firstName","lastName","email","link","href","target","id","onClick","cloneElement","size","filter","a","pinned","map","divider","items","Size","Large","preventDefault"],"sources":["../../../src/GlobalNavigationBar/desktop/UserMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {Button} from '../../Button';\nimport {\n BOXSHADOWS,\n COLORS,\n ComponentLStyling,\n ComponentSStyling,\n ComponentTextStyle,\n ComponentXSStyling,\n Z_INDEXES\n} from '../../styles';\nimport {Size} from '../../types';\nimport {flowDown, UserMenuSectionListStyling} from '../mobile/CommonStyles';\nimport {SystemIcons} from '../../icons';\nimport {HyperLink} from '../../HyperLink';\nimport {MenuNavigationItem, MenuNavigationItemTypeItem, MenuNavigationSection, ProfileMenu} from '../types';\nimport MobileMenuHeader from '../mobile/MobileMenuHeader';\nimport Breakpoints from '../../styles/breakpoints';\nimport {MenuItem} from '../../MenuItem';\nimport {useNavigationHelper} from '../../common/NavigationHelper';\nimport {ProfileButton} from '../../ProfileButton';\n\nconst UserMenuScrollContainer = styled.div`\n flex: 1;\n`;\n\nconst UserMenuPinnedContainer = styled.div``;\n\n\nconst UserMenuWrapper = styled.div`\n margin: 0;\n background-color: ${COLORS.white};\n box-sizing: border-box;\n display: none;\n width: 320px;\n\n position: absolute;\n\n &.show {\n display: block;\n }\n\n top: 0;\n right: 0;\n z-index: ${Z_INDEXES.off_canvas};\n height: 100%;\n flex-flow: column;\n\n\n ${Breakpoints.MEDIUM} {\n flex-flow: initial;\n top: initial;\n right: initial;\n height: initial;\n animation: ${flowDown} 0.2s ease-in-out;\n box-shadow: ${BOXSHADOWS.BOXSHADOW_CENTERED};\n border-radius: 8px;\n border: 1px solid ${COLORS.neutral_200};\n z-index: ${Z_INDEXES.fixed_menu};\n padding: 24px 0;\n }\n`;\n\n\nconst MenuSection = styled.div`\n padding: 4px 0;\n display: flex;\n flex-direction: column;\n width: 100%;\n\n &.divider {\n border-top: 1px solid ${COLORS.neutral_200};\n }\n`;\n\nconst SignOutActionWrapper = styled(MenuSection)`\n align-items: center;\n justify-content: center;\n`;\n\nconst MenuSectionHeader = styled.div`\n display: flex;\n align-items: center;\n padding: 8px 24px 4px 24px;\n box-sizing: border-box;\n min-height: 32px;\n background-color: ${COLORS.neutral_20};\n\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_500)}\n`;\n\nconst MenuSectionList = styled.div`\n margin: 0;\n padding: 0;\n\n ${UserMenuSectionListStyling};\n`;\n\n\nconst UserSectionAvatar = styled.div`\n pointer-events: none;\n\n button {\n padding: 0 !important;\n }\n\n button > div {\n width: 48px !important;\n height: 48px !important;\n border-radius: 50% !important;\n }\n`;\n\nconst UserSectionInfo = styled.div`\n padding: 2px 0;\n display: flex;\n flex-direction: column;\n gap: 4px;\n`;\n\nconst UserSectionInfoName = styled.div`\n ${ComponentLStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n`;\n\nconst UserSectionInfoEmail = styled.div`\n word-break: break-all;\n ${ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_500)}\n`;\n\nconst UserSectionInfoLink = styled.div`\n padding: 2px 0;\n display: flex;\n align-items: center;\n gap: 4px;\n\n ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n svg {\n width: 16px;\n height: 16px;\n }\n`;\n\nconst UserSection = styled.div`\n display: flex;\n flex-direction: row;\n padding: 0 24px 8px 24px;\n gap: 16px;\n`;\n\ninterface UserMenuProps extends ProfileMenu {\n show?: boolean;\n onHideUserMenu: () => void;\n}\n\nconst UserMenu = ({show, user, onHideUserMenu, sections, signOut, label}: UserMenuProps) => {\n\n const {navigate, isActiveRoute} = useNavigationHelper();\n\n React.useEffect(() => {\n if (!onHideUserMenu) return;\n\n function handleKeyPress(e: any) {\n if (e.key === 'Escape' || e.key === 'Esc') {\n onHideUserMenu();\n }\n }\n\n document?.addEventListener('keydown', handleKeyPress, false);\n return () => {\n document?.removeEventListener('keydown', handleKeyPress, false);\n };\n }, [onHideUserMenu]);\n\n const renderItem = (item: MenuNavigationItem, section: MenuNavigationSection, index: number) =>\n <MenuItem key={index}\n id={`profile_${index}`}\n active={!item.external && isActiveRoute(item.to, !!item.exact)}\n item={{\n value: item.to,\n disabled: item.disabled,\n icon: item.icon,\n displayLabel: item.label,\n }}\n onClickHandler={(e) => {\n item.action && item.action(e);\n navigate(item.to, !!item.external);\n }}/>\n\n return (\n <UserMenuWrapper onClick={onHideUserMenu}\n className={show ? 'show' : ''}\n role=\"menu\"\n aria-labelledby=\"UserMenuButton\">\n <UserMenuScrollContainer>\n <UserSection>\n <UserSectionAvatar>\n <ProfileButton onClick={() => {\n }}\n tabIndex={-1}\n initials={user.firstName[0] + user.lastName[0]}/>\n </UserSectionAvatar>\n <UserSectionInfo>\n <UserSectionInfoName data-hj-suppress>{`${user.firstName} ${user.lastName}`}</UserSectionInfoName>\n <UserSectionInfoEmail data-hj-suppress>{user.email}</UserSectionInfoEmail>\n {\n user.link &&\n <HyperLink variant={'default'}\n href={user.link.href}\n target={user.link.target}\n id={user.link.id}\n onClick={user.link.onClick}>\n <UserSectionInfoLink>\n <span>\n {user.link.label}\n </span>\n {user.link.icon && React.cloneElement(user.link.icon, {size: '16px'})}\n </UserSectionInfoLink>\n </HyperLink>\n }\n </UserSectionInfo>\n </UserSection>\n {\n sections.filter(a => !a.pinned).map((section, index) =>\n <MenuSection key={index} className={section.divider ? 'divider' : ''}>\n {section.label && <MenuSectionHeader>{section.label}</MenuSectionHeader>}\n <MenuSectionList key={index}>\n {section.items.map((item, index) => renderItem(item, section, index))}\n </MenuSectionList>\n </MenuSection>\n )\n }\n </UserMenuScrollContainer>\n <UserMenuPinnedContainer>\n {\n sections.filter(a => !!a.pinned).map((section, index) =>\n <MenuSection key={index} className={section.divider || index === 0 ? 'divider' : ''}>\n {section.label && <MenuSectionHeader>{section.label}</MenuSectionHeader>}\n <MenuSectionList key={index}>\n {section.items.map((item, index) => renderItem(item, section, index))}\n </MenuSectionList>\n </MenuSection>\n )\n }\n {\n signOut &&\n <SignOutActionWrapper>\n <Button width={'272px'}\n variant=\"secondary\"\n icon={<SystemIcons.Logout/>}\n size={Size.Large}\n onClick={e => {\n e.preventDefault();\n signOut?.action();\n }}>\n {signOut?.label}\n </Button>\n </SignOutActionWrapper>\n }\n </UserMenuPinnedContainer>\n </UserMenuWrapper>\n );\n};\n\nexport default UserMenu;\n"],"mappings":"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"}
|
|
@@ -39,15 +39,17 @@ var UserMenu = function UserMenu(_ref) {
|
|
|
39
39
|
navigate = _useNavigationHelper.navigate,
|
|
40
40
|
isActiveRoute = _useNavigationHelper.isActiveRoute;
|
|
41
41
|
React.useEffect(function () {
|
|
42
|
+
var _document;
|
|
42
43
|
if (!onHideUserMenu) return;
|
|
43
44
|
function handleKeyPress(e) {
|
|
44
45
|
if (e.key === 'Escape' || e.key === 'Esc') {
|
|
45
46
|
onHideUserMenu();
|
|
46
47
|
}
|
|
47
48
|
}
|
|
48
|
-
document.addEventListener('keydown', handleKeyPress, false);
|
|
49
|
+
(_document = document) === null || _document === void 0 ? void 0 : _document.addEventListener('keydown', handleKeyPress, false);
|
|
49
50
|
return function () {
|
|
50
|
-
|
|
51
|
+
var _document2;
|
|
52
|
+
(_document2 = document) === null || _document2 === void 0 ? void 0 : _document2.removeEventListener('keydown', handleKeyPress, false);
|
|
51
53
|
};
|
|
52
54
|
}, [onHideUserMenu]);
|
|
53
55
|
var renderItem = function renderItem(item, section, index) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UserMenu.js","names":["React","styled","Button","BOXSHADOWS","COLORS","ComponentLStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","Z_INDEXES","Size","flowDown","UserMenuSectionListStyling","SystemIcons","HyperLink","Breakpoints","MenuItem","useNavigationHelper","ProfileButton","UserMenuScrollContainer","div","UserMenuPinnedContainer","UserMenuWrapper","white","off_canvas","MEDIUM","BOXSHADOW_CENTERED","neutral_200","fixed_menu","MenuSection","SignOutActionWrapper","MenuSectionHeader","neutral_20","Bold","neutral_500","MenuSectionList","UserSectionAvatar","UserSectionInfo","UserSectionInfoName","neutral_600","UserSectionInfoEmail","Regular","UserSectionInfoLink","UserSection","UserMenu","show","user","onHideUserMenu","sections","signOut","label","navigate","isActiveRoute","useEffect","handleKeyPress","e","key","document","addEventListener","removeEventListener","renderItem","item","section","index","external","to","exact","value","disabled","icon","displayLabel","action","firstName","lastName","email","link","href","target","id","onClick","cloneElement","size","filter","a","pinned","map","divider","items","Large","preventDefault"],"sources":["../../../src/GlobalNavigationBar/desktop/UserMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {Button} from '../../Button';\nimport {\n BOXSHADOWS,\n COLORS,\n ComponentLStyling,\n ComponentSStyling,\n ComponentTextStyle,\n ComponentXSStyling,\n Z_INDEXES\n} from '../../styles';\nimport {Size} from '../../types';\nimport {flowDown, UserMenuSectionListStyling} from '../mobile/CommonStyles';\nimport {SystemIcons} from '../../icons';\nimport {HyperLink} from '../../HyperLink';\nimport {MenuNavigationItem, MenuNavigationItemTypeItem, MenuNavigationSection, ProfileMenu} from '../types';\nimport MobileMenuHeader from '../mobile/MobileMenuHeader';\nimport Breakpoints from '../../styles/breakpoints';\nimport {MenuItem} from '../../MenuItem';\nimport {useNavigationHelper} from '../../common/NavigationHelper';\nimport {ProfileButton} from '../../ProfileButton';\n\nconst UserMenuScrollContainer = styled.div`\n flex: 1;\n`;\n\nconst UserMenuPinnedContainer = styled.div``;\n\n\nconst UserMenuWrapper = styled.div`\n margin: 0;\n background-color: ${COLORS.white};\n box-sizing: border-box;\n display: none;\n width: 320px;\n\n position: absolute;\n\n &.show {\n display: block;\n }\n\n top: 0;\n right: 0;\n z-index: ${Z_INDEXES.off_canvas};\n height: 100%;\n flex-flow: column;\n\n\n ${Breakpoints.MEDIUM} {\n flex-flow: initial;\n top: initial;\n right: initial;\n height: initial;\n animation: ${flowDown} 0.2s ease-in-out;\n box-shadow: ${BOXSHADOWS.BOXSHADOW_CENTERED};\n border-radius: 8px;\n border: 1px solid ${COLORS.neutral_200};\n z-index: ${Z_INDEXES.fixed_menu};\n padding: 24px 0;\n }\n`;\n\n\nconst MenuSection = styled.div`\n padding: 4px 0;\n display: flex;\n flex-direction: column;\n width: 100%;\n\n &.divider {\n border-top: 1px solid ${COLORS.neutral_200};\n }\n`;\n\nconst SignOutActionWrapper = styled(MenuSection)`\n align-items: center;\n justify-content: center;\n`;\n\nconst MenuSectionHeader = styled.div`\n display: flex;\n align-items: center;\n padding: 8px 24px 4px 24px;\n box-sizing: border-box;\n min-height: 32px;\n background-color: ${COLORS.neutral_20};\n\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_500)}\n`;\n\nconst MenuSectionList = styled.div`\n margin: 0;\n padding: 0;\n\n ${UserMenuSectionListStyling};\n`;\n\n\nconst UserSectionAvatar = styled.div`\n pointer-events: none;\n\n button {\n padding: 0 !important;\n }\n\n button > div {\n width: 48px !important;\n height: 48px !important;\n border-radius: 50% !important;\n }\n`;\n\nconst UserSectionInfo = styled.div`\n padding: 2px 0;\n display: flex;\n flex-direction: column;\n gap: 4px;\n`;\n\nconst UserSectionInfoName = styled.div`\n ${ComponentLStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n`;\n\nconst UserSectionInfoEmail = styled.div`\n word-break: break-all;\n ${ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_500)}\n`;\n\nconst UserSectionInfoLink = styled.div`\n padding: 2px 0;\n display: flex;\n align-items: center;\n gap: 4px;\n\n ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n svg {\n width: 16px;\n height: 16px;\n }\n`;\n\nconst UserSection = styled.div`\n display: flex;\n flex-direction: row;\n padding: 0 24px 8px 24px;\n gap: 16px;\n`;\n\ninterface UserMenuProps extends ProfileMenu {\n show?: boolean;\n onHideUserMenu: () => void;\n}\n\nconst UserMenu = ({show, user, onHideUserMenu, sections, signOut, label}: UserMenuProps) => {\n\n const {navigate, isActiveRoute} = useNavigationHelper();\n\n React.useEffect(() => {\n if (!onHideUserMenu) return;\n\n function handleKeyPress(e: any) {\n if (e.key === 'Escape' || e.key === 'Esc') {\n onHideUserMenu();\n }\n }\n\n document.addEventListener('keydown', handleKeyPress, false);\n return () => {\n document.removeEventListener('keydown', handleKeyPress, false);\n };\n }, [onHideUserMenu]);\n\n const renderItem = (item: MenuNavigationItem, section: MenuNavigationSection, index: number) =>\n <MenuItem key={index}\n id={`profile_${index}`}\n active={!item.external && isActiveRoute(item.to, !!item.exact)}\n item={{\n value: item.to,\n disabled: item.disabled,\n icon: item.icon,\n displayLabel: item.label,\n }}\n onClickHandler={(e) => {\n item.action && item.action(e);\n navigate(item.to, !!item.external);\n }}/>\n\n return (\n <UserMenuWrapper onClick={onHideUserMenu}\n className={show ? 'show' : ''}\n role=\"menu\"\n aria-labelledby=\"UserMenuButton\">\n <UserMenuScrollContainer>\n <UserSection>\n <UserSectionAvatar>\n <ProfileButton onClick={() => {\n }}\n tabIndex={-1}\n initials={user.firstName[0] + user.lastName[0]}/>\n </UserSectionAvatar>\n <UserSectionInfo>\n <UserSectionInfoName data-hj-suppress>{`${user.firstName} ${user.lastName}`}</UserSectionInfoName>\n <UserSectionInfoEmail data-hj-suppress>{user.email}</UserSectionInfoEmail>\n {\n user.link &&\n <HyperLink variant={'default'}\n href={user.link.href}\n target={user.link.target}\n id={user.link.id}\n onClick={user.link.onClick}>\n <UserSectionInfoLink>\n <span>\n {user.link.label}\n </span>\n {user.link.icon && React.cloneElement(user.link.icon, {size: '16px'})}\n </UserSectionInfoLink>\n </HyperLink>\n }\n </UserSectionInfo>\n </UserSection>\n {\n sections.filter(a => !a.pinned).map((section, index) =>\n <MenuSection key={index} className={section.divider ? 'divider' : ''}>\n {section.label && <MenuSectionHeader>{section.label}</MenuSectionHeader>}\n <MenuSectionList key={index}>\n {section.items.map((item, index) => renderItem(item, section, index))}\n </MenuSectionList>\n </MenuSection>\n )\n }\n </UserMenuScrollContainer>\n <UserMenuPinnedContainer>\n {\n sections.filter(a => !!a.pinned).map((section, index) =>\n <MenuSection key={index} className={section.divider || index === 0 ? 'divider' : ''}>\n {section.label && <MenuSectionHeader>{section.label}</MenuSectionHeader>}\n <MenuSectionList key={index}>\n {section.items.map((item, index) => renderItem(item, section, index))}\n </MenuSectionList>\n </MenuSection>\n )\n }\n {\n signOut &&\n <SignOutActionWrapper>\n <Button width={'272px'}\n variant=\"secondary\"\n icon={<SystemIcons.Logout/>}\n size={Size.Large}\n onClick={e => {\n e.preventDefault();\n signOut?.action();\n }}>\n {signOut?.label}\n </Button>\n </SignOutActionWrapper>\n }\n </UserMenuPinnedContainer>\n </UserMenuWrapper>\n );\n};\n\nexport default UserMenu;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"UserMenu.js","names":["React","styled","Button","BOXSHADOWS","COLORS","ComponentLStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","Z_INDEXES","Size","flowDown","UserMenuSectionListStyling","SystemIcons","HyperLink","Breakpoints","MenuItem","useNavigationHelper","ProfileButton","UserMenuScrollContainer","div","UserMenuPinnedContainer","UserMenuWrapper","white","off_canvas","MEDIUM","BOXSHADOW_CENTERED","neutral_200","fixed_menu","MenuSection","SignOutActionWrapper","MenuSectionHeader","neutral_20","Bold","neutral_500","MenuSectionList","UserSectionAvatar","UserSectionInfo","UserSectionInfoName","neutral_600","UserSectionInfoEmail","Regular","UserSectionInfoLink","UserSection","UserMenu","show","user","onHideUserMenu","sections","signOut","label","navigate","isActiveRoute","useEffect","handleKeyPress","e","key","document","addEventListener","removeEventListener","renderItem","item","section","index","external","to","exact","value","disabled","icon","displayLabel","action","firstName","lastName","email","link","href","target","id","onClick","cloneElement","size","filter","a","pinned","map","divider","items","Large","preventDefault"],"sources":["../../../src/GlobalNavigationBar/desktop/UserMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {Button} from '../../Button';\nimport {\n BOXSHADOWS,\n COLORS,\n ComponentLStyling,\n ComponentSStyling,\n ComponentTextStyle,\n ComponentXSStyling,\n Z_INDEXES\n} from '../../styles';\nimport {Size} from '../../types';\nimport {flowDown, UserMenuSectionListStyling} from '../mobile/CommonStyles';\nimport {SystemIcons} from '../../icons';\nimport {HyperLink} from '../../HyperLink';\nimport {MenuNavigationItem, MenuNavigationItemTypeItem, MenuNavigationSection, ProfileMenu} from '../types';\nimport MobileMenuHeader from '../mobile/MobileMenuHeader';\nimport Breakpoints from '../../styles/breakpoints';\nimport {MenuItem} from '../../MenuItem';\nimport {useNavigationHelper} from '../../common/NavigationHelper';\nimport {ProfileButton} from '../../ProfileButton';\n\nconst UserMenuScrollContainer = styled.div`\n flex: 1;\n`;\n\nconst UserMenuPinnedContainer = styled.div``;\n\n\nconst UserMenuWrapper = styled.div`\n margin: 0;\n background-color: ${COLORS.white};\n box-sizing: border-box;\n display: none;\n width: 320px;\n\n position: absolute;\n\n &.show {\n display: block;\n }\n\n top: 0;\n right: 0;\n z-index: ${Z_INDEXES.off_canvas};\n height: 100%;\n flex-flow: column;\n\n\n ${Breakpoints.MEDIUM} {\n flex-flow: initial;\n top: initial;\n right: initial;\n height: initial;\n animation: ${flowDown} 0.2s ease-in-out;\n box-shadow: ${BOXSHADOWS.BOXSHADOW_CENTERED};\n border-radius: 8px;\n border: 1px solid ${COLORS.neutral_200};\n z-index: ${Z_INDEXES.fixed_menu};\n padding: 24px 0;\n }\n`;\n\n\nconst MenuSection = styled.div`\n padding: 4px 0;\n display: flex;\n flex-direction: column;\n width: 100%;\n\n &.divider {\n border-top: 1px solid ${COLORS.neutral_200};\n }\n`;\n\nconst SignOutActionWrapper = styled(MenuSection)`\n align-items: center;\n justify-content: center;\n`;\n\nconst MenuSectionHeader = styled.div`\n display: flex;\n align-items: center;\n padding: 8px 24px 4px 24px;\n box-sizing: border-box;\n min-height: 32px;\n background-color: ${COLORS.neutral_20};\n\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_500)}\n`;\n\nconst MenuSectionList = styled.div`\n margin: 0;\n padding: 0;\n\n ${UserMenuSectionListStyling};\n`;\n\n\nconst UserSectionAvatar = styled.div`\n pointer-events: none;\n\n button {\n padding: 0 !important;\n }\n\n button > div {\n width: 48px !important;\n height: 48px !important;\n border-radius: 50% !important;\n }\n`;\n\nconst UserSectionInfo = styled.div`\n padding: 2px 0;\n display: flex;\n flex-direction: column;\n gap: 4px;\n`;\n\nconst UserSectionInfoName = styled.div`\n ${ComponentLStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n`;\n\nconst UserSectionInfoEmail = styled.div`\n word-break: break-all;\n ${ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_500)}\n`;\n\nconst UserSectionInfoLink = styled.div`\n padding: 2px 0;\n display: flex;\n align-items: center;\n gap: 4px;\n\n ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n svg {\n width: 16px;\n height: 16px;\n }\n`;\n\nconst UserSection = styled.div`\n display: flex;\n flex-direction: row;\n padding: 0 24px 8px 24px;\n gap: 16px;\n`;\n\ninterface UserMenuProps extends ProfileMenu {\n show?: boolean;\n onHideUserMenu: () => void;\n}\n\nconst UserMenu = ({show, user, onHideUserMenu, sections, signOut, label}: UserMenuProps) => {\n\n const {navigate, isActiveRoute} = useNavigationHelper();\n\n React.useEffect(() => {\n if (!onHideUserMenu) return;\n\n function handleKeyPress(e: any) {\n if (e.key === 'Escape' || e.key === 'Esc') {\n onHideUserMenu();\n }\n }\n\n document?.addEventListener('keydown', handleKeyPress, false);\n return () => {\n document?.removeEventListener('keydown', handleKeyPress, false);\n };\n }, [onHideUserMenu]);\n\n const renderItem = (item: MenuNavigationItem, section: MenuNavigationSection, index: number) =>\n <MenuItem key={index}\n id={`profile_${index}`}\n active={!item.external && isActiveRoute(item.to, !!item.exact)}\n item={{\n value: item.to,\n disabled: item.disabled,\n icon: item.icon,\n displayLabel: item.label,\n }}\n onClickHandler={(e) => {\n item.action && item.action(e);\n navigate(item.to, !!item.external);\n }}/>\n\n return (\n <UserMenuWrapper onClick={onHideUserMenu}\n className={show ? 'show' : ''}\n role=\"menu\"\n aria-labelledby=\"UserMenuButton\">\n <UserMenuScrollContainer>\n <UserSection>\n <UserSectionAvatar>\n <ProfileButton onClick={() => {\n }}\n tabIndex={-1}\n initials={user.firstName[0] + user.lastName[0]}/>\n </UserSectionAvatar>\n <UserSectionInfo>\n <UserSectionInfoName data-hj-suppress>{`${user.firstName} ${user.lastName}`}</UserSectionInfoName>\n <UserSectionInfoEmail data-hj-suppress>{user.email}</UserSectionInfoEmail>\n {\n user.link &&\n <HyperLink variant={'default'}\n href={user.link.href}\n target={user.link.target}\n id={user.link.id}\n onClick={user.link.onClick}>\n <UserSectionInfoLink>\n <span>\n {user.link.label}\n </span>\n {user.link.icon && React.cloneElement(user.link.icon, {size: '16px'})}\n </UserSectionInfoLink>\n </HyperLink>\n }\n </UserSectionInfo>\n </UserSection>\n {\n sections.filter(a => !a.pinned).map((section, index) =>\n <MenuSection key={index} className={section.divider ? 'divider' : ''}>\n {section.label && <MenuSectionHeader>{section.label}</MenuSectionHeader>}\n <MenuSectionList key={index}>\n {section.items.map((item, index) => renderItem(item, section, index))}\n </MenuSectionList>\n </MenuSection>\n )\n }\n </UserMenuScrollContainer>\n <UserMenuPinnedContainer>\n {\n sections.filter(a => !!a.pinned).map((section, index) =>\n <MenuSection key={index} className={section.divider || index === 0 ? 'divider' : ''}>\n {section.label && <MenuSectionHeader>{section.label}</MenuSectionHeader>}\n <MenuSectionList key={index}>\n {section.items.map((item, index) => renderItem(item, section, index))}\n </MenuSectionList>\n </MenuSection>\n )\n }\n {\n signOut &&\n <SignOutActionWrapper>\n <Button width={'272px'}\n variant=\"secondary\"\n icon={<SystemIcons.Logout/>}\n size={Size.Large}\n onClick={e => {\n e.preventDefault();\n signOut?.action();\n }}>\n {signOut?.label}\n </Button>\n </SignOutActionWrapper>\n }\n </UserMenuPinnedContainer>\n </UserMenuWrapper>\n );\n};\n\nexport default UserMenu;\n"],"mappings":"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"}
|
|
@@ -59,8 +59,8 @@ export interface MenuSwitcherButton extends Omit<IconButtonProps, 'id' | 'type'
|
|
|
59
59
|
placement?: 'left' | 'right';
|
|
60
60
|
action?: (button?: EventTarget) => boolean | void;
|
|
61
61
|
}
|
|
62
|
-
export
|
|
63
|
-
export
|
|
62
|
+
export type DesktopMenuButtonTypes = MenuIconButton | MenuProfileButton | MenuSwitcherButton;
|
|
63
|
+
export type MobileMenuButtonTypes = MenuIconSubMenuButton | MenuIconButton | MenuProfileButton | MenuSwitcherButton;
|
|
64
64
|
export interface MobileNavigationMenuProps {
|
|
65
65
|
label?: string;
|
|
66
66
|
buttons?: MobileMenuButtonTypes[];
|
|
@@ -84,7 +84,7 @@ export interface MenuNavigationGroup<T = MenuNavigationItem | MenuNavigationSect
|
|
|
84
84
|
footer?: MenuGroupFooter;
|
|
85
85
|
action?: MenuButton;
|
|
86
86
|
}
|
|
87
|
-
export
|
|
87
|
+
export type MenuNavigationItem = {
|
|
88
88
|
icon?: React.ReactNode;
|
|
89
89
|
to: string;
|
|
90
90
|
exact?: boolean;
|
|
@@ -101,19 +101,19 @@ export interface MenuNavigationSection<T = MenuNavigationItem> {
|
|
|
101
101
|
label?: string;
|
|
102
102
|
items: T[];
|
|
103
103
|
}
|
|
104
|
-
export
|
|
104
|
+
export type MenuNavigationItemTypeItem = MenuNavigationItem & {
|
|
105
105
|
type?: 'item';
|
|
106
106
|
};
|
|
107
|
-
export
|
|
107
|
+
export type MenuNavigationItemTypeGroup = MenuNavigationGroup<MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection> & {
|
|
108
108
|
type: 'group';
|
|
109
109
|
icon?: React.ReactNode;
|
|
110
110
|
pinned?: boolean;
|
|
111
111
|
disabled?: boolean;
|
|
112
112
|
};
|
|
113
|
-
export
|
|
113
|
+
export type MenuNavigationItemTypeSection = MenuNavigationSection<MenuNavigationItemTypeItem> & {
|
|
114
114
|
type: 'section';
|
|
115
115
|
};
|
|
116
|
-
export
|
|
116
|
+
export type MenuNavigationCustomSubMenu = {
|
|
117
117
|
type: 'custom';
|
|
118
118
|
label?: string;
|
|
119
119
|
buttons?: MobileMenuButtonTypes[];
|
|
@@ -3,7 +3,7 @@ import { Size } from '../../types';
|
|
|
3
3
|
export declare const Search: import("styled-components").StyledComponent<"input", any, {
|
|
4
4
|
type: "search";
|
|
5
5
|
}, "type">;
|
|
6
|
-
|
|
6
|
+
type SearchBarInputProps = {
|
|
7
7
|
id: string;
|
|
8
8
|
searchTerm?: string;
|
|
9
9
|
setSearchTerm: (term: string) => void;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Size } from '../types';
|
|
2
2
|
import React from 'react';
|
|
3
|
-
export
|
|
3
|
+
export type TextFieldProps = {
|
|
4
4
|
id: string;
|
|
5
5
|
disabled?: boolean;
|
|
6
6
|
readOnly?: boolean;
|
|
@@ -19,7 +19,7 @@ export declare type TextFieldProps = {
|
|
|
19
19
|
margin?: string;
|
|
20
20
|
note?: TextFieldNote;
|
|
21
21
|
};
|
|
22
|
-
export
|
|
22
|
+
export type TextareaProps = Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'placeholder' | 'disabled' | 'required' | 'onChange'> & {
|
|
23
23
|
id: string;
|
|
24
24
|
placeholder: string;
|
|
25
25
|
value?: string;
|
|
@@ -33,7 +33,7 @@ export declare type TextareaProps = Omit<React.TextareaHTMLAttributes<HTMLTextAr
|
|
|
33
33
|
note?: TextFieldNote;
|
|
34
34
|
required: boolean;
|
|
35
35
|
};
|
|
36
|
-
export
|
|
36
|
+
export type TextFieldNote = {
|
|
37
37
|
message: string;
|
|
38
38
|
icon: React.ReactNode;
|
|
39
39
|
};
|
package/dist/List/ListRow.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { DropdownButtonProps } from '../Dropdown/DropdownButtonTypes';
|
|
3
3
|
import { Size } from '../types';
|
|
4
|
-
|
|
4
|
+
type Props = Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onMouseDown' | 'onKeyDown'> & {
|
|
5
5
|
size?: Size;
|
|
6
6
|
variant?: 'normal' | 'overlay';
|
|
7
7
|
icon?: React.ReactNode;
|
package/dist/Modals/Modal.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
|
|
2
|
+
type ModalContainerProps = {
|
|
3
3
|
id?: string;
|
|
4
4
|
showModal: boolean;
|
|
5
5
|
closeModal: () => void;
|
|
@@ -12,7 +12,7 @@ declare type ModalContainerProps = {
|
|
|
12
12
|
maxWidth?: string;
|
|
13
13
|
zIndex?: number;
|
|
14
14
|
};
|
|
15
|
-
|
|
15
|
+
type ModalContainerState = {
|
|
16
16
|
scroll: number;
|
|
17
17
|
};
|
|
18
18
|
declare class ModalContainer extends React.Component<ModalContainerProps, ModalContainerState> {
|
|
@@ -20,4 +20,4 @@ export interface LeftFooterHyperlink extends HyperlinkProps, LeftFooterActionBas
|
|
|
20
20
|
export interface LeftFooterButton extends Pick<ButtonProps, 'variant' | 'id' | 'loading' | 'disabled' | 'icon' | 'type'>, LeftFooterActionBase {
|
|
21
21
|
text: string;
|
|
22
22
|
}
|
|
23
|
-
export
|
|
23
|
+
export type LeftFooterAction = LeftFooterButton | LeftFooterHyperlink;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { StyledComponentProps } from 'styled-components';
|
|
2
2
|
import React from 'react';
|
|
3
|
-
export
|
|
3
|
+
export type StyledComponentPropsWithAs<C extends string | React.ComponentType<any>, T extends object, O extends object, A extends keyof any, AsC extends string | React.ComponentType<any> = C, FAsC extends string | React.ComponentType<any> = C> = StyledComponentProps<C, T, O, A, FAsC> & {
|
|
4
4
|
as?: AsC | undefined;
|
|
5
5
|
forwardedAs?: FAsC | undefined;
|
|
6
6
|
};
|
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { Position, Size } from '../types';
|
|
3
|
-
|
|
3
|
+
type topSectionProps = {
|
|
4
4
|
text: string;
|
|
5
5
|
note?: string;
|
|
6
6
|
};
|
|
7
|
-
|
|
7
|
+
type actionButtonProps = {
|
|
8
8
|
icon: React.ReactNode;
|
|
9
9
|
action: () => void;
|
|
10
10
|
label?: string;
|
|
11
11
|
};
|
|
12
|
-
|
|
12
|
+
type bottomSectionProps = {
|
|
13
13
|
iconButtons?: actionButtonProps[];
|
|
14
14
|
textButton?: actionButtonProps;
|
|
15
15
|
};
|
|
16
|
-
|
|
16
|
+
type PopoverProps = {
|
|
17
17
|
size?: Size.Small | Size.Medium | Size.Large;
|
|
18
18
|
topSectionProps?: topSectionProps;
|
|
19
19
|
bottomSectionProps?: bottomSectionProps;
|
package/dist/SideMenu/types.d.ts
CHANGED
|
@@ -2,13 +2,13 @@ import { ButtonProps } from '../Button/Button';
|
|
|
2
2
|
import { IconButtonProps } from '../Button/Iconbutton';
|
|
3
3
|
import { MenuItemProps } from '../MenuItem/MenuItem';
|
|
4
4
|
import { Size } from '../types';
|
|
5
|
-
export
|
|
5
|
+
export type SideMenuAction = Omit<IconButtonProps, 'variant' | 'shape' | 'isInMobileMenu' | 'borderRadius' | 'flatEdge' | 'focusBackgroundColor' | 'useTransparentBackground' | 'unsetIconSize' | 'shouldNotInteract' | 'invertFocus' | 'hideOnLowWidth' | 'children'> & {
|
|
6
6
|
icon: React.ReactNode;
|
|
7
7
|
};
|
|
8
|
-
export
|
|
8
|
+
export type SideMenuButton = Omit<ButtonProps, 'size' | 'iconOnly' | 'minWidth' | 'testId' | 'width' | 'invertFocus' | 'colorTheme' | 'flatEdge' | 'children'> & {
|
|
9
9
|
label: string;
|
|
10
10
|
};
|
|
11
|
-
export
|
|
11
|
+
export type SideMenuItem = Omit<MenuItemProps, 'size'>;
|
|
12
12
|
export interface SideMenuHeader {
|
|
13
13
|
actions?: SideMenuAction[];
|
|
14
14
|
label?: string;
|
|
@@ -51,10 +51,10 @@ export interface TableColumn {
|
|
|
51
51
|
customContent?: (row: any, key: string) => any;
|
|
52
52
|
sortable?: boolean;
|
|
53
53
|
}
|
|
54
|
-
export
|
|
55
|
-
export
|
|
56
|
-
export
|
|
57
|
-
export
|
|
54
|
+
export type TableColumnTypes = 'text' | 'boolean' | 'number' | 'custom' | 'button' | 'icon' | 'link';
|
|
55
|
+
export type TableJustification = 'right' | 'left' | 'center';
|
|
56
|
+
export type TableSortingDirection = 'asc' | 'desc';
|
|
57
|
+
export type TableLayout = 'auto' | 'fixed';
|
|
58
58
|
export interface TablePagination {
|
|
59
59
|
from: number;
|
|
60
60
|
to: number;
|
package/dist/Tabs/TabLink.d.ts
CHANGED
package/dist/Tabs/Tabs.d.ts
CHANGED
package/dist/Tag/Tag.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
export
|
|
3
|
-
|
|
2
|
+
export type TagVariants = 'neutral' | 'positive' | 'warning' | 'critical' | 'accent1' | 'accent2';
|
|
3
|
+
type TagProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
4
4
|
label?: string;
|
|
5
5
|
icon?: React.ReactNode;
|
|
6
6
|
variant?: TagVariants;
|
package/dist/Tile/TileTypes.d.ts
CHANGED
|
@@ -5,33 +5,33 @@ import { DropdownButtonProps } from '../Dropdown/DropdownButtonTypes';
|
|
|
5
5
|
import { ButtonProps } from '../Button/Button';
|
|
6
6
|
import { HyperlinkProps } from '../HyperLink/HyperLink';
|
|
7
7
|
import { Size } from '../types';
|
|
8
|
-
export
|
|
8
|
+
export type TileIconButton = Pick<IconButtonProps, 'action' | 'disabled'> & {
|
|
9
9
|
componentType: 'icon';
|
|
10
10
|
icon: React.ReactNode;
|
|
11
11
|
};
|
|
12
|
-
export
|
|
12
|
+
export type TileToggleButton = Pick<ToggleButtonProps, 'active' | 'onChange' | 'disabled' | 'defaultState' | 'activeState'> & {
|
|
13
13
|
componentType: 'toggle';
|
|
14
14
|
};
|
|
15
|
-
export
|
|
15
|
+
export type TileDropdownButton = Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'itemsType' | 'action' | 'actionIcon' | 'actionLabel' | 'actionLoading' | 'actionVariant' | 'multiSelect' | 'scrollable' | 'pinTopItem' | 'maxHeight'> & {
|
|
16
16
|
componentType: 'dropdown';
|
|
17
17
|
icon: React.ReactNode;
|
|
18
18
|
};
|
|
19
|
-
export
|
|
19
|
+
export type TileStandardButton = Pick<ButtonProps, 'variant' | 'loading' | 'icon' | 'onClick' | 'disabled'> & {
|
|
20
20
|
componentType: 'button';
|
|
21
21
|
buttonText: string;
|
|
22
22
|
};
|
|
23
|
-
export
|
|
23
|
+
export type TileNote = {
|
|
24
24
|
componentType: 'note';
|
|
25
25
|
noteIcon?: React.ReactNode;
|
|
26
26
|
noteText: string;
|
|
27
27
|
};
|
|
28
|
-
export
|
|
28
|
+
export type TileHyperLink = HyperlinkProps & {
|
|
29
29
|
componentType: 'link';
|
|
30
30
|
linkIcon?: React.ReactNode;
|
|
31
31
|
linkText: string;
|
|
32
32
|
};
|
|
33
|
-
export
|
|
34
|
-
export
|
|
33
|
+
export type FooterButtons = TileIconButton | TileToggleButton | TileDropdownButton | TileStandardButton;
|
|
34
|
+
export type HeaderButtons = TileIconButton | TileToggleButton | TileDropdownButton;
|
|
35
35
|
export interface TileHeaderProps {
|
|
36
36
|
title: string;
|
|
37
37
|
tooltip?: string;
|
package/dist/Toasters/Toast.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { ToastActionType, ToastColor, ToastEntryDirection, ToastPosition } from '../types';
|
|
3
|
-
export
|
|
3
|
+
export type ToastOptions = {
|
|
4
4
|
color?: ToastColor;
|
|
5
5
|
autoClose?: boolean;
|
|
6
6
|
delay?: number;
|
|
@@ -14,7 +14,7 @@ export declare type ToastOptions = {
|
|
|
14
14
|
enterFrom?: ToastEntryDirection;
|
|
15
15
|
icon?: React.ReactNode;
|
|
16
16
|
};
|
|
17
|
-
|
|
17
|
+
type Props = {
|
|
18
18
|
remove?: any;
|
|
19
19
|
content: any;
|
|
20
20
|
options?: ToastOptions;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { ToastOptions } from './Toast';
|
|
3
|
-
export
|
|
3
|
+
export type ToastProviderProps = {
|
|
4
4
|
children?: any;
|
|
5
5
|
};
|
|
6
6
|
export interface toast {
|
|
@@ -8,7 +8,7 @@ export interface toast {
|
|
|
8
8
|
id: string;
|
|
9
9
|
content: any;
|
|
10
10
|
}
|
|
11
|
-
export
|
|
11
|
+
export type ToasterValueProps = {
|
|
12
12
|
toasts: toast[];
|
|
13
13
|
addToast: (content: any, options: ToastOptions) => string;
|
|
14
14
|
removeToast: (id: string) => void;
|
package/dist/assets/index.d.ts
CHANGED
package/dist/icons/index.d.ts
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import * as ContentIcons from './contenticons/ContentIcons';
|
|
3
3
|
import * as SystemIcons from './systemicons/SystemIcons';
|
|
4
|
-
export
|
|
4
|
+
export type BaseProps = {
|
|
5
5
|
children?: any;
|
|
6
6
|
tooltip?: string;
|
|
7
7
|
tooltipId?: string;
|
|
8
8
|
};
|
|
9
|
-
export
|
|
9
|
+
export type IconProps = {
|
|
10
10
|
label?: string;
|
|
11
11
|
className?: string;
|
|
12
12
|
color?: string;
|
|
@@ -36,7 +36,7 @@ declare enum ParagraphTextStyle {
|
|
|
36
36
|
Italic = 3,
|
|
37
37
|
Underline = 4
|
|
38
38
|
}
|
|
39
|
-
|
|
39
|
+
type ParagraphProps = {
|
|
40
40
|
color?: string;
|
|
41
41
|
textStyle?: ParagraphTextStyle;
|
|
42
42
|
children?: React.ReactNode;
|
|
@@ -57,7 +57,7 @@ declare enum ComponentTextStyle {
|
|
|
57
57
|
Italic = 3,
|
|
58
58
|
UppercaseBold = 4
|
|
59
59
|
}
|
|
60
|
-
|
|
60
|
+
type ComponentProps = {
|
|
61
61
|
color?: string;
|
|
62
62
|
className?: string;
|
|
63
63
|
textStyle?: ComponentTextStyle;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@laerdal/life-react-components",
|
|
3
|
-
"version": "2.0.1-dev.11",
|
|
3
|
+
"version": "2.0.1-dev.11.full",
|
|
4
4
|
"private": false,
|
|
5
5
|
"author": "Erik Martirosyan <erik.martirosyan@laerdal.com>",
|
|
6
6
|
"contributors": [],
|
|
@@ -78,34 +78,30 @@
|
|
|
78
78
|
"@babel/preset-react": "^7.18.6",
|
|
79
79
|
"@babel/preset-typescript": "^7.18.6",
|
|
80
80
|
"@babel/runtime": "^7.19.0",
|
|
81
|
-
"@testing-library/jest-dom": "^5.16.
|
|
81
|
+
"@testing-library/jest-dom": "^5.16.5",
|
|
82
82
|
"@testing-library/react": "^12.1.5",
|
|
83
|
-
"@testing-library/user-event": "^14.3
|
|
84
|
-
"@types/
|
|
85
|
-
"@types/jest": "^26.0.24",
|
|
83
|
+
"@testing-library/user-event": "^14.4.3",
|
|
84
|
+
"@types/jest": "^29.2.3",
|
|
86
85
|
"@types/node": "^18.0.6",
|
|
87
86
|
"@types/react": "^17.0.47",
|
|
88
87
|
"@types/react-datepicker": "^4.4.2",
|
|
89
88
|
"@types/react-modal": "^3.13.1",
|
|
90
89
|
"@types/react-router-dom": "^5.3.3",
|
|
91
90
|
"@types/styled-components": "^5.1.25",
|
|
92
|
-
"@wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
|
|
93
91
|
"babel-plugin-inline-react-svg": "^2.0.1",
|
|
94
92
|
"babel-plugin-typescript-to-proptypes": "^2.0.0",
|
|
95
93
|
"concurrently": "^5.2.0",
|
|
96
94
|
"cross-env": "^7.0.3",
|
|
97
95
|
"cypress": "^9.5.0",
|
|
98
|
-
"enzyme": "^3.11.0",
|
|
99
96
|
"history": "^5.3.0",
|
|
100
|
-
"jest": "^
|
|
101
|
-
"jest-environment-jsdom
|
|
102
|
-
"jest-
|
|
103
|
-
"jest-styled-components": "^7.0.5",
|
|
97
|
+
"jest": "^29.3.1",
|
|
98
|
+
"jest-environment-jsdom": "^29.2.1",
|
|
99
|
+
"jest-styled-components": "^7.1.1",
|
|
104
100
|
"jest-svg-transformer": "^1.0.0",
|
|
105
101
|
"react-router": "^6.3.0",
|
|
106
102
|
"react-router-dom": "^6.3.0",
|
|
107
103
|
"regenerator-runtime": "^0.13.9",
|
|
108
|
-
"ts-jest": "^
|
|
104
|
+
"ts-jest": "^29.0.3"
|
|
109
105
|
},
|
|
110
106
|
"peerDependencies": {
|
|
111
107
|
"@babel/core": "^7.0.0",
|
|
@@ -114,6 +110,7 @@
|
|
|
114
110
|
"react-router-dom": "^6"
|
|
115
111
|
},
|
|
116
112
|
"resolutions": {
|
|
117
|
-
"@types/react": "17.0.48"
|
|
113
|
+
"@types/react": "17.0.48",
|
|
114
|
+
"date-fns": "2.24.0"
|
|
118
115
|
}
|
|
119
116
|
}
|