@laerdal/life-react-components 1.4.1-dev.1 → 1.4.1-dev.12

package/dist/GlobalNavigationBar/MainMenu.cjs

@@ -0,0 +1,169 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _reactRouterDom = require("react-router-dom");
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _NavItem = require("../NavItem");
+
+var _SystemIcons = require("../icons/systemicons/SystemIcons");
+
+var _styles = require("../styles");
+
+var _ExtendedMainMenu = _interopRequireDefault(require("./ExtendedMainMenu"));
+
+var _Button = require("../Button");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var NavContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: none;\n  justify-content: center;\n  align-items: center;\n\n  ", " {\n    display: flex;\n  }\n\n  a {\n    text-decoration: none;\n  }\n"])), _styles.BREAKPOINTS.MEDIUM);
+
+var NavButton = _styledComponents.default.button(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  border: 0;\n"])), _styles.COLORS.white);
+
+var ExtendedMenuWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin-left: ", ";\n\n  position: absolute;\n  flex-direction: column;\n  left: 290px;\n  top: 22px;\n\n  height: 0;\n  width: 0;\n\n  &:focus-within,\n  &:hover,\n  &.open {\n    background: ", ";\n  }\n"])), function (props) {
+  return props.floatRight ? 'auto' : 'unset';
+}, _styles.COLORS.white);
+
+var ExtendedSection = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n"])));
+
+var MainMenu = function MainMenu(_ref) {
+  var navigationOptions = _ref.navigationOptions,
+      rightSideRef = _ref.rightSideRef;
+
+  var _React$useState = React.useState(false),
+      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+      showExtendedMenu = _React$useState2[0],
+      setShowExtendedMenu = _React$useState2[1];
+
+  var extendedMenuRef = React.useRef(null);
+  var mainMenuRef = React.useRef(null);
+
+  var _React$useState3 = React.useState(1),
+      _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
+      numberOfItemsAllowed = _React$useState4[0],
+      setNumberOfItemsAllowed = _React$useState4[1];
+
+  var widthOfItem = 150;
+
+  var recalculateNumberOfItemsAllowed = function recalculateNumberOfItemsAllowed() {
+    if (rightSideRef !== null && rightSideRef !== void 0 && rightSideRef.current && mainMenuRef !== null && mainMenuRef !== void 0 && mainMenuRef.current) {
+      var _rightSideRef$current, _mainMenuRef$current;
+
+      var number = Math.floor(((rightSideRef === null || rightSideRef === void 0 ? void 0 : (_rightSideRef$current = rightSideRef.current) === null || _rightSideRef$current === void 0 ? void 0 : _rightSideRef$current.offsetLeft) - (mainMenuRef === null || mainMenuRef === void 0 ? void 0 : (_mainMenuRef$current = mainMenuRef.current) === null || _mainMenuRef$current === void 0 ? void 0 : _mainMenuRef$current.offsetLeft)) / widthOfItem);
+
+      if (number !== numberOfItemsAllowed) {
+        setNumberOfItemsAllowed(number);
+      }
+    }
+  };
+
+  var handleClickExtendedMenuAction = function handleClickExtendedMenuAction() {
+    setShowExtendedMenu(false);
+  };
+
+  var handleClickOutside = function handleClickOutside(e) {
+    var _extendedMenuRef$curr;
+
+    if (extendedMenuRef !== null && extendedMenuRef !== void 0 && extendedMenuRef.current && !(extendedMenuRef !== null && extendedMenuRef !== void 0 && (_extendedMenuRef$curr = extendedMenuRef.current) !== null && _extendedMenuRef$curr !== void 0 && _extendedMenuRef$curr.contains(e.target))) {
+      if (showExtendedMenu) {
+        setShowExtendedMenu(false);
+      }
+    }
+  };
+
+  React.useEffect(function () {
+    recalculateNumberOfItemsAllowed(); // Bind the event listener
+
+    document.addEventListener('click', handleClickOutside);
+    window.addEventListener('resize', recalculateNumberOfItemsAllowed);
+    return function () {
+      // Unbind the event listener on clean up
+      document.removeEventListener('click', handleClickOutside);
+      window.removeEventListener('resize', recalculateNumberOfItemsAllowed);
+    };
+  });
+
+  var preventFocusOnClick = function preventFocusOnClick(e) {
+    e.preventDefault();
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(NavContainer, {
+    className: "GlobalNavigationMainMenu",
+    ref: mainMenuRef,
+    open: showExtendedMenu,
+    children: [navigationOptions === null || navigationOptions === void 0 ? void 0 : navigationOptions.map(function (no, index) {
+      return index > numberOfItemsAllowed - 2 ? null : no !== null && no !== void 0 && no.disabled ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_NavItem.NavItem, {
+        as: NavButton,
+        exact: no === null || no === void 0 ? void 0 : no.exact,
+        className: "disabled",
+        onMouseDown: preventFocusOnClick,
+        onClick: function onClick() {
+          if (no !== null && no !== void 0 && no.onClick) {
+            no === null || no === void 0 ? void 0 : no.onClick();
+          }
+        },
+        children: no === null || no === void 0 ? void 0 : no.label
+      }, no === null || no === void 0 ? void 0 : no.label) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_NavItem.NavItem, {
+        as: _reactRouterDom.NavLink,
+        exact: no === null || no === void 0 ? void 0 : no.exact,
+        to: (no === null || no === void 0 ? void 0 : no.to) || '',
+        onMouseDown: preventFocusOnClick,
+        onClick: function onClick() {
+          if (no !== null && no !== void 0 && no.onClick) {
+            no === null || no === void 0 ? void 0 : no.onClick();
+          }
+        },
+        children: no === null || no === void 0 ? void 0 : no.label
+      }, no === null || no === void 0 ? void 0 : no.label);
+    }), navigationOptions.length + 1 > numberOfItemsAllowed && /*#__PURE__*/(0, _jsxRuntime.jsxs)(ExtendedSection, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
+        variant: 'secondary',
+        shape: 'circular',
+        action: function action() {
+          return setShowExtendedMenu(true);
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.MoreHorizontal, {
+          size: "24px"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ExtendedMenuWrapper, {
+        ref: extendedMenuRef,
+        className: showExtendedMenu ? 'open' : '',
+        floatRight: false,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExtendedMainMenu.default, {
+          clickMenuAction: handleClickExtendedMenuAction,
+          navigationOptions: navigationOptions.slice(numberOfItemsAllowed - 1)
+        })
+      })]
+    })]
+  });
+};
+
+MainMenu.propTypes = {
+  navigationOptions: _propTypes.default.array.isRequired
+};
+var _default = MainMenu;
+exports.default = _default;
+//# sourceMappingURL=MainMenu.cjs.map

