@laerdal/life-react-components 3.5.1-dev.16 → 3.5.1-dev.18

package/dist/esm/GlobalNavigationBar/Actions.js

@@ -1,148 +0,0 @@
-import _pt from "prop-types";
-import * as React from 'react';
-import styled from 'styled-components';
-import { COLORS, BREAKPOINTS } from '../styles';
-import { Search, GearSettings, Notification, Language, SwitchApp } from '../icons/systemicons/SystemIcons';
-import Avatar, { AvatarContainer } from './Avatar';
-import { IconButton } from '../Button';
-import { ComponentMStyling, ComponentTextStyle } from '../styles/typography';
-const MenuWrapper = styled.div`
-  background-color: ${COLORS.white};
-  display: flex;
-  height: 48px;
-
-  ${BREAKPOINTS.SMALL} {
-    height: ${props => props.isInMobileMenu ? '48px' : '56px'};
-  }
-  ${BREAKPOINTS.MEDIUM} {
-    height: ${props => props.isInMobileMenu ? '48px' : '64px'};
-  }
-`;
-const HeaderItem = styled.div`
-  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}
-
-  padding: 0;
-  display: flex;
-  align-items: center;
-  text-align: center;
-  position: relative;
-
-  button {
-    margin: 0;
-  }
-
-  &:after {
-    content: '';
-    display: block;
-    position: absolute;
-    bottom: -1px;
-    left: 20px;
-    right: 20px;
-    height: 3px;
-    background-color: transparent;
-  }
-`;
-
-const Actions = ({
-  actions,
-  firstName,
-  lastName,
-  hideOnLowWidth,
-  isInMobileMenu,
-  setShowUserMenu,
-  useUserMenu
-}) => {
-  const userRef = React.useRef(null);
-
-  const fireAction = (action, ref = undefined) => {
-    ref?.current?.blur();
-    !!action && action();
-  };
-
-  const isPressingEnter = e => {
-    if (e.key === 'Enter') {
-      e.preventDefault();
-      e.stopPropagation();
-      return true;
-    }
-
-    return false;
-  };
-
-  return /*#__PURE__*/React.createElement(MenuWrapper, {
-    isInMobileMenu: isInMobileMenu
-  }, /*#__PURE__*/React.createElement(HeaderItem, {
-    hideOnLowWidth: hideOnLowWidth || false,
-    inMobileMenu: isInMobileMenu
-  }, actions?.search && /*#__PURE__*/React.createElement(IconButton, {
-    variant: 'secondary',
-    shape: 'circular',
-    hideOnLowWidth: hideOnLowWidth || false,
-    isInMobileMenu: isInMobileMenu,
-    action: () => fireAction(actions?.search),
-    onKeyPress: e => isPressingEnter(e) ? fireAction(actions?.search) : null
-  }, /*#__PURE__*/React.createElement(Search, {
-    size: "24px"
-  })), actions?.notification && !isInMobileMenu && /*#__PURE__*/React.createElement(IconButton, {
-    variant: 'secondary',
-    shape: 'circular',
-    hideOnLowWidth: hideOnLowWidth || false,
-    isInMobileMenu: isInMobileMenu,
-    action: () => fireAction(actions?.notification),
-    onKeyPress: e => isPressingEnter(e) ? fireAction(actions?.notification) : null
-  }, /*#__PURE__*/React.createElement(Notification, {
-    size: "24px"
-  })), actions?.language && /*#__PURE__*/React.createElement(IconButton, {
-    variant: 'secondary',
-    shape: 'circular',
-    hideOnLowWidth: hideOnLowWidth || false,
-    isInMobileMenu: isInMobileMenu,
-    action: () => fireAction(actions?.language),
-    onKeyPress: e => isPressingEnter(e) ? fireAction(actions?.language) : null
-  }, /*#__PURE__*/React.createElement(Language, {
-    size: "24px"
-  })), actions?.settings && /*#__PURE__*/React.createElement(IconButton, {
-    variant: 'secondary',
-    shape: 'circular',
-    hideOnLowWidth: hideOnLowWidth || false,
-    isInMobileMenu: isInMobileMenu,
-    action: () => fireAction(actions?.settings),
-    onKeyPress: e => isPressingEnter(e) ? fireAction(actions?.settings) : null
-  }, /*#__PURE__*/React.createElement(GearSettings, {
-    size: "24px"
-  })), firstName && lastName && !isInMobileMenu && /*#__PURE__*/React.createElement(AvatarContainer, {
-    id: "avatarContainer",
-    "data-testid": "testAvatarContainer",
-    ref: userRef,
-    onClick: useUserMenu ? () => setShowUserMenu(true) : () => fireAction(actions?.user, userRef),
-    onKeyDown: e => isPressingEnter(e) ? useUserMenu ? setShowUserMenu(true) : fireAction(actions?.user, userRef) : null,
-    inMobileMenu: isInMobileMenu,
-    hideOnLowWidth: hideOnLowWidth
-  }, /*#__PURE__*/React.createElement(Avatar, {
-    size: 36,
-    firstName: firstName,
-    lastName: lastName,
-    color: COLORS.primary_500,
-    profileMenuLink: "#TODO"
-  })), actions?.apps && !isInMobileMenu && window.innerWidth > 731 && /*#__PURE__*/React.createElement(IconButton, {
-    variant: 'secondary',
-    shape: 'circular',
-    hideOnLowWidth: hideOnLowWidth || false,
-    isInMobileMenu: isInMobileMenu,
-    id: "globalNavAppsButton",
-    action: () => fireAction(actions?.apps),
-    onKeyPress: e => isPressingEnter(e) ? fireAction(actions?.apps) : null
-  }, /*#__PURE__*/React.createElement(SwitchApp, {
-    size: "24px"
-  }))));
-};
-
-Actions.propTypes = {
-  firstName: _pt.string,
-  lastName: _pt.string,
-  hideOnLowWidth: _pt.bool,
-  isInMobileMenu: _pt.bool,
-  setShowUserMenu: _pt.func.isRequired
-};
-export default Actions;
-//# sourceMappingURL=Actions.js.map

