@nulogy/components 7.0.1 → 7.2.1

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.
@@ -11882,6 +11882,8 @@ var textOverflow = system({
11882
11882
  textOverflow: true
11883
11883
  });
11884
11884
 
11885
+ var addStyledProps = compose(border, shadow, color, cursor$1, layout, overflow, space, textOverflow, transform, transition, typography, visibility);
11886
+
11885
11887
  var getAttrs = function getAttrs(inline) {
11886
11888
  return inline ? {
11887
11889
  as: "span"
@@ -11906,7 +11908,7 @@ var Text = styled.p.attrs(function (props) {
11906
11908
  lineHeight: theme.lineHeights.base,
11907
11909
  opacity: disabled ? "0.7" : undefined
11908
11910
  };
11909
- }, compose(space, typography, color, layout, overflow, textOverflow, cursor$1));
11911
+ }, addStyledProps);
11910
11912
  Text.defaultProps = {
11911
11913
  inline: false,
11912
11914
  disabled: false
@@ -16415,15 +16417,23 @@ var resetButtonStyles = {
16415
16417
  border: "none"
16416
16418
  };
16417
16419
 
16420
+ function getColorFromProps(props) {
16421
+ return themeGet("colors." + props.color, props.color)(props);
16422
+ }
16423
+
16424
+ function getColor(props) {
16425
+ return getColorFromProps(props) || props.theme.colors.blue;
16426
+ }
16427
+
16418
16428
  var getHoverColor = function getHoverColor(props) {
16419
- return props.hover ? props.color : curriedDarken("0.1", themeGet("colors." + props.color, props.color)(props));
16429
+ return props.hover ? getColor(props) : curriedDarken("0.1", getColor(props));
16420
16430
  };
16421
16431
 
16422
16432
  var Link = styled.a.withConfig({
16423
16433
  shouldForwardProp: function shouldForwardProp(prop, defaultValidatorFn) {
16424
16434
  return !["underline", "hover"].includes(prop) && defaultValidatorFn(prop);
16425
16435
  }
16426
- })(color, space, typography, function (_a) {
16436
+ })(function (_a) {
16427
16437
  var underline = _a.underline,
16428
16438
  as = _a.as,
16429
16439
  props = __rest(_a, ["underline", "as"]);
@@ -16431,17 +16441,16 @@ var Link = styled.a.withConfig({
16431
16441
  return Object.assign(Object.assign({}, resetButtonStyles), {
16432
16442
  padding: as === "button" ? "0" : undefined,
16433
16443
  textDecoration: underline ? "underline" : "none",
16444
+ fontSize: props.theme.fontSizes.medium,
16445
+ color: getColor(props),
16434
16446
  "&:hover": {
16435
16447
  cursor: "pointer",
16436
16448
  color: getHoverColor(props)
16437
16449
  }
16438
16450
  });
16439
- });
16451
+ }, addStyledProps);
16440
16452
  Link.defaultProps = {
16441
- className: undefined,
16442
- underline: true,
16443
- fontSize: "medium",
16444
- color: "blue"
16453
+ underline: true
16445
16454
  };
16446
16455
 
16447
16456
  var ListItem = styled.li.withConfig({
@@ -16475,7 +16484,7 @@ var List = styled.ul.withConfig({
16475
16484
  }, _ref2["" + ListItem] = {
16476
16485
  marginBottom: compact ? 0 : theme.space.x1
16477
16486
  }, _ref2;
16478
- }, space, color, typography, layout, shadow, border);
16487
+ }, addStyledProps);
16479
16488
  List.defaultProps = {
16480
16489
  className: undefined,
16481
16490
  compact: false,
@@ -20249,7 +20258,7 @@ var DropdownButton = styled.button.withConfig({
20249
20258
  opacity: ".5"
20250
20259
  }
20251
20260
  };
20252
- }, color);
20261
+ }, addStyledProps);
20253
20262
  DropdownButton.defaultProps = {
20254
20263
  disabled: false,
20255
20264
  hoverColor: "darkBlue",
@@ -20294,7 +20303,7 @@ var DropdownLink = styled.a.withConfig({
20294
20303
  opacity: ".5"
20295
20304
  }
20296
20305
  };
20297
- });
20306
+ }, addStyledProps);
20298
20307
  DropdownLink.defaultProps = {
20299
20308
  disabled: false,
20300
20309
  color: "darkGrey",
@@ -20363,7 +20372,7 @@ var DropdownText = styled(Text).withConfig({
20363
20372
  transition: ".2s",
20364
20373
  padding: theme.space.x1 + " " + theme.space.x2
20365
20374
  };
20366
- }, color);
20375
+ }, addStyledProps);
20367
20376
 
