@longline/aqua-ui 1.0.220 → 1.0.221

package/modules/MainMenu/MainMenu.d.ts

@@ -6,9 +6,15 @@ interface IMainMenuProps {
     children?: React.ReactNode;
 }
 /**
- * A `MainMenu` is always positioned on the left side of its container, and fills it
- * vertically.
+ * A `MainMenu` is always positioned on the left side of its container, and
+ * fills it vertically.
  * It requires react-spring/web to work.
+ *
+ * A `MainMenu` contains `MainMenu.Item` components as children. Each child
+ * can have a `secondary` prop, which will place it in the secondary section
+ * of the main menu. It is possible to wrap the `MainMenu.Item` components
+ * in other components (for example, a component that conditionally renders
+ * the menu item), and the secondary prop will still be detected.
  */
 declare const MainMenu: {
     (props: IMainMenuProps): React.JSX.Element;

package/modules/MainMenu/MainMenu.js

@@ -16,24 +16,67 @@ var __assign = (this && this.__assign) || function () {
 import * as React from 'react';
 import styled from 'styled-components';
 import { Item } from './Item';
+function containsSecondaryMenuItem(child) {
+    var found = false;
+    React.Children.forEach(child, function (c) {
+        if (!React.isValidElement(c))
+            return;
+        if (c.type === MainMenu.Item && c.props.secondary) {
+            found = true;
+        }
+        else if (c.props.children) {
+            if (containsSecondaryMenuItem(c.props.children)) {
+                found = true;
+            }
+        }
+    });
+    return found;
+}
 var MainMenuBase = function (props) {
+    var directChildren = React.Children.toArray(props.children);
+    var primaryItems = [];
+    var secondaryItems = [];
+    // Go through all direct children, and determine whether they go in 
+    // the primary or secondary menu section. This is done by checking if the 
+    // child contains a MainMenu.Item, and if that item is secondary. Items 
+    // are detected at any depth.
+    directChildren.forEach(function (child) {
+        if (containsSecondaryMenuItem(child)) {
+            secondaryItems.push(child);
+        }
+        else {
+            primaryItems.push(child);
+        }
+    });
     return (React.createElement("div", { className: props.className },
-        React.createElement(Top, null, React.Children.toArray(props.children).filter(function (c) { return !c.props.secondary; })),
-        React.createElement(Bottom, null, React.Children.toArray(props.children).filter(function (c) { return c.props.secondary; }))));
+        React.createElement(Top, null, primaryItems),
+        React.createElement(Bottom, null, secondaryItems)));
 };
 var Top = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 16px;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 16px;\n"])));
 var Bottom = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: end;\n  gap: 16px;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: end;\n  gap: 16px;\n"])));
 var MainMenuStyled = styled(MainMenuBase)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  // Position and size:\n  position: relative;\n  box-sizing: border-box;\n  z-index: 1;\n  height: 100%;\n  width: 80px;\n\n  // Appearance:\n  padding-bottom: 32px;\n  background-image: linear-gradient(#457298, #2C4253);\n\n  // Content:\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  pointer-events: auto;\n"], ["\n  // Position and size:\n  position: relative;\n  box-sizing: border-box;\n  z-index: 1;\n  height: 100%;\n  width: 80px;\n\n  // Appearance:\n  padding-bottom: 32px;\n  background-image: linear-gradient(#457298, #2C4253);\n\n  // Content:\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  pointer-events: auto;\n"
     /**
-     * A `MainMenu` is always positioned on the left side of its container, and fills it
-     * vertically.
+     * A `MainMenu` is always positioned on the left side of its container, and
+     * fills it vertically.
      * It requires react-spring/web to work.
+     *
+     * A `MainMenu` contains `MainMenu.Item` components as children. Each child
+     * can have a `secondary` prop, which will place it in the secondary section
+     * of the main menu. It is possible to wrap the `MainMenu.Item` components
+     * in other components (for example, a component that conditionally renders
+     * the menu item), and the secondary prop will still be detected.
      */
 ])));
 /**
- * A `MainMenu` is always positioned on the left side of its container, and fills it
- * vertically.
+ * A `MainMenu` is always positioned on the left side of its container, and
+ * fills it vertically.
  * It requires react-spring/web to work.
+ *
+ * A `MainMenu` contains `MainMenu.Item` components as children. Each child
+ * can have a `secondary` prop, which will place it in the secondary section
+ * of the main menu. It is possible to wrap the `MainMenu.Item` components
+ * in other components (for example, a component that conditionally renders
+ * the menu item), and the secondary prop will still be detected.
  */
 var MainMenu = function (props) { return React.createElement(MainMenuStyled, __assign({}, props)); };
 MainMenu.displayName = 'MainMenu';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@longline/aqua-ui",
-  "version": "1.0.220",
+  "version": "1.0.221",
   "description": "AquaUI",
   "author": "Alexander van Oostenrijk / Longline Environment",
   "license": "Commercial",