@nulogy/components 8.1.2 → 8.1.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/main.js CHANGED
@@ -42421,41 +42421,6 @@
42421
42421
  var SHOW_DURATION = 2000; // in ms
42422
42422
 
42423
42423
  var ANIMATE_OUT_DURATION = 1000;
42424
- var TOAST_Y_MAX = "0px";
42425
- var TOAST_Y_MIN = "-32px";
42426
- var ACTIVE_Z_INDEX = 2;
42427
- var INACTIVE_Z_INDEX = ACTIVE_Z_INDEX - 1;
42428
- var SLIDE_IN_STYLES = {
42429
- transform: "translateY(" + TOAST_Y_MIN + ")",
42430
- transition: "transform 0.15s ease-out",
42431
- zIndex: ACTIVE_Z_INDEX
42432
- };
42433
- var SLIDE_OUT_STYLES = {
42434
- transform: "translateY(" + TOAST_Y_MAX + ")",
42435
- transition: "transform 0.9s ease-in",
42436
- zIndex: INACTIVE_Z_INDEX,
42437
- pointerEvents: "none"
42438
- };
42439
- var FADE_IN_STYLES = {
42440
- opacity: 1,
42441
- transition: "opacity 0.25s linear"
42442
- };
42443
- var FADE_OUT_STYLES = {
42444
- transition: "opacity 1s linear"
42445
- };
42446
- var AnimatedAlert = styled__default['default'](Alert).withConfig({
42447
- displayName: "Toast__AnimatedAlert",
42448
- componentId: "sc-1cheg2k-0"
42449
- })(function (_ref) {
42450
- var visible = _ref.visible,
42451
- theme = _ref.theme;
42452
- return Object.assign({
42453
- boxShadow: theme.shadows.medium,
42454
- minWidth: "200px",
42455
- maxWidth: "600px",
42456
- opacity: 0
42457
- }, visible ? FADE_IN_STYLES : FADE_OUT_STYLES);
42458
- });
42459
42424
  var Toast = function Toast(_a) {
42460
42425
  var triggered = _a.triggered,
42461
42426
  onHide = _a.onHide,
@@ -42532,8 +42497,9 @@
42532
42497
  hideToast(0);
42533
42498
  };
42534
42499
 
42535
- return /*#__PURE__*/React__default['default'].createElement(Box, Object.assign({
42536
- visible: visible,
42500
+ return /*#__PURE__*/React__default['default'].createElement(AnimatePresence, {
42501
+ initial: false
42502
+ }, visible && /*#__PURE__*/React__default['default'].createElement(AnimatedBox, {
42537
42503
  onMouseEnter: onMouseIn,
42538
42504
  onFocus: onMouseIn,
42539
42505
  onMouseLeave: onMouseOut,
@@ -42545,15 +42511,37 @@
42545
42511
  marginLeft: "auto",
42546
42512
  marginRight: "auto",
42547
42513
  width: "fit-content",
42548
- transform: "translateY(" + TOAST_Y_MIN + ")"
42549
- }, visible ? SLIDE_IN_STYLES : SLIDE_OUT_STYLES, {
42550
- zIndex: zIndex
42551
- }), /*#__PURE__*/React__default['default'].createElement(AnimatedAlert, Object.assign({
42552
- visible: visible,
42514
+ zIndex: zIndex,
42515
+ boxShadow: "medium",
42516
+ layout: true,
42517
+ initial: {
42518
+ opacity: 0,
42519
+ y: 50
42520
+ },
42521
+ animate: {
42522
+ opacity: 1,
42523
+ y: -30,
42524
+ transition: {
42525
+ type: "spring",
42526
+ bounce: 0.4,
42527
+ duration: 0.6
42528
+ }
42529
+ },
42530
+ exit: {
42531
+ y: 50,
42532
+ opacity: 0,
42533
+ transition: {
42534
+ ease: "easeOut",
42535
+ duration: 0.15
42536
+ }
42537
+ }
42538
+ }, /*#__PURE__*/React__default['default'].createElement(Alert, Object.assign({
42539
+ minWidth: "200px",
42540
+ maxWidth: "600px",
42553
42541
  isCloseable: isCloseable,
42554
42542
  onClose: handleCloseButtonClick,
42555
42543
  controlled: true
42556
- }, props), children));
42544
+ }, props), children)));
42557
42545
  };