20368
20377
  var HelpText = styled(Text).withConfig({
20369
20378
  displayName: "HelpText",
@@ -44324,6 +44333,10 @@ var Toast = function Toast(_a) {
44324
44333
  setVisible(false);
44325
44334
  if (onHide) onHide();
44326
44335
  }
44336
+
44337
+ return function () {
44338
+ cancelHidingToast();
44339
+ };
44327
44340
  }, [triggered]);
44328
44341
 
44329
44342
  var onMouseIn = function onMouseIn() {
@@ -44558,7 +44571,7 @@ NavBarDropdownMenu.defaultProps = {
44558
44571
  hideDelay: "100"
44559
44572
  };
44560
44573
 
44561
- var renderSubMenuTrigger = function renderSubMenuTrigger(subMenuItem, onItemClick, SubMenuTrigger) {
44574
+ var renderSubMenuTrigger = function renderSubMenuTrigger(subMenuItem, onItemClick, SubMenuTrigger, layer) {
44562
44575
  var _a;
44563
44576
 
44564
44577
  return /*#__PURE__*/React__default.createElement(NoWrapLi, {
@@ -44566,7 +44579,9 @@ var renderSubMenuTrigger = function renderSubMenuTrigger(subMenuItem, onItemClic
44566
44579
  }, /*#__PURE__*/React__default.createElement(SubMenuTrigger, {
44567
44580
  onItemClick: onItemClick,
44568
44581
  name: subMenuItem.name,
44569
- menuData: subMenuItem.items
44582
+ menuData: subMenuItem.items,
44583
+ trigger: subMenuItem.trigger,
44584
+ layer: layer
44570
44585
  }));
44571
44586
  };
44572
44587
 
@@ -44584,12 +44599,16 @@ var renderSubMenuLink = function renderSubMenuLink(subMenuItem, onItemClick) {
44584
44599
  }, subMenuItem.name));
44585
44600
  };
44586
44601
 
44587
- var renderCustom$2 = function renderCustom(subMenuItem, onItemClick) {
44602
+ var renderCustom$2 = function renderCustom(subMenuItem, onItemClick, _SubMenuTrigger, layer) {
44588
44603
  var _a;
44589
44604
 
44590
44605
  return /*#__PURE__*/React__default.createElement(NoWrapLi, {
44591
44606
  key: (_a = subMenuItem.key) !== null && _a !== void 0 ? _a : subMenuItem.name
44592
- }, subMenuItem.render(onItemClick));
44607
+ }, subMenuItem.render({
44608
+ size: "medium",
44609
+ onItemClick: onItemClick,
44610
+ layer: layer
44611
+ }));
44593
44612
  };
44594
44613
 
44595
44614
  var renderText$2 = function renderText(subMenuItem) {
@@ -44612,9 +44631,9 @@ var getRenderFunction$2 = function getRenderFunction(subMenuItem) {
44612
44631
  }
44613
44632
  };
44614
44633
 
