@nulogy/components 7.0.0 → 7.2.0

package/dist/main.js

@@ -11908,6 +11908,8 @@
     textOverflow: true
   });
 
+  var addStyledProps = compose(border, shadow, color, cursor$1, layout, overflow, space, textOverflow, transform, transition, typography, visibility);
+
   var getAttrs = function getAttrs(inline) {
     return inline ? {
       as: "span"
@@ -11932,7 +11934,7 @@
       lineHeight: theme.lineHeights.base,
       opacity: disabled ? "0.7" : undefined
     };
-  }, compose(space, typography, color, layout, overflow, textOverflow, cursor$1));
+  }, addStyledProps);
   Text.defaultProps = {
     inline: false,
     disabled: false
@@ -16441,15 +16443,23 @@
     border: "none"
   };
 
+  function getColorFromProps(props) {
+    return themeGet("colors." + props.color, props.color)(props);
+  }
+
+  function getColor(props) {
+    return getColorFromProps(props) || props.theme.colors.blue;
+  }
+
   var getHoverColor = function getHoverColor(props) {
-    return props.hover ? props.color : curriedDarken("0.1", themeGet("colors." + props.color, props.color)(props));
+    return props.hover ? getColor(props) : curriedDarken("0.1", getColor(props));
   };
 
   var Link = styled__default['default'].a.withConfig({
     shouldForwardProp: function shouldForwardProp(prop, defaultValidatorFn) {
       return !["underline", "hover"].includes(prop) && defaultValidatorFn(prop);
     }
-  })(color, space, typography, function (_a) {
+  })(function (_a) {
     var underline = _a.underline,
         as = _a.as,
         props = __rest(_a, ["underline", "as"]);
@@ -16457,17 +16467,16 @@
     return Object.assign(Object.assign({}, resetButtonStyles), {
       padding: as === "button" ? "0" : undefined,
       textDecoration: underline ? "underline" : "none",
+      fontSize: props.theme.fontSizes.medium,
+      color: getColor(props),
       "&:hover": {
         cursor: "pointer",
         color: getHoverColor(props)
       }
     });
-  });
+  }, addStyledProps);
   Link.defaultProps = {
-    className: undefined,
-    underline: true,
-    fontSize: "medium",
-    color: "blue"
+    underline: true
   };
 
   var ListItem = styled__default['default'].li.withConfig({
@@ -16501,7 +16510,7 @@
     }, _ref2["" + ListItem] = {
       marginBottom: compact ? 0 : theme.space.x1
     }, _ref2;
-  }, space, color, typography, layout, shadow, border);
+  }, addStyledProps);
   List.defaultProps = {
     className: undefined,
     compact: false,
@@ -20275,7 +20284,7 @@
         opacity: ".5"
       }
     };
-  }, color);
+  }, addStyledProps);
   DropdownButton.defaultProps = {
     disabled: false,
     hoverColor: "darkBlue",
@@ -20320,7 +20329,7 @@
         opacity: ".5"
       }
     };
-  });
+  }, addStyledProps);
   DropdownLink.defaultProps = {
     disabled: false,
     color: "darkGrey",
@@ -20389,7 +20398,7 @@
       transition: ".2s",
       padding: theme.space.x1 + " " + theme.space.x2
     };
-  }, color);
+  }, addStyledProps);
 
   var HelpText = styled__default['default'](Text).withConfig({
     displayName: "HelpText",
@@ -44584,7 +44593,7 @@
     hideDelay: "100"
   };
 
-  var renderSubMenuTrigger = function renderSubMenuTrigger(subMenuItem, onItemClick, SubMenuTrigger) {
+  var renderSubMenuTrigger = function renderSubMenuTrigger(subMenuItem, onItemClick, SubMenuTrigger, layer) {
     var _a;
 
     return /*#__PURE__*/React__default['default'].createElement(NoWrapLi, {
@@ -44592,7 +44601,9 @@
     }, /*#__PURE__*/React__default['default'].createElement(SubMenuTrigger, {
       onItemClick: onItemClick,
       name: subMenuItem.name,
-      menuData: subMenuItem.items
+      menuData: subMenuItem.items,
+      trigger: subMenuItem.trigger,
+      layer: layer
     }));
   };
 
@@ -44610,12 +44621,16 @@
     }, subMenuItem.name));
   };
 