package/dist/esm/GlobalNavigationBar/Actions.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/GlobalNavigationBar/Actions.tsx"],"names":["React","styled","COLORS","BREAKPOINTS","Search","GearSettings","Notification","Language","SwitchApp","Avatar","AvatarContainer","IconButton","ComponentMStyling","ComponentTextStyle","MenuWrapper","div","white","SMALL","props","isInMobileMenu","MEDIUM","HeaderItem","Regular","black","Actions","actions","firstName","lastName","hideOnLowWidth","setShowUserMenu","useUserMenu","userRef","useRef","fireAction","action","ref","undefined","current","blur","isPressingEnter","e","key","preventDefault","stopPropagation","search","notification","language","settings","user","primary_500","apps","window","innerWidth"],"mappings":"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","sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\n\r\nimport { COLORS, BREAKPOINTS } from '../styles';\r\nimport { Search, GearSettings, Notification, Language, SwitchApp } from '../icons/systemicons/SystemIcons';\r\nimport Avatar, { AvatarContainer } from './Avatar';\r\nimport { ActionOptions } from '../types';\r\nimport {IconButton} from '../Button';\r\nimport { ComponentMStyling, ComponentTextStyle } from '../styles/typography';\r\n\r\nconst MenuWrapper = styled.div<{ isInMobileMenu?: boolean }>`\r\n  background-color: ${COLORS.white};\r\n  display: flex;\r\n  height: 48px;\r\n\r\n  ${BREAKPOINTS.SMALL} {\r\n    height: ${(props) => (props.isInMobileMenu ? '48px' : '56px')};\r\n  }\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    height: ${(props) => (props.isInMobileMenu ? '48px' : '64px')};\r\n  }\r\n`;\r\ninterface HeaderItemProps {\r\n  hideOnLowWidth: boolean;\r\n  inMobileMenu?: boolean;\r\n}\r\n\r\nconst HeaderItem = styled.div<HeaderItemProps>`\r\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n\r\n  padding: 0;\r\n  display: flex;\r\n  align-items: center;\r\n  text-align: center;\r\n  position: relative;\r\n\r\n  button {\r\n    margin: 0;\r\n  }\r\n\r\n  &:after {\r\n    content: '';\r\n    display: block;\r\n    position: absolute;\r\n    bottom: -1px;\r\n    left: 20px;\r\n    right: 20px;\r\n    height: 3px;\r\n    background-color: transparent;\r\n  }\r\n`;\r\n\r\ntype Props = {\r\n  firstName?: string;\r\n  lastName?: string;\r\n  actions?: ActionOptions;\r\n  hideOnLowWidth?: boolean;\r\n  isInMobileMenu?: boolean;\r\n  setShowUserMenu: (open: boolean) => void;\r\n  useUserMenu: boolean | undefined;\r\n};\r\n\r\nconst Actions = ({ actions, firstName, lastName, hideOnLowWidth, isInMobileMenu, setShowUserMenu, useUserMenu }: Props): React.ReactElement<Props> => {\r\n  const userRef = React.useRef(null);\r\n\r\n  const fireAction = (action: (() => void) | undefined, ref: React.MutableRefObject<HTMLButtonElement | null> | undefined = undefined) => {\r\n      ref?.current?.blur();\r\n      !!action && action();\r\n  }\r\n\r\n  const isPressingEnter = (e: any) => {\r\n    if (e.key === 'Enter') {\r\n      e.preventDefault();\r\n      e.stopPropagation();\r\n      return true;\r\n    }\r\n    return false;\r\n  };\r\n\r\n  return (\r\n    <MenuWrapper isInMobileMenu={isInMobileMenu}>\r\n      <HeaderItem hideOnLowWidth={hideOnLowWidth || false} inMobileMenu={isInMobileMenu}>\r\n        {actions?.search && (\r\n          <IconButton\r\n            variant={'secondary'}\r\n            shape={'circular'}\r\n            hideOnLowWidth={hideOnLowWidth || false}\r\n            isInMobileMenu={isInMobileMenu}\r\n            action={() => fireAction(actions?.search)}\r\n            onKeyPress={(e: any) => (isPressingEnter(e) ? fireAction(actions?.search) : null)}>\r\n              <Search size=\"24px\" />\r\n          </IconButton>\r\n        )}\r\n        {actions?.notification && !isInMobileMenu && (\r\n          <IconButton\r\n            variant={'secondary'}\r\n            shape={'circular'}\r\n            hideOnLowWidth={hideOnLowWidth || false}\r\n            isInMobileMenu={isInMobileMenu}\r\n            action={() => fireAction(actions?.notification)}\r\n            onKeyPress={(e: any) => (isPressingEnter(e) ? fireAction(actions?.notification) : null)}>\r\n              <Notification size=\"24px\" />\r\n          </IconButton>\r\n        )}\r\n        {actions?.language && (\r\n          <IconButton\r\n            variant={'secondary'}\r\n            shape={'circular'}\r\n            hideOnLowWidth={hideOnLowWidth || false}\r\n            isInMobileMenu={isInMobileMenu}\r\n            action={() => fireAction(actions?.language)}\r\n            onKeyPress={(e: any) => (isPressingEnter(e) ? fireAction(actions?.language) : null)}>\r\n              <Language size=\"24px\" />\r\n          </IconButton>\r\n        )}\r\n        {actions?.settings && (\r\n          <IconButton\r\n            variant={'secondary'}\r\n            shape={'circular'}\r\n            hideOnLowWidth={hideOnLowWidth || false}\r\n            isInMobileMenu={isInMobileMenu}\r\n            action={() => fireAction(actions?.settings)}\r\n            onKeyPress={(e: any) => (isPressingEnter(e) ? fireAction(actions?.settings) : null)}>\r\n              <GearSettings size=\"24px\" />\r\n          </IconButton>\r\n        )}\r\n        {firstName && lastName && !isInMobileMenu && (\r\n          <AvatarContainer\r\n            id=\"avatarContainer\"\r\n            data-testid=\"testAvatarContainer\"\r\n            ref={userRef}\r\n            onClick={useUserMenu ? () => setShowUserMenu(true) : () => fireAction(actions?.user, userRef)}\r\n            onKeyDown={(e: any) => (isPressingEnter(e) ? (useUserMenu ? setShowUserMenu(true) : fireAction(actions?.user, userRef)) : null)}\r\n            inMobileMenu={isInMobileMenu}\r\n            hideOnLowWidth={hideOnLowWidth}>\r\n            <Avatar size={36} firstName={firstName} lastName={lastName} color={COLORS.primary_500} profileMenuLink=\"#TODO\" />\r\n          </AvatarContainer>\r\n        )}\r\n        {actions?.apps && !isInMobileMenu && window.innerWidth > 731 && (\r\n          <IconButton\r\n            variant={'secondary'}\r\n            shape={'circular'}\r\n            hideOnLowWidth={hideOnLowWidth || false}\r\n            isInMobileMenu={isInMobileMenu}\r\n            id=\"globalNavAppsButton\"\r\n            action={() => fireAction(actions?.apps)}\r\n            onKeyPress={(e: any) => (isPressingEnter(e) ? fireAction(actions?.apps) : null)}>\r\n              <SwitchApp size=\"24px\" />\r\n          </IconButton>\r\n        )}\r\n      </HeaderItem>\r\n    </MenuWrapper>\r\n  );\r\n};\r\n\r\nexport default Actions;\r\n"],"file":"Actions.js"}

package/dist/esm/GlobalNavigationBar/Avatar.js

@@ -1,98 +0,0 @@
-import _pt from "prop-types";
-import * as React from 'react';
-import styled, { css } from 'styled-components';
-import { COLORS, BREAKPOINTS } from '../styles';
-const LinkStyling = css`
-  &:focus {
-    background: ${COLORS.primary_500};
-    outline: none;
-  }
-  &:focus-within {
-    box-shadow: 0px 0px 8px ${COLORS.primary}, 0px 4px 12px rgba(46, 127, 161, 0.25);
-  }
-`;
-const ImageStyling = css`
-  &:hover {
-    background-color: ${COLORS.primary_700};
-  }
-
-  &:active {
-    background: ${COLORS.primary_800};
-  }
-`;
-const AvatarLink = styled.div`
-  text-decoration: none;
-
-  ${props => props.useInteractionStyling ? LinkStyling : ''};
-  &:focus {
-    outline: none;
-  }
-  &:focus-within {
-    border-radius: ${props => props.useInteractionStyling ? `${props.size ? props.size : 48}px` : ''};
-  }
-`;
-const AvatarImage = styled.div`
-  background-color: ${props => props.$color};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: ${props => props.size ? props.size : 48}px;
-  height: ${props => props.size ? props.size : 48}px;
-  width: ${props => props.size ? props.size : 48}px;
-  cursor: pointer;
-
-  ${props => props.useInteractionStyling ? ImageStyling : ''};
-`;
-const AvatarLetter = styled.div`
-  font-size: ${props => props.size / 2 - 2}px;
-  color: white;
-  font-weight: bold;
-  text-transform: uppercase;
-  display: inline-block;
-  line-height: ${props => props.size ? props.size : 48}px;
-`;
-export const AvatarContainer = styled.div`
-  flex-direction: column;
-  align-self: center;
-  margin-right: ${props => props.inMobileMenu ? '6px' : '8px'};
-  margin-left: ${props => props.inMobileMenu ? '0' : 'auto'};
-  display: ${props => props.hideOnLowWidth ? 'none' : 'flex'};
-
-  ${BREAKPOINTS.MEDIUM} {
-    display: flex;
-    ${props => !props.hidePadding ? 'padding: 6px;' : ''};
-  }
-`;
-
-const Avatar = ({
-  firstName,
-  lastName,
-  size,
-  color,
-  useInteractionStyling = true
-}) => {
-  return /*#__PURE__*/React.createElement(AvatarLink, {
-    size: size,
-    tabIndex: 0,
-    useInteractionStyling: useInteractionStyling,
-    onMouseDown: e => e.preventDefault()
-  }, /*#__PURE__*/React.createElement(AvatarImage, {
-    size: size,
-    $color: color,
-    useInteractionStyling: useInteractionStyling
-  }, /*#__PURE__*/React.createElement(AvatarLetter, {
-    "data-hj-suppress": true,
-    size: size
-  }, firstName[0], lastName[0])));
-};
-
-Avatar.propTypes = {
-  firstName: _pt.string.isRequired,
-  lastName: _pt.string.isRequired,
-  size: _pt.number.isRequired,
-  color: _pt.string.isRequired,
-  profileMenuLink: _pt.string.isRequired,
-  useInteractionStyling: _pt.bool
-};
-export default Avatar;
-//# sourceMappingURL=Avatar.js.map

package/dist/esm/GlobalNavigationBar/Avatar.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/GlobalNavigationBar/Avatar.tsx"],"names":["React","styled","css","COLORS","BREAKPOINTS","LinkStyling","primary_500","primary","ImageStyling","primary_700","primary_800","AvatarLink","div","props","useInteractionStyling","size","AvatarImage","$color","AvatarLetter","AvatarContainer","inMobileMenu","hideOnLowWidth","MEDIUM","hidePadding","Avatar","firstName","lastName","color","e","preventDefault","profileMenuLink"],"mappings":"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","sourcesContent":["import * as React from 'react';\r\nimport styled, { css } from 'styled-components';\r\nimport { COLORS, BREAKPOINTS } from '../styles';\r\n\r\nconst LinkStyling = css`\r\n  &:focus {\r\n    background: ${COLORS.primary_500};\r\n    outline: none;\r\n  }\r\n  &:focus-within {\r\n    box-shadow: 0px 0px 8px ${COLORS.primary}, 0px 4px 12px rgba(46, 127, 161, 0.25);\r\n  }\r\n`;\r\n\r\nconst ImageStyling = css`\r\n  &:hover {\r\n    background-color: ${COLORS.primary_700};\r\n  }\r\n\r\n  &:active {\r\n    background: ${COLORS.primary_800};\r\n  }\r\n`;\r\n\r\nconst AvatarLink = styled.div<{ size: number; useInteractionStyling: boolean }>`\r\n  text-decoration: none;\r\n\r\n  ${(props) => (props.useInteractionStyling ? LinkStyling : '')};\r\n  &:focus {\r\n    outline: none;\r\n  }\r\n  &:focus-within {\r\n    border-radius: ${(props) => (props.useInteractionStyling ? `${props.size ? props.size : 48}px` : '')};\r\n  }\r\n`;\r\n\r\nconst AvatarImage = styled.div<{ size: number; $color: string; useInteractionStyling: boolean }>`\r\n  background-color: ${(props) => props.$color};\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  border-radius: ${(props) => (props.size ? props.size : 48)}px;\r\n  height: ${(props) => (props.size ? props.size : 48)}px;\r\n  width: ${(props) => (props.size ? props.size : 48)}px;\r\n  cursor: pointer;\r\n\r\n  ${(props) => (props.useInteractionStyling ? ImageStyling : '')};\r\n`;\r\n\r\nconst AvatarLetter = styled.div<{ size: number }>`\r\n  font-size: ${(props) => props.size / 2 - 2}px;\r\n  color: white;\r\n  font-weight: bold;\r\n  text-transform: uppercase;\r\n  display: inline-block;\r\n  line-height: ${(props) => (props.size ? props.size : 48)}px;\r\n`;\r\n\r\nexport const AvatarContainer = styled.div<{ hideOnLowWidth?: boolean; inMobileMenu?: boolean; hidePadding?: boolean }>`\r\n  flex-direction: column;\r\n  align-self: center;\r\n  margin-right: ${(props) => (props.inMobileMenu ? '6px' : '8px')};\r\n  margin-left: ${(props) => (props.inMobileMenu ? '0' : 'auto')};\r\n  display: ${(props) => (props.hideOnLowWidth ? 'none' : 'flex')};\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    display: flex;\r\n    ${(props) => (!props.hidePadding ? 'padding: 6px;' : '')};\r\n  }\r\n`;\r\n\r\ninterface AvatarProps {\r\n  firstName: string;\r\n  lastName: string;\r\n  size: number;\r\n  color: string;\r\n  profileMenuLink: string;\r\n  useInteractionStyling?: boolean;\r\n}\r\n\r\nconst Avatar = ({ firstName, lastName, size, color, useInteractionStyling = true }: AvatarProps) => {\r\n  return (\r\n    <AvatarLink size={size} tabIndex={0} useInteractionStyling={useInteractionStyling} onMouseDown={(e: any) => e.preventDefault()}>\r\n      <AvatarImage size={size} $color={color} useInteractionStyling={useInteractionStyling}>\r\n        <AvatarLetter data-hj-suppress size={size}>\r\n          {firstName[0]}\r\n          {lastName[0]}\r\n        </AvatarLetter>\r\n      </AvatarImage>\r\n    </AvatarLink>\r\n  );\r\n};\r\n\r\nexport default Avatar;\r\n"],"file":"Avatar.js"}

package/dist/esm/GlobalNavigationBar/ExtendedMainMenu.js

@@ -1,117 +0,0 @@
-import _pt from "prop-types";
-import * as React from 'react';
-import styled, { keyframes } from 'styled-components';
-import { BREAKPOINTS, COLORS } from '../styles';
-import { VerticalTabs } from '../Tabs';
-import { Size } from '..';
-import { Z_INDEXES } from '../styles/z-indexes';
-const flowDown = keyframes`
-  0% {
-    opacity: 0;
-    transform: translateY(-10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-`;
-const Menu = styled.ul`
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  background-color: ${COLORS.white};
-  box-sizing: border-box;
-  display: none;
-  right: -8px;
-  min-width: 300px;
-  -webkit-animation: ${flowDown} 0.2s ease-in-out;
-  animation: ${flowDown} 0.2s ease-in-out;
-  position: absolute;
-  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);
-  border-radius: 4px;
-  z-index: ${Z_INDEXES.dropdown};
-
-  top: 12px;
-  ${BREAKPOINTS.SMALL} {
-    top: 18px;
-  }
-  ${BREAKPOINTS.MEDIUM} {
-    top: 24px;
-  }
-
-  .open & {
-    display: block;
-  }
-`;
-const MenuSection = styled.li`
-  padding: 8px 0;
-  position: relative;
-
-  &:not(:first-of-type)::before {
-    content: '';
-    position: absolute;
-    background: ${COLORS.neutral_100};
-    height: 1px;
-    top: 0;
-    left: 16px;
-    right: 16px;
-  }
-
-  .disabled-link {
-    color: #21212150;
-    pointer-events: none;
-    key-events: none;
-  }
-`;
-const MenuSectionList = styled.ul`
-  list-style: none;
-  margin: 0;
-  padding: 0 2px;
-`;
-
-const ExtendedMainMenu = ({
-  clickMenuAction,
-  navigationOptions
-}) => {
-  const [entries, setEntries] = React.useState([]);
-  React.useEffect(() => {
-    function handleKeyPress(e) {
-      if (e.keyCode === 27) {
-        clickMenuAction();
-      }
-    }
-
-    document.addEventListener('keydown', handleKeyPress, false);
-    return () => {
-      document.removeEventListener('keydown', handleKeyPress, false);
-    };
-  }, [clickMenuAction]);
-  React.useEffect(() => {
-    const list = navigationOptions?.map(n => {
-      return {
-        requiredLine: n.label,
-        to: n.to,
-        disabled: n.disabled,
-        onClick: n.onClick,
-        exact: n.exact
-      };
-    });
-    setEntries(list);
-  }, [navigationOptions]);
-  return /*#__PURE__*/React.createElement(Menu, {
-    onClick: clickMenuAction,
-    role: "menu",
-    "aria-labelledby": "UserMenuButton"
-  }, /*#__PURE__*/React.createElement(MenuSection, null, /*#__PURE__*/React.createElement(MenuSectionList, null, /*#__PURE__*/React.createElement(VerticalTabs, {
-    key: "ExtendedMenu",
-    entries: entries,
-    size: Size.Medium
-  }))));
-};
-
-ExtendedMainMenu.propTypes = {
-  clickMenuAction: _pt.func.isRequired,
-  navigationOptions: _pt.array.isRequired
-};
-export default ExtendedMainMenu;
-//# sourceMappingURL=ExtendedMainMenu.js.map

package/dist/esm/GlobalNavigationBar/ExtendedMainMenu.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/GlobalNavigationBar/ExtendedMainMenu.tsx"],"names":["React","styled","keyframes","BREAKPOINTS","COLORS","VerticalTabs","Size","Z_INDEXES","flowDown","Menu","ul","white","dropdown","SMALL","MEDIUM","MenuSection","li","neutral_100","MenuSectionList","ExtendedMainMenu","clickMenuAction","navigationOptions","entries","setEntries","useState","useEffect","handleKeyPress","e","keyCode","document","addEventListener","removeEventListener","list","map","n","requiredLine","label","to","disabled","onClick","exact","Medium"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,IAAiBC,SAAjB,QAAkC,mBAAlC;AAGA,SAASC,WAAT,EAAsBC,MAAtB,QAAoC,WAApC;AACA,SAASC,YAAT,QAA6B,SAA7B;AAEA,SAASC,IAAT,QAAqB,IAArB;AACA,SAAQC,SAAR,QAAwB,qBAAxB;AAEA,MAAMC,QAAQ,GAAGN,SAAU;AAC3B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CATA;AAWA,MAAMO,IAAI,GAAGR,MAAM,CAACS,EAAG;AACvB;AACA;AACA;AACA,sBAAsBN,MAAM,CAACO,KAAM;AACnC;AACA;AACA;AACA;AACA,uBAAuBH,QAAS;AAChC,eAAeA,QAAS;AACxB;AACA;AACA;AACA,aAAaD,SAAS,CAACK,QAAS;AAChC;AACA;AACA,IAAIT,WAAW,CAACU,KAAM;AACtB;AACA;AACA,IAAIV,WAAW,CAACW,MAAO;AACvB;AACA;AACA;AACA;AACA;AACA;AACA,CA3BA;AA6BA,MAAMC,WAAW,GAAGd,MAAM,CAACe,EAAG;AAC9B;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBZ,MAAM,CAACa,WAAY;AACrC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAnBA;AAqBA,MAAMC,eAAe,GAAGjB,MAAM,CAACS,EAAG;AAClC;AACA;AACA;AACA,CAJA;;AAWA,MAAMS,gBAAgB,GAAG,CAAC;AAAEC,EAAAA,eAAF;AAAmBC,EAAAA;AAAnB,CAAD,KAAmD;AAC1E,QAAM,CAACC,OAAD,EAAUC,UAAV,IAAwBvB,KAAK,CAACwB,QAAN,CAAmC,EAAnC,CAA9B;AACAxB,EAAAA,KAAK,CAACyB,SAAN,CAAgB,MAAM;AACpB,aAASC,cAAT,CAAwBC,CAAxB,EAAgC;AAC9B,UAAIA,CAAC,CAACC,OAAF,KAAc,EAAlB,EAAsB;AACpBR,QAAAA,eAAe;AAChB;AACF;;AAEDS,IAAAA,QAAQ,CAACC,gBAAT,CAA0B,SAA1B,EAAqCJ,cAArC,EAAqD,KAArD;AACA,WAAO,MAAM;AACXG,MAAAA,QAAQ,CAACE,mBAAT,CAA6B,SAA7B,EAAwCL,cAAxC,EAAwD,KAAxD;AACD,KAFD;AAGD,GAXD,EAWG,CAACN,eAAD,CAXH;AAaApB,EAAAA,KAAK,CAACyB,SAAN,CAAgB,MAAM;AACpB,UAAMO,IAAI,GAAGX,iBAAiB,EAAEY,GAAnB,CAAuBC,CAAC,IAAI;AACvC,aAAO;AAAEC,QAAAA,YAAY,EAAED,CAAC,CAACE,KAAlB;AAAyBC,QAAAA,EAAE,EAAEH,CAAC,CAACG,EAA/B;AAAmCC,QAAAA,QAAQ,EAAEJ,CAAC,CAACI,QAA/C;AAAyDC,QAAAA,OAAO,EAAEL,CAAC,CAACK,OAApE;AAA6EC,QAAAA,KAAK,EAAEN,CAAC,CAACM;AAAtF,OAAP;AACD,KAFY,CAAb;AAGAjB,IAAAA,UAAU,CAACS,IAAD,CAAV;AACD,GALD,EAKG,CAACX,iBAAD,CALH;AAOA,sBACE,oBAAC,IAAD;AAAM,IAAA,OAAO,EAAED,eAAf;AAAgC,IAAA,IAAI,EAAC,MAArC;AAA4C,uBAAgB;AAA5D,kBACE,oBAAC,WAAD,qBACE,oBAAC,eAAD,qBACE,oBAAC,YAAD;AAAc,IAAA,GAAG,EAAC,cAAlB;AAAiC,IAAA,OAAO,EAAEE,OAA1C;AAAmD,IAAA,IAAI,EAAEhB,IAAI,CAACmC;AAA9D,IADF,CADF,CADF,CADF;AASD,CA/BD;;;AAJErB,EAAAA,e;AACAC,EAAAA,iB;;AAoCF,eAAeF,gBAAf","sourcesContent":["import * as React from 'react';\r\nimport styled, { keyframes } from 'styled-components';\r\n\r\nimport { NavOption } from '../types';\r\nimport { BREAKPOINTS, COLORS } from '../styles';\r\nimport { VerticalTabs } from '../Tabs';\r\nimport { VerticalTabEntry } from '../Tabs/VerticalTabs';\r\nimport { Size } from '..';\r\nimport {Z_INDEXES} from '../styles/z-indexes';\r\n\r\nconst flowDown = keyframes`\r\n  0% {\r\n    opacity: 0;\r\n    transform: translateY(-10px);\r\n  }\r\n  to {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n  }\r\n`;\r\n\r\nconst Menu = styled.ul`\r\n  list-style: none;\r\n  margin: 0;\r\n  padding: 0;\r\n  background-color: ${COLORS.white};\r\n  box-sizing: border-box;\r\n  display: none;\r\n  right: -8px;\r\n  min-width: 300px;\r\n  -webkit-animation: ${flowDown} 0.2s ease-in-out;\r\n  animation: ${flowDown} 0.2s ease-in-out;\r\n  position: absolute;\r\n  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);\r\n  border-radius: 4px;\r\n  z-index: ${Z_INDEXES.dropdown};\r\n\r\n  top: 12px;\r\n  ${BREAKPOINTS.SMALL} {\r\n    top: 18px;\r\n  }\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    top: 24px;\r\n  }\r\n\r\n  .open & {\r\n    display: block;\r\n  }\r\n`;\r\n\r\nconst MenuSection = styled.li`\r\n  padding: 8px 0;\r\n  position: relative;\r\n\r\n  &:not(:first-of-type)::before {\r\n    content: '';\r\n    position: absolute;\r\n    background: ${COLORS.neutral_100};\r\n    height: 1px;\r\n    top: 0;\r\n    left: 16px;\r\n    right: 16px;\r\n  }\r\n\r\n  .disabled-link {\r\n    color: #21212150;\r\n    pointer-events: none;\r\n    key-events: none;\r\n  }\r\n`;\r\n\r\nconst MenuSectionList = styled.ul`\r\n  list-style: none;\r\n  margin: 0;\r\n  padding: 0 2px;\r\n`;\r\n\r\ntype Props = {\r\n  clickMenuAction: () => void;\r\n  navigationOptions: NavOption[];\r\n};\r\n\r\nconst ExtendedMainMenu = ({ clickMenuAction, navigationOptions }: Props) => {\r\n  const [entries, setEntries] = React.useState<VerticalTabEntry[]>([]);\r\n  React.useEffect(() => {\r\n    function handleKeyPress(e: any) {\r\n      if (e.keyCode === 27) {\r\n        clickMenuAction();\r\n      }\r\n    }\r\n\r\n    document.addEventListener('keydown', handleKeyPress, false);\r\n    return () => {\r\n      document.removeEventListener('keydown', handleKeyPress, false);\r\n    };\r\n  }, [clickMenuAction]);\r\n\r\n  React.useEffect(() => {\r\n    const list = navigationOptions?.map(n => {\r\n      return { requiredLine: n.label, to: n.to, disabled: n.disabled, onClick: n.onClick, exact: n.exact };\r\n    }) as VerticalTabEntry[];\r\n    setEntries(list);\r\n  }, [navigationOptions]);\r\n\r\n  return (\r\n    <Menu onClick={clickMenuAction} role=\"menu\" aria-labelledby=\"UserMenuButton\">\r\n      <MenuSection>\r\n        <MenuSectionList>\r\n          <VerticalTabs key=\"ExtendedMenu\" entries={entries} size={Size.Medium} />\r\n        </MenuSectionList>\r\n      </MenuSection>\r\n    </Menu>\r\n  );\r\n};\r\n\r\nexport default ExtendedMainMenu;\r\n"],"file":"ExtendedMainMenu.js"}