44615
- var renderSubMenuItems = function renderSubMenuItems(subMenuItems, onItemClick, SubMenuTrigger) {
44634
+ var renderSubMenuItems = function renderSubMenuItems(subMenuItems, onItemClick, SubMenuTrigger, layer) {
44616
44635
  return subMenuItems.map(function (subMenuItem) {
44617
- return getRenderFunction$2(subMenuItem)(subMenuItem, onItemClick, SubMenuTrigger);
44636
+ return getRenderFunction$2(subMenuItem)(subMenuItem, onItemClick, SubMenuTrigger, layer);
44618
44637
  });
44619
44638
  };
44620
44639
 
@@ -44628,8 +44647,8 @@ var NoWrapLi = styled.li.withConfig({
44628
44647
  });
44629
44648
 
44630
44649
  var StyledButton$1 = styled(DropdownButton).withConfig({
44631
- displayName: "SubMenuTrigger__StyledButton",
44632
- componentId: "sc-1tg8y8b-0"
44650
+ displayName: "SubMenuTriggerButton__StyledButton",
44651
+ componentId: "bvw24f-0"
44633
44652
  })(function (_ref) {
44634
44653
  var isOpen = _ref.isOpen,
44635
44654
  theme = _ref.theme;
@@ -44663,7 +44682,9 @@ var SubMenuTrigger = function SubMenuTrigger(_a) {
44663
44682
  var menuData = _a.menuData,
44664
44683
  name = _a.name,
44665
44684
  onItemClick = _a.onItemClick,
44666
- props = __rest(_a, ["menuData", "name", "onItemClick"]);
44685
+ _trigger = _a.trigger,
44686
+ layer = _a.layer,
44687
+ props = __rest(_a, ["menuData", "name", "onItemClick", "trigger", "layer"]);
44667
44688
 
44668
44689
  return (
44669
44690
  /*#__PURE__*/
@@ -44674,24 +44695,37 @@ var SubMenuTrigger = function SubMenuTrigger(_a) {
44674
44695
  showArrow: false,
44675
44696
  triggerTogglesMenuState: false
44676
44697
  }, props, {
44677
- dropdownMenuContainerEventHandlers: function dropdownMenuContainerEventHandlers(_ref2) {
44678
- var openMenu = _ref2.openMenu,
44679
- closeMenu = _ref2.closeMenu;
44698
+ dropdownMenuContainerEventHandlers: function dropdownMenuContainerEventHandlers(_ref) {
44699
+ var openMenu = _ref.openMenu,
44700
+ closeMenu = _ref.closeMenu;
44680
44701
  return {
44681
44702
  onMouseEnter: openMenu,
44682
44703
  onMouseLeave: closeMenu
44683
44704
  };
44684
44705
  },
44685
- trigger: function trigger(_ref3) {
44686
- var closeMenu = _ref3.closeMenu,
44687
- openMenu = _ref3.openMenu,
44688
- isOpen = _ref3.isOpen;
44689
- return /*#__PURE__*/React__default.createElement(SubMenuTriggerButton, {
44706
+ trigger: function trigger(_ref2) {
44707
+ var closeMenu = _ref2.closeMenu,
44708
+ openMenu = _ref2.openMenu,
44709
+ isOpen = _ref2.isOpen;
44710
+
44711
+ var defaultRender = function defaultRender() {
44712
+ return /*#__PURE__*/React__default.createElement(SubMenuTriggerButton, {
44713
+ isOpen: isOpen,
44714
+ name: name,
44715
+ onMouseEnter: openMenu,
44716
+ onMouseLeave: closeMenu
44717
+ });
44718
+ };
44719
+
44720
+ var triggerProps = {
44721
+ size: "medium",
44722
+ closeMenu: closeMenu,
44723
+ openMenu: openMenu,
44690
44724
  isOpen: isOpen,
44691
- name: name,
44692
- onMouseEnter: openMenu,
44693
- onMouseLeave: closeMenu
44694
- });
44725
+ defaultRender: defaultRender,
44726
+ layer: layer
44727
+ };
44728
+ return _trigger ? _trigger(triggerProps) : defaultRender();
44695
44729
  }
44696
44730
  }), /*#__PURE__*/React__default.createElement("ul", {
44697
44731
  style: {
@@ -44699,15 +44733,15 @@ var SubMenuTrigger = function SubMenuTrigger(_a) {
44699
44733
  margin: "0",
44700
44734
  padding: "0"
44701
44735
  }
44702
- }, renderSubMenuItems(menuData, onItemClick, SubMenuTrigger)))
44736
+ }, renderSubMenuItems(menuData, onItemClick, SubMenuTrigger, layer + 1)))
44703
44737
  );
44704
44738
  };
44705
44739
 
44706
44740
  SubMenuTrigger.displayName = "SubMenuTrigger";
44707
44741
 
44708
44742
  var StyledButton = styled.button.withConfig({
44709
- displayName: "MenuTrigger__StyledButton",
44710
- componentId: "sc-6k53fy-0"
44743
+ displayName: "MenuTriggerButton__StyledButton",
44744
+ componentId: "sc-9xtkk1-0"
44711
44745
  })(function (_ref) {
44712
44746
  var _ref$color = _ref.color,
44713
44747
  color = _ref$color === void 0 ? "white" : _ref$color,
@@ -44778,7 +44812,9 @@ var MenuTrigger = function MenuTrigger(_a) {
44778
44812
  hoverColor = _a.hoverColor,
44779
44813
  hoverBackground = _a.hoverBackground,
44780
44814
  ariaLabel = _a["aria-label"],
44781
- props = __rest(_a, ["menuData", "name", "color", "hoverColor", "hoverBackground", "aria-label"]);
44815
+ _trigger = _a.trigger,
44816
+ layer = _a.layer,
44817
+ props = __rest(_a, ["menuData", "name", "color", "hoverColor", "hoverBackground", "aria-label", "trigger", "layer"]);
44782
44818
 
44783
44819
  var dropdownMinWidth = "auto";
44784
44820
 
@@ -44788,6 +44824,13 @@ var MenuTrigger = function MenuTrigger(_a) {
44788
44824
  return popperData;
44789
44825
  };
44790
44826
 
44827
+ var triggerProps = {
44828
+ color: color,
44829
+ hoverColor: hoverColor,
44830
+ hoverBackground: hoverBackground,
44831
+ name: name,
44832
+ "aria-label": ariaLabel
44833
+ };
44791
44834
  return (
44792
44835
  /*#__PURE__*/
44793
44836
  // @ts-ignore
@@ -44808,16 +44851,18 @@ var MenuTrigger = function MenuTrigger(_a) {
44808
44851
  }
44809
44852
  },
44810
44853
  trigger: function trigger() {
44811
- return /*#__PURE__*/React__default.createElement(MenuTriggerButton, {
44812
- color: color,
44813
- hoverColor: hoverColor,
44814
- hoverBackground: hoverBackground,
44815
- name: name,
44816
- "aria-label": ariaLabel
44817
- });
44854
+ var defaultRender = function defaultRender() {
44855
+ return /*#__PURE__*/React__default.createElement(MenuTriggerButton, Object.assign({}, triggerProps));
44856
+ };
44857
+
44858
+ return _trigger ? _trigger({
44859
+ size: "medium",
44860
+ defaultRender: defaultRender,
44861
+ layer: layer
44862
+ }) : defaultRender();
44818
44863
  }
44819
- }), function (_ref2) {
44820
- var closeMenu = _ref2.closeMenu;
44864
+ }), function (_ref) {
44865
+ var closeMenu = _ref.closeMenu;
44821
44866
  return /*#__PURE__*/React__default.createElement("ul", {
44822
44867
  style: {
44823
44868
  listStyle: "none",
@@ -44828,7 +44873,7 @@ var MenuTrigger = function MenuTrigger(_a) {
44828
44873
  }, renderSubMenuItems(menuData, function (e) {
44829
44874
  closeMenu(e);
44830
44875
  e.stopPropagation();
44831
- }, SubMenuTrigger));
44876
+ }, SubMenuTrigger, layer + 1));
44832
44877
  })