42558
42546
  Toast.defaultProps = {
42559
42547
  triggered: false,
@@ -42728,7 +42716,7 @@
42728
42716
  toggleMenu: PropTypes__default['default'].func
42729
42717
  }).isRequired,
42730
42718
  showArrow: PropTypes__default['default'].bool,
42731
- placement: PropTypes__default['default'].oneOf(["bottom-start", "right-start"]),
42719
+ placement: PropTypes__default['default'].oneOf(["bottom-start", "right-start", "left-start"]),
42732
42720
  modifiers: PropTypes__default['default'].shape({}),
42733
42721
  triggerTogglesMenuState: PropTypes__default['default'].bool,
42734
42722
  dropdownMenuContainerEventHandlers: PropTypes__default['default'].func
@@ -42748,7 +42736,7 @@
42748
42736
  hideDelay: "100"
42749
42737
  };
42750
42738
 
42751
- var renderSubMenuTrigger = function renderSubMenuTrigger(subMenuItem, onItemClick, SubMenuTrigger, layer) {
42739
+ var renderSubMenuTrigger = function renderSubMenuTrigger(subMenuItem, onItemClick, SubMenuTrigger, layer, menuType) {
42752
42740
  var _a;
42753
42741
 
42754
42742
  return /*#__PURE__*/React__default['default'].createElement(NoWrapLi, {
@@ -42758,7 +42746,8 @@
42758
42746
  name: subMenuItem.name,
42759
42747
  menuData: subMenuItem.items,
42760
42748
  trigger: subMenuItem.trigger,
42761
- layer: layer
42749
+ layer: layer,
42750
+ menuType: menuType
42762
42751
  }));
42763
42752
  };
42764
42753
 
@@ -42768,7 +42757,6 @@
42768
42757
  return /*#__PURE__*/React__default['default'].createElement(NoWrapLi, {
42769
42758
  key: (_a = subMenuItem.key) !== null && _a !== void 0 ? _a : subMenuItem.name
42770
42759
  }, /*#__PURE__*/React__default['default'].createElement(DropdownLink, {
42771
- py: "half",
42772
42760
  onClick: onItemClick,
42773
42761
  href: subMenuItem.href,
42774
42762
  to: subMenuItem.to,
@@ -42808,9 +42796,9 @@
42808
42796
  }
42809
42797
  };
42810
42798
 
42811
- var renderSubMenuItems = function renderSubMenuItems(subMenuItems, onItemClick, SubMenuTrigger, layer) {
42799
+ var renderSubMenuItems = function renderSubMenuItems(subMenuItems, onItemClick, SubMenuTrigger, layer, menuType) {
42812
42800
  return subMenuItems.map(function (subMenuItem) {
42813
- return getRenderFunction$2(subMenuItem)(subMenuItem, onItemClick, SubMenuTrigger, layer);
42801
+ return getRenderFunction$2(subMenuItem)(subMenuItem, onItemClick, SubMenuTrigger, layer, menuType);
42814
42802
  });
42815
42803
  };
42816
42804
 
@@ -42861,15 +42849,16 @@
42861
42849
  onItemClick = _a.onItemClick,
42862
42850
  _trigger = _a.trigger,
42863
42851
  layer = _a.layer,
42864
- props = __rest(_a, ["menuData", "name", "onItemClick", "trigger", "layer"]);
42852
+ menuType = _a.menuType,
42853
+ props = __rest(_a, ["menuData", "name", "onItemClick", "trigger", "layer", "menuType"]);
42865
42854
 
42866
42855
  return (
42867
42856
  /*#__PURE__*/
42868
42857
  // @ts-ignore
42869
42858
  React__default['default'].createElement(NavBarDropdownMenu, Object.assign({
42870
- placement: "right-start",
42859
+ placement: getPlacement(menuType),
42871
42860
  modifiers: null,
42872
- showArrow: false,
42861
+ showArrow: true,
42873
42862
  triggerTogglesMenuState: false
42874
42863
  }, props, {
42875
42864
  dropdownMenuContainerEventHandlers: function dropdownMenuContainerEventHandlers(_ref) {
@@ -42910,10 +42899,20 @@
42910
42899
  margin: "0",
42911
42900
  padding: "0"
42912
42901
  }
42913
- }, renderSubMenuItems(menuData, onItemClick, SubMenuTrigger, layer + 1)))
42902
+ }, renderSubMenuItems(menuData, onItemClick, SubMenuTrigger, layer + 1, menuType)))
42914
42903
  );