-  var renderCustom$2 = function renderCustom(subMenuItem, onItemClick) {
+  var renderCustom$2 = function renderCustom(subMenuItem, onItemClick, _SubMenuTrigger, layer) {
     var _a;
 
     return /*#__PURE__*/React__default['default'].createElement(NoWrapLi, {
       key: (_a = subMenuItem.key) !== null && _a !== void 0 ? _a : subMenuItem.name
-    }, subMenuItem.render(onItemClick));
+    }, subMenuItem.render({
+      size: "medium",
+      onItemClick: onItemClick,
+      layer: layer
+    }));
   };
 
   var renderText$2 = function renderText(subMenuItem) {
@@ -44638,9 +44653,9 @@
     }
   };
 
-  var renderSubMenuItems = function renderSubMenuItems(subMenuItems, onItemClick, SubMenuTrigger) {
+  var renderSubMenuItems = function renderSubMenuItems(subMenuItems, onItemClick, SubMenuTrigger, layer) {
     return subMenuItems.map(function (subMenuItem) {
-      return getRenderFunction$2(subMenuItem)(subMenuItem, onItemClick, SubMenuTrigger);
+      return getRenderFunction$2(subMenuItem)(subMenuItem, onItemClick, SubMenuTrigger, layer);
     });
   };
 
@@ -44654,8 +44669,8 @@
   });
 
   var StyledButton$1 = styled__default['default'](DropdownButton).withConfig({
-    displayName: "SubMenuTrigger__StyledButton",
-    componentId: "sc-1tg8y8b-0"
+    displayName: "SubMenuTriggerButton__StyledButton",
+    componentId: "bvw24f-0"
   })(function (_ref) {
     var isOpen = _ref.isOpen,
         theme = _ref.theme;
@@ -44689,7 +44704,9 @@
     var menuData = _a.menuData,
         name = _a.name,
         onItemClick = _a.onItemClick,
-        props = __rest(_a, ["menuData", "name", "onItemClick"]);
+        _trigger = _a.trigger,
+        layer = _a.layer,
+        props = __rest(_a, ["menuData", "name", "onItemClick", "trigger", "layer"]);
 
     return (
       /*#__PURE__*/
@@ -44700,24 +44717,37 @@
         showArrow: false,
         triggerTogglesMenuState: false
       }, props, {
-        dropdownMenuContainerEventHandlers: function dropdownMenuContainerEventHandlers(_ref2) {
-          var openMenu = _ref2.openMenu,
-              closeMenu = _ref2.closeMenu;
+        dropdownMenuContainerEventHandlers: function dropdownMenuContainerEventHandlers(_ref) {
+          var openMenu = _ref.openMenu,
+              closeMenu = _ref.closeMenu;
           return {
             onMouseEnter: openMenu,
             onMouseLeave: closeMenu
           };
         },
-        trigger: function trigger(_ref3) {
-          var closeMenu = _ref3.closeMenu,
-              openMenu = _ref3.openMenu,
-              isOpen = _ref3.isOpen;
-          return /*#__PURE__*/React__default['default'].createElement(SubMenuTriggerButton, {
+        trigger: function trigger(_ref2) {
+          var closeMenu = _ref2.closeMenu,
+              openMenu = _ref2.openMenu,
+              isOpen = _ref2.isOpen;
+
+          var defaultRender = function defaultRender() {
+            return /*#__PURE__*/React__default['default'].createElement(SubMenuTriggerButton, {
+              isOpen: isOpen,
+              name: name,
+              onMouseEnter: openMenu,
+              onMouseLeave: closeMenu
+            });
+          };
+
+          var triggerProps = {
+            size: "medium",
+            closeMenu: closeMenu,
+            openMenu: openMenu,
             isOpen: isOpen,
-            name: name,
-            onMouseEnter: openMenu,
-            onMouseLeave: closeMenu
-          });
+            defaultRender: defaultRender,
+            layer: layer
+          };
+          return _trigger ? _trigger(triggerProps) : defaultRender();
         }
       }), /*#__PURE__*/React__default['default'].createElement("ul", {
         style: {
@@ -44725,15 +44755,15 @@
           margin: "0",
           padding: "0"
         }
-      }, renderSubMenuItems(menuData, onItemClick, SubMenuTrigger)))
+      }, renderSubMenuItems(menuData, onItemClick, SubMenuTrigger, layer + 1)))
     );
   };
 
   SubMenuTrigger.displayName = "SubMenuTrigger";
 
   var StyledButton = styled__default['default'].button.withConfig({
-    displayName: "MenuTrigger__StyledButton",
-    componentId: "sc-6k53fy-0"
+    displayName: "MenuTriggerButton__StyledButton",
+    componentId: "sc-9xtkk1-0"
   })(function (_ref) {
     var _ref$color = _ref.color,
         color = _ref$color === void 0 ? "white" : _ref$color,
@@ -44804,7 +44834,9 @@
         hoverColor = _a.hoverColor,
         hoverBackground = _a.hoverBackground,
         ariaLabel = _a["aria-label"],
-        props = __rest(_a, ["menuData", "name", "color", "hoverColor", "hoverBackground", "aria-label"]);
+        _trigger = _a.trigger,
+        layer = _a.layer,
+        props = __rest(_a, ["menuData", "name", "color", "hoverColor", "hoverBackground", "aria-label", "trigger", "layer"]);
 
     var dropdownMinWidth = "auto";
 
@@ -44814,6 +44846,13 @@
       return popperData;
     };
 
+    var triggerProps = {
+      color: color,
+      hoverColor: hoverColor,
+      hoverBackground: hoverBackground,
+      name: name,
+      "aria-label": ariaLabel
+    };
     return (
       /*#__PURE__*/
       // @ts-ignore
@@ -44834,16 +44873,18 @@
           }
         },
         trigger: function trigger() {
-          return /*#__PURE__*/React__default['default'].createElement(MenuTriggerButton, {
-            color: color,
-            hoverColor: hoverColor,
-            hoverBackground: hoverBackground,
-            name: name,
-            "aria-label": ariaLabel
-          });
+          var defaultRender = function defaultRender() {
+            return /*#__PURE__*/React__default['default'].createElement(MenuTriggerButton, Object.assign({}, triggerProps));
+          };
+
+          return _trigger ? _trigger({
+            size: "medium",
+            defaultRender: defaultRender,
+            layer: layer
+          }) : defaultRender();
         }