package/dist/GlobalNavigationBar/MainMenu.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/GlobalNavigationBar/MainMenu.tsx"],"names":["NavContainer","styled","div","BREAKPOINTS","MEDIUM","NavButton","button","COLORS","white","ExtendedMenuWrapper","props","floatRight","ExtendedSection","MainMenu","navigationOptions","rightSideRef","React","useState","showExtendedMenu","setShowExtendedMenu","extendedMenuRef","useRef","mainMenuRef","numberOfItemsAllowed","setNumberOfItemsAllowed","widthOfItem","recalculateNumberOfItemsAllowed","current","number","Math","floor","offsetLeft","handleClickExtendedMenuAction","handleClickOutside","e","contains","target","useEffect","document","addEventListener","window","removeEventListener","preventFocusOnClick","preventDefault","map","no","index","disabled","exact","onClick","label","NavLink","to","length","slice"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { NavLink } from 'react-router-dom';\nimport styled from 'styled-components';\n\nimport { NavItem } from '../NavItem';\nimport { MoreHorizontal } from '../icons/systemicons/SystemIcons';\nimport { COLORS, BREAKPOINTS } from '../styles';\nimport { NavOption } from '../types';\nimport ExtendedMainMenu from './ExtendedMainMenu';\nimport {IconButton} from '../Button';\n\nconst NavContainer = styled.div<{ open: boolean }>`\n  display: none;\n  justify-content: center;\n  align-items: center;\n\n  ${BREAKPOINTS.MEDIUM} {\n    display: flex;\n  }\n\n  a {\n    text-decoration: none;\n  }\n`;\n\nconst NavButton = styled.button`\n  background: ${COLORS.white};\n  border: 0;\n`;\n\ninterface ExtendedMenuWrapperProps {\n  floatRight: boolean;\n}\n\nconst ExtendedMenuWrapper = styled.div<ExtendedMenuWrapperProps>`\n  display: flex;\n  margin-left: ${props => (props.floatRight ? 'auto' : 'unset')};\n\n  position: absolute;\n  flex-direction: column;\n  left: 290px;\n  top: 22px;\n\n  height: 0;\n  width: 0;\n\n  &:focus-within,\n  &:hover,\n  &.open {\n    background: ${COLORS.white};\n  }\n`;\n\nconst ExtendedSection = styled.div`\n  position: relative;\n`;\n\ntype Props = {\n  navigationOptions: NavOption[];\n  rightSideRef?: React.RefObject<HTMLDivElement> | null | undefined;\n};\n\nconst MainMenu = ({ navigationOptions, rightSideRef }: Props): React.ReactElement<Props> => {\n  const [showExtendedMenu, setShowExtendedMenu] = React.useState(false);\n  const extendedMenuRef = React.useRef<any>(null);\n  const mainMenuRef: React.RefObject<HTMLDivElement> | null | undefined = React.useRef(null);\n  const [numberOfItemsAllowed, setNumberOfItemsAllowed] = React.useState<number>(1);\n\n  const widthOfItem = 150;\n  const recalculateNumberOfItemsAllowed = () => {\n    if (rightSideRef?.current && mainMenuRef?.current) {\n      const number = Math.floor((rightSideRef?.current?.offsetLeft - mainMenuRef?.current?.offsetLeft) / widthOfItem);\n      if (number !== numberOfItemsAllowed) {\n        setNumberOfItemsAllowed(number);\n      }\n    }\n  };\n\n  const handleClickExtendedMenuAction = () => {\n    setShowExtendedMenu(false);\n  };\n\n  const handleClickOutside = (e: any) => {\n    if (extendedMenuRef?.current && !extendedMenuRef?.current?.contains(e.target)) {\n      if (showExtendedMenu) {\n        setShowExtendedMenu(false);\n      }\n    }\n  };\n  React.useEffect(() => {\n    recalculateNumberOfItemsAllowed();\n    // Bind the event listener\n    document.addEventListener('click', handleClickOutside);\n    window.addEventListener('resize', recalculateNumberOfItemsAllowed);\n    return () => {\n      // Unbind the event listener on clean up\n      document.removeEventListener('click', handleClickOutside);\n      window.removeEventListener('resize', recalculateNumberOfItemsAllowed);\n    };\n  });\n\n  const preventFocusOnClick = (e: any) => {\n    e.preventDefault();\n  };\n\n  return (\n    <NavContainer className=\"GlobalNavigationMainMenu\" ref={mainMenuRef} open={showExtendedMenu}>\n      {navigationOptions?.map((no: NavOption, index: number) =>\n        index > numberOfItemsAllowed - 2 ? null : no?.disabled ? (\n          <NavItem\n            as={NavButton}\n            exact={no?.exact}\n            className=\"disabled\"\n            key={no?.label}\n            onMouseDown={preventFocusOnClick}\n            onClick={() => {\n              if (no?.onClick) {\n                no?.onClick();\n              }\n            }}>\n            {no?.label}\n          </NavItem>\n        ) : (\n          <NavItem\n            as={NavLink}\n            exact={no?.exact}\n            to={no?.to || ''}\n            key={no?.label}\n            onMouseDown={preventFocusOnClick}\n            onClick={() => {\n              if (no?.onClick) {\n                no?.onClick();\n              }\n            }}>\n            {no?.label}\n          </NavItem>\n        ),\n      )}\n      {navigationOptions.length + 1 > numberOfItemsAllowed && (\n        <ExtendedSection>\n          <IconButton\n            variant={'secondary'}\n            shape={'circular'}\n            action={() => setShowExtendedMenu(true)}>\n            <MoreHorizontal size=\"24px\" />\n          </IconButton>\n          <ExtendedMenuWrapper ref={extendedMenuRef} className={showExtendedMenu ? 'open' : ''} floatRight={false}>\n            <ExtendedMainMenu clickMenuAction={handleClickExtendedMenuAction} navigationOptions={navigationOptions.slice(numberOfItemsAllowed - 1)} />\n          </ExtendedMenuWrapper>\n        </ExtendedSection>\n      )}\n    </NavContainer>\n  );\n};\n\nexport default MainMenu;\n"],"file":"MainMenu.cjs"}

