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

package/dist/GlobalNavigationBar/desktop/SubMenu.js

@@ -1,131 +1,248 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-import * as React from 'react';
-import styled from 'styled-components';
-import { Menu, MenuSection, MenuSectionList } from './ExtendedMainMenu';
-import { Size } from '../../types';
-import { SystemIcons } from '../../icons';
-import { checkIfContainsItem } from '../utils';
-import Tabs from '../../Tabs/Tabs';
-import TabLink from '../../Tabs/TabLink';
-import { MenuItem } from '../../MenuItem';
-export var SubMenuWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", " {\n    top: ", ";\n    left: ", ";\n  }\n\n  ", "\n\n  button {\n    padding-left: 0px;\n  }\n"], ["\n  ", " {\n    top: ", ";\n    left: ", ";\n  }\n\n  ", "\n\n  button {\n    padding-left: 0px;\n  }\n"])), Menu, function (props) { return (props.topLevel ? '100%' : '0px'); }, function (props) { return (props.topLevel ? '0px' : 'calc(100% - 12px)'); }, function (props) { return (!props.visible ? 'display: none;' : ''); });
-export var SubMenu = React.forwardRef(function (_a, ref) {
-    var item = _a.item, index = _a.index, topLevel = _a.topLevel, dropdownMenusOpenedArray = _a.dropdownMenusOpenedArray, onSubMenuHidden = _a.onSubMenuHidden, onSubMenuOpened = _a.onSubMenuOpened, onItemStateChanged = _a.onItemStateChanged, focusedItemId = _a.focusedItemId, activeItemId = _a.activeItemId, nestPath = _a.nestPath, ariaLabelledBy = _a.ariaLabelledBy, onItemFocused = _a.onItemFocused;
-    var _b = React.useState({}), forceUpdate = _b[1];
-    var focusedRef = React.useRef({ index: -1 });
-    var _c = React.useState([]), allRefs = _c[0], setAllRefs = _c[1];
-    var _d = React.useState([]), subMenuRefs = _d[0], setAllSubMenuRefs = _d[1];
-    React.useEffect(function () {
-        setAllRefs(item.items.map(function (x) { return (x.type == 'desktopgroup' ? React.createRef() : React.createRef()); }));
-        setAllSubMenuRefs(item.items.map(function (x) { return (x.type == 'desktopgroup' ? React.createRef() : undefined); }));
-    }, [item]);
-    var existingRef = dropdownMenusOpenedArray.current.find(function (x) { return x == item.id; });
-    var onMouseLeave = function (event, id) {
-        dropdownMenusOpenedArray.current = __spreadArray([], dropdownMenusOpenedArray.current.filter(function (x) { return x != id; }), true);
-        //just trigger rerendering
-        onSubMenuHidden && onSubMenuHidden(id);
-        forceUpdate({});
-    };
-    var containActiveItem = false;
-    if (item.type == 'desktopgroup' && activeItemId)
-        containActiveItem = checkIfContainsItem(item, activeItemId);
-    var onMouseEnter = function (event, id) {
-        var existingRefForId = dropdownMenusOpenedArray.current.find(function (x) { return x == id; });
-        if (existingRefForId == null) {
-            dropdownMenusOpenedArray.current = __spreadArray(__spreadArray([], dropdownMenusOpenedArray.current, true), [id], false);
-            //just trigger rerendering
-            onSubMenuOpened && onSubMenuOpened(id);
-            forceUpdate({});
-        }
-    };
-    var onKeyDown = function (e) {
-        var _a;
-        if (e.key === 'ArrowUp' || e.key === 'Up') {
-            e.stopPropagation();
-            e.preventDefault();
-            if (focusedRef.current.index > 0) {
-                setNewFocusedElement(focusedRef.current.index - 1);
-            }
-        }
-        else if (e.key === 'ArrowDown' || e.key === 'Down') {
-            e.stopPropagation();
-            e.preventDefault();
-            if (focusedRef.current.index < allRefs.length - 1)
-                setNewFocusedElement(focusedRef.current.index + 1);
-        }
-        else if (e.key == 'Enter' || e.code == 'Space') {
-            e.stopPropagation();
-            if (focusedRef.current.index < 0)
-                return;
-            var focusedItem = item.items[focusedRef.current.index];
-            if (focusedItem.type == 'desktopgroup') {
-                dropdownMenusOpenedArray.current = __spreadArray(__spreadArray([], dropdownMenusOpenedArray.current, true), [focusedItem.id], false);
-                forceUpdate({});
-            }
-            else {
-                (_a = allRefs[focusedRef.current.index].current) === null || _a === void 0 ? void 0 : _a.click();
-                forceUpdate({});
-            }
-            //just trigger rerendering
-        }
-    };
-    var setNewFocusedElement = function (index) {
-        var _a, _b, _c;
-        var newFocusedElement = index >= 0 ? allRefs[index] : null;
-        var oldFocusedElement = focusedRef.current.index >= 0 ? allRefs[focusedRef.current.index] : null;
-        focusedRef.current.index = index;
-        if (oldFocusedElement)
-            (_a = oldFocusedElement === null || oldFocusedElement === void 0 ? void 0 : oldFocusedElement.current) === null || _a === void 0 ? void 0 : _a.classList.remove('dropdown-hover');
-        if (newFocusedElement && newFocusedElement !== oldFocusedElement) {
-            (_b = newFocusedElement.current) === null || _b === void 0 ? void 0 : _b.classList.add('dropdown-hover');
-            console.log(item.items[index].id);
-            onItemFocused && onItemFocused((_c = item.items[index].id) !== null && _c !== void 0 ? _c : '');
-        }
-        else if (onItemFocused)
-            onItemFocused('');
-    };
-    var onFocus = function (event) {
-        event.stopPropagation();
-        dropdownMenusOpenedArray.current = __spreadArray([], (nestPath !== null && nestPath !== void 0 ? nestPath : []), true);
-        setNewFocusedElement(0);
-        forceUpdate({});
-    };
-    var onBlur = function (event) {
-        event.stopPropagation();
-        setNewFocusedElement(-1);
-    };
-    return (React.createElement(SubMenuWrapper, { id: item.id, className: existingRef ? 'open' : '', topLevel: topLevel, visible: Boolean(existingRef) },
-        React.createElement(Menu, { role: "group", ref: ref, "aria-labelledby": ariaLabelledBy, onBlur: onBlur, onFocus: onFocus, onKeyDown: function (event) { return onKeyDown(event); }, tabIndex: 0 },
-            React.createElement(MenuSection, null,
-                React.createElement(MenuSectionList, null,
-                    React.createElement(Tabs, { size: Size.Medium }, item.items.map(function (entry, index) {
-                        var _a, _b, _c, _d;
-                        var isGroup = entry.type == 'desktopgroup';
-                        var key = isGroup ? entry.id : entry.type == 'item' ? entry.to : '';
-                        var SubItemOpened = Boolean(dropdownMenusOpenedArray.current.find(function (x) { return x == entry.id; }));
-                        if (isGroup) {
-                            return (React.createElement("div", { style: { position: 'relative' }, onMouseEnter: function (event) { return onMouseEnter(event, entry.id); }, onMouseLeave: function (event) { return onMouseLeave(event, entry.id); } },
-                                React.createElement(MenuItem, { id: entry.id + '_parentOption', "aria-expanded": Boolean(SubItemOpened), "aria-activedescendant": (_b = (_a = entry.items.find(function (x) { return x.id == focusedItemId; })) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : '', tabIndex: -1, ref: allRefs[index], "aria-controls": entry.id, role: "group", 
-                                    //id={entry.id} removing this can break something
-                                    item: {
-                                        value: (_c = entry.label) !== null && _c !== void 0 ? _c : '',
-                                    }, iconRight: React.createElement(SystemIcons.ArrowDropRight, { size: "24px" }), active: SubItemOpened || (Boolean(activeItemId) && activeItemId != '' && checkIfContainsItem(entry, activeItemId)), onClickHandler: function () { } }),
-                                React.createElement(SubMenu, { ariaLabelledBy: entry.id + '_parentOption', onItemFocused: onItemFocused, focusedItemId: focusedItemId, ref: subMenuRefs[index], nestPath: __spreadArray(__spreadArray([], (nestPath !== null && nestPath !== void 0 ? nestPath : []), true), [entry.id], false), onItemStateChanged: onItemStateChanged, activeItemId: activeItemId, dropdownMenusOpenedArray: dropdownMenusOpenedArray, item: entry, index: index + 1, topLevel: false })));
-                        }
-                        return (React.createElement(React.Fragment, null,
-                            React.createElement(TabLink, { id: entry.id, tabIndex: -1, key: key, to: isGroup ? '' : key, ref: allRefs[index], onActiveStateChanged: function (state) { return onItemStateChanged && entry.type == 'item' && onItemStateChanged(entry.to, state); }, forceDeactivate: isGroup, requiredLine: (_d = entry.label) !== null && _d !== void 0 ? _d : '', optionalLine: '', endLineIcon: isGroup ? React.createElement(SystemIcons.ArrowDropRight, { size: "24px" }) : null, OptionalLineIcon: '', disabled: entry.disabled, showNotificationDot: false, size: Size.Medium, variant: "positive" })));
-                    })))))));
-});
-var templateObject_1;
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _pt from "prop-types";
+var _templateObject;
+import * as React from 'react';
+import styled from 'styled-components';
+import { Menu, MenuSection, MenuSectionList } from './ExtendedMainMenu';
+import { Size } from '../../types';
+import { SystemIcons } from '../../icons';
+import { checkIfContainsItem } from '../utils';
+import Tabs from '../../Tabs/Tabs';
+import TabLink from '../../Tabs/TabLink';
+import { MenuItem } from '../../MenuItem';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+export var SubMenuWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", " {\n    top: ", ";\n    left: ", ";\n  }\n\n  ", "\n\n  button {\n    padding-left: 0px;\n  }\n"])), Menu, function (props) {
+  return props.topLevel ? '100%' : '0px';
+}, function (props) {
+  return props.topLevel ? '0px' : 'calc(100% - 12px)';
+}, function (props) {
+  return !props.visible ? 'display: none;' : '';
+});
+export var SubMenu = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var item = _ref.item,
+    index = _ref.index,
+    topLevel = _ref.topLevel,
+    dropdownMenusOpenedArray = _ref.dropdownMenusOpenedArray,
+    onSubMenuHidden = _ref.onSubMenuHidden,
+    onSubMenuOpened = _ref.onSubMenuOpened,
+    onItemStateChanged = _ref.onItemStateChanged,
+    focusedItemId = _ref.focusedItemId,
+    activeItemId = _ref.activeItemId,
+    nestPath = _ref.nestPath,
+    ariaLabelledBy = _ref.ariaLabelledBy,
+    onItemFocused = _ref.onItemFocused;
+  var _React$useState = React.useState({}),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    forceUpdate = _React$useState2[1];
+  var focusedRef = React.useRef({
+    index: -1
+  });
+  var _React$useState3 = React.useState([]),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    allRefs = _React$useState4[0],
+    setAllRefs = _React$useState4[1];
+  var _React$useState5 = React.useState([]),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    subMenuRefs = _React$useState6[0],
+    setAllSubMenuRefs = _React$useState6[1];
+  React.useEffect(function () {
+    setAllRefs(item.items.map(function (x) {
+      return x.type == 'desktopgroup' ? /*#__PURE__*/React.createRef() : /*#__PURE__*/React.createRef();
+    }));
+    setAllSubMenuRefs(item.items.map(function (x) {
+      return x.type == 'desktopgroup' ? /*#__PURE__*/React.createRef() : undefined;
+    }));
+  }, [item]);
+  var existingRef = dropdownMenusOpenedArray.current.find(function (x) {
+    return x == item.id;
+  });
+  var _onMouseLeave = function onMouseLeave(event, id) {
+    dropdownMenusOpenedArray.current = _toConsumableArray(dropdownMenusOpenedArray.current.filter(function (x) {
+      return x != id;
+    }));
+    //just trigger rerendering
+    onSubMenuHidden && onSubMenuHidden(id);
+    forceUpdate({});
+  };
+  var containActiveItem = false;
+  if (item.type == 'desktopgroup' && activeItemId) containActiveItem = checkIfContainsItem(item, activeItemId);
+  var _onMouseEnter = function onMouseEnter(event, id) {
+    var existingRefForId = dropdownMenusOpenedArray.current.find(function (x) {
+      return x == id;
+    });
+    if (existingRefForId == null) {
+      dropdownMenusOpenedArray.current = [].concat(_toConsumableArray(dropdownMenusOpenedArray.current), [id]);
+      //just trigger rerendering
+      onSubMenuOpened && onSubMenuOpened(id);
+      forceUpdate({});
+    }
+  };
+  var _onKeyDown = function onKeyDown(e) {
+    if (e.key === 'ArrowUp' || e.key === 'Up') {
+      e.stopPropagation();
+      e.preventDefault();
+      if (focusedRef.current.index > 0) {
+        setNewFocusedElement(focusedRef.current.index - 1);
+      }
+    } else if (e.key === 'ArrowDown' || e.key === 'Down') {
+      e.stopPropagation();
+      e.preventDefault();
+      if (focusedRef.current.index < allRefs.length - 1) setNewFocusedElement(focusedRef.current.index + 1);
+    } else if (e.key == 'Enter' || e.code == 'Space') {
+      e.stopPropagation();
+      if (focusedRef.current.index < 0) return;
+      var focusedItem = item.items[focusedRef.current.index];
+      if (focusedItem.type == 'desktopgroup') {
+        dropdownMenusOpenedArray.current = [].concat(_toConsumableArray(dropdownMenusOpenedArray.current), [focusedItem.id]);
+        forceUpdate({});
+      } else {
+        var _allRefs$focusedRef$c;
+        (_allRefs$focusedRef$c = allRefs[focusedRef.current.index].current) === null || _allRefs$focusedRef$c === void 0 ? void 0 : _allRefs$focusedRef$c.click();
+        forceUpdate({});
+      }
+
+      //just trigger rerendering
+    }
+  };
+  var setNewFocusedElement = function setNewFocusedElement(index) {
+    var _oldFocusedElement$cu;
+    var newFocusedElement = index >= 0 ? allRefs[index] : null;
+    var oldFocusedElement = focusedRef.current.index >= 0 ? allRefs[focusedRef.current.index] : null;
+    focusedRef.current.index = index;
+    if (oldFocusedElement) oldFocusedElement === null || oldFocusedElement === void 0 ? void 0 : (_oldFocusedElement$cu = oldFocusedElement.current) === null || _oldFocusedElement$cu === void 0 ? void 0 : _oldFocusedElement$cu.classList.remove('dropdown-hover');
+    if (newFocusedElement && newFocusedElement !== oldFocusedElement) {
+      var _newFocusedElement$cu, _item$items$index$id;
+      (_newFocusedElement$cu = newFocusedElement.current) === null || _newFocusedElement$cu === void 0 ? void 0 : _newFocusedElement$cu.classList.add('dropdown-hover');
+      console.log(item.items[index].id);
+      onItemFocused && onItemFocused((_item$items$index$id = item.items[index].id) !== null && _item$items$index$id !== void 0 ? _item$items$index$id : '');
+    } else if (onItemFocused) onItemFocused('');
+  };
+  var onFocus = function onFocus(event) {
+    event.stopPropagation();
+    dropdownMenusOpenedArray.current = _toConsumableArray(nestPath !== null && nestPath !== void 0 ? nestPath : []);
+    setNewFocusedElement(0);
+    forceUpdate({});
+  };
+  var onBlur = function onBlur(event) {
+    event.stopPropagation();
+    setNewFocusedElement(-1);
+  };
+  return /*#__PURE__*/_jsx(SubMenuWrapper, {
+    id: item.id,
+    className: existingRef ? 'open' : '',
+    topLevel: topLevel,
+    visible: Boolean(existingRef),
+    children: /*#__PURE__*/_jsx(Menu, {
+      role: "group",
+      ref: ref,
+      "aria-labelledby": ariaLabelledBy,
+      onBlur: onBlur,
+      onFocus: onFocus,
+      onKeyDown: function onKeyDown(event) {
+        return _onKeyDown(event);
+      },
+      tabIndex: 0,
+      children: /*#__PURE__*/_jsx(MenuSection, {
+        children: /*#__PURE__*/_jsx(MenuSectionList, {
+          children: /*#__PURE__*/_jsx(Tabs, {
+            size: Size.Medium,
+            children: item.items.map(function (entry, index) {
+              var _entry$label2;
+              var isGroup = entry.type == 'desktopgroup';
+              var key = isGroup ? entry.id : entry.type == 'item' ? entry.to : '';
+              var SubItemOpened = Boolean(dropdownMenusOpenedArray.current.find(function (x) {
+                return x == entry.id;
+              }));
+              if (isGroup) {
+                var _entry$items$find$id, _entry$items$find, _entry$label;
+                return /*#__PURE__*/_jsxs("div", {
+                  style: {
+                    position: 'relative'
+                  },
+                  onMouseEnter: function onMouseEnter(event) {
+                    return _onMouseEnter(event, entry.id);
+                  },
+                  onMouseLeave: function onMouseLeave(event) {
+                    return _onMouseLeave(event, entry.id);
+                  },
+                  children: [/*#__PURE__*/_jsx(MenuItem, {
+                    id: entry.id + '_parentOption',
+                    "aria-expanded": Boolean(SubItemOpened),
+                    "aria-activedescendant": (_entry$items$find$id = (_entry$items$find = entry.items.find(function (x) {
+                      return x.id == focusedItemId;
+                    })) === null || _entry$items$find === void 0 ? void 0 : _entry$items$find.id) !== null && _entry$items$find$id !== void 0 ? _entry$items$find$id : '',
+                    tabIndex: -1,
+                    ref: allRefs[index],
+                    "aria-controls": entry.id,
+                    role: "group"
+                    //id={entry.id} removing this can break something
+                    ,
+                    item: {
+                      value: (_entry$label = entry.label) !== null && _entry$label !== void 0 ? _entry$label : ''
+                    },
+                    iconRight: /*#__PURE__*/_jsx(SystemIcons.ArrowDropRight, {
+                      size: "24px"
+                    }),
+                    active: SubItemOpened || Boolean(activeItemId) && activeItemId != '' && checkIfContainsItem(entry, activeItemId),
+                    onClickHandler: function onClickHandler() {}
+                  }), /*#__PURE__*/_jsx(SubMenu, {
+                    ariaLabelledBy: entry.id + '_parentOption',
+                    onItemFocused: onItemFocused,
+                    focusedItemId: focusedItemId,
+                    ref: subMenuRefs[index],
+                    nestPath: [].concat(_toConsumableArray(nestPath !== null && nestPath !== void 0 ? nestPath : []), [entry.id]),
+                    onItemStateChanged: onItemStateChanged,
+                    activeItemId: activeItemId,
+                    dropdownMenusOpenedArray: dropdownMenusOpenedArray,
+                    item: entry,
+                    index: index + 1,
+                    topLevel: false
+                  })]
+                });
+              }
+              return /*#__PURE__*/_jsx(_Fragment, {
+                children: /*#__PURE__*/_jsx(TabLink, {
+                  id: entry.id,
+                  tabIndex: -1,
+                  to: isGroup ? '' : key,
+                  ref: allRefs[index],
+                  onActiveStateChanged: function onActiveStateChanged(state) {
+                    return onItemStateChanged && entry.type == 'item' && onItemStateChanged(entry.to, state);
+                  },
+                  forceDeactivate: isGroup,
+                  requiredLine: (_entry$label2 = entry.label) !== null && _entry$label2 !== void 0 ? _entry$label2 : '',
+                  optionalLine: '',
+                  endLineIcon: isGroup ? /*#__PURE__*/_jsx(SystemIcons.ArrowDropRight, {
+                    size: "24px"
+                  }) : null,
+                  OptionalLineIcon: '',
+                  disabled: entry.disabled,
+                  showNotificationDot: false,
+                  size: Size.Medium,
+                  variant: "positive"
+                }, key)
+              });
+            })
+          })
+        })
+      })
+    })
+  });
+});
+SubMenu.propTypes = {
+  index: _pt.number.isRequired,
+  topLevel: _pt.bool.isRequired,
+  onSubMenuOpened: _pt.func,
+  onSubMenuHidden: _pt.func,
+  onItemStateChanged: _pt.func,
+  onItemFocused: _pt.func,
+  focusedItemId: _pt.string,
+  activeItemId: _pt.string,
+  nestPath: _pt.arrayOf(_pt.string),
+  ariaLabelledBy: _pt.string
+};
+//# sourceMappingURL=SubMenu.js.map