-      }), function (_ref2) {
-        var closeMenu = _ref2.closeMenu;
+      }), function (_ref) {
+        var closeMenu = _ref.closeMenu;
         return /*#__PURE__*/React__default['default'].createElement("ul", {
           style: {
             listStyle: "none",
@@ -44854,7 +44895,7 @@
         }, renderSubMenuItems(menuData, function (e) {
           closeMenu(e);
           e.stopPropagation();
-        }, SubMenuTrigger));
+        }, SubMenuTrigger, layer + 1));
       })
     );
   };
@@ -44917,7 +44958,7 @@
     alignItems: "center"
   });
 
-  var renderMenuTrigger = function renderMenuTrigger(menuItem, themeColorObject) {
+  var renderMenuTrigger = function renderMenuTrigger(menuItem, themeColorObject, layer) {
     var _a;
 
     return /*#__PURE__*/React__default['default'].createElement("div", {
@@ -44925,7 +44966,9 @@
     }, /*#__PURE__*/React__default['default'].createElement(MenuTrigger, Object.assign({
       name: menuItem.name,
       "aria-label": menuItem.ariaLabel,
-      menuData: menuItem.items
+      menuData: menuItem.items,
+      trigger: menuItem.trigger,
+      layer: layer
     }, themeColorObject)));
   };
 
@@ -44941,12 +44984,15 @@
     }, themeColorObject), menuItem.name));
   };
 
-  var renderCustom$1 = function renderCustom(menuItem) {
+  var renderCustom$1 = function renderCustom(menuItem, _themeColorObject, layer) {
     var _a;
 
     return /*#__PURE__*/React__default['default'].createElement("div", {
       key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name
-    }, menuItem.render());
+    }, menuItem.render({
+      size: "medium",
+      layer: layer
+    }));
   };
 
   var renderText$1 = function renderText(menuItem, themeColorObject) {
@@ -44969,8 +45015,8 @@
     }
   };
 