package/dist/GlobalNavigationBar/MainMenu.js

@@ -0,0 +1,140 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _pt from "prop-types";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+import * as React from 'react';
+import { NavLink } from 'react-router-dom';
+import styled from 'styled-components';
+import { NavItem } from '../NavItem';
+import { MoreHorizontal } from '../icons/systemicons/SystemIcons';
+import { COLORS, BREAKPOINTS } from '../styles';
+import ExtendedMainMenu from './ExtendedMainMenu';
+import { IconButton } from '../Button';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var NavContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: none;\n  justify-content: center;\n  align-items: center;\n\n  ", " {\n    display: flex;\n  }\n\n  a {\n    text-decoration: none;\n  }\n"])), BREAKPOINTS.MEDIUM);
+var NavButton = styled.button(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background: ", ";\n  border: 0;\n"])), COLORS.white);
+var ExtendedMenuWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  margin-left: ", ";\n\n  position: absolute;\n  flex-direction: column;\n  left: 290px;\n  top: 22px;\n\n  height: 0;\n  width: 0;\n\n  &:focus-within,\n  &:hover,\n  &.open {\n    background: ", ";\n  }\n"])), function (props) {
+  return props.floatRight ? 'auto' : 'unset';
+}, COLORS.white);
+var ExtendedSection = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: relative;\n"])));
+
+var MainMenu = function MainMenu(_ref) {
+  var navigationOptions = _ref.navigationOptions,
+      rightSideRef = _ref.rightSideRef;
+
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      showExtendedMenu = _React$useState2[0],
+      setShowExtendedMenu = _React$useState2[1];
+
+  var extendedMenuRef = React.useRef(null);
+  var mainMenuRef = React.useRef(null);
+
+  var _React$useState3 = React.useState(1),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      numberOfItemsAllowed = _React$useState4[0],
+      setNumberOfItemsAllowed = _React$useState4[1];
+
+  var widthOfItem = 150;
+
+  var recalculateNumberOfItemsAllowed = function recalculateNumberOfItemsAllowed() {
+    if (rightSideRef !== null && rightSideRef !== void 0 && rightSideRef.current && mainMenuRef !== null && mainMenuRef !== void 0 && mainMenuRef.current) {
+      var _rightSideRef$current, _mainMenuRef$current;
+
+      var number = Math.floor(((rightSideRef === null || rightSideRef === void 0 ? void 0 : (_rightSideRef$current = rightSideRef.current) === null || _rightSideRef$current === void 0 ? void 0 : _rightSideRef$current.offsetLeft) - (mainMenuRef === null || mainMenuRef === void 0 ? void 0 : (_mainMenuRef$current = mainMenuRef.current) === null || _mainMenuRef$current === void 0 ? void 0 : _mainMenuRef$current.offsetLeft)) / widthOfItem);
+
+      if (number !== numberOfItemsAllowed) {
+        setNumberOfItemsAllowed(number);
+      }
+    }
+  };
+
+  var handleClickExtendedMenuAction = function handleClickExtendedMenuAction() {
+    setShowExtendedMenu(false);
+  };
+
+  var handleClickOutside = function handleClickOutside(e) {
+    var _extendedMenuRef$curr;
+
+    if (extendedMenuRef !== null && extendedMenuRef !== void 0 && extendedMenuRef.current && !(extendedMenuRef !== null && extendedMenuRef !== void 0 && (_extendedMenuRef$curr = extendedMenuRef.current) !== null && _extendedMenuRef$curr !== void 0 && _extendedMenuRef$curr.contains(e.target))) {
+      if (showExtendedMenu) {
+        setShowExtendedMenu(false);
+      }
+    }
+  };
+
+  React.useEffect(function () {
+    recalculateNumberOfItemsAllowed(); // Bind the event listener
+
+    document.addEventListener('click', handleClickOutside);
+    window.addEventListener('resize', recalculateNumberOfItemsAllowed);
+    return function () {
+      // Unbind the event listener on clean up
+      document.removeEventListener('click', handleClickOutside);
+      window.removeEventListener('resize', recalculateNumberOfItemsAllowed);
+    };
+  });
+
+  var preventFocusOnClick = function preventFocusOnClick(e) {
+    e.preventDefault();
+  };
+
+  return /*#__PURE__*/_jsxs(NavContainer, {
+    className: "GlobalNavigationMainMenu",
+    ref: mainMenuRef,
+    open: showExtendedMenu,
+    children: [navigationOptions === null || navigationOptions === void 0 ? void 0 : navigationOptions.map(function (no, index) {
+      return index > numberOfItemsAllowed - 2 ? null : no !== null && no !== void 0 && no.disabled ? /*#__PURE__*/_jsx(NavItem, {
+        as: NavButton,
+        exact: no === null || no === void 0 ? void 0 : no.exact,
+        className: "disabled",
+        onMouseDown: preventFocusOnClick,
+        onClick: function onClick() {
+          if (no !== null && no !== void 0 && no.onClick) {
+            no === null || no === void 0 ? void 0 : no.onClick();
+          }
+        },
+        children: no === null || no === void 0 ? void 0 : no.label
+      }, no === null || no === void 0 ? void 0 : no.label) : /*#__PURE__*/_jsx(NavItem, {
+        as: NavLink,
+        exact: no === null || no === void 0 ? void 0 : no.exact,
+        to: (no === null || no === void 0 ? void 0 : no.to) || '',
+        onMouseDown: preventFocusOnClick,
+        onClick: function onClick() {
+          if (no !== null && no !== void 0 && no.onClick) {
+            no === null || no === void 0 ? void 0 : no.onClick();
+          }
+        },
+        children: no === null || no === void 0 ? void 0 : no.label
+      }, no === null || no === void 0 ? void 0 : no.label);
+    }), navigationOptions.length + 1 > numberOfItemsAllowed && /*#__PURE__*/_jsxs(ExtendedSection, {
+      children: [/*#__PURE__*/_jsx(IconButton, {
+        variant: 'secondary',
+        shape: 'circular',
+        action: function action() {
+          return setShowExtendedMenu(true);
+        },
+        children: /*#__PURE__*/_jsx(MoreHorizontal, {
+          size: "24px"
+        })
+      }), /*#__PURE__*/_jsx(ExtendedMenuWrapper, {
+        ref: extendedMenuRef,
+        className: showExtendedMenu ? 'open' : '',
+        floatRight: false,
+        children: /*#__PURE__*/_jsx(ExtendedMainMenu, {
+          clickMenuAction: handleClickExtendedMenuAction,
+          navigationOptions: navigationOptions.slice(numberOfItemsAllowed - 1)
+        })
+      })]
+    })]
+  });
+};
+
+MainMenu.propTypes = {
+  navigationOptions: _pt.array.isRequired
+};
+export default MainMenu;
+//# sourceMappingURL=MainMenu.js.map