42915
42904
  };
42916
42905
 
42906
+ function getPlacement(menuType) {
42907
+ switch (menuType) {
42908
+ case "primary":
42909
+ return "right-start";
42910
+
42911
+ case "secondary":
42912
+ return "left-start";
42913
+ }
42914
+ }
42915
+
42917
42916
  SubMenuTrigger.displayName = "SubMenuTrigger";
42918
42917
 
42919
42918
  var StyledButton = styled__default['default'].button.withConfig({
@@ -42991,7 +42990,8 @@
42991
42990
  ariaLabel = _a["aria-label"],
42992
42991
  _trigger = _a.trigger,
42993
42992
  layer = _a.layer,
42994
- props = __rest(_a, ["menuData", "name", "color", "hoverColor", "hoverBackground", "aria-label", "trigger", "layer"]);
42993
+ menuType = _a.menuType,
42994
+ props = __rest(_a, ["menuData", "name", "color", "hoverColor", "hoverBackground", "aria-label", "trigger", "layer", "menuType"]);
42995
42995
 
42996
42996
  var dropdownMinWidth = "auto";
42997
42997
 
@@ -43050,7 +43050,7 @@
43050
43050
  }, renderSubMenuItems(menuData, function (e) {
43051
43051
  closeMenu(e);
43052
43052
  e.stopPropagation();
43053
- }, SubMenuTrigger, layer + 1));
43053
+ }, SubMenuTrigger, layer + 1, menuType));
43054
43054
  })
43055
43055
  );
43056
43056
  };
@@ -43113,12 +43113,13 @@
43113
43113
  alignItems: "center"
43114
43114
  });
43115
43115
 
