@laerdal/life-react-components 3.5.1-dev.12 → 3.5.1-dev.14

package/dist/GlobalNavigationBar/desktop/DesktopActions.js

@@ -1,88 +1,146 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import React from 'react';
-import styled from 'styled-components';
-import { IconButton, IconButtonStyled } from '../../Button';
-import { ProfileButton } from '../../ProfileButton';
-import { SystemIcons } from '../../icons';
-import { BREAKPOINTS } from '../../styles';
-import { SearchBar } from '../../InputFields';
-import { Size } from '../../types';
-var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n\n  display: none;\n\n  ", " {\n    display: flex;\n  }\n\n  ", "{\n    display: 'none';\n    ", " {\n      display: block;\n    }\n  }\n"], ["\n  align-items: center;\n\n  display: none;\n\n  ", " {\n    display: flex;\n  }\n\n  ", "{\n    display: 'none';\n    ", " {\n      display: block;\n    }\n  }\n"])), BREAKPOINTS.MEDIUM, IconButtonStyled, BREAKPOINTS.MEDIUM);
-var CustomActionWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\n"], ["\n\n"])));
-var ProfileWrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin: 0 8px;\n"], ["\n  margin: 0 8px;\n"])));
-var DesktopActions = React.forwardRef(function (_a, ref) {
-    var buttons = _a.buttons, user = _a.user, profileComponent = _a.profileComponent, onShowUserMenu = _a.onShowUserMenu;
-    var _b = React.useState([]), elRefs = _b[0], setElRefs = _b[1];
-    var _c = React.useState(''), searchTermNormalSmall = _c[0], setSearchTermNormalSmall = _c[1];
-    var length = (buttons === null || buttons === void 0 ? void 0 : buttons.length) || 0;
-    React.useEffect(function () {
-        setElRefs(Array(length || 0).fill(null).map(function () { return React.createRef(); }));
-    }, [length]);
-    React.useImperativeHandle(ref, function () { return ({
-        buttons: elRefs.map(function (r, index) {
-            var _a;
-            return ({
-                ref: r,
-                type: (_a = buttons === null || buttons === void 0 ? void 0 : buttons[index]) === null || _a === void 0 ? void 0 : _a.type,
-            });
-        })
-    }); }, [elRefs, buttons]);
-    var renderItem = function (item, index) {
-        var _a, _b, _c, _d;
-        switch (item.type) {
-            case 'profile': {
-                var placement = item.placement, type = item.type, action = item.action, rest = __rest(item, ["placement", "type", "action"]);
-                if (!!profileComponent)
-                    return React.createElement(ProfileWrapper, null, profileComponent);
-                else
-                    return React.createElement(ProfileWrapper, null,
-                        React.createElement(ProfileButton, __assign({ key: index, ref: elRefs[index], onClick: function (e) {
-                                item.action ? item.action(e === null || e === void 0 ? void 0 : e.target) : onShowUserMenu();
-                            }, icon: !user && React.createElement(SystemIcons.User, null), initials: ((_b = (_a = user === null || user === void 0 ? void 0 : user.firstName) === null || _a === void 0 ? void 0 : _a.charAt(0)) !== null && _b !== void 0 ? _b : '') + ((_d = (_c = user === null || user === void 0 ? void 0 : user.lastName) === null || _c === void 0 ? void 0 : _c.charAt(0)) !== null && _d !== void 0 ? _d : '') }, rest)));
-            }
-            case 'action': {
-                var placement = item.placement, type = item.type, icon = item.icon, action = item.action, rest = __rest(item, ["placement", "type", "icon", "action"]);
-                return React.createElement(IconButton, __assign({ key: index, ref: elRefs[index], variant: 'secondary', shape: 'circular', action: function (e) { return item.action && item.action(e === null || e === void 0 ? void 0 : e.target); } }, rest), item.icon);
-            }
-            case 'switcher': {
-                var placement = item.placement, type = item.type, action = item.action, rest = __rest(item, ["placement", "type", "action"]);
-                return React.createElement(IconButton, __assign({ key: index, ref: elRefs[index], variant: 'secondary', shape: 'circular', id: "globalNavAppsButton", action: function (e) { return item.action && item.action(e === null || e === void 0 ? void 0 : e.target); } }, rest),
-                    React.createElement(SystemIcons.SwitchApp, { size: "24px" }));
-            }
-            case 'search': {
-                return React.createElement(CustomActionWrapper, { key: index },
-                    React.createElement(SearchBar, { id: "unifiedSearchInputField", placeholder: "Enter your search term", enterSearch: function () { }, setSearchTerm: setSearchTermNormalSmall, searchTerm: searchTermNormalSmall, removeSearch: function () {
-                            setSearchTermNormalSmall('');
-                        }, size: Size.Medium }));
-            }
-        }
-    };
-    return (React.createElement(Wrapper, { role: "toolbar", "aria-label": "Toolbar" }, buttons === null || buttons === void 0 ? void 0 : buttons.map(function (item, index) { return renderItem(item, index); })));
-});
-export default DesktopActions;
-var templateObject_1, templateObject_2, templateObject_3;
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _pt from "prop-types";
+var _excluded = ["placement", "type", "action"],
+  _excluded2 = ["placement", "type", "icon", "action"],
+  _excluded3 = ["placement", "type", "action"];
+var _templateObject, _templateObject2, _templateObject3;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import React from 'react';
+import styled from 'styled-components';
+import { IconButton, IconButtonStyled } from '../../Button';
+import { ProfileButton } from '../../ProfileButton';
+import { SystemIcons } from '../../icons';
+import { BREAKPOINTS } from '../../styles';
+import { SearchBar } from '../../InputFields';
+import { Size } from '../../types';
+import { jsx as _jsx } from "react/jsx-runtime";
+var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  align-items: center;\n\n  display: none;\n\n  ", " {\n    display: flex;\n  }\n\n  ", "{\n    display: 'none';\n    ", " {\n      display: block;\n    }\n  }\n"])), BREAKPOINTS.MEDIUM, IconButtonStyled, BREAKPOINTS.MEDIUM);
+var CustomActionWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\n"])));
+var ProfileWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin: 0 8px;\n"])));
+var DesktopActions = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var buttons = _ref.buttons,
+    user = _ref.user,
+    profileComponent = _ref.profileComponent,
+    onShowUserMenu = _ref.onShowUserMenu;
+  var _React$useState = React.useState([]),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    elRefs = _React$useState2[0],
+    setElRefs = _React$useState2[1];
+  var _React$useState3 = React.useState(''),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    searchTermNormalSmall = _React$useState4[0],
+    setSearchTermNormalSmall = _React$useState4[1];
+  var length = (buttons === null || buttons === void 0 ? void 0 : buttons.length) || 0;
+  React.useEffect(function () {
+    setElRefs(Array(length || 0).fill(null).map(function () {
+      return /*#__PURE__*/React.createRef();
+    }));
+  }, [length]);
+  React.useImperativeHandle(ref, function () {
+    return {
+      buttons: elRefs.map(function (r, index) {
+        var _buttons$index;
+        return {
+          ref: r,
+          type: buttons === null || buttons === void 0 ? void 0 : (_buttons$index = buttons[index]) === null || _buttons$index === void 0 ? void 0 : _buttons$index.type
+        };
+      })
+    };
+  }, [elRefs, buttons]);
+  var renderItem = function renderItem(item, index) {
+    switch (item.type) {
+      case 'profile':
+        {
+          var _user$firstName$charA, _user$firstName, _user$lastName$charAt, _user$lastName;
+          var placement = item.placement,
+            type = item.type,
+            action = item.action,
+            rest = _objectWithoutProperties(item, _excluded);
+          if (!!profileComponent) return /*#__PURE__*/_jsx(ProfileWrapper, {
+            children: profileComponent
+          });else return /*#__PURE__*/_jsx(ProfileWrapper, {
+            children: /*#__PURE__*/_jsx(ProfileButton, _objectSpread({
+              ref: elRefs[index],
+              onClick: function onClick(e) {
+                item.action ? item.action(e === null || e === void 0 ? void 0 : e.target) : onShowUserMenu();
+              },
+              icon: !user && /*#__PURE__*/_jsx(SystemIcons.User, {}),
+              initials: ((_user$firstName$charA = user === null || user === void 0 ? void 0 : (_user$firstName = user.firstName) === null || _user$firstName === void 0 ? void 0 : _user$firstName.charAt(0)) !== null && _user$firstName$charA !== void 0 ? _user$firstName$charA : '') + ((_user$lastName$charAt = user === null || user === void 0 ? void 0 : (_user$lastName = user.lastName) === null || _user$lastName === void 0 ? void 0 : _user$lastName.charAt(0)) !== null && _user$lastName$charAt !== void 0 ? _user$lastName$charAt : '')
+            }, rest), index)
+          });
+        }
+      case 'action':
+        {
+          var _placement = item.placement,
+            _type = item.type,
+            icon = item.icon,
+            _action = item.action,
+            _rest = _objectWithoutProperties(item, _excluded2);
+          return /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({
+            ref: elRefs[index],
+            variant: 'secondary',
+            shape: 'circular',
+            action: function action(e) {
+              return item.action && item.action(e === null || e === void 0 ? void 0 : e.target);
+            }
+          }, _rest), {}, {
+            children: item.icon
+          }), index);
+        }
+      case 'switcher':
+        {
+          var _placement2 = item.placement,
+            _type2 = item.type,
+            _action2 = item.action,
+            _rest2 = _objectWithoutProperties(item, _excluded3);
+          return /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({
+            ref: elRefs[index],
+            variant: 'secondary',
+            shape: 'circular',
+            id: "globalNavAppsButton",
+            action: function action(e) {
+              return item.action && item.action(e === null || e === void 0 ? void 0 : e.target);
+            }
+          }, _rest2), {}, {
+            children: /*#__PURE__*/_jsx(SystemIcons.SwitchApp, {
+              size: "24px"
+            })
+          }), index);
+        }
+      case 'search':
+        {
+          return /*#__PURE__*/_jsx(CustomActionWrapper, {
+            children: /*#__PURE__*/_jsx(SearchBar, {
+              id: "unifiedSearchInputField",
+              placeholder: "Enter your search term",
+              enterSearch: function enterSearch() {},
+              setSearchTerm: setSearchTermNormalSmall,
+              searchTerm: searchTermNormalSmall,
+              removeSearch: function removeSearch() {
+                setSearchTermNormalSmall('');
+              },
+              size: Size.Medium
+            })
+          }, index);
+        }
+    }
+  };
+  return /*#__PURE__*/_jsx(Wrapper, {
+    role: "toolbar",
+    "aria-label": "Toolbar",
+    children: buttons === null || buttons === void 0 ? void 0 : buttons.map(function (item, index) {
+      return renderItem(item, index);
+    })
+  });
+});
+DesktopActions.propTypes = {
+  buttons: _pt.array,
+  profileComponent: _pt.node,
+  onShowUserMenu: _pt.func.isRequired
+};
+export default DesktopActions;
+//# sourceMappingURL=DesktopActions.js.map