package/dist/GlobalNavigationBar/MainMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/GlobalNavigationBar/MainMenu.tsx"],"names":["React","NavLink","styled","NavItem","MoreHorizontal","COLORS","BREAKPOINTS","ExtendedMainMenu","IconButton","NavContainer","div","MEDIUM","NavButton","button","white","ExtendedMenuWrapper","props","floatRight","ExtendedSection","MainMenu","navigationOptions","rightSideRef","useState","showExtendedMenu","setShowExtendedMenu","extendedMenuRef","useRef","mainMenuRef","numberOfItemsAllowed","setNumberOfItemsAllowed","widthOfItem","recalculateNumberOfItemsAllowed","current","number","Math","floor","offsetLeft","handleClickExtendedMenuAction","handleClickOutside","e","contains","target","useEffect","document","addEventListener","window","removeEventListener","preventFocusOnClick","preventDefault","map","no","index","disabled","exact","onClick","label","to","length","slice"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { NavLink } from 'react-router-dom';\nimport styled from 'styled-components';\n\nimport { NavItem } from '../NavItem';\nimport { MoreHorizontal } from '../icons/systemicons/SystemIcons';\nimport { COLORS, BREAKPOINTS } from '../styles';\nimport { NavOption } from '../types';\nimport ExtendedMainMenu from './ExtendedMainMenu';\nimport {IconButton} from '../Button';\n\nconst NavContainer = styled.div<{ open: boolean }>`\n  display: none;\n  justify-content: center;\n  align-items: center;\n\n  ${BREAKPOINTS.MEDIUM} {\n    display: flex;\n  }\n\n  a {\n    text-decoration: none;\n  }\n`;\n\nconst NavButton = styled.button`\n  background: ${COLORS.white};\n  border: 0;\n`;\n\ninterface ExtendedMenuWrapperProps {\n  floatRight: boolean;\n}\n\nconst ExtendedMenuWrapper = styled.div<ExtendedMenuWrapperProps>`\n  display: flex;\n  margin-left: ${props => (props.floatRight ? 'auto' : 'unset')};\n\n  position: absolute;\n  flex-direction: column;\n  left: 290px;\n  top: 22px;\n\n  height: 0;\n  width: 0;\n\n  &:focus-within,\n  &:hover,\n  &.open {\n    background: ${COLORS.white};\n  }\n`;\n\nconst ExtendedSection = styled.div`\n  position: relative;\n`;\n\ntype Props = {\n  navigationOptions: NavOption[];\n  rightSideRef?: React.RefObject<HTMLDivElement> | null | undefined;\n};\n\nconst MainMenu = ({ navigationOptions, rightSideRef }: Props): React.ReactElement<Props> => {\n  const [showExtendedMenu, setShowExtendedMenu] = React.useState(false);\n  const extendedMenuRef = React.useRef<any>(null);\n  const mainMenuRef: React.RefObject<HTMLDivElement> | null | undefined = React.useRef(null);\n  const [numberOfItemsAllowed, setNumberOfItemsAllowed] = React.useState<number>(1);\n\n  const widthOfItem = 150;\n  const recalculateNumberOfItemsAllowed = () => {\n    if (rightSideRef?.current && mainMenuRef?.current) {\n      const number = Math.floor((rightSideRef?.current?.offsetLeft - mainMenuRef?.current?.offsetLeft) / widthOfItem);\n      if (number !== numberOfItemsAllowed) {\n        setNumberOfItemsAllowed(number);\n      }\n    }\n  };\n\n  const handleClickExtendedMenuAction = () => {\n    setShowExtendedMenu(false);\n  };\n\n  const handleClickOutside = (e: any) => {\n    if (extendedMenuRef?.current && !extendedMenuRef?.current?.contains(e.target)) {\n      if (showExtendedMenu) {\n        setShowExtendedMenu(false);\n      }\n    }\n  };\n  React.useEffect(() => {\n    recalculateNumberOfItemsAllowed();\n    // Bind the event listener\n    document.addEventListener('click', handleClickOutside);\n    window.addEventListener('resize', recalculateNumberOfItemsAllowed);\n    return () => {\n      // Unbind the event listener on clean up\n      document.removeEventListener('click', handleClickOutside);\n      window.removeEventListener('resize', recalculateNumberOfItemsAllowed);\n    };\n  });\n\n  const preventFocusOnClick = (e: any) => {\n    e.preventDefault();\n  };\n\n  return (\n    <NavContainer className=\"GlobalNavigationMainMenu\" ref={mainMenuRef} open={showExtendedMenu}>\n      {navigationOptions?.map((no: NavOption, index: number) =>\n        index > numberOfItemsAllowed - 2 ? null : no?.disabled ? (\n          <NavItem\n            as={NavButton}\n            exact={no?.exact}\n            className=\"disabled\"\n            key={no?.label}\n            onMouseDown={preventFocusOnClick}\n            onClick={() => {\n              if (no?.onClick) {\n                no?.onClick();\n              }\n            }}>\n            {no?.label}\n          </NavItem>\n        ) : (\n          <NavItem\n            as={NavLink}\n            exact={no?.exact}\n            to={no?.to || ''}\n            key={no?.label}\n            onMouseDown={preventFocusOnClick}\n            onClick={() => {\n              if (no?.onClick) {\n                no?.onClick();\n              }\n            }}>\n            {no?.label}\n          </NavItem>\n        ),\n      )}\n      {navigationOptions.length + 1 > numberOfItemsAllowed && (\n        <ExtendedSection>\n          <IconButton\n            variant={'secondary'}\n            shape={'circular'}\n            action={() => setShowExtendedMenu(true)}>\n            <MoreHorizontal size=\"24px\" />\n          </IconButton>\n          <ExtendedMenuWrapper ref={extendedMenuRef} className={showExtendedMenu ? 'open' : ''} floatRight={false}>\n            <ExtendedMainMenu clickMenuAction={handleClickExtendedMenuAction} navigationOptions={navigationOptions.slice(numberOfItemsAllowed - 1)} />\n          </ExtendedMenuWrapper>\n        </ExtendedSection>\n      )}\n    </NavContainer>\n  );\n};\n\nexport default MainMenu;\n"],"file":"MainMenu.js"}

