@xyo-network/react-appbar 2.35.2 → 2.35.3

package/dist/esm/components/SiteMenu/MenuIcon.d.ts

@@ -1,7 +1,6 @@
 import { TypographyExProps } from '@xyo-network/react-shared';
 import { ReactNode } from 'react';
-import { SiteMenuListItemBase } from './lib';
-export interface MenuIconProps extends SiteMenuListItemBase, TypographyExProps {
+export interface MenuIconProps extends TypographyExProps {
     icon?: ReactNode;
 }
 export declare const MenuIcon: React.FC<MenuIconProps>;

package/dist/esm/components/SiteMenu/MenuIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MenuIcon.d.ts","sourceRoot":"","sources":["../../../../src/components/SiteMenu/MenuIcon.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAA;AAC7D,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAA;AAE5C,MAAM,WAAW,aAAc,SAAQ,oBAAoB,EAAE,iBAAiB;IAC5E,IAAI,CAAC,EAAE,SAAS,CAAA;CACjB;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAM5C,CAAA"}
+{"version":3,"file":"MenuIcon.d.ts","sourceRoot":"","sources":["../../../../src/components/SiteMenu/MenuIcon.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAA;AAC7D,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,MAAM,WAAW,aAAc,SAAQ,iBAAiB;IACtD,IAAI,CAAC,EAAE,SAAS,CAAA;CACjB;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAM5C,CAAA"}

package/dist/esm/components/SiteMenu/MenuIcon.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Typography } from '@mui/material';
-export const MenuIcon = ({ iconOnly, icon, ...props }) => {
-    return (_jsx(Typography, { mr: iconOnly ? 0 : 1, display: "flex", variant: "caption", ...props, children: icon }));
+export const MenuIcon = ({ icon, ...props }) => {
+    return (_jsx(Typography, { display: "flex", variant: "caption", ...props, children: icon }));
 };
 //# sourceMappingURL=MenuIcon.js.map

package/dist/esm/components/SiteMenu/MenuIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuIcon.js","sourceRoot":"","sources":["../../../../src/components/SiteMenu/MenuIcon.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAU1C,MAAM,CAAC,MAAM,QAAQ,GAA4B,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAChF,OAAO,CACL,KAAC,UAAU,IAAC,EAAE,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,OAAO,EAAC,MAAM,EAAC,OAAO,EAAC,SAAS,KAAK,KAAK,YACzE,IAAI,GACM,CACd,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"MenuIcon.js","sourceRoot":"","sources":["../../../../src/components/SiteMenu/MenuIcon.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAQ1C,MAAM,CAAC,MAAM,QAAQ,GAA4B,CAAC,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACtE,OAAO,CACL,KAAC,UAAU,IAAC,OAAO,EAAC,MAAM,EAAC,OAAO,EAAC,SAAS,KAAK,KAAK,YACnD,IAAI,GACM,CACd,CAAA;AACH,CAAC,CAAA"}

package/dist/esm/components/SiteMenu/MenuItems.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItems.d.ts","sourceRoot":"","sources":["../../../../src/components/SiteMenu/MenuItems.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAA;AAChE,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAA;AACjE,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAA;AAErC,OAAO,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAA;AAM5C,MAAM,WAAW,qBAAsB,SAAQ,oBAAoB,EAAE,aAAa;IAChF,OAAO,EAAE,iBAAiB,CAAC,SAAS,CAAC,CAAA;IACrC,EAAE,CAAC,EAAE,EAAE,CAAA;IACP,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,aAAa,CAAC,EAAE,qBAAqB,CAAC,SAAS,CAAC,CAAA;CACjD;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAU5D,CAAA"}
+{"version":3,"file":"MenuItems.d.ts","sourceRoot":"","sources":["../../../../src/components/SiteMenu/MenuItems.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAA;AAChE,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAA;AACjE,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAA;AAErC,OAAO,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAA;AAM5C,MAAM,WAAW,qBAAsB,SAAQ,oBAAoB,EAAE,aAAa;IAChF,OAAO,EAAE,iBAAiB,CAAC,SAAS,CAAC,CAAA;IACrC,EAAE,CAAC,EAAE,EAAE,CAAA;IACP,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,aAAa,CAAC,EAAE,qBAAqB,CAAC,SAAS,CAAC,CAAA;CACjD;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAmB5D,CAAA"}

package/dist/esm/components/SiteMenu/MenuItems.js

@@ -3,7 +3,7 @@ import { MenuIcon } from './MenuIcon';
 import { MenuListItem } from './MenuListItem';
 import { MenuListItemButtonEx } from './MenuListItemButtonEx';
 import { MenuListItemText } from './MenuListItemText';
-export const SiteMenuListItem = ({ style, children, iconOnly, icon, primary, onButtonClick, ...props }) => {
-    return (_jsxs(MenuListItem, { style: style, iconOnly: iconOnly, ...props, children: [_jsxs(MenuListItemButtonEx, { iconOnly: iconOnly, onClick: onButtonClick, children: [_jsx(MenuIcon, { icon: icon, iconOnly: iconOnly }), _jsx(MenuListItemText, { primary: primary, iconOnly: iconOnly })] }), children] }));
+export const SiteMenuListItem = ({ style, children, iconOnly, collapseEnd, icon, primary, onButtonClick, ...props }) => {
+    return (_jsxs(MenuListItem, { style: style, iconOnly: iconOnly, ...props, children: [_jsxs(MenuListItemButtonEx, { iconOnly: iconOnly, onClick: onButtonClick, collapseEnd: collapseEnd, children: [_jsx(MenuIcon, { icon: icon }), _jsx(MenuListItemText, { primary: primary, iconOnly: iconOnly })] }), children] }));
 };
 //# sourceMappingURL=MenuItems.js.map

package/dist/esm/components/SiteMenu/MenuItems.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItems.js","sourceRoot":"","sources":["../../../../src/components/SiteMenu/MenuItems.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAA;AAC7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AASrD,MAAM,CAAC,MAAM,gBAAgB,GAAoC,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,aAAa,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACzI,OAAO,CACL,MAAC,YAAY,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,KAAM,KAAK,aACvD,MAAC,oBAAoB,IAAC,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,aAAa,aAC9D,KAAC,QAAQ,IAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,GAAI,EAC5C,KAAC,gBAAgB,IAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,GAAI,IACrC,EACtB,QAAQ,IACI,CAChB,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"MenuItems.js","sourceRoot":"","sources":["../../../../src/components/SiteMenu/MenuItems.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAA;AAC7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AASrD,MAAM,CAAC,MAAM,gBAAgB,GAAoC,CAAC,EAChE,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,IAAI,EACJ,OAAO,EACP,aAAa,EACb,GAAG,KAAK,EACT,EAAE,EAAE;IACH,OAAO,CACL,MAAC,YAAY,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,KAAM,KAAK,aACvD,MAAC,oBAAoB,IAAC,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,WAAW,aACxF,KAAC,QAAQ,IAAC,IAAI,EAAE,IAAI,GAAI,EACxB,KAAC,gBAAgB,IAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,GAAI,IACrC,EACtB,QAAQ,IACI,CAChB,CAAA;AACH,CAAC,CAAA"}

package/dist/esm/components/SiteMenu/MenuListItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MenuListItem.d.ts","sourceRoot":"","sources":["../../../../src/components/SiteMenu/MenuListItem.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAY,aAAa,EAAE,MAAM,eAAe,CAAA;AAEvD,OAAO,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAA;AAE5C,MAAM,WAAW,iBAAkB,SAAQ,oBAAoB,EAAE,aAAa;CAAG;AAEjF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAUpD,CAAA"}
+{"version":3,"file":"MenuListItem.d.ts","sourceRoot":"","sources":["../../../../src/components/SiteMenu/MenuListItem.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAY,aAAa,EAAE,MAAM,eAAe,CAAA;AAEvD,OAAO,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAA;AAE5C,MAAM,WAAW,iBAAkB,SAAQ,oBAAoB,EAAE,aAAa;CAAG;AAEjF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CASpD,CAAA"}

package/dist/esm/components/SiteMenu/MenuListItem.js

@@ -2,9 +2,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { ListItem } from '@mui/material';
 export const MenuListItem = ({ children, style, iconOnly, ...props }) => {
     const listItemStyles = {
-        display: iconOnly ? 'inline-flex' : 'block',
         width: iconOnly ? 'auto' : '100%',
     };
-    return (_jsx(ListItem, { style: { ...listItemStyles, ...style }, ...props, children: children }));
+    return (_jsx(ListItem, { style: { display: 'block', ...listItemStyles, ...style }, ...props, children: children }));
 };
 //# sourceMappingURL=MenuListItem.js.map

package/dist/esm/components/SiteMenu/MenuListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuListItem.js","sourceRoot":"","sources":["../../../../src/components/SiteMenu/MenuListItem.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAiB,MAAM,eAAe,CAAA;AAMvD,MAAM,CAAC,MAAM,YAAY,GAAgC,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACnG,MAAM,cAAc,GAAG;QACrB,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO;QAC3C,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;KAClC,CAAA;IACD,OAAO,CACL,KAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,GAAG,cAAc,EAAE,GAAG,KAAK,EAAE,KAAM,KAAK,YACxD,QAAQ,GACA,CACZ,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"MenuListItem.js","sourceRoot":"","sources":["../../../../src/components/SiteMenu/MenuListItem.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAiB,MAAM,eAAe,CAAA;AAMvD,MAAM,CAAC,MAAM,YAAY,GAAgC,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACnG,MAAM,cAAc,GAAG;QACrB,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;KAClC,CAAA;IACD,OAAO,CACL,KAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,cAAc,EAAE,GAAG,KAAK,EAAE,KAAM,KAAK,YAC1E,QAAQ,GACA,CACZ,CAAA;AACH,CAAC,CAAA"}

package/dist/esm/components/SiteMenu/MenuListItemButtonEx.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MenuListItemButtonEx.d.ts","sourceRoot":"","sources":["../../../../src/components/SiteMenu/MenuListItemButtonEx.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAoB,qBAAqB,EAAE,MAAM,2BAA2B,CAAA;AAEnF,OAAO,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAA;AAE5C,MAAM,WAAW,yBAA0B,SAAQ,oBAAoB,EAAE,qBAAqB;CAAG;AAEjG,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAOpE,CAAA"}
+{"version":3,"file":"MenuListItemButtonEx.d.ts","sourceRoot":"","sources":["../../../../src/components/SiteMenu/MenuListItemButtonEx.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAoB,qBAAqB,EAAE,MAAM,2BAA2B,CAAA;AAEnF,OAAO,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAA;AAE5C,MAAM,WAAW,yBAA0B,SAAQ,oBAAoB,EAAE,qBAAqB;CAAG;AAEjG,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAQpE,CAAA"}

package/dist/esm/components/SiteMenu/MenuListItemButtonEx.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ListItemButtonEx } from '@xyo-network/react-shared';
-export const MenuListItemButtonEx = ({ iconOnly, sx, children, ...props }) => {
-    const listItemButtonSx = iconOnly ? { borderRadius: '50%', display: 'inline-flex' } : {};
-    return (_jsx(ListItemButtonEx, { sx: { ...listItemButtonSx, ...sx }, ...props, children: children }));
+export const MenuListItemButtonEx = ({ iconOnly, collapseEnd, sx, children, ...props }) => {
+    const listItemButtonSx = iconOnly ? { borderRadius: '50%', display: 'inline-flex', flexGrow: 0 } : {};
+    const spacingSx = collapseEnd ? { columnGap: 0 } : { columnGap: 1.5 };
+    return (_jsx(ListItemButtonEx, { sx: { ...listItemButtonSx, ...spacingSx, ...sx }, ...props, children: children }));
 };
 //# sourceMappingURL=MenuListItemButtonEx.js.map

package/dist/esm/components/SiteMenu/MenuListItemButtonEx.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuListItemButtonEx.js","sourceRoot":"","sources":["../../../../src/components/SiteMenu/MenuListItemButtonEx.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,gBAAgB,EAAyB,MAAM,2BAA2B,CAAA;AAMnF,MAAM,CAAC,MAAM,oBAAoB,GAAwC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAChH,MAAM,gBAAgB,GAAG,QAAQ,CAAC,CAAC,CAAC,EAAE,YAAY,EAAE,KAAK,EAAE,OAAO,EAAE,aAAa,EAAE,CAAC,CAAC,CAAC,EAAE,CAAA;IACxF,OAAO,CACL,KAAC,gBAAgB,IAAC,EAAE,EAAE,EAAE,GAAG,gBAAgB,EAAE,GAAG,EAAE,EAAE,KAAM,KAAK,YAC5D,QAAQ,GACQ,CACpB,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"MenuListItemButtonEx.js","sourceRoot":"","sources":["../../../../src/components/SiteMenu/MenuListItemButtonEx.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,gBAAgB,EAAyB,MAAM,2BAA2B,CAAA;AAMnF,MAAM,CAAC,MAAM,oBAAoB,GAAwC,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,EAAE,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAC7H,MAAM,gBAAgB,GAAG,QAAQ,CAAC,CAAC,CAAC,EAAE,YAAY,EAAE,KAAK,EAAE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAA;IACrG,MAAM,SAAS,GAAG,WAAW,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE,CAAA;IACrE,OAAO,CACL,KAAC,gBAAgB,IAAC,EAAE,EAAE,EAAE,GAAG,gBAAgB,EAAE,GAAG,SAAS,EAAE,GAAG,EAAE,EAAE,KAAM,KAAK,YAC1E,QAAQ,GACQ,CACpB,CAAA;AACH,CAAC,CAAA"}

package/dist/esm/components/SiteMenu/MenuListItemText.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MenuListItemText.d.ts","sourceRoot":"","sources":["../../../../src/components/SiteMenu/MenuListItemText.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAgB,iBAAiB,EAAE,MAAM,eAAe,CAAA;AAE/D,OAAO,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAA;AAE5C,MAAM,WAAW,qBAAsB,SAAQ,oBAAoB,EAAE,iBAAiB;CAAG;AAEzF,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAG5D,CAAA"}
+{"version":3,"file":"MenuListItemText.d.ts","sourceRoot":"","sources":["../../../../src/components/SiteMenu/MenuListItemText.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAgB,iBAAiB,EAAE,MAAM,eAAe,CAAA;AAE/D,OAAO,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAA;AAE5C,MAAM,WAAW,qBAAsB,SAAQ,oBAAoB,EAAE,iBAAiB;CAAG;AAEzF,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAc5D,CAAA"}

package/dist/esm/components/SiteMenu/MenuListItemText.js

@@ -1,7 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ListItemText } from '@mui/material';
 export const MenuListItemText = ({ iconOnly, sx, ...props }) => {
-    const listItemTextSxProps = iconOnly ? { visibility: 'hidden', width: 0, ...sx } : {};
-    return _jsx(ListItemText, { sx: { ...listItemTextSxProps, ...sx }, ...props });
+    const listItemTextSxProps = iconOnly ? { maxWidth: 0, ...sx } : { ...sx };
+    return (_jsx(ListItemText, { sx: {
+            flexGrow: 0,
+            maxWidth: '100%',
+            overflow: 'hidden',
+            transition: 'max-width 300ms linear',
+            ...listItemTextSxProps,
+        }, ...props }));
 };
 //# sourceMappingURL=MenuListItemText.js.map

package/dist/esm/components/SiteMenu/MenuListItemText.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuListItemText.js","sourceRoot":"","sources":["../../../../src/components/SiteMenu/MenuListItemText.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAqB,MAAM,eAAe,CAAA;AAM/D,MAAM,CAAC,MAAM,gBAAgB,GAAoC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAC9F,MAAM,mBAAmB,GAAG,QAAQ,CAAC,CAAC,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAA;IACrF,OAAO,KAAC,YAAY,IAAC,EAAE,EAAE,EAAE,GAAG,mBAAmB,EAAE,GAAG,EAAE,EAAE,KAAM,KAAK,GAAI,CAAA;AAC3E,CAAC,CAAA"}
+{"version":3,"file":"MenuListItemText.js","sourceRoot":"","sources":["../../../../src/components/SiteMenu/MenuListItemText.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAqB,MAAM,eAAe,CAAA;AAM/D,MAAM,CAAC,MAAM,gBAAgB,GAAoC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAC9F,MAAM,mBAAmB,GAAG,QAAQ,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE,CAAA;IACzE,OAAO,CACL,KAAC,YAAY,IACX,EAAE,EAAE;YACF,QAAQ,EAAE,CAAC;YACX,QAAQ,EAAE,MAAM;YAChB,QAAQ,EAAE,QAAQ;YAClB,UAAU,EAAE,wBAAwB;YACpC,GAAG,mBAAmB;SACvB,KACG,KAAK,GACT,CACH,CAAA;AACH,CAAC,CAAA"}

package/dist/esm/components/SiteMenu/lib/SiteMenuListItemBase.d.ts

@@ -1,4 +1,5 @@
 export interface SiteMenuListItemBase {
     iconOnly?: boolean;
+    collapseEnd?: boolean;
 }
 //# sourceMappingURL=SiteMenuListItemBase.d.ts.map

package/dist/esm/components/SiteMenu/lib/SiteMenuListItemBase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SiteMenuListItemBase.d.ts","sourceRoot":"","sources":["../../../../../src/components/SiteMenu/lib/SiteMenuListItemBase.tsx"],"names":[],"mappings":"AAAA,MAAM,WAAW,oBAAoB;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB"}
+{"version":3,"file":"SiteMenuListItemBase.d.ts","sourceRoot":"","sources":["../../../../../src/components/SiteMenu/lib/SiteMenuListItemBase.tsx"],"names":[],"mappings":"AAAA,MAAM,WAAW,oBAAoB;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB"}

package/package.json

@@ -16,11 +16,11 @@
     "@xylabs/react-flexbox": "^2.14.20",
     "@xylabs/react-link": "^2.14.20",
     "@xylabs/react-shared": "^2.14.20",
-    "@xyo-network/react-app-settings": "^2.35.2",
-    "@xyo-network/react-archive": "^2.35.2",
-    "@xyo-network/react-auth-sets": "^2.35.2",
-    "@xyo-network/react-network": "^2.35.2",
-    "@xyo-network/react-shared": "^2.35.2",
+    "@xyo-network/react-app-settings": "^2.35.3",
+    "@xyo-network/react-archive": "^2.35.3",
+    "@xyo-network/react-auth-sets": "^2.35.3",
+    "@xyo-network/react-network": "^2.35.3",
+    "@xyo-network/react-shared": "^2.35.3",
     "tslib": "^2.4.0"
   },
   "peerDependencies": {
@@ -76,5 +76,5 @@
   },
   "sideEffects": false,
   "types": "dist/esm/index.d.ts",
-  "version": "2.35.2"
+  "version": "2.35.3"
 }

package/src/components/SiteMenu/MenuIcon.tsx

@@ -2,15 +2,13 @@ import { Typography } from '@mui/material'
 import { TypographyExProps } from '@xyo-network/react-shared'
 import { ReactNode } from 'react'
 
-import { SiteMenuListItemBase } from './lib'
-
-export interface MenuIconProps extends SiteMenuListItemBase, TypographyExProps {
+export interface MenuIconProps extends TypographyExProps {
   icon?: ReactNode
 }
 
-export const MenuIcon: React.FC<MenuIconProps> = ({ iconOnly, icon, ...props }) => {
+export const MenuIcon: React.FC<MenuIconProps> = ({ icon, ...props }) => {
   return (
-    <Typography mr={iconOnly ? 0 : 1} display="flex" variant="caption" {...props}>
+    <Typography display="flex" variant="caption" {...props}>
       {icon}
     </Typography>
   )

package/src/components/SiteMenu/MenuItem.stories.tsx

@@ -1,8 +1,10 @@
 import PublicRoundedIcon from '@mui/icons-material/PublicRounded'
-import { List } from '@mui/material'
+import { Button, Collapse, Divider, List, useTheme } from '@mui/material'
 import { ComponentMeta, ComponentStory } from '@storybook/react'
+import { FlexRow } from '@xylabs/react-flexbox'
+import { useState } from 'react'
 
-import { SiteMenuListItem } from './MenuItems'
+import { SiteMenuListItem, SiteMenuListItemProps } from './MenuItems'
 
 const StorybookEntry = {
   argTypes: {},
@@ -15,32 +17,69 @@ const StorybookEntry = {
   title: 'appbar/SiteMenuListItem',
 } as ComponentMeta<typeof SiteMenuListItem>
 
-const Template: ComponentStory<typeof SiteMenuListItem> = (args) => {
+const SiteMenuList: React.FC<SiteMenuListItemProps> = (args) => {
   return (
     <List>
       <SiteMenuListItem {...args} />
+      <SiteMenuListItem {...args} />
+      <SiteMenuListItem {...args} />
     </List>
   )
 }
 
+const CollapseTemplate: ComponentStory<typeof SiteMenuListItem> = (args) => {
+  const [collapse, setCollapse] = useState(false)
+  const [onCollapseEnd, setOnCollapseEnd] = useState(false)
+  const theme = useTheme()
+  return (
+    <>
+      <FlexRow justifyContent="start">
+        <Collapse in={!collapse} orientation="horizontal" collapsedSize={theme.spacing(5)} onExited={() => setOnCollapseEnd(true)}>
+          <SiteMenuList {...args} iconOnly={collapse} collapseEnd={onCollapseEnd} />
+        </Collapse>
+        <Divider orientation="vertical" flexItem />
+      </FlexRow>
+      <Button
+        onClick={() => {
+          setOnCollapseEnd((previous) => (previous ? false : previous))
+          setCollapse(!collapse)
+        }}
+      >
+        Toggle
+      </Button>
+    </>
+  )
+}
+
+const Template: ComponentStory<typeof SiteMenuListItem> = (args) => {
+  console.log(args)
+  return <SiteMenuList {...args} />
+}
+
 const Default = Template.bind({})
 Default.args = {
   icon: <PublicRoundedIcon />,
   primary: 'Test',
 }
 
+const WithCollapse = CollapseTemplate.bind({})
+WithCollapse.args = {
+  icon: <PublicRoundedIcon />,
+  primary: 'Test',
+}
+
 const WithChildren = Template.bind({})
 WithChildren.args = {
   children: (
     <List>
-      <SiteMenuListItem primary="Test Child" />
+      <SiteMenuListItem primary="Test Child" icon={<PublicRoundedIcon />} />
     </List>
   ),
   icon: <PublicRoundedIcon />,
   primary: 'Test',
 }
 
-export { Default, WithChildren }
+export { Default, WithChildren, WithCollapse }
 
 // eslint-disable-next-line import/no-default-export
 export default StorybookEntry

package/src/components/SiteMenu/MenuItems.tsx

@@ -16,11 +16,20 @@ export interface SiteMenuListItemProps extends SiteMenuListItemBase, ListItemPro
   onButtonClick?: ListItemButtonExProps['onClick']
 }
 
-export const SiteMenuListItem: React.FC<SiteMenuListItemProps> = ({ style, children, iconOnly, icon, primary, onButtonClick, ...props }) => {
+export const SiteMenuListItem: React.FC<SiteMenuListItemProps> = ({
+  style,
+  children,
+  iconOnly,
+  collapseEnd,
+  icon,
+  primary,
+  onButtonClick,
+  ...props
+}) => {
   return (
     <MenuListItem style={style} iconOnly={iconOnly} {...props}>
-      <MenuListItemButtonEx iconOnly={iconOnly} onClick={onButtonClick}>
-        <MenuIcon icon={icon} iconOnly={iconOnly} />
+      <MenuListItemButtonEx iconOnly={iconOnly} onClick={onButtonClick} collapseEnd={collapseEnd}>
+        <MenuIcon icon={icon} />
         <MenuListItemText primary={primary} iconOnly={iconOnly} />
       </MenuListItemButtonEx>
       {children}

package/src/components/SiteMenu/MenuListItem.tsx

@@ -6,11 +6,10 @@ export interface MenuListItemProps extends SiteMenuListItemBase, ListItemProps {
 
 export const MenuListItem: React.FC<MenuListItemProps> = ({ children, style, iconOnly, ...props }) => {
   const listItemStyles = {
-    display: iconOnly ? 'inline-flex' : 'block',
     width: iconOnly ? 'auto' : '100%',
   }
   return (
-    <ListItem style={{ ...listItemStyles, ...style }} {...props}>
+    <ListItem style={{ display: 'block', ...listItemStyles, ...style }} {...props}>
       {children}
     </ListItem>
   )

package/src/components/SiteMenu/MenuListItemButtonEx.tsx

@@ -4,10 +4,11 @@ import { SiteMenuListItemBase } from './lib'
 
 export interface MenuListItemButtonExProps extends SiteMenuListItemBase, ListItemButtonExProps {}
 
-export const MenuListItemButtonEx: React.FC<MenuListItemButtonExProps> = ({ iconOnly, sx, children, ...props }) => {
-  const listItemButtonSx = iconOnly ? { borderRadius: '50%', display: 'inline-flex' } : {}
+export const MenuListItemButtonEx: React.FC<MenuListItemButtonExProps> = ({ iconOnly, collapseEnd, sx, children, ...props }) => {
+  const listItemButtonSx = iconOnly ? { borderRadius: '50%', display: 'inline-flex', flexGrow: 0 } : {}
+  const spacingSx = collapseEnd ? { columnGap: 0 } : { columnGap: 1.5 }
   return (
-    <ListItemButtonEx sx={{ ...listItemButtonSx, ...sx }} {...props}>
+    <ListItemButtonEx sx={{ ...listItemButtonSx, ...spacingSx, ...sx }} {...props}>
       {children}
     </ListItemButtonEx>
   )

package/src/components/SiteMenu/MenuListItemText.tsx

@@ -5,6 +5,17 @@ import { SiteMenuListItemBase } from './lib'
 export interface MenuListItemTextProps extends SiteMenuListItemBase, ListItemTextProps {}
 
 export const MenuListItemText: React.FC<MenuListItemTextProps> = ({ iconOnly, sx, ...props }) => {
-  const listItemTextSxProps = iconOnly ? { visibility: 'hidden', width: 0, ...sx } : {}
-  return <ListItemText sx={{ ...listItemTextSxProps, ...sx }} {...props} />
+  const listItemTextSxProps = iconOnly ? { maxWidth: 0, ...sx } : { ...sx }
+  return (
+    <ListItemText
+      sx={{
+        flexGrow: 0,
+        maxWidth: '100%',
+        overflow: 'hidden',
+        transition: 'max-width 300ms linear',
+        ...listItemTextSxProps,
+      }}
+      {...props}
+    />
+  )
 }

package/src/components/SiteMenu/lib/SiteMenuListItemBase.tsx

@@ -1,3 +1,4 @@
 export interface SiteMenuListItemBase {
   iconOnly?: boolean
+  collapseEnd?: boolean
 }