44833
44878
  );
44834
44879
  };
@@ -44891,7 +44936,7 @@ var Nav$1 = styled.nav.withConfig({
44891
44936
  alignItems: "center"
44892
44937
  });
44893
44938
 
44894
- var renderMenuTrigger = function renderMenuTrigger(menuItem, themeColorObject) {
44939
+ var renderMenuTrigger = function renderMenuTrigger(menuItem, themeColorObject, layer) {
44895
44940
  var _a;
44896
44941
 
44897
44942
  return /*#__PURE__*/React__default.createElement("div", {
@@ -44899,7 +44944,9 @@ var renderMenuTrigger = function renderMenuTrigger(menuItem, themeColorObject) {
44899
44944
  }, /*#__PURE__*/React__default.createElement(MenuTrigger, Object.assign({
44900
44945
  name: menuItem.name,
44901
44946
  "aria-label": menuItem.ariaLabel,
44902
- menuData: menuItem.items
44947
+ menuData: menuItem.items,
44948
+ trigger: menuItem.trigger,
44949
+ layer: layer
44903
44950
  }, themeColorObject)));
44904
44951
  };
44905
44952
 
@@ -44915,12 +44962,15 @@ var renderMenuLink$1 = function renderMenuLink(menuItem, themeColorObject) {
44915
44962
  }, themeColorObject), menuItem.name));
44916
44963
  };
44917
44964
 
44918
- var renderCustom$1 = function renderCustom(menuItem) {
44965
+ var renderCustom$1 = function renderCustom(menuItem, _themeColorObject, layer) {
44919
44966
  var _a;
44920
44967
 
44921
44968
  return /*#__PURE__*/React__default.createElement("div", {
44922
44969
  key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name
44923
- }, menuItem.render());
44970
+ }, menuItem.render({
44971
+ size: "medium",
44972
+ layer: layer
44973
+ }));
44924
44974
  };
44925
44975
 
44926
44976
  var renderText$1 = function renderText(menuItem, themeColorObject) {
@@ -44943,8 +44993,8 @@ var getRenderFunction$1 = function getRenderFunction(menuItem) {
44943
44993
  }
44944
44994
  };
44945
44995
 