package/dist/GlobalNavigationBar/RightSideNav.cjs

@@ -0,0 +1,89 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _reactRouterDom = require("react-router-dom");
+
+var _NavItem = require("../NavItem");
+
+var _styles = require("../styles");
+
+var _Button = require("../Button");
+
+var _typography = require("../styles/typography");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _templateObject, _templateObject2;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var NavContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin: auto 0 auto auto;\n  align-items: center;\n  height: 48px;\n  \n  a {\n    text-decoration: none;\n  }\n\n  ", " {\n    height: 56px;\n  }\n  ", " {\n    height: 64px;\n  }\n\n  button,\n  div {\n    &:hover {\n      cursor: pointer;\n    }\n  }\n"])), _styles.BREAKPOINTS.SMALL, _styles.BREAKPOINTS.MEDIUM);
+
+var SecondaryButton = (0, _styledComponents.default)(_Button.Button)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  height: 40px;\n  margin: 0 8px;\n\n  ", "\n"])), (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Bold, 'unset'));
+
+var RightSideNav = function RightSideNav(_ref) {
+  var navigationOptions = _ref.navigationOptions,
+      secondaryButton = _ref.secondaryButton;
+
+  var preventFocusOnClick = function preventFocusOnClick(e) {
+    e.preventDefault();
+  };
+
+  var getNavItem = function getNavItem(navOption) {
+    if (navOption !== null && navOption !== void 0 && navOption.disabled) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_NavItem.NavItem, {
+        as: _Button.Button,
+        className: "disabled",
+        children: navOption === null || navOption === void 0 ? void 0 : navOption.label
+      }, navOption === null || navOption === void 0 ? void 0 : navOption.label);
+    } else {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_NavItem.NavItem, {
+        as: _reactRouterDom.NavLink,
+        exact: navOption === null || navOption === void 0 ? void 0 : navOption.exact,
+        to: (navOption === null || navOption === void 0 ? void 0 : navOption.to) || '',
+        onMouseDown: preventFocusOnClick,
+        onClick: function onClick() {
+          if (navOption !== null && navOption !== void 0 && navOption.onClick) {
+            navOption === null || navOption === void 0 ? void 0 : navOption.onClick();
+          }
+        },
+        children: navOption === null || navOption === void 0 ? void 0 : navOption.label
+      }, navOption === null || navOption === void 0 ? void 0 : navOption.label);
+    }
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(NavContainer, {
+    children: [navigationOptions === null || navigationOptions === void 0 ? void 0 : navigationOptions.reverse().map(function (no) {
+      return getNavItem(no);
+    }), secondaryButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(SecondaryButton, {
+      variant: "secondary",
+      onClick: secondaryButton === null || secondaryButton === void 0 ? void 0 : secondaryButton.action,
+      children: secondaryButton.label
+    })]
+  });
+};
+
+RightSideNav.propTypes = {
+  navigationOptions: _propTypes.default.array
+};
+var _default = RightSideNav;
+exports.default = _default;
+//# sourceMappingURL=RightSideNav.cjs.map