43116
- var renderMenuTrigger = function renderMenuTrigger(menuItem, themeColorObject, layer) {
43116
+ var renderMenuTrigger = function renderMenuTrigger(menuItem, themeColorObject, layer, menuType) {
43117
43117
  var _a;
43118
43118
 
43119
43119
  return /*#__PURE__*/React__default['default'].createElement("div", {
43120
43120
  key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name
43121
43121
  }, /*#__PURE__*/React__default['default'].createElement(MenuTrigger, Object.assign({
43122
+ menuType: menuType,
43122
43123
  name: menuItem.name,
43123
43124
  "aria-label": menuItem.ariaLabel,
43124
43125
  menuData: menuItem.items,
@@ -43170,19 +43171,20 @@
43170
43171
  }
43171
43172
  };
43172
43173
 
43173
- var renderMenuItem = function renderMenuItem(menuItem, themeColorObject, layer) {
43174
- return getRenderFunction$1(menuItem)(menuItem, themeColorObject, layer);
43174
+ var renderMenuItem = function renderMenuItem(menuItem, themeColorObject, layer, menuType) {
43175
+ return getRenderFunction$1(menuItem)(menuItem, themeColorObject, layer, menuType);
43175
43176
  };
43176
43177
 
43177
43178
  var BaseDesktopMenu = /*#__PURE__*/React__default['default'].forwardRef(function (_a, ref) {
43178
43179
  var menuData = _a.menuData,
43180
+ menuType = _a.menuType,
43179
43181
  themeColorObject = _a.themeColorObject,
43180
- props = __rest(_a, ["menuData", "themeColorObject"]);
43182
+ props = __rest(_a, ["menuData", "menuType", "themeColorObject"]);
43181
43183
 
43182
43184
  return /*#__PURE__*/React__default['default'].createElement(Nav$1, Object.assign({}, props, {
43183
43185
  ref: ref
43184
43186
  }), menuData.map(function (menuItem) {
43185
- return renderMenuItem(menuItem, themeColorObject, 0);
43187
+ return renderMenuItem(menuItem, themeColorObject, 0, menuType);
43186
43188
  }));
43187
43189
  });
43188
43190
  var DesktopMenu = styled__default['default'](BaseDesktopMenu).withConfig({
@@ -43749,6 +43751,7 @@
43749
43751
  }, menuData.primaryMenu && /*#__PURE__*/React__default['default'].createElement(DesktopMenu, {
43750
43752
  themeColorObject: themeColorObject,
43751
43753
  "aria-label": t("primary navigation"),
43754
+ menuType: "primary",
43752
43755
  menuData: menuData.primaryMenu
43753
43756
  }), /*#__PURE__*/React__default['default'].createElement(Flex, {
43754
43757
  justifySelf: "flex-end",
@@ -43756,6 +43759,7 @@
43756
43759
  }, menuData.secondaryMenu && /*#__PURE__*/React__default['default'].createElement(DesktopMenu, {
43757
43760
  themeColorObject: themeColorObject,
43758
43761
  "aria-label": t("secondary navigation"),
43762
+ menuType: "secondary",
43759
43763
  menuData: menuData.secondaryMenu
43760
43764
  }), showNulogyLogo && /*#__PURE__*/React__default['default'].createElement(Box, {
43761
43765
  pl: "x3"
@@ -42395,41 +42395,6 @@ TruncatedText.defaultProps = {
42395
42395
  var SHOW_DURATION = 2000; // in ms
42396
42396
 
42397
42397
  var ANIMATE_OUT_DURATION = 1000;
42398
- var TOAST_Y_MAX = "0px";
42399
- var TOAST_Y_MIN = "-32px";
42400
- var ACTIVE_Z_INDEX = 2;
42401
- var INACTIVE_Z_INDEX = ACTIVE_Z_INDEX - 1;
42402
- var SLIDE_IN_STYLES = {
42403
- transform: "translateY(" + TOAST_Y_MIN + ")",
42404
- transition: "transform 0.15s ease-out",
42405
- zIndex: ACTIVE_Z_INDEX
42406
- };
42407
- var SLIDE_OUT_STYLES = {
42408
- transform: "translateY(" + TOAST_Y_MAX + ")",
42409
- transition: "transform 0.9s ease-in",
42410
- zIndex: INACTIVE_Z_INDEX,
42411
- pointerEvents: "none"
42412
- };
42413
- var FADE_IN_STYLES = {
42414
- opacity: 1,
42415
- transition: "opacity 0.25s linear"
42416
- };
42417
- var FADE_OUT_STYLES = {
42418
- transition: "opacity 1s linear"
42419
- };
42420
- var AnimatedAlert = styled(Alert).withConfig({
42421
- displayName: "Toast__AnimatedAlert",
42422
- componentId: "sc-1cheg2k-0"
42423
- })(function (_ref) {
42424
- var visible = _ref.visible,
42425
- theme = _ref.theme;
42426
- return Object.assign({
42427
- boxShadow: theme.shadows.medium,
42428
- minWidth: "200px",
42429
- maxWidth: "600px",
42430
- opacity: 0
42431
- }, visible ? FADE_IN_STYLES : FADE_OUT_STYLES);
42432
- });
42433
42398
  var Toast = function Toast(_a) {
42434
42399
  var triggered = _a.triggered,
42435
42400
  onHide = _a.onHide,
@@ -42506,8 +42471,9 @@ var Toast = function Toast(_a) {
42506
42471
  hideToast(0);
42507
42472
  };
42508
42473
 
42509
- return /*#__PURE__*/React__default.createElement(Box, Object.assign({
42510
- visible: visible,
42474
+ return /*#__PURE__*/React__default.createElement(AnimatePresence, {
42475
+ initial: false
42476
+ }, visible && /*#__PURE__*/React__default.createElement(AnimatedBox, {
42511
42477
  onMouseEnter: onMouseIn,
42512
42478
  onFocus: onMouseIn,
42513
42479
  onMouseLeave: onMouseOut,
@@ -42519,15 +42485,37 @@ var Toast = function Toast(_a) {
42519
42485
  marginLeft: "auto",
42520
42486
  marginRight: "auto",
42521
42487
  width: "fit-content",
42522
- transform: "translateY(" + TOAST_Y_MIN + ")"
42523
- }, visible ? SLIDE_IN_STYLES : SLIDE_OUT_STYLES, {
42524
- zIndex: zIndex
42525
- }), /*#__PURE__*/React__default.createElement(AnimatedAlert, Object.assign({
42526
- visible: visible,
42488
+ zIndex: zIndex,
42489
+ boxShadow: "medium",
42490
+ layout: true,
42491
+ initial: {
42492
+ opacity: 0,
42493
+ y: 50
42494
+ },
42495
+ animate: {
42496
+ opacity: 1,
42497
+ y: -30,
42498
+ transition: {
42499
+ type: "spring",
42500
+ bounce: 0.4,
42501
+ duration: 0.6
42502
+ }
42503
+ },
42504
+ exit: {
42505
+ y: 50,
42506
+ opacity: 0,
42507
+ transition: {
42508
+ ease: "easeOut",
42509
+ duration: 0.15
42510
+ }
42511
+ }
42512
+ }, /*#__PURE__*/React__default.createElement(Alert, Object.assign({
42513
+ minWidth: "200px",
42514
+ maxWidth: "600px",
42527
42515
  isCloseable: isCloseable,
42528
42516
  onClose: handleCloseButtonClick,
42529
42517
  controlled: true
42530
- }, props), children));
42518
+ }, props), children)));
42531
42519
  };
42532
42520
  Toast.defaultProps = {
42533
42521
  triggered: false,
@@ -42702,7 +42690,7 @@ StatelessNavBarDropdownMenu.propTypes = {
42702
42690
  toggleMenu: PropTypes.func
42703
42691
  }).isRequired,
42704
42692
  showArrow: PropTypes.bool,
42705
- placement: PropTypes.oneOf(["bottom-start", "right-start"]),
42693
+ placement: PropTypes.oneOf(["bottom-start", "right-start", "left-start"]),
42706
42694
  modifiers: PropTypes.shape({}),
42707
42695
  triggerTogglesMenuState: PropTypes.bool,
42708
42696
  dropdownMenuContainerEventHandlers: PropTypes.func
@@ -42722,7 +42710,7 @@ NavBarDropdownMenu.defaultProps = {
42722
42710
  hideDelay: "100"
42723
42711
  };
42724
42712
 
42725
- var renderSubMenuTrigger = function renderSubMenuTrigger(subMenuItem, onItemClick, SubMenuTrigger, layer) {
42713
+ var renderSubMenuTrigger = function renderSubMenuTrigger(subMenuItem, onItemClick, SubMenuTrigger, layer, menuType) {
42726
42714
  var _a;
42727
42715
 
42728
42716
  return /*#__PURE__*/React__default.createElement(NoWrapLi, {
@@ -42732,7 +42720,8 @@ var renderSubMenuTrigger = function renderSubMenuTrigger(subMenuItem, onItemClic
42732
42720
  name: subMenuItem.name,
42733
42721
  menuData: subMenuItem.items,
42734
42722
  trigger: subMenuItem.trigger,
42735
- layer: layer
42723
+ layer: layer,
42724
+ menuType: menuType
42736
42725
  }));
42737
42726
  };
42738
42727
 
@@ -42742,7 +42731,6 @@ var renderSubMenuLink = function renderSubMenuLink(subMenuItem, onItemClick) {
42742
42731
  return /*#__PURE__*/React__default.createElement(NoWrapLi, {
42743
42732
  key: (_a = subMenuItem.key) !== null && _a !== void 0 ? _a : subMenuItem.name
42744
42733
  }, /*#__PURE__*/React__default.createElement(DropdownLink, {
42745
- py: "half",
42746
42734
  onClick: onItemClick,
42747
42735
  href: subMenuItem.href,
42748
42736
  to: subMenuItem.to,
@@ -42782,9 +42770,9 @@ var getRenderFunction$2 = function getRenderFunction(subMenuItem) {
42782
42770
  }
42783
42771
  };
42784
42772
 
42785
- var renderSubMenuItems = function renderSubMenuItems(subMenuItems, onItemClick, SubMenuTrigger, layer) {
42773
+ var renderSubMenuItems = function renderSubMenuItems(subMenuItems, onItemClick, SubMenuTrigger, layer, menuType) {
42786
42774
  return subMenuItems.map(function (subMenuItem) {
42787
- return getRenderFunction$2(subMenuItem)(subMenuItem, onItemClick, SubMenuTrigger, layer);
42775
+ return getRenderFunction$2(subMenuItem)(subMenuItem, onItemClick, SubMenuTrigger, layer, menuType);
42788
42776
  });
42789
42777
  };
42790
42778
 
@@ -42835,15 +42823,16 @@ var SubMenuTrigger = function SubMenuTrigger(_a) {
42835
42823
  onItemClick = _a.onItemClick,
42836
42824
  _trigger = _a.trigger,
42837
42825
  layer = _a.layer,
42838
- props = __rest(_a, ["menuData", "name", "onItemClick", "trigger", "layer"]);
42826
+ menuType = _a.menuType,
42827
+ props = __rest(_a, ["menuData", "name", "onItemClick", "trigger", "layer", "menuType"]);
42839
42828
 
42840
42829
  return (
42841
42830
  /*#__PURE__*/
42842
42831
  // @ts-ignore
42843
42832
  React__default.createElement(NavBarDropdownMenu, Object.assign({
42844
- placement: "right-start",
42833
+ placement: getPlacement(menuType),
42845
42834
  modifiers: null,
42846
- showArrow: false,
42835
+ showArrow: true,
42847
42836
  triggerTogglesMenuState: false
42848
42837
  }, props, {
42849
42838
  dropdownMenuContainerEventHandlers: function dropdownMenuContainerEventHandlers(_ref) {
@@ -42884,10 +42873,20 @@ var SubMenuTrigger = function SubMenuTrigger(_a) {
42884
42873
  margin: "0",
42885
42874
  padding: "0"
42886
42875
  }
42887
- }, renderSubMenuItems(menuData, onItemClick, SubMenuTrigger, layer + 1)))
42876
+ }, renderSubMenuItems(menuData, onItemClick, SubMenuTrigger, layer + 1, menuType)))
42888
42877
  );
42889
42878
  };
42890
42879
 
42880
+ function getPlacement(menuType) {
42881
+ switch (menuType) {
42882
+ case "primary":
42883
+ return "right-start";
42884
+
42885
+ case "secondary":
42886
+ return "left-start";
42887
+ }
42888
+ }
42889
+
42891
42890
  SubMenuTrigger.displayName = "SubMenuTrigger";
42892
42891
 
42893
42892
  var StyledButton = styled.button.withConfig({
@@ -42965,7 +42964,8 @@ var MenuTrigger = function MenuTrigger(_a) {
42965
42964
  ariaLabel = _a["aria-label"],
42966
42965
  _trigger = _a.trigger,
42967
42966
  layer = _a.layer,
42968
- props = __rest(_a, ["menuData", "name", "color", "hoverColor", "hoverBackground", "aria-label", "trigger", "layer"]);
42967
+ menuType = _a.menuType,
42968
+ props = __rest(_a, ["menuData", "name", "color", "hoverColor", "hoverBackground", "aria-label", "trigger", "layer", "menuType"]);
42969
42969
 
42970
42970
  var dropdownMinWidth = "auto";
42971
42971
 
@@ -43024,7 +43024,7 @@ var MenuTrigger = function MenuTrigger(_a) {
43024
43024
  }, renderSubMenuItems(menuData, function (e) {
43025
43025
  closeMenu(e);
43026
43026
  e.stopPropagation();
43027
- }, SubMenuTrigger, layer + 1));
43027
+ }, SubMenuTrigger, layer + 1, menuType));
43028
43028
  })
43029
43029
  );
43030
43030
  };
@@ -43087,12 +43087,13 @@ var Nav$1 = styled.nav.withConfig({
43087
43087
  alignItems: "center"
43088
43088
  });
43089
43089
 
43090
- var renderMenuTrigger = function renderMenuTrigger(menuItem, themeColorObject, layer) {
43090
+ var renderMenuTrigger = function renderMenuTrigger(menuItem, themeColorObject, layer, menuType) {
43091
43091
  var _a;
43092
43092
 
43093
43093
  return /*#__PURE__*/React__default.createElement("div", {
43094
43094
  key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name
43095
43095
  }, /*#__PURE__*/React__default.createElement(MenuTrigger, Object.assign({
43096
+ menuType: menuType,
43096
43097
  name: menuItem.name,
43097
43098
  "aria-label": menuItem.ariaLabel,
43098
43099
  menuData: menuItem.items,
@@ -43144,19 +43145,20 @@ var getRenderFunction$1 = function getRenderFunction(menuItem) {
43144
43145
  }
43145
43146
  };
43146
43147
 
43147
- var renderMenuItem = function renderMenuItem(menuItem, themeColorObject, layer) {
43148
- return getRenderFunction$1(menuItem)(menuItem, themeColorObject, layer);
43148
+ var renderMenuItem = function renderMenuItem(menuItem, themeColorObject, layer, menuType) {
43149
+ return getRenderFunction$1(menuItem)(menuItem, themeColorObject, layer, menuType);
43149
43150
  };
43150
43151
 
43151
43152
  var BaseDesktopMenu = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
43152
43153
  var menuData = _a.menuData,
43154
+ menuType = _a.menuType,
43153
43155
  themeColorObject = _a.themeColorObject,
43154
- props = __rest(_a, ["menuData", "themeColorObject"]);
43156
+ props = __rest(_a, ["menuData", "menuType", "themeColorObject"]);
43155
43157
 
43156
43158
  return /*#__PURE__*/React__default.createElement(Nav$1, Object.assign({}, props, {
43157
43159
  ref: ref
43158
43160
  }), menuData.map(function (menuItem) {
43159
- return renderMenuItem(menuItem, themeColorObject, 0);
43161
+ return renderMenuItem(menuItem, themeColorObject, 0, menuType);
43160
43162
  }));
43161
43163
  });
43162
43164
  var DesktopMenu = styled(BaseDesktopMenu).withConfig({
@@ -43723,6 +43725,7 @@ var MediumNavBar = function MediumNavBar(_a) {
43723
43725
  }, menuData.primaryMenu && /*#__PURE__*/React__default.createElement(DesktopMenu, {
43724
43726
  themeColorObject: themeColorObject,
43725
43727
  "aria-label": t("primary navigation"),
43728
+ menuType: "primary",
43726
43729
  menuData: menuData.primaryMenu
43727
43730
  }), /*#__PURE__*/React__default.createElement(Flex, {
43728
43731
  justifySelf: "flex-end",
@@ -43730,6 +43733,7 @@ var MediumNavBar = function MediumNavBar(_a) {
43730
43733
  }, menuData.secondaryMenu && /*#__PURE__*/React__default.createElement(DesktopMenu, {
43731
43734
  themeColorObject: themeColorObject,
43732
43735
  "aria-label": t("secondary navigation"),
43736
+ menuType: "secondary",
43733
43737
  menuData: menuData.secondaryMenu
43734
43738
  }), showNulogyLogo && /*#__PURE__*/React__default.createElement(Box, {
43735
43739
  pl: "x3"
@@ -1,6 +1,8 @@
1
1
  import React from "react";
2
+ import type { MenuType } from "./MenuTrigger";
2
3
  export declare type DesktopMenuProps = {
3
4
  menuData: any[];
5
+ menuType: MenuType;
4
6
  themeColorObject: any;
5
7
  };
6
8
  declare const DesktopMenu: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<DesktopMenuProps & React.RefAttributes<HTMLElement>>, import("styled-components").DefaultTheme, {}, never>;
@@ -1,5 +1,6 @@
1
1
  import React from "react";
2
2
  import { TriggerFunctionProps } from "./TriggerFunctionProps";
3
+ export declare type MenuType = "primary" | "secondary";
3
4
  export declare type MenuTriggerProps = {
4
5
  name?: string;
5
6
  "aria-label"?: string;
@@ -9,6 +10,7 @@ export declare type MenuTriggerProps = {
9
10
  menuData?: any[];
10
11
  trigger?: (props: TriggerFunctionProps) => React.ReactNode;
11
12
  layer: number;
13
+ menuType: MenuType;
12
14
  };
13
- declare const MenuTrigger: ({ menuData, name, color, hoverColor, hoverBackground, "aria-label": ariaLabel, trigger, layer, ...props }: MenuTriggerProps) => JSX.Element;
15
+ declare const MenuTrigger: ({ menuData, name, color, hoverColor, hoverBackground, "aria-label": ariaLabel, trigger, layer, menuType, ...props }: MenuTriggerProps) => JSX.Element;
14
16
  export default MenuTrigger;
@@ -39,6 +39,7 @@ export declare const WithIcon: {
39
39
  name: string;
40
40
  };
41
41
  };
42
+ export declare const WithPrimaryAndSecondarySubMenus: () => JSX.Element;
42
43
  export declare const WithReactRouter: {
43
44
  (): JSX.Element;
44
45
  story: {
@@ -10,7 +10,7 @@ declare type NavBarDropdownMenuProps = {
10
10
  trigger?: Function;
11
11
  menuState?: MenuState;
12
12
  showArrow?: boolean;
13
- placement?: "bottom-start" | "right-start";
13
+ placement?: "bottom-start" | "right-start" | "left-start";
14
14
  modifiers?: any;
15
15
  triggerTogglesMenuState?: boolean;
16
16
  dropdownMenuContainerEventHandlers?: Function;
@@ -1,5 +1,6 @@
1
1
  import React from "react";
2
2
  import { TriggerFunctionProps } from "./TriggerFunctionProps";
3
+ import type { MenuType } from "./MenuTrigger";
3
4
  declare type SubMenuTriggerProps = React.ComponentPropsWithRef<"button"> & {
4
5
  name?: string;
5
6
  isOpen?: boolean;
@@ -7,9 +8,10 @@ declare type SubMenuTriggerProps = React.ComponentPropsWithRef<"button"> & {
7
8
  menuData: any[];
8
9
  trigger: (props: TriggerFunctionProps) => React.ReactNode;
9
10
  layer: number;
11
+ menuType: MenuType;
10
12
  };
11
13
  declare const SubMenuTrigger: {
12
- ({ menuData, name, onItemClick, trigger, layer, ...props }: SubMenuTriggerProps): JSX.Element;
14
+ ({ menuData, name, onItemClick, trigger, layer, menuType, ...props }: SubMenuTriggerProps): JSX.Element;
13
15
  displayName: string;
14
16
  };
15
17
  export default SubMenuTrigger;
@@ -1,2 +1,2 @@
1
- declare const renderSubMenuItems: (subMenuItems: any, onItemClick: any, SubMenuTrigger: any, layer: any) => any;
1
+ declare const renderSubMenuItems: (subMenuItems: any, onItemClick: any, SubMenuTrigger: any, layer: any, menuType: any) => any;
2
2
  export default renderSubMenuItems;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nulogy/components",
3
- "version": "8.1.2",
3
+ "version": "8.1.5",
4
4
  "description": "Component library for the Nulogy Design System - http://nulogy.design",
5
5
  "private": false,
6
6
  "publishConfig": {