-  var renderMenuItem = function renderMenuItem(menuItem, themeColorObject) {
-    return getRenderFunction$1(menuItem)(menuItem, themeColorObject);
+  var renderMenuItem = function renderMenuItem(menuItem, themeColorObject, layer) {
+    return getRenderFunction$1(menuItem)(menuItem, themeColorObject, layer);
   };
 
   var BaseDesktopMenu = function BaseDesktopMenu(_a) {
@@ -44979,7 +45025,7 @@
         props = __rest(_a, ["menuData", "themeColorObject"]);
 
     return /*#__PURE__*/React__default['default'].createElement(Nav$1, Object.assign({}, props), menuData.map(function (menuItem) {
-      return renderMenuItem(menuItem, themeColorObject);
+      return renderMenuItem(menuItem, themeColorObject, 0);
     }));
   };
 
@@ -45073,9 +45119,7 @@
       fontSize: theme.fontSizes.large,
       fontWeight: theme.fontWeights.medium,
       lineHeight: theme.lineHeights.heading3,
-      marginBottom: theme.space.x1,
-      padding: theme.space.x1 + " " + theme.space.x3,
-      paddingLeft: getPaddingLeft(0)
+      padding: theme.space.x1 + " " + theme.space.x3
     };
   };
 
@@ -45105,7 +45149,7 @@
         opacity: ".5"
       }
     });