package/dist/GlobalNavigationBar/RightSideNav.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/GlobalNavigationBar/RightSideNav.tsx"],"names":["NavContainer","styled","div","BREAKPOINTS","SMALL","MEDIUM","SecondaryButton","Button","ComponentTextStyle","Bold","RightSideNav","navigationOptions","secondaryButton","preventFocusOnClick","e","preventDefault","getNavItem","navOption","disabled","label","NavLink","exact","to","onClick","reverse","map","no","action"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AAEA;;AACA;;AACA;;;;;;;;;;AAEA,IAAMA,YAAY,GAAGC,0BAAOC,GAAV,yWAUdC,oBAAYC,KAVE,EAadD,oBAAYE,MAbE,CAAlB;;AAyBA,IAAMC,eAAe,GAAG,+BAAOC,cAAP,CAAH,qIAIjB,mCAAkBC,2BAAmBC,IAArC,EAA2C,OAA3C,CAJiB,CAArB;;AAYA,IAAMC,YAAY,GAAG,SAAfA,YAAe,OAA8E;AAAA,MAA3EC,iBAA2E,QAA3EA,iBAA2E;AAAA,MAAxDC,eAAwD,QAAxDA,eAAwD;;AACjG,MAAMC,mBAAmB,GAAG,SAAtBA,mBAAsB,CAACC,CAAD,EAAY;AACtCA,IAAAA,CAAC,CAACC,cAAF;AACD,GAFD;;AAGA,MAAMC,UAAU,GAAG,SAAbA,UAAa,CAACC,SAAD,EAA0B;AAC3C,QAAIA,SAAJ,aAAIA,SAAJ,eAAIA,SAAS,CAAEC,QAAf,EAAyB;AACvB,0BACE,qBAAC,gBAAD;AAAS,QAAA,EAAE,EAAEX,cAAb;AAAqB,QAAA,SAAS,EAAC,UAA/B;AAAA,kBACGU,SADH,aACGA,SADH,uBACGA,SAAS,CAAEE;AADd,SAA+CF,SAA/C,aAA+CA,SAA/C,uBAA+CA,SAAS,CAAEE,KAA1D,CADF;AAKD,KAND,MAMO;AACL,0BACE,qBAAC,gBAAD;AACE,QAAA,EAAE,EAAEC,uBADN;AAEE,QAAA,KAAK,EAAEH,SAAF,aAAEA,SAAF,uBAAEA,SAAS,CAAEI,KAFpB;AAGE,QAAA,EAAE,EAAE,CAAAJ,SAAS,SAAT,IAAAA,SAAS,WAAT,YAAAA,SAAS,CAAEK,EAAX,KAAiB,EAHvB;AAKE,QAAA,WAAW,EAAET,mBALf;AAME,QAAA,OAAO,EAAE,mBAAM;AACb,cAAII,SAAJ,aAAIA,SAAJ,eAAIA,SAAS,CAAEM,OAAf,EAAwB;AACtBN,YAAAA,SAAS,SAAT,IAAAA,SAAS,WAAT,YAAAA,SAAS,CAAEM,OAAX;AACD;AACF,SAVH;AAAA,kBAWGN,SAXH,aAWGA,SAXH,uBAWGA,SAAS,CAAEE;AAXd,SAIOF,SAJP,aAIOA,SAJP,uBAIOA,SAAS,CAAEE,KAJlB,CADF;AAeD;AACF,GAxBD;;AAyBA,sBACE,sBAAC,YAAD;AAAA,eACGR,iBADH,aACGA,iBADH,uBACGA,iBAAiB,CAAEa,OAAnB,GAA6BC,GAA7B,CAAiC,UAAAC,EAAE;AAAA,aAAIV,UAAU,CAACU,EAAD,CAAd;AAAA,KAAnC,CADH,EAGGd,eAAe,iBACd,qBAAC,eAAD;AAAiB,MAAA,OAAO,EAAC,WAAzB;AAAqC,MAAA,OAAO,EAAEA,eAAF,aAAEA,eAAF,uBAAEA,eAAe,CAAEe,MAA/D;AAAA,gBACGf,eAAe,CAACO;AADnB,MAJJ;AAAA,IADF;AAWD,CAxCD;;;AAJER,EAAAA,iB;;eA8CaD,Y","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {NavLink} from 'react-router-dom';\n\nimport {NavItem} from '../NavItem';\nimport {NavButton, NavOption} from '../types';\nimport {BREAKPOINTS, ComponentTextStyle} from '../styles';\nimport {Button} from '../Button';\nimport {ComponentMStyling} from '../styles/typography';\n\nconst NavContainer = styled.div`\n  display: flex;\n  margin: auto 0 auto auto;\n  align-items: center;\n  height: 48px;\n  \n  a {\n    text-decoration: none;\n  }\n\n  ${BREAKPOINTS.SMALL} {\n    height: 56px;\n  }\n  ${BREAKPOINTS.MEDIUM} {\n    height: 64px;\n  }\n\n  button,\n  div {\n    &:hover {\n      cursor: pointer;\n    }\n  }\n`;\n\nconst SecondaryButton = styled(Button)`\n  height: 40px;\n  margin: 0 8px;\n\n  ${ComponentMStyling(ComponentTextStyle.Bold, 'unset')}\n`;\n\ntype Props = {\n  navigationOptions?: NavOption[];\n  secondaryButton?: NavButton;\n};\n\nconst RightSideNav = ({ navigationOptions, secondaryButton }: Props): React.ReactElement<Props> => {\n  const preventFocusOnClick = (e: any) => {\n    e.preventDefault();\n  };\n  const getNavItem = (navOption: NavOption) => {\n    if (navOption?.disabled) {\n      return (\n        <NavItem as={Button} className=\"disabled\" key={navOption?.label}>\n          {navOption?.label}\n        </NavItem>\n      );\n    } else {\n      return (\n        <NavItem\n          as={NavLink}\n          exact={navOption?.exact}\n          to={navOption?.to || ''}\n          key={navOption?.label}\n          onMouseDown={preventFocusOnClick}\n          onClick={() => {\n            if (navOption?.onClick) {\n              navOption?.onClick();\n            }\n          }}>\n          {navOption?.label}\n        </NavItem>\n      );\n    }\n  };\n  return (\n    <NavContainer>\n      {navigationOptions?.reverse().map(no => getNavItem(no))}\n\n      {secondaryButton && (\n        <SecondaryButton variant=\"secondary\" onClick={secondaryButton?.action}>\n          {secondaryButton.label}\n        </SecondaryButton>\n      )}\n    </NavContainer>\n  );\n};\n\nexport default RightSideNav;\n"],"file":"RightSideNav.cjs"}