package/dist/GlobalNavigationBar/desktop/ExtendedMainMenu.d.ts

@@ -4,7 +4,7 @@ export declare const flowDown: import("styled-components").Keyframes;
 export declare const Menu: import("styled-components").StyledComponent<"ul", any, {}, never>;
 export declare const MenuSection: import("styled-components").StyledComponent<"li", any, {}, never>;
 export declare const MenuSectionList: import("styled-components").StyledComponent<"ul", any, {}, never>;
-declare type Props = {
+type Props = {
     clickMenuAction: () => void;
     navigationOptions: MenuNavigationItemTypeItem[];
 };

package/dist/GlobalNavigationBar/desktop/ExtendedMainMenu.js

@@ -1,42 +1,66 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import * as React from 'react';
-import styled, { keyframes } from 'styled-components';
-import { BREAKPOINTS, COLORS, focusStyles } from '../../styles';
-import { VerticalTabs } from '../../Tabs';
-import { Size } from '../../index';
-import { Z_INDEXES } from '../../styles';
-export var flowDown = keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  0% {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n"], ["\n  0% {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n"])));
-export var Menu = styled.ul(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: none;\n  right: -8px;\n  min-width: 300px;\n  -webkit-animation: ", " 0.2s ease-in-out;\n  animation: ", " 0.2s ease-in-out;\n  position: absolute;\n  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);\n  border-radius: 4px;\n  z-index: ", ";\n\n  top: 12px;\n  ", " {\n    top: 18px;\n  }\n  ", " {\n    top: 24px;\n  }\n\n  .open & {\n    display: block;\n  }\n\n  &:focus {\n    ", "\n  }\n"], ["\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: none;\n  right: -8px;\n  min-width: 300px;\n  -webkit-animation: ", " 0.2s ease-in-out;\n  animation: ", " 0.2s ease-in-out;\n  position: absolute;\n  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);\n  border-radius: 4px;\n  z-index: ", ";\n\n  top: 12px;\n  ", " {\n    top: 18px;\n  }\n  ", " {\n    top: 24px;\n  }\n\n  .open & {\n    display: block;\n  }\n\n  &:focus {\n    ", "\n  }\n"])), COLORS.white, flowDown, flowDown, Z_INDEXES.dropdown, BREAKPOINTS.SMALL, BREAKPOINTS.MEDIUM, focusStyles);
-export var MenuSection = styled.li(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding: 8px 0;\n  position: relative;\n\n  &:not(:first-of-type)::before {\n    content: '';\n    position: absolute;\n    background: ", ";\n    height: 1px;\n    top: 0;\n    left: 16px;\n    right: 16px;\n  }\n"], ["\n  padding: 8px 0;\n  position: relative;\n\n  &:not(:first-of-type)::before {\n    content: '';\n    position: absolute;\n    background: ", ";\n    height: 1px;\n    top: 0;\n    left: 16px;\n    right: 16px;\n  }\n"])), COLORS.neutral_100);
-export var MenuSectionList = styled.ul(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  list-style: none;\n  margin: 0;\n  padding: 0 2px;\n"], ["\n  list-style: none;\n  margin: 0;\n  padding: 0 2px;\n"])));
-var ExtendedMainMenu = function (_a) {
-    var clickMenuAction = _a.clickMenuAction, navigationOptions = _a.navigationOptions;
-    console.log(navigationOptions);
-    var _b = React.useState([]), entries = _b[0], setEntries = _b[1];
-    React.useEffect(function () {
-        function handleKeyPress(e) {
-            if (e.keyCode === 27) {
-                clickMenuAction();
-            }
-        }
-        document.addEventListener('keydown', handleKeyPress, false);
-        return function () {
-            document.removeEventListener('keydown', handleKeyPress, false);
-        };
-    }, [clickMenuAction]);
-    React.useEffect(function () {
-        var list = navigationOptions === null || navigationOptions === void 0 ? void 0 : navigationOptions.map(function (n) {
-            return { requiredLine: n.label, to: n.to, disabled: n.disabled, onClick: n.action, exact: n.exact };
-        });
-        setEntries(list);
-    }, [navigationOptions]);
-    return (React.createElement(Menu, { onClick: clickMenuAction, role: "menu", "aria-labelledby": "UserMenuButton" },
-        React.createElement(MenuSection, null,
-            React.createElement(MenuSectionList, null,
-                React.createElement(VerticalTabs, { key: "ExtendedMenu", entries: entries, size: Size.Medium })))));
-};
-export default ExtendedMainMenu;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+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 styled, { keyframes } from 'styled-components';
+import { BREAKPOINTS, COLORS, focusStyles } from '../../styles';
+import { VerticalTabs } from '../../Tabs';
+import { Size } from '../../index';
+import { Z_INDEXES } from '../../styles';
+import { jsx as _jsx } from "react/jsx-runtime";
+export var flowDown = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n"])));
+export var Menu = styled.ul(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: none;\n  right: -8px;\n  min-width: 300px;\n  -webkit-animation: ", " 0.2s ease-in-out;\n  animation: ", " 0.2s ease-in-out;\n  position: absolute;\n  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);\n  border-radius: 4px;\n  z-index: ", ";\n\n  top: 12px;\n  ", " {\n    top: 18px;\n  }\n  ", " {\n    top: 24px;\n  }\n\n  .open & {\n    display: block;\n  }\n\n  &:focus {\n    ", "\n  }\n"])), COLORS.white, flowDown, flowDown, Z_INDEXES.dropdown, BREAKPOINTS.SMALL, BREAKPOINTS.MEDIUM, focusStyles);
+export var MenuSection = styled.li(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding: 8px 0;\n  position: relative;\n\n  &:not(:first-of-type)::before {\n    content: '';\n    position: absolute;\n    background: ", ";\n    height: 1px;\n    top: 0;\n    left: 16px;\n    right: 16px;\n  }\n"])), COLORS.neutral_100);
+export var MenuSectionList = styled.ul(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  list-style: none;\n  margin: 0;\n  padding: 0 2px;\n"])));
+var ExtendedMainMenu = function ExtendedMainMenu(_ref) {
+  var clickMenuAction = _ref.clickMenuAction,
+    navigationOptions = _ref.navigationOptions;
+  console.log(navigationOptions);
+  var _React$useState = React.useState([]),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    entries = _React$useState2[0],
+    setEntries = _React$useState2[1];
+  React.useEffect(function () {
+    function handleKeyPress(e) {
+      if (e.keyCode === 27) {
+        clickMenuAction();
+      }
+    }
+    document.addEventListener('keydown', handleKeyPress, false);
+    return function () {
+      document.removeEventListener('keydown', handleKeyPress, false);
+    };
+  }, [clickMenuAction]);
+  React.useEffect(function () {
+    var list = navigationOptions === null || navigationOptions === void 0 ? void 0 : navigationOptions.map(function (n) {
+      return {
+        requiredLine: n.label,
+        to: n.to,
+        disabled: n.disabled,
+        onClick: n.action,
+        exact: n.exact
+      };
+    });
+    setEntries(list);
+  }, [navigationOptions]);
+  return /*#__PURE__*/_jsx(Menu, {
+    onClick: clickMenuAction,
+    role: "menu",
+    "aria-labelledby": "UserMenuButton",
+    children: /*#__PURE__*/_jsx(MenuSection, {
+      children: /*#__PURE__*/_jsx(MenuSectionList, {
+        children: /*#__PURE__*/_jsx(VerticalTabs, {
+          entries: entries,
+          size: Size.Medium
+        }, "ExtendedMenu")
+      })
+    })
+  });
+};
+ExtendedMainMenu.propTypes = {
+  clickMenuAction: _pt.func.isRequired,
+  navigationOptions: _pt.array.isRequired
+};
+export default ExtendedMainMenu;
+//# sourceMappingURL=ExtendedMainMenu.js.map

package/dist/GlobalNavigationBar/desktop/MainMenu.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { MenuNavigationItemTypeDesktopGroup, MenuNavigationItemTypeItem } from '../types';
-declare type Props = {
+type Props = {
     items: (MenuNavigationItemTypeItem | MenuNavigationItemTypeDesktopGroup)[];
     rightSideRef?: React.RefObject<HTMLDivElement> | null | undefined;
 };