@mezzanine-ui/react 0.11.0 → 0.11.2

package/Navigation/Navigation.d.ts

@@ -3,7 +3,7 @@ import { NavigationOrientation } from '@mezzanine-ui/core/navigation';
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
 import { NavigationItemProps } from './NavigationItem';
 import { NavigationSubMenuProps } from './NavigationSubMenu';
-export declare type NavigationChild = ReactElement<NavigationItemProps | NavigationSubMenuProps>;
+export declare type NavigationChild = ReactElement<NavigationItemProps | NavigationSubMenuProps> | null;
 export declare type NavigationChildren = NavigationChild | NavigationChild[];
 export interface NavigationProps extends Omit<NativeElementPropsWithoutKeyAndRef<'ul'>, 'onClick'> {
     /**

package/Navigation/Navigation.js

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef, Children, cloneElement } from 'react';
+import { forwardRef, useCallback, Children, cloneElement, useMemo } from 'react';
 import { navigationClasses } from '@mezzanine-ui/core/navigation';
 import NavigationItem from './NavigationItem.js';
 import NavigationSubMenu from './NavigationSubMenu.js';
@@ -8,41 +8,48 @@ import cx from 'clsx';
 
 const Navigation = forwardRef((props, ref) => {
     const { activeKey, children = [], className, onClick, orientation = 'horizontal', ...rest } = props;
-    const ItemChildren = Children.map(children, (child) => {
-        switch (child.type) {
-            case NavigationItem: {
-                const itemChild = child;
-                return cloneElement(itemChild, {
-                    active: itemChild.props.active || activeKey === itemChild.key,
-                    eventKey: itemChild.key,
-                    onClick: itemChild.props.onClick || onClick,
-                });
-            }
-            case NavigationSubMenu: {
-                const subMenuChild = child;
-                const subMenuChildren = child.props.children;
-                let subMenuActive = false;
-                const groupChildren = Children
-                    .map(subMenuChildren, (groupChild) => {
-                    const active = activeKey === groupChild.key || groupChild.props.active;
-                    if (active) {
-                        subMenuActive = true;
-                    }
-                    return cloneElement(groupChild, {
-                        active,
-                        eventKey: groupChild.key,
-                        onClick: groupChild.props.onClick || onClick,
+    const renderItemChildren = useCallback((parsedChildren) => (Children.map(parsedChildren, (child) => {
+        var _a, _b;
+        if (child) {
+            switch (child.type) {
+                case NavigationItem: {
+                    const itemChild = child;
+                    return cloneElement(itemChild, {
+                        active: itemChild.props.active || activeKey === itemChild.key,
+                        eventKey: itemChild.key,
+                        onClick: itemChild.props.onClick || onClick,
+                    });
+                }
+                case NavigationSubMenu: {
+                    const subMenuChild = child;
+                    const subMenuChildren = child.props.children;
+                    let subMenuActive = false;
+                    const groupChildren = Children
+                        .map(subMenuChildren, (groupChild) => {
+                        const active = activeKey === groupChild.key || groupChild.props.active;
+                        if (active) {
+                            subMenuActive = true;
+                        }
+                        return cloneElement(groupChild, {
+                            active,
+                            eventKey: groupChild.key,
+                            onClick: groupChild.props.onClick || onClick,
+                        });
                     });
-                });
-                return cloneElement(subMenuChild, {
-                    active: subMenuChild.props.active || subMenuActive,
-                }, groupChildren);
+                    return cloneElement(subMenuChild, {
+                        active: subMenuChild.props.active || subMenuActive,
+                    }, groupChildren);
+                }
+                default:
+                    return renderItemChildren(((_b = (_a = child.props) === null || _a === void 0 ? void 0 : _a.children) !== null && _b !== void 0 ? _b : []));
             }
         }
-    });
-    return (jsx("ul", { ...rest, ref: ref, className: cx(navigationClasses.host, navigationClasses[orientation], className), children: jsx(NavigationContext.Provider, { value: {
-                orientation,
-            }, children: ItemChildren }) }));
+        return null;
+    })), [activeKey, onClick]);
+    const context = useMemo(() => ({
+        orientation,
+    }), [orientation]);
+    return (jsx("ul", { ...rest, ref: ref, className: cx(navigationClasses.host, navigationClasses[orientation], className), children: jsx(NavigationContext.Provider, { value: context, children: renderItemChildren(children) }) }));
 });
 var Navigation$1 = Navigation;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mezzanine-ui/react",
-  "version": "0.11.0",
+  "version": "0.11.2",
   "description": "React components for mezzanine-ui",
   "author": "Mezzanine",
   "repository": {
@@ -31,9 +31,9 @@
     "react-dom": "^18.2.0"
   },
   "dependencies": {
-    "@mezzanine-ui/core": "^0.10.5",
-    "@mezzanine-ui/icons": "^0.10.2",
-    "@mezzanine-ui/system": "^0.7.0",
+    "@mezzanine-ui/core": "^0.11.2",
+    "@mezzanine-ui/icons": "^0.11.2",
+    "@mezzanine-ui/system": "^0.11.2",
     "@popperjs/core": "^2.11.5",
     "@types/react-transition-group": "^4.4.5",
     "clsx": "^1.1.1",