package/dist/GlobalNavigationBar/RightSideNav.js

@@ -0,0 +1,64 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _pt from "prop-types";
+
+var _templateObject, _templateObject2;
+
+import * as React from 'react';
+import styled from 'styled-components';
+import { NavLink } from 'react-router-dom';
+import { NavItem } from '../NavItem';
+import { BREAKPOINTS, ComponentTextStyle } from '../styles';
+import { Button } from '../Button';
+import { ComponentMStyling } from '../styles/typography';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var NavContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  margin: auto 0 auto auto;\n  align-items: center;\n  height: 48px;\n  \n  a {\n    text-decoration: none;\n  }\n\n  ", " {\n    height: 56px;\n  }\n  ", " {\n    height: 64px;\n  }\n\n  button,\n  div {\n    &:hover {\n      cursor: pointer;\n    }\n  }\n"])), BREAKPOINTS.SMALL, BREAKPOINTS.MEDIUM);
+var SecondaryButton = styled(Button)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  height: 40px;\n  margin: 0 8px;\n\n  ", "\n"])), ComponentMStyling(ComponentTextStyle.Bold, 'unset'));
+
+var RightSideNav = function RightSideNav(_ref) {
+  var navigationOptions = _ref.navigationOptions,
+      secondaryButton = _ref.secondaryButton;
+
+  var preventFocusOnClick = function preventFocusOnClick(e) {
+    e.preventDefault();
+  };
+
+  var getNavItem = function getNavItem(navOption) {
+    if (navOption !== null && navOption !== void 0 && navOption.disabled) {
+      return /*#__PURE__*/_jsx(NavItem, {
+        as: Button,
+        className: "disabled",
+        children: navOption === null || navOption === void 0 ? void 0 : navOption.label
+      }, navOption === null || navOption === void 0 ? void 0 : navOption.label);
+    } else {
+      return /*#__PURE__*/_jsx(NavItem, {
+        as: NavLink,
+        exact: navOption === null || navOption === void 0 ? void 0 : navOption.exact,
+        to: (navOption === null || navOption === void 0 ? void 0 : navOption.to) || '',
+        onMouseDown: preventFocusOnClick,
+        onClick: function onClick() {
+          if (navOption !== null && navOption !== void 0 && navOption.onClick) {
+            navOption === null || navOption === void 0 ? void 0 : navOption.onClick();
+          }
+        },
+        children: navOption === null || navOption === void 0 ? void 0 : navOption.label
+      }, navOption === null || navOption === void 0 ? void 0 : navOption.label);
+    }
+  };
+
+  return /*#__PURE__*/_jsxs(NavContainer, {
+    children: [navigationOptions === null || navigationOptions === void 0 ? void 0 : navigationOptions.reverse().map(function (no) {
+      return getNavItem(no);
+    }), secondaryButton && /*#__PURE__*/_jsx(SecondaryButton, {
+      variant: "secondary",
+      onClick: secondaryButton === null || secondaryButton === void 0 ? void 0 : secondaryButton.action,
+      children: secondaryButton.label
+    })]
+  });
+};
+
+RightSideNav.propTypes = {
+  navigationOptions: _pt.array
+};
+export default RightSideNav;
+//# sourceMappingURL=RightSideNav.js.map