44946
- var renderMenuItem = function renderMenuItem(menuItem, themeColorObject) {
44947
- return getRenderFunction$1(menuItem)(menuItem, themeColorObject);
44996
+ var renderMenuItem = function renderMenuItem(menuItem, themeColorObject, layer) {
44997
+ return getRenderFunction$1(menuItem)(menuItem, themeColorObject, layer);
44948
44998
  };
44949
44999
 
44950
45000
  var BaseDesktopMenu = function BaseDesktopMenu(_a) {
@@ -44953,7 +45003,7 @@ var BaseDesktopMenu = function BaseDesktopMenu(_a) {
44953
45003
  props = __rest(_a, ["menuData", "themeColorObject"]);
44954
45004
 
44955
45005
  return /*#__PURE__*/React__default.createElement(Nav$1, Object.assign({}, props), menuData.map(function (menuItem) {
44956
- return renderMenuItem(menuItem, themeColorObject);
45006
+ return renderMenuItem(menuItem, themeColorObject, 0);
44957
45007
  }));
44958
45008
  };
44959
45009
 
@@ -45047,9 +45097,7 @@ var getSharedStyles = function getSharedStyles(theme) {
45047
45097
  fontSize: theme.fontSizes.large,
45048
45098
  fontWeight: theme.fontWeights.medium,
45049
45099
  lineHeight: theme.lineHeights.heading3,
45050
- marginBottom: theme.space.x1,
45051
- padding: theme.space.x1 + " " + theme.space.x3,
45052
- paddingLeft: getPaddingLeft(0)
45100
+ padding: theme.space.x1 + " " + theme.space.x3
45053
45101
  };
45054
45102
  };
45055
45103
 
@@ -45079,7 +45127,7 @@ var TopLevelLink = styled(Link).withConfig({
45079
45127
  opacity: ".5"
45080
45128
  }
45081
45129
  });