-  });
+  }, addStyledProps);
   var TopLevelText = styled__default['default'](Text).withConfig({
     displayName: "MobileMenu__TopLevelText",
     componentId: "sc-18t6zrc-2"
@@ -45114,27 +45158,10 @@
     return Object.assign(Object.assign({}, getSharedStyles(theme)), {
       color: theme.colors.blackBlue
     });
-  });
-  var ChildIndentingLi = styled__default['default'].li.withConfig({
-    displayName: "MobileMenu__ChildIndentingLi",
-    componentId: "sc-18t6zrc-3"
-  })(function (_ref4) {
-    var _ref5;
-
-    var layer = _ref4.layer,
-        theme = _ref4.theme;
-    return _ref5 = {
-      marginBottom: theme.space.x1
-    }, _ref5["> " + DropdownButton + ", > " + DropdownLink] = {
-      // eslint-disable-next-line no-mixed-operators
-      paddingLeft: 24 * layer + 20 + "px"
-    }, _ref5["> " + DropdownText] = {
-      paddingLeft: getPaddingLeft(layer)
-    }, _ref5;
-  });
+  }, addStyledProps);
   var SubMenuItemsList = styled__default['default'].ul.withConfig({
     displayName: "MobileMenu__SubMenuItemsList",
-    componentId: "sc-18t6zrc-4"
+    componentId: "sc-18t6zrc-3"
   })({
     listStyle: "none",
     paddingLeft: "0",
@@ -45144,25 +45171,31 @@
   var renderMenuLink = function renderMenuLink(menuItem, linkOnClick, themeColorObject, layer) {
     var _a;
 
-    var MenuLink = layer === 0 ? TopLevelLink : DropdownLink;
-    return /*#__PURE__*/React__default['default'].createElement(ChildIndentingLi, {
-      layer: layer,
-      key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name
-    }, /*#__PURE__*/React__default['default'].createElement(MenuLink, {
+    var sharedLinkProps = {
       onClick: linkOnClick,
       href: menuItem.href,
       as: menuItem.as,
-      to: menuItem.to
-    }, menuItem.name));
+      to: menuItem.to,
+      // eslint-disable-next-line no-mixed-operators
+      pl: layer === 0 ? getPaddingLeft(layer) : 24 * layer + 20 + "px",
+      mb: "x1"
+    };
+    var MenuLink = layer === 0 ? TopLevelLink : DropdownLink;
+    return /*#__PURE__*/React__default['default'].createElement("li", {
+      key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name
+    }, /*#__PURE__*/React__default['default'].createElement(MenuLink, Object.assign({}, sharedLinkProps), menuItem.name));
   };
 
   var renderCustom = function renderCustom(menuItem, linkOnClick, themeColorObject, layer) {
     var _a;
 
-    return /*#__PURE__*/React__default['default'].createElement(ChildIndentingLi, {
-      layer: layer,
+    return /*#__PURE__*/React__default['default'].createElement("li", {
       key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name
-    }, menuItem.render(linkOnClick, layer));
+    }, menuItem.render({
+      size: "small",
+      onItemClick: linkOnClick,
+      layer: layer
+    }));
   };
 
   var renderSubMenu = function renderSubMenu(menuItem, linkOnClick, themeColorObject, layer) {
@@ -45185,10 +45218,12 @@
     var _a;
 
     var MenuText = layer === 0 ? TopLevelText : DropdownText;
-    return /*#__PURE__*/React__default['default'].createElement(ChildIndentingLi, {
-      layer: layer,
+    return /*#__PURE__*/React__default['default'].createElement("li", {
       key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name
-    }, /*#__PURE__*/React__default['default'].createElement(MenuText, null, menuItem.name));
+    }, /*#__PURE__*/React__default['default'].createElement(MenuText, {
+      pl: getPaddingLeft(layer),
+      mb: "x1"
+    }, menuItem.name));
   };
 
   var getRenderFunction = function getRenderFunction(menuItem) {
@@ -45216,45 +45251,54 @@
 
   var getSubMenuHeading = function getSubMenuHeading(layer, name) {
     return layer === 0 ? /*#__PURE__*/React__default['default'].createElement(TopLevelText, {
-      as: "h3"
+      as: "h3",
+      mb: "x1"
     }, name) : /*#__PURE__*/React__default['default'].createElement(DropdownText, {
       mb: "x1",
-      style: {
-        paddingLeft: getPaddingLeft(layer)
-      }
+      pl: getPaddingLeft(layer)
     }, name);
   };
 
-  var SubMenu = function SubMenu(_ref6) {
-    var menuItem = _ref6.menuItem,
-        linkOnClick = _ref6.linkOnClick,
-        themeColorObject = _ref6.themeColorObject,
-        layer = _ref6.layer;
-    return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, getSubMenuHeading(layer, menuItem.name), /*#__PURE__*/React__default['default'].createElement(SubMenuItemsList, null, renderMenuItems(menuItem.items, linkOnClick, themeColorObject, layer + 1)));
+  var SubMenu = function SubMenu(_ref4) {
+    var menuItem = _ref4.menuItem,
+        linkOnClick = _ref4.linkOnClick,
+        themeColorObject = _ref4.themeColorObject,
+        layer = _ref4.layer;
+
+    var defaultRender = function defaultRender() {
+      return getSubMenuHeading(layer, menuItem.name);
+    };
+
+    return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, menuItem.trigger ? menuItem.trigger({
+      size: "small",
+      defaultRender: defaultRender,
+      layer: layer
+    }) : defaultRender(), /*#__PURE__*/React__default['default'].createElement(SubMenuItemsList, null, renderMenuItems(menuItem.items, linkOnClick, themeColorObject, layer + 1)));
   };
 
   var Menu$1 = styled__default['default'].ul.withConfig({
     displayName: "MobileMenu__Menu",
-    componentId: "sc-18t6zrc-5"
-  })(function (_ref7) {
-    var _ref8;
+    componentId: "sc-18t6zrc-4"
+  })(function (_ref5) {
+    var _ref6;
 
-    var theme = _ref7.theme;
-    return _ref8 = {
+    var theme = _ref5.theme;
+    return _ref6 = {
+      listStyle: "none",
       margin: "0",
       padding: theme.space.x1 + " 0",
       zIndex: theme.zIndices.content,
       width: "100%",
       color: theme.colors.white
-    }, _ref8["" + Heading3] = {
+    }, _ref6["" + Heading3] = {
       padding: theme.space.x1 + " 0 " + theme.space.x1 + " " + theme.space.x3
-    }, _ref8;
+    }, _ref6;
   });
   var Nav = styled__default['default'].nav.withConfig({
     displayName: "MobileMenu__Nav",
-    componentId: "sc-18t6zrc-6"
-  })(function (_ref9) {
-    var backgroundColor = _ref9.backgroundColor;
+    componentId: "sc-18t6zrc-5"
+  })(function (_ref7) {
+    var backgroundColor = _ref7.backgroundColor;
     return {
       backgroundColor: backgroundColor
     };
@@ -45292,7 +45336,7 @@
 
   var MobileMenu = styled__default['default'](BaseMobileMenu).withConfig({
     displayName: "MobileMenu",
-    componentId: "sc-18t6zrc-7"
+    componentId: "sc-18t6zrc-6"
   })(display);
 
   var borderStyle = "1px solid #e4e7eb";
@@ -52791,6 +52835,7 @@
   exports.Toggle = ToggleComponent;
   exports.Tooltip = Tooltip;
   exports.TruncatedText = TruncatedText;
+  exports.addStyledProps = addStyledProps;
   exports.theme = Theme;
   exports.useWindowDimensions = useWindowDimensions;