package/dist/GlobalNavigationBar/RightSideNav.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/GlobalNavigationBar/RightSideNav.tsx"],"names":["React","styled","NavLink","NavItem","BREAKPOINTS","ComponentTextStyle","Button","ComponentMStyling","NavContainer","div","SMALL","MEDIUM","SecondaryButton","Bold","RightSideNav","navigationOptions","secondaryButton","preventFocusOnClick","e","preventDefault","getNavItem","navOption","disabled","label","exact","to","onClick","reverse","map","no","action"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,OAAR,QAAsB,kBAAtB;AAEA,SAAQC,OAAR,QAAsB,YAAtB;AAEA,SAAQC,WAAR,EAAqBC,kBAArB,QAA8C,WAA9C;AACA,SAAQC,MAAR,QAAqB,WAArB;AACA,SAAQC,iBAAR,QAAgC,sBAAhC;;;AAEA,IAAMC,YAAY,GAAGP,MAAM,CAACQ,GAAV,2VAUdL,WAAW,CAACM,KAVE,EAadN,WAAW,CAACO,MAbE,CAAlB;AAyBA,IAAMC,eAAe,GAAGX,MAAM,CAACK,MAAD,CAAT,uHAIjBC,iBAAiB,CAACF,kBAAkB,CAACQ,IAApB,EAA0B,OAA1B,CAJA,CAArB;;AAYA,IAAMC,YAAY,GAAG,SAAfA,YAAe,OAA8E;AAAA,MAA3EC,iBAA2E,QAA3EA,iBAA2E;AAAA,MAAxDC,eAAwD,QAAxDA,eAAwD;;AACjG,MAAMC,mBAAmB,GAAG,SAAtBA,mBAAsB,CAACC,CAAD,EAAY;AACtCA,IAAAA,CAAC,CAACC,cAAF;AACD,GAFD;;AAGA,MAAMC,UAAU,GAAG,SAAbA,UAAa,CAACC,SAAD,EAA0B;AAC3C,QAAIA,SAAJ,aAAIA,SAAJ,eAAIA,SAAS,CAAEC,QAAf,EAAyB;AACvB,0BACE,KAAC,OAAD;AAAS,QAAA,EAAE,EAAEhB,MAAb;AAAqB,QAAA,SAAS,EAAC,UAA/B;AAAA,kBACGe,SADH,aACGA,SADH,uBACGA,SAAS,CAAEE;AADd,SAA+CF,SAA/C,aAA+CA,SAA/C,uBAA+CA,SAAS,CAAEE,KAA1D,CADF;AAKD,KAND,MAMO;AACL,0BACE,KAAC,OAAD;AACE,QAAA,EAAE,EAAErB,OADN;AAEE,QAAA,KAAK,EAAEmB,SAAF,aAAEA,SAAF,uBAAEA,SAAS,CAAEG,KAFpB;AAGE,QAAA,EAAE,EAAE,CAAAH,SAAS,SAAT,IAAAA,SAAS,WAAT,YAAAA,SAAS,CAAEI,EAAX,KAAiB,EAHvB;AAKE,QAAA,WAAW,EAAER,mBALf;AAME,QAAA,OAAO,EAAE,mBAAM;AACb,cAAII,SAAJ,aAAIA,SAAJ,eAAIA,SAAS,CAAEK,OAAf,EAAwB;AACtBL,YAAAA,SAAS,SAAT,IAAAA,SAAS,WAAT,YAAAA,SAAS,CAAEK,OAAX;AACD;AACF,SAVH;AAAA,kBAWGL,SAXH,aAWGA,SAXH,uBAWGA,SAAS,CAAEE;AAXd,SAIOF,SAJP,aAIOA,SAJP,uBAIOA,SAAS,CAAEE,KAJlB,CADF;AAeD;AACF,GAxBD;;AAyBA,sBACE,MAAC,YAAD;AAAA,eACGR,iBADH,aACGA,iBADH,uBACGA,iBAAiB,CAAEY,OAAnB,GAA6BC,GAA7B,CAAiC,UAAAC,EAAE;AAAA,aAAIT,UAAU,CAACS,EAAD,CAAd;AAAA,KAAnC,CADH,EAGGb,eAAe,iBACd,KAAC,eAAD;AAAiB,MAAA,OAAO,EAAC,WAAzB;AAAqC,MAAA,OAAO,EAAEA,eAAF,aAAEA,eAAF,uBAAEA,eAAe,CAAEc,MAA/D;AAAA,gBACGd,eAAe,CAACO;AADnB,MAJJ;AAAA,IADF;AAWD,CAxCD;;;AAJER,EAAAA,iB;;AA8CF,eAAeD,YAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {NavLink} from 'react-router-dom';\n\nimport {NavItem} from '../NavItem';\nimport {NavButton, NavOption} from '../types';\nimport {BREAKPOINTS, ComponentTextStyle} from '../styles';\nimport {Button} from '../Button';\nimport {ComponentMStyling} from '../styles/typography';\n\nconst NavContainer = styled.div`\n  display: flex;\n  margin: auto 0 auto auto;\n  align-items: center;\n  height: 48px;\n  \n  a {\n    text-decoration: none;\n  }\n\n  ${BREAKPOINTS.SMALL} {\n    height: 56px;\n  }\n  ${BREAKPOINTS.MEDIUM} {\n    height: 64px;\n  }\n\n  button,\n  div {\n    &:hover {\n      cursor: pointer;\n    }\n  }\n`;\n\nconst SecondaryButton = styled(Button)`\n  height: 40px;\n  margin: 0 8px;\n\n  ${ComponentMStyling(ComponentTextStyle.Bold, 'unset')}\n`;\n\ntype Props = {\n  navigationOptions?: NavOption[];\n  secondaryButton?: NavButton;\n};\n\nconst RightSideNav = ({ navigationOptions, secondaryButton }: Props): React.ReactElement<Props> => {\n  const preventFocusOnClick = (e: any) => {\n    e.preventDefault();\n  };\n  const getNavItem = (navOption: NavOption) => {\n    if (navOption?.disabled) {\n      return (\n        <NavItem as={Button} className=\"disabled\" key={navOption?.label}>\n          {navOption?.label}\n        </NavItem>\n      );\n    } else {\n      return (\n        <NavItem\n          as={NavLink}\n          exact={navOption?.exact}\n          to={navOption?.to || ''}\n          key={navOption?.label}\n          onMouseDown={preventFocusOnClick}\n          onClick={() => {\n            if (navOption?.onClick) {\n              navOption?.onClick();\n            }\n          }}>\n          {navOption?.label}\n        </NavItem>\n      );\n    }\n  };\n  return (\n    <NavContainer>\n      {navigationOptions?.reverse().map(no => getNavItem(no))}\n\n      {secondaryButton && (\n        <SecondaryButton variant=\"secondary\" onClick={secondaryButton?.action}>\n          {secondaryButton.label}\n        </SecondaryButton>\n      )}\n    </NavContainer>\n  );\n};\n\nexport default RightSideNav;\n"],"file":"RightSideNav.js"}