45082
- });
45130
+ }, addStyledProps);
45083
45131
  var TopLevelText = styled(Text).withConfig({
45084
45132
  displayName: "MobileMenu__TopLevelText",
45085
45133
  componentId: "sc-18t6zrc-2"
@@ -45088,27 +45136,10 @@ var TopLevelText = styled(Text).withConfig({
45088
45136
  return Object.assign(Object.assign({}, getSharedStyles(theme)), {
45089
45137
  color: theme.colors.blackBlue
45090
45138
  });
45091
- });
45092
- var ChildIndentingLi = styled.li.withConfig({
45093
- displayName: "MobileMenu__ChildIndentingLi",
45094
- componentId: "sc-18t6zrc-3"
45095
- })(function (_ref4) {
45096
- var _ref5;
45097
-
45098
- var layer = _ref4.layer,
45099
- theme = _ref4.theme;
45100
- return _ref5 = {
45101
- marginBottom: theme.space.x1
45102
- }, _ref5["> " + DropdownButton + ", > " + DropdownLink] = {
45103
- // eslint-disable-next-line no-mixed-operators
45104
- paddingLeft: 24 * layer + 20 + "px"
45105
- }, _ref5["> " + DropdownText] = {
45106
- paddingLeft: getPaddingLeft(layer)
45107
- }, _ref5;
45108
- });
45139
+ }, addStyledProps);
45109
45140
  var SubMenuItemsList = styled.ul.withConfig({
45110
45141
  displayName: "MobileMenu__SubMenuItemsList",
45111
- componentId: "sc-18t6zrc-4"
45142
+ componentId: "sc-18t6zrc-3"
45112
45143
  })({
45113
45144
  listStyle: "none",
45114
45145
  paddingLeft: "0",
@@ -45118,25 +45149,31 @@ var SubMenuItemsList = styled.ul.withConfig({
45118
45149
  var renderMenuLink = function renderMenuLink(menuItem, linkOnClick, themeColorObject, layer) {
45119
45150
  var _a;
45120
45151
 
45121
- var MenuLink = layer === 0 ? TopLevelLink : DropdownLink;
45122
- return /*#__PURE__*/React__default.createElement(ChildIndentingLi, {
45123
- layer: layer,
45124
- key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name
45125
- }, /*#__PURE__*/React__default.createElement(MenuLink, {
45152
+ var sharedLinkProps = {
45126
45153
  onClick: linkOnClick,
45127
45154
  href: menuItem.href,
45128
45155
  as: menuItem.as,
45129
- to: menuItem.to
45130
- }, menuItem.name));
45156
+ to: menuItem.to,
45157
+ // eslint-disable-next-line no-mixed-operators
45158
+ pl: layer === 0 ? getPaddingLeft(layer) : 24 * layer + 20 + "px",
45159
+ mb: "x1"
45160
+ };
45161
+ var MenuLink = layer === 0 ? TopLevelLink : DropdownLink;
45162
+ return /*#__PURE__*/React__default.createElement("li", {
45163
+ key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name
45164
+ }, /*#__PURE__*/React__default.createElement(MenuLink, Object.assign({}, sharedLinkProps), menuItem.name));
45131
45165
  };
45132
45166
 
45133
45167
  var renderCustom = function renderCustom(menuItem, linkOnClick, themeColorObject, layer) {
45134
45168
  var _a;
45135
45169
 
45136
- return /*#__PURE__*/React__default.createElement(ChildIndentingLi, {
45137
- layer: layer,
45170
+ return /*#__PURE__*/React__default.createElement("li", {
45138
45171
  key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name
45139
- }, menuItem.render(linkOnClick, layer));
45172
+ }, menuItem.render({
45173
+ size: "small",
45174
+ onItemClick: linkOnClick,
45175
+ layer: layer
45176
+ }));
45140
45177
  };
45141
45178
 
45142
45179
  var renderSubMenu = function renderSubMenu(menuItem, linkOnClick, themeColorObject, layer) {
@@ -45159,10 +45196,12 @@ var renderText = function renderText(menuItem, linkOnClick, themeColorObject, la
45159
45196
  var _a;
45160
45197
 
45161
45198
  var MenuText = layer === 0 ? TopLevelText : DropdownText;
45162
- return /*#__PURE__*/React__default.createElement(ChildIndentingLi, {
45163
- layer: layer,
45199
+ return /*#__PURE__*/React__default.createElement("li", {
45164
45200
  key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name
45165
- }, /*#__PURE__*/React__default.createElement(MenuText, null, menuItem.name));
45201
+ }, /*#__PURE__*/React__default.createElement(MenuText, {
45202
+ pl: getPaddingLeft(layer),
45203
+ mb: "x1"
45204
+ }, menuItem.name));
45166
45205
  };
45167
45206
 
45168
45207
  var getRenderFunction = function getRenderFunction(menuItem) {
@@ -45190,46 +45229,54 @@ var renderTopLayerMenuItems = function renderTopLayerMenuItems(menuData, linkOnC
45190
45229
 
45191
45230
  var getSubMenuHeading = function getSubMenuHeading(layer, name) {
45192
45231
  return layer === 0 ? /*#__PURE__*/React__default.createElement(TopLevelText, {
45193
- as: "h3"
45232
+ as: "h3",
45233
+ mb: "x1"
45194
45234
  }, name) : /*#__PURE__*/React__default.createElement(DropdownText, {
45195
45235
  mb: "x1",
45196
- style: {
45197
- paddingLeft: getPaddingLeft(layer)
45198
- }
45236
+ pl: getPaddingLeft(layer)
45199
45237
  }, name);
45200
45238
  };
45201
45239
 
45202
- var SubMenu = function SubMenu(_ref6) {
45203
- var menuItem = _ref6.menuItem,
45204
- linkOnClick = _ref6.linkOnClick,
45205
- themeColorObject = _ref6.themeColorObject,
45206
- layer = _ref6.layer;
45207
- return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, getSubMenuHeading(layer, menuItem.name), /*#__PURE__*/React__default.createElement(SubMenuItemsList, null, renderMenuItems(menuItem.items, linkOnClick, themeColorObject, layer + 1)));
45240
+ var SubMenu = function SubMenu(_ref4) {
45241
+ var menuItem = _ref4.menuItem,
45242
+ linkOnClick = _ref4.linkOnClick,
45243
+ themeColorObject = _ref4.themeColorObject,
45244
+ layer = _ref4.layer;
45245
+
45246
+ var defaultRender = function defaultRender() {
45247
+ return getSubMenuHeading(layer, menuItem.name);
45248
+ };
45249
+
45250
+ return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, menuItem.trigger ? menuItem.trigger({
45251
+ size: "small",
45252
+ defaultRender: defaultRender,
45253
+ layer: layer
45254
+ }) : defaultRender(), /*#__PURE__*/React__default.createElement(SubMenuItemsList, null, renderMenuItems(menuItem.items, linkOnClick, themeColorObject, layer + 1)));
45208
45255
  };
45209
45256
 
45210
45257
  var Menu$1 = styled.ul.withConfig({
45211
45258
  displayName: "MobileMenu__Menu",
45212
- componentId: "sc-18t6zrc-5"
45213
- })(function (_ref7) {
45214
- var _ref8;
45259
+ componentId: "sc-18t6zrc-4"
45260
+ })(function (_ref5) {
45261
+ var _ref6;
45215
45262
 
45216
- var theme = _ref7.theme;
45217
- return _ref8 = {
45263
+ var theme = _ref5.theme;
45264
+ return _ref6 = {
45218
45265
  listStyle: "none",
45219
45266
  margin: "0",
45220
45267
  padding: theme.space.x1 + " 0",
45221
45268
  zIndex: theme.zIndices.content,
45222
45269
  width: "100%",
45223
45270
  color: theme.colors.white
45224
- }, _ref8["" + Heading3] = {
45271
+ }, _ref6["" + Heading3] = {
45225
45272
  padding: theme.space.x1 + " 0 " + theme.space.x1 + " " + theme.space.x3
45226
- }, _ref8;
45273
+ }, _ref6;
45227
45274
  });
45228
45275
  var Nav = styled.nav.withConfig({
45229
45276
  displayName: "MobileMenu__Nav",
45230
- componentId: "sc-18t6zrc-6"
45231
- })(function (_ref9) {
45232
- var backgroundColor = _ref9.backgroundColor;
45277
+ componentId: "sc-18t6zrc-5"
45278
+ })(function (_ref7) {
45279
+ var backgroundColor = _ref7.backgroundColor;
45233
45280
  return {
45234
45281
  backgroundColor: backgroundColor
45235
45282
  };
@@ -45267,7 +45314,7 @@ var BaseMobileMenu = function BaseMobileMenu(_a) {
45267
45314
 
45268
45315
  var MobileMenu = styled(BaseMobileMenu).withConfig({
45269
45316
  displayName: "MobileMenu",
45270
- componentId: "sc-18t6zrc-7"
45317
+ componentId: "sc-18t6zrc-6"
45271
45318
  })(display);
45272
45319
 
45273
45320
  var borderStyle = "1px solid #e4e7eb";
@@ -52684,4 +52731,4 @@ var SortingTable = function SortingTable(_a) {
52684
52731
  }, props));
52685
52732
  };
52686
52733
 
52687
- export { ALL_NDS_LOCALES, Alert, AnimatedBox, ApplicationFrame, AsyncSelect, Box, NavBar as BrandedNavBar, Branding, Breadcrumbs, Button, ButtonGroup, Card, CardSet, Checkbox, CheckboxGroup, ControlIcon, DangerButton, DatePicker, DateRange, Divider, DropdownButton, DropdownItem, DropdownLink, DropdownMenu, DropdownText, Field, FieldLabel, Fieldset, Flex, Form, FormSection, Heading1, Heading2, Heading3, Heading4, HelpText, Icon, IconicButton, InlineIcon, InlineValidation, Input$1 as Input, Link, List, ListItem, LoadingAnimation, Modal, NDSProvider, NavBar$1 as NavBar, Overlay, Page, Pagination, PrimaryButton, QuietButton, Radio, RadioGroup, RangeContainer, RequirementText, ReactSelect as Select, SelectClearIndicator, SelectContainer$1 as SelectContainer, SelectControl, SelectDropdownIndicator, SelectInput, SelectMenu, SelectMultiValue, SelectOption, Sidebar, SortingTable, StatusIndicator, Switch, Switcher, Tab, Table, Tabs, Text, Textarea, TimePicker, TimeRange, Toast, ToggleComponent as Toggle, Tooltip, TruncatedText, Theme as theme, useWindowDimensions };
52734
+ export { ALL_NDS_LOCALES, Alert, AnimatedBox, ApplicationFrame, AsyncSelect, Box, NavBar as BrandedNavBar, Branding, Breadcrumbs, Button, ButtonGroup, Card, CardSet, Checkbox, CheckboxGroup, ControlIcon, DangerButton, DatePicker, DateRange, Divider, DropdownButton, DropdownItem, DropdownLink, DropdownMenu, DropdownText, Field, FieldLabel, Fieldset, Flex, Form, FormSection, Heading1, Heading2, Heading3, Heading4, HelpText, Icon, IconicButton, InlineIcon, InlineValidation, Input$1 as Input, Link, List, ListItem, LoadingAnimation, Modal, NDSProvider, NavBar$1 as NavBar, Overlay, Page, Pagination, PrimaryButton, QuietButton, Radio, RadioGroup, RangeContainer, RequirementText, ReactSelect as Select, SelectClearIndicator, SelectContainer$1 as SelectContainer, SelectControl, SelectDropdownIndicator, SelectInput, SelectMenu, SelectMultiValue, SelectOption, Sidebar, SortingTable, StatusIndicator, Switch, Switcher, Tab, Table, Tabs, Text, Textarea, TimePicker, TimeRange, Toast, ToggleComponent as Toggle, Tooltip, TruncatedText, addStyledProps, Theme as theme, useWindowDimensions };
@@ -3,5 +3,5 @@ declare type CloseButtonProps = {
3
3
  onClick: any;
4
4
  "aria-label": string;
5
5
  };
6
- declare const CloseButton: ({ onClick, "aria-label": ariaLabel, }: CloseButtonProps) => JSX.Element;
6
+ declare const CloseButton: ({ onClick, "aria-label": ariaLabel }: CloseButtonProps) => JSX.Element;
7
7
  export default CloseButton;
@@ -1,11 +1,14 @@
1
- /// <reference types="react" />
1
+ import React from "react";
2
+ import { TriggerFunctionProps } from "./TriggerFunctionProps";
2
3
  export declare type MenuTriggerProps = {
3
4
  name?: string;
4
5
  "aria-label"?: string;
5
- menuData?: any[];
6
6
  color?: string;
7
7
  hoverColor?: string;
8
8
  hoverBackground?: string;
9
+ menuData?: any[];
10
+ trigger?: (props: TriggerFunctionProps) => React.ReactNode;
11
+ layer: number;
9
12
  };
10
- declare const MenuTrigger: ({ menuData, name, color, hoverColor, hoverBackground, "aria-label": ariaLabel, ...props }: MenuTriggerProps) => JSX.Element;
13
+ declare const MenuTrigger: ({ menuData, name, color, hoverColor, hoverBackground, "aria-label": ariaLabel, trigger, layer, ...props }: MenuTriggerProps) => JSX.Element;
11
14
  export default MenuTrigger;
@@ -0,0 +1,9 @@
1
+ import React from "react";
2
+ declare type MenuTriggerButtonProps = React.ComponentPropsWithRef<"button"> & {
3
+ name?: React.ReactNode;
4
+ color?: string;
5
+ hoverColor?: string;
6
+ hoverBackground?: string;
7
+ };
8
+ declare const MenuTriggerButton: React.ForwardRefExoticComponent<Pick<MenuTriggerButtonProps, "form" | "slot" | "style" | "title" | "key" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "hoverColor" | "hoverBackground"> & React.RefAttributes<HTMLButtonElement>>;
9
+ export default MenuTriggerButton;
@@ -68,3 +68,15 @@ export declare const CustomRenderingInHamburger: {
68
68
  };
69
69
  };
70
70
  };
71
+ export declare const CustomMenuTriggers: () => JSX.Element;
72
+ export declare const CustomMenuTriggersInHamburger: {
73
+ (): JSX.Element;
74
+ parameters: {
75
+ viewport: {
76
+ defaultViewport: string;
77
+ };
78
+ chromatic: {
79
+ viewports: number[];
80
+ };
81
+ };
82
+ };
@@ -3,5 +3,5 @@ declare type NulogyLogoContainerProps = {
3
3
  subText?: string;
4
4
  height?: string;
5
5
  };
6
- export declare const NulogyLogoContainer: ({ subText, height, }: NulogyLogoContainerProps) => JSX.Element;
6
+ export declare const NulogyLogoContainer: ({ subText, height }: NulogyLogoContainerProps) => JSX.Element;
7
7
  export {};
@@ -1,12 +1,15 @@
1
1
  import React from "react";
2
+ import { TriggerFunctionProps } from "./TriggerFunctionProps";
2
3
  declare type SubMenuTriggerProps = React.ComponentPropsWithRef<"button"> & {
3
4
  name?: string;
4
5
  isOpen?: boolean;
5
6
  onItemClick?: any;
6
7
  menuData: any[];
8
+ trigger: (props: TriggerFunctionProps) => React.ReactNode;
9
+ layer: number;
7
10
  };
8
11
  declare const SubMenuTrigger: {
9
- ({ menuData, name, onItemClick, ...props }: SubMenuTriggerProps): JSX.Element;
12
+ ({ menuData, name, onItemClick, trigger, layer, ...props }: SubMenuTriggerProps): JSX.Element;
10
13
  displayName: string;
11
14
  };
12
15
  export default SubMenuTrigger;