@xyo-network/react-appbar 2.35.6 → 2.35.7

package/dist/esm/components/CollapsibleDrawer/CollapseToggle.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { FlexBoxProps } from '@xylabs/react-flexbox';
+export declare const CollapseToggleFlex: React.FC<FlexBoxProps>;
+//# sourceMappingURL=CollapseToggle.d.ts.map

package/dist/esm/components/CollapsibleDrawer/CollapseToggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollapseToggle.d.ts","sourceRoot":"","sources":["../../../../src/components/CollapsibleDrawer/CollapseToggle.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,YAAY,EAAW,MAAM,uBAAuB,CAAA;AAI7D,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAqBrD,CAAA"}

package/dist/esm/components/CollapsibleDrawer/CollapseToggle.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import KeyboardDoubleArrowLeftRoundedIcon from '@mui/icons-material/KeyboardDoubleArrowLeftRounded';
+import KeyboardDoubleArrowRightRounded from '@mui/icons-material/KeyboardDoubleArrowRightRounded';
+import { IconButton } from '@mui/material';
+import { FlexRow } from '@xylabs/react-flexbox';
+import { useCollapsible } from '../../contexts';
+export const CollapseToggleFlex = (props) => {
+    const { collapse, setCollapse, setCollapseEnd } = useCollapsible();
+    const handleCollapseToggle = () => {
+        setCollapse?.(!collapse);
+        setCollapseEnd?.((previous) => (previous ? false : previous));
+    };
+    return (_jsx(FlexRow, { mt: 2, py: 2, ...props, children: _jsx(IconButton, { onClick: handleCollapseToggle, sx: {
+                flexDirection: 'column',
+                ml: 1,
+            }, children: !collapse ? _jsx(KeyboardDoubleArrowLeftRoundedIcon, {}) : _jsx(KeyboardDoubleArrowRightRounded, {}) }) }));
+};
+//# sourceMappingURL=CollapseToggle.js.map

package/dist/esm/components/CollapsibleDrawer/CollapseToggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollapseToggle.js","sourceRoot":"","sources":["../../../../src/components/CollapsibleDrawer/CollapseToggle.tsx"],"names":[],"mappings":";AAAA,OAAO,kCAAkC,MAAM,oDAAoD,CAAA;AACnG,OAAO,+BAA+B,MAAM,qDAAqD,CAAA;AACjG,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAgB,OAAO,EAAE,MAAM,uBAAuB,CAAA;AAE7D,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAE/C,MAAM,CAAC,MAAM,kBAAkB,GAA2B,CAAC,KAAK,EAAE,EAAE;IAClE,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,cAAc,EAAE,GAAG,cAAc,EAAE,CAAA;IAElE,MAAM,oBAAoB,GAAG,GAAG,EAAE;QAChC,WAAW,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAA;QACxB,cAAc,EAAE,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAA;IAC/D,CAAC,CAAA;IAED,OAAO,CACL,KAAC,OAAO,IAAC,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,KAAM,KAAK,YAC9B,KAAC,UAAU,IACT,OAAO,EAAE,oBAAoB,EAC7B,EAAE,EAAE;gBACF,aAAa,EAAE,QAAQ;gBACvB,EAAE,EAAE,CAAC;aACN,YAEA,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAC,kCAAkC,KAAG,CAAC,CAAC,CAAC,KAAC,+BAA+B,KAAG,GAC9E,GACL,CACX,CAAA;AACH,CAAC,CAAA"}

package/dist/esm/components/CollapsibleDrawer/CollapsibleDrawer.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { CollapseProps } from '@mui/material';
+import { WithChildren } from '@xylabs/react-shared';
+export declare const CollapsibleDrawer: React.FC<WithChildren<CollapseProps>>;
+//# sourceMappingURL=CollapsibleDrawer.d.ts.map

package/dist/esm/components/CollapsibleDrawer/CollapsibleDrawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollapsibleDrawer.d.ts","sourceRoot":"","sources":["../../../../src/components/CollapsibleDrawer/CollapsibleDrawer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAY,aAAa,EAAoB,MAAM,eAAe,CAAA;AACzE,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AAInD,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAAC,aAAa,CAAC,CAsBnE,CAAA"}

package/dist/esm/components/CollapsibleDrawer/CollapsibleDrawer.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Collapse, styled, useTheme } from '@mui/material';
+import { useCollapsible } from '../../contexts';
+export const CollapsibleDrawer = ({ children, ...props }) => {
+    const { collapse, setCollapseEnd } = useCollapsible();
+    const theme = useTheme();
+    const collapsedSize = props.collapsedSize ?? theme.spacing(5);
+    return (_jsx(CollapsibleFlexInner, { in: !collapse, orientation: "horizontal", collapsedSize: collapsedSize, onExited: () => setCollapseEnd?.(true), sx: {
+            alignItems: 'start',
+            display: 'flex',
+            height: '100%',
+        }, ...props, children: children }));
+};
+const CollapsibleFlexInner = styled(Collapse)(() => ({
+    '& .MuiCollapse-wrapperInner': {
+        display: 'flex',
+        flexDirection: 'column',
+    },
+}));
+//# sourceMappingURL=CollapsibleDrawer.js.map

package/dist/esm/components/CollapsibleDrawer/CollapsibleDrawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollapsibleDrawer.js","sourceRoot":"","sources":["../../../../src/components/CollapsibleDrawer/CollapsibleDrawer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAiB,MAAM,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAGzE,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAE/C,MAAM,CAAC,MAAM,iBAAiB,GAA0C,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACjG,MAAM,EAAE,QAAQ,EAAE,cAAc,EAAE,GAAG,cAAc,EAAE,CAAA;IACrD,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IAExB,MAAM,aAAa,GAAG,KAAK,CAAC,aAAa,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAA;IAE7D,OAAO,CACL,KAAC,oBAAoB,IACnB,EAAE,EAAE,CAAC,QAAQ,EACb,WAAW,EAAC,YAAY,EACxB,aAAa,EAAE,aAAa,EAC5B,QAAQ,EAAE,GAAG,EAAE,CAAC,cAAc,EAAE,CAAC,IAAI,CAAC,EACtC,EAAE,EAAE;YACF,UAAU,EAAE,OAAO;YACnB,OAAO,EAAE,MAAM;YACf,MAAM,EAAE,MAAM;SACf,KACG,KAAK,YAER,QAAQ,GACY,CACxB,CAAA;AACH,CAAC,CAAA;AAED,MAAM,oBAAoB,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC;IACnD,6BAA6B,EAAE;QAC7B,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;KACxB;CACF,CAAC,CAAC,CAAA"}

package/dist/esm/components/CollapsibleDrawer/index.d.ts

@@ -0,0 +1,3 @@
+export * from './CollapseToggle';
+export * from './CollapsibleDrawer';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/CollapsibleDrawer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/CollapsibleDrawer/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAA;AAChC,cAAc,qBAAqB,CAAA"}

package/dist/esm/components/CollapsibleDrawer/index.js

@@ -0,0 +1,3 @@
+export * from './CollapseToggle';
+export * from './CollapsibleDrawer';
+//# sourceMappingURL=index.js.map

package/dist/esm/components/CollapsibleDrawer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/CollapsibleDrawer/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAA;AAChC,cAAc,qBAAqB,CAAA"}

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

@@ -3,6 +3,7 @@ import { FlexBoxProps } from '@xylabs/react-flexbox';
 export interface SiteMenuProps extends FlexBoxProps {
     hideSettingsMenuItem?: boolean;
     side?: 'left' | 'right' | 'top' | 'bottom';
+    onMenuToggle?: (state?: boolean) => void;
 }
 export declare const SiteMenu: React.FC<SiteMenuProps>;
 //# sourceMappingURL=Menu.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../../src/components/SiteMenu/Menu.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,YAAY,EAAW,MAAM,uBAAuB,CAAA;AAK7D,MAAM,WAAW,aAAc,SAAQ,YAAY;IACjD,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAA;CAC3C;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA8B5C,CAAA"}
+{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../../src/components/SiteMenu/Menu.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,YAAY,EAAW,MAAM,uBAAuB,CAAA;AAK7D,MAAM,WAAW,aAAc,SAAQ,YAAY;IACjD,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAA;IAC1C,YAAY,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,OAAO,KAAK,IAAI,CAAA;CACzC;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAkC5C,CAAA"}

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

@@ -3,10 +3,13 @@ import MenuIcon from '@mui/icons-material/Menu';
 import SettingsIcon from '@mui/icons-material/Settings';
 import { IconButton, List, SwipeableDrawer } from '@mui/material';
 import { FlexRow } from '@xylabs/react-flexbox';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { SiteMenuListItem } from './MenuItems';
-export const SiteMenu = ({ side = 'right', children, ...props }) => {
+export const SiteMenu = ({ side = 'right', children, onMenuToggle, ...props }) => {
     const [open, setOpen] = useState(false);
+    useEffect(() => {
+        onMenuToggle?.(open);
+    }, [onMenuToggle, open]);
     return (_jsxs(FlexRow, { alignItems: "stretch", ...props, children: [_jsx(IconButton, { size: "small", color: "inherit", onClick: () => {
                     setOpen(!open);
                 }, children: _jsx(MenuIcon, { fontSize: "large" }) }), _jsx(SwipeableDrawer, { anchor: side, open: open, onClick: () => setOpen(false), onKeyDown: () => setOpen(false), onClose: () => setOpen(false), onOpen: () => setOpen(true), children: children ?? (_jsx(List, { children: _jsx(SiteMenuListItem, { primary: "Settings", icon: _jsx(SettingsIcon, {}), to: "/settings" }) })) })] }));

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

@@ -1 +1 @@
-{"version":3,"file":"Menu.js","sourceRoot":"","sources":["../../../../src/components/SiteMenu/Menu.tsx"],"names":[],"mappings":";AAAA,OAAO,QAAQ,MAAM,0BAA0B,CAAA;AAC/C,OAAO,YAAY,MAAM,8BAA8B,CAAA;AACvD,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AACjE,OAAO,EAAgB,OAAO,EAAE,MAAM,uBAAuB,CAAA;AAC7D,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEhC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAA;AAO9C,MAAM,CAAC,MAAM,QAAQ,GAA4B,CAAC,EAAE,IAAI,GAAG,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAC1F,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAEvC,OAAO,CACL,MAAC,OAAO,IAAC,UAAU,EAAC,SAAS,KAAK,KAAK,aACrC,KAAC,UAAU,IACT,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,SAAS,EACf,OAAO,EAAE,GAAG,EAAE;oBACZ,OAAO,CAAC,CAAC,IAAI,CAAC,CAAA;gBAChB,CAAC,YAED,KAAC,QAAQ,IAAC,QAAQ,EAAC,OAAO,GAAG,GAClB,EACb,KAAC,eAAe,IACd,MAAM,EAAE,IAAI,EACZ,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,EAC7B,SAAS,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,EAC/B,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,EAC7B,MAAM,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,YAE1B,QAAQ,IAAI,CACX,KAAC,IAAI,cACH,KAAC,gBAAgB,IAAC,OAAO,EAAC,UAAU,EAAC,IAAI,EAAE,KAAC,YAAY,KAAG,EAAE,EAAE,EAAC,WAAW,GAAG,GACzE,CACR,GACe,IACV,CACX,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"Menu.js","sourceRoot":"","sources":["../../../../src/components/SiteMenu/Menu.tsx"],"names":[],"mappings":";AAAA,OAAO,QAAQ,MAAM,0BAA0B,CAAA;AAC/C,OAAO,YAAY,MAAM,8BAA8B,CAAA;AACvD,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AACjE,OAAO,EAAgB,OAAO,EAAE,MAAM,uBAAuB,CAAA;AAC7D,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAE3C,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAA;AAQ9C,MAAM,CAAC,MAAM,QAAQ,GAA4B,CAAC,EAAE,IAAI,GAAG,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACxG,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAEvC,SAAS,CAAC,GAAG,EAAE;QACb,YAAY,EAAE,CAAC,IAAI,CAAC,CAAA;IACtB,CAAC,EAAE,CAAC,YAAY,EAAE,IAAI,CAAC,CAAC,CAAA;IAExB,OAAO,CACL,MAAC,OAAO,IAAC,UAAU,EAAC,SAAS,KAAK,KAAK,aACrC,KAAC,UAAU,IACT,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,SAAS,EACf,OAAO,EAAE,GAAG,EAAE;oBACZ,OAAO,CAAC,CAAC,IAAI,CAAC,CAAA;gBAChB,CAAC,YAED,KAAC,QAAQ,IAAC,QAAQ,EAAC,OAAO,GAAG,GAClB,EACb,KAAC,eAAe,IACd,MAAM,EAAE,IAAI,EACZ,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,EAC7B,SAAS,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,EAC/B,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,EAC7B,MAAM,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,YAE1B,QAAQ,IAAI,CACX,KAAC,IAAI,cACH,KAAC,gBAAgB,IAAC,OAAO,EAAC,UAAU,EAAC,IAAI,EAAE,KAAC,YAAY,KAAG,EAAE,EAAE,EAAC,WAAW,GAAG,GACzE,CACR,GACe,IACV,CACX,CAAA;AACH,CAAC,CAAA"}

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

@@ -5,6 +5,6 @@ import { MenuListItemButtonEx } from './MenuListItemButtonEx';
 import { MenuListItemText } from './MenuListItemText';
 export const SiteMenuListItem = ({ style, children, iconOnly, collapseEnd, icon, primary, onButtonClick, to, ...props }) => {
     const { dense } = props;
-    return (_jsxs(MenuListItem, { style: style, iconOnly: iconOnly, ...props, children: [_jsxs(MenuListItemButtonEx, { iconOnly: iconOnly, onClick: onButtonClick, collapseEnd: collapseEnd, dense: dense, to: to, children: [_jsx(MenuIcon, { icon: icon }), _jsx(MenuListItemText, { primary: primary, iconOnly: iconOnly })] }), children] }));
+    return (_jsxs(MenuListItem, { style: { whiteSpace: 'nowrap', ...style }, iconOnly: iconOnly, ...props, children: [_jsxs(MenuListItemButtonEx, { iconOnly: iconOnly, onClick: onButtonClick, collapseEnd: collapseEnd, dense: dense, to: to, 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,EAChE,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,IAAI,EACJ,OAAO,EACP,aAAa,EACb,EAAE,EACF,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAA;IACvB,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,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,aAC9G,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"}
+{"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,EAAE,EACF,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAA;IACvB,OAAO,CACL,MAAC,YAAY,IAAC,KAAK,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,QAAQ,EAAE,QAAQ,KAAM,KAAK,aACpF,MAAC,oBAAoB,IAAC,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,WAAW,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,aAC9G,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/Toolbar/System/SystemToolbar.d.ts

@@ -2,6 +2,7 @@ import { ToolbarProps } from '@mui/material';
 import { SelectExProps } from '@xylabs/react-common';
 import { NetworkSelectExProps } from '@xyo-network/react-network';
 import { ReactNode } from 'react';
+import { SiteMenuProps } from '../../SiteMenu';
 export interface SystemToolbarProps extends ToolbarProps {
     networkSelectProps?: NetworkSelectExProps;
     archiveSelectProps?: SelectExProps<string>;
@@ -12,6 +13,7 @@ export interface SystemToolbarProps extends ToolbarProps {
     menuItems?: ReactNode;
     precedingChildren?: ReactNode;
     developerMode?: boolean;
+    onMenuToggle?: SiteMenuProps['onMenuToggle'];
 }
 export declare const SystemToolbar: React.FC<SystemToolbarProps>;
 //# sourceMappingURL=SystemToolbar.d.ts.map

package/dist/esm/components/Toolbar/System/SystemToolbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SystemToolbar.d.ts","sourceRoot":"","sources":["../../../../../src/components/Toolbar/System/SystemToolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkB,YAAY,EAAE,MAAM,eAAe,CAAA;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAA;AAKpD,OAAO,EAAmB,oBAAoB,EAAE,MAAM,4BAA4B,CAAA;AAClF,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAIjC,MAAM,WAAW,kBAAmB,SAAQ,YAAY;IACtD,kBAAkB,CAAC,EAAE,oBAAoB,CAAA;IACzC,kBAAkB,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAA;IAC1C,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,iBAAiB,CAAC,EAAE,SAAS,CAAA;IAC7B,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAmCtD,CAAA"}
+{"version":3,"file":"SystemToolbar.d.ts","sourceRoot":"","sources":["../../../../../src/components/Toolbar/System/SystemToolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkB,YAAY,EAAE,MAAM,eAAe,CAAA;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAA;AAKpD,OAAO,EAAmB,oBAAoB,EAAE,MAAM,4BAA4B,CAAA;AAClF,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAY,aAAa,EAAE,MAAM,gBAAgB,CAAA;AAExD,MAAM,WAAW,kBAAmB,SAAQ,YAAY;IACtD,kBAAkB,CAAC,EAAE,oBAAoB,CAAA;IACzC,kBAAkB,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAA;IAC1C,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,iBAAiB,CAAC,EAAE,SAAS,CAAA;IAC7B,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,YAAY,CAAC,EAAE,aAAa,CAAC,cAAc,CAAC,CAAA;CAC7C;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAoCtD,CAAA"}

package/dist/esm/components/Toolbar/System/SystemToolbar.js

@@ -6,7 +6,7 @@ import { ArchiveSelectEx } from '@xyo-network/react-archive';
 import { AuthSetsStatusIconButton } from '@xyo-network/react-auth-sets';
 import { NetworkSelectEx } from '@xyo-network/react-network';
 import { SiteMenu } from '../../SiteMenu';
-export const SystemToolbar = ({ children, precedingChildren, networkSelectProps, archiveSelectProps, hideNetworkSelect, hideArchiveSelect, darkModeButton = false, authButton = false, menuItems, ...props }) => {
-    return (_jsxs(Toolbar, { ...props, children: [precedingChildren, hideNetworkSelect ? null : (_jsx(FlexRow, { marginX: 0.5, children: _jsx(Paper, { variant: "elevation", children: _jsx(NetworkSelectEx, { fullWidth: true, ...networkSelectProps }) }) })), hideArchiveSelect ? null : (_jsx(FlexRow, { marginX: 0.5, children: _jsx(Paper, { variant: "elevation", children: _jsx(ArchiveSelectEx, { fullWidth: true, ...archiveSelectProps }) }) })), children, authButton ? _jsx(AuthSetsStatusIconButton, { color: "inherit" }) : null, darkModeButton ? _jsx(DarkModeIconButton, { color: "inherit" }) : null, menuItems ? _jsx(SiteMenu, { children: menuItems }) : null] }));
+export const SystemToolbar = ({ children, precedingChildren, networkSelectProps, archiveSelectProps, hideNetworkSelect, hideArchiveSelect, darkModeButton = false, authButton = false, menuItems, onMenuToggle, ...props }) => {
+    return (_jsxs(Toolbar, { ...props, children: [precedingChildren, hideNetworkSelect ? null : (_jsx(FlexRow, { marginX: 0.5, children: _jsx(Paper, { variant: "elevation", children: _jsx(NetworkSelectEx, { fullWidth: true, ...networkSelectProps }) }) })), hideArchiveSelect ? null : (_jsx(FlexRow, { marginX: 0.5, children: _jsx(Paper, { variant: "elevation", children: _jsx(ArchiveSelectEx, { fullWidth: true, ...archiveSelectProps }) }) })), children, authButton ? _jsx(AuthSetsStatusIconButton, { color: "inherit" }) : null, darkModeButton ? _jsx(DarkModeIconButton, { color: "inherit" }) : null, menuItems ? _jsx(SiteMenu, { onMenuToggle: onMenuToggle, children: menuItems }) : null] }));
 };
 //# sourceMappingURL=SystemToolbar.js.map

package/dist/esm/components/Toolbar/System/SystemToolbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"SystemToolbar.js","sourceRoot":"","sources":["../../../../../src/components/Toolbar/System/SystemToolbar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,OAAO,EAAgB,MAAM,eAAe,CAAA;AAE5D,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAA;AAC/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAA;AACpE,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAA;AAC5D,OAAO,EAAE,wBAAwB,EAAE,MAAM,8BAA8B,CAAA;AACvE,OAAO,EAAE,eAAe,EAAwB,MAAM,4BAA4B,CAAA;AAGlF,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAczC,MAAM,CAAC,MAAM,aAAa,GAAiC,CAAC,EAC1D,QAAQ,EACR,iBAAiB,EACjB,kBAAkB,EAClB,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,cAAc,GAAG,KAAK,EACtB,UAAU,GAAG,KAAK,EAClB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,EAAE;IACH,OAAO,CACL,MAAC,OAAO,OAAK,KAAK,aACf,iBAAiB,EACjB,iBAAiB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAC1B,KAAC,OAAO,IAAC,OAAO,EAAE,GAAG,YACnB,KAAC,KAAK,IAAC,OAAO,EAAC,WAAW,YACxB,KAAC,eAAe,IAAC,SAAS,WAAK,kBAAkB,GAAI,GAC/C,GACA,CACX,EACA,iBAAiB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAC1B,KAAC,OAAO,IAAC,OAAO,EAAE,GAAG,YACnB,KAAC,KAAK,IAAC,OAAO,EAAC,WAAW,YACxB,KAAC,eAAe,IAAC,SAAS,WAAK,kBAAkB,GAAI,GAC/C,GACA,CACX,EACA,QAAQ,EACR,UAAU,CAAC,CAAC,CAAC,KAAC,wBAAwB,IAAC,KAAK,EAAC,SAAS,GAAG,CAAC,CAAC,CAAC,IAAI,EAChE,cAAc,CAAC,CAAC,CAAC,KAAC,kBAAkB,IAAC,KAAK,EAAC,SAAS,GAAG,CAAC,CAAC,CAAC,IAAI,EAC9D,SAAS,CAAC,CAAC,CAAC,KAAC,QAAQ,cAAE,SAAS,GAAY,CAAC,CAAC,CAAC,IAAI,IAC5C,CACX,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"SystemToolbar.js","sourceRoot":"","sources":["../../../../../src/components/Toolbar/System/SystemToolbar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,OAAO,EAAgB,MAAM,eAAe,CAAA;AAE5D,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAA;AAC/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAA;AACpE,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAA;AAC5D,OAAO,EAAE,wBAAwB,EAAE,MAAM,8BAA8B,CAAA;AACvE,OAAO,EAAE,eAAe,EAAwB,MAAM,4BAA4B,CAAA;AAGlF,OAAO,EAAE,QAAQ,EAAiB,MAAM,gBAAgB,CAAA;AAexD,MAAM,CAAC,MAAM,aAAa,GAAiC,CAAC,EAC1D,QAAQ,EACR,iBAAiB,EACjB,kBAAkB,EAClB,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,cAAc,GAAG,KAAK,EACtB,UAAU,GAAG,KAAK,EAClB,SAAS,EACT,YAAY,EACZ,GAAG,KAAK,EACT,EAAE,EAAE;IACH,OAAO,CACL,MAAC,OAAO,OAAK,KAAK,aACf,iBAAiB,EACjB,iBAAiB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAC1B,KAAC,OAAO,IAAC,OAAO,EAAE,GAAG,YACnB,KAAC,KAAK,IAAC,OAAO,EAAC,WAAW,YACxB,KAAC,eAAe,IAAC,SAAS,WAAK,kBAAkB,GAAI,GAC/C,GACA,CACX,EACA,iBAAiB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAC1B,KAAC,OAAO,IAAC,OAAO,EAAE,GAAG,YACnB,KAAC,KAAK,IAAC,OAAO,EAAC,WAAW,YACxB,KAAC,eAAe,IAAC,SAAS,WAAK,kBAAkB,GAAI,GAC/C,GACA,CACX,EACA,QAAQ,EACR,UAAU,CAAC,CAAC,CAAC,KAAC,wBAAwB,IAAC,KAAK,EAAC,SAAS,GAAG,CAAC,CAAC,CAAC,IAAI,EAChE,cAAc,CAAC,CAAC,CAAC,KAAC,kBAAkB,IAAC,KAAK,EAAC,SAAS,GAAG,CAAC,CAAC,CAAC,IAAI,EAC9D,SAAS,CAAC,CAAC,CAAC,KAAC,QAAQ,IAAC,YAAY,EAAE,YAAY,YAAG,SAAS,GAAY,CAAC,CAAC,CAAC,IAAI,IACxE,CACX,CAAA;AACH,CAAC,CAAA"}

package/dist/esm/components/index.d.ts

@@ -1,4 +1,5 @@
 export * from './AppBar';
+export * from './CollapsibleDrawer';
 export * from './MobileSystemControls';
 export * from './SearchBar';
 export * from './SiteMenu';

package/dist/esm/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA;AACxB,cAAc,wBAAwB,CAAA;AACtC,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA;AAC1B,cAAc,WAAW,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA;AACxB,cAAc,qBAAqB,CAAA;AACnC,cAAc,wBAAwB,CAAA;AACtC,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA;AAC1B,cAAc,WAAW,CAAA"}

package/dist/esm/components/index.js

@@ -1,4 +1,5 @@
 export * from './AppBar';
+export * from './CollapsibleDrawer';
 export * from './MobileSystemControls';
 export * from './SearchBar';
 export * from './SiteMenu';

package/dist/esm/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA;AACxB,cAAc,wBAAwB,CAAA;AACtC,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA;AAC1B,cAAc,WAAW,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA;AACxB,cAAc,qBAAqB,CAAA;AACnC,cAAc,wBAAwB,CAAA;AACtC,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA;AAC1B,cAAc,WAAW,CAAA"}

package/dist/esm/contexts/Collapsible/State.d.ts

@@ -0,0 +1,9 @@
+import { ContextExState } from '@xyo-network/react-shared';
+import { Dispatch, SetStateAction } from 'react';
+export interface CollapsibleState extends ContextExState {
+    collapse?: boolean;
+    setCollapse?: Dispatch<SetStateAction<boolean>>;
+    collapseEnd?: boolean;
+    setCollapseEnd?: Dispatch<SetStateAction<boolean>>;
+}
+//# sourceMappingURL=State.d.ts.map

package/dist/esm/contexts/Collapsible/State.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"State.d.ts","sourceRoot":"","sources":["../../../../src/contexts/Collapsible/State.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAC1D,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAEhD,MAAM,WAAW,gBAAiB,SAAQ,cAAc;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAA;IAC/C,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,cAAc,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAA;CACnD"}

package/dist/esm/contexts/Collapsible/State.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=State.js.map

package/dist/esm/contexts/Collapsible/State.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"State.js","sourceRoot":"","sources":["../../../../src/contexts/Collapsible/State.ts"],"names":[],"mappings":""}

package/dist/esm/contexts/Collapsible/context.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { CollapsibleState } from './State';
+export declare const CollapsibleContext: import("react").Context<CollapsibleState & import("@xyo-network/react-shared").ContextExState>;
+//# sourceMappingURL=context.d.ts.map

package/dist/esm/contexts/Collapsible/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../src/contexts/Collapsible/context.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAE1C,eAAO,MAAM,kBAAkB,gGAAsC,CAAA"}

package/dist/esm/contexts/Collapsible/context.js

@@ -0,0 +1,3 @@
+import { createContextEx } from '@xyo-network/react-shared';
+export const CollapsibleContext = createContextEx();
+//# sourceMappingURL=context.js.map

package/dist/esm/contexts/Collapsible/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","sourceRoot":"","sources":["../../../../src/contexts/Collapsible/context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAI3D,MAAM,CAAC,MAAM,kBAAkB,GAAG,eAAe,EAAoB,CAAA"}

package/dist/esm/contexts/Collapsible/index.d.ts

@@ -0,0 +1,3 @@
+export * from './provider';
+export * from './use';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/contexts/Collapsible/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/contexts/Collapsible/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA;AAC1B,cAAc,OAAO,CAAA"}

package/dist/esm/contexts/Collapsible/index.js

@@ -0,0 +1,3 @@
+export * from './provider';
+export * from './use';
+//# sourceMappingURL=index.js.map

package/dist/esm/contexts/Collapsible/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/contexts/Collapsible/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA;AAC1B,cAAc,OAAO,CAAA"}

package/dist/esm/contexts/Collapsible/provider.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { WithChildren } from '@xylabs/react-shared';
+export interface CollapsibleProviderProps extends WithChildren {
+    defaultCollapse?: boolean;
+    defaultCollapseEnd?: boolean;
+}
+export declare const CollapsibleProvider: React.FC<CollapsibleProviderProps>;
+//# sourceMappingURL=provider.d.ts.map

package/dist/esm/contexts/Collapsible/provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"provider.d.ts","sourceRoot":"","sources":["../../../../src/contexts/Collapsible/provider.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AAKnD,MAAM,WAAW,wBAAyB,SAAQ,YAAY;IAC5D,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,kBAAkB,CAAC,EAAE,OAAO,CAAA;CAC7B;AAED,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CASlE,CAAA"}

package/dist/esm/contexts/Collapsible/provider.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { CollapsibleContext } from './context';
+export const CollapsibleProvider = ({ defaultCollapse = false, defaultCollapseEnd = false, children }) => {
+    const [collapse, setCollapse] = useState(defaultCollapse);
+    const [collapseEnd, setCollapseEnd] = useState(defaultCollapseEnd);
+    return (_jsx(CollapsibleContext.Provider, { value: { collapse, collapseEnd, provided: true, setCollapse, setCollapseEnd }, children: children }));
+};
+//# sourceMappingURL=provider.js.map

package/dist/esm/contexts/Collapsible/provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"provider.js","sourceRoot":"","sources":["../../../../src/contexts/Collapsible/provider.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEhC,OAAO,EAAE,kBAAkB,EAAE,MAAM,WAAW,CAAA;AAO9C,MAAM,CAAC,MAAM,mBAAmB,GAAuC,CAAC,EAAE,eAAe,GAAG,KAAK,EAAE,kBAAkB,GAAG,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC3I,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,eAAe,CAAC,CAAA;IACzD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,kBAAkB,CAAC,CAAA;IAElE,OAAO,CACL,KAAC,kBAAkB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,WAAW,EAAE,QAAQ,EAAE,IAAI,EAAE,WAAW,EAAE,cAAc,EAAE,YACvG,QAAQ,GACmB,CAC/B,CAAA;AACH,CAAC,CAAA"}

package/dist/esm/contexts/Collapsible/use.d.ts

@@ -0,0 +1,2 @@
+export declare const useCollapsible: () => Omit<import("./State").CollapsibleState & import("@xyo-network/react-shared").ContextExState, "provided">;
+//# sourceMappingURL=use.d.ts.map

package/dist/esm/contexts/Collapsible/use.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use.d.ts","sourceRoot":"","sources":["../../../../src/contexts/Collapsible/use.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,cAAc,iHAA+D,CAAA"}

package/dist/esm/contexts/Collapsible/use.js

@@ -0,0 +1,4 @@
+import { useContextEx } from '@xyo-network/react-shared';
+import { CollapsibleContext } from './context';
+export const useCollapsible = () => useContextEx(CollapsibleContext, 'Collapsible', false);
+//# sourceMappingURL=use.js.map

package/dist/esm/contexts/Collapsible/use.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use.js","sourceRoot":"","sources":["../../../../src/contexts/Collapsible/use.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAA;AAExD,OAAO,EAAE,kBAAkB,EAAE,MAAM,WAAW,CAAA;AAE9C,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,EAAE,CAAC,YAAY,CAAC,kBAAkB,EAAE,aAAa,EAAE,KAAK,CAAC,CAAA"}

package/dist/esm/contexts/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Collapsible';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/contexts/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/contexts/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAA"}

package/dist/esm/contexts/index.js

@@ -0,0 +1,2 @@
+export * from './Collapsible';
+//# sourceMappingURL=index.js.map

package/dist/esm/contexts/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/contexts/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAA"}

package/dist/esm/index.d.ts

@@ -1,2 +1,3 @@
 export * from './components';
+export * from './contexts';
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA;AAC5B,cAAc,YAAY,CAAA"}

package/dist/esm/index.js

@@ -1,2 +1,3 @@
 export * from './components';
+export * from './contexts';
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA;AAC5B,cAAc,YAAY,CAAA"}

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.6",
-    "@xyo-network/react-archive": "^2.35.6",
-    "@xyo-network/react-auth-sets": "^2.35.6",
-    "@xyo-network/react-network": "^2.35.6",
-    "@xyo-network/react-shared": "^2.35.6",
+    "@xyo-network/react-app-settings": "^2.35.7",
+    "@xyo-network/react-archive": "^2.35.7",
+    "@xyo-network/react-auth-sets": "^2.35.7",
+    "@xyo-network/react-network": "^2.35.7",
+    "@xyo-network/react-shared": "^2.35.7",
     "tslib": "^2.4.0"
   },
   "peerDependencies": {
@@ -76,5 +76,5 @@
   },
   "sideEffects": false,
   "types": "dist/esm/index.d.ts",
-  "version": "2.35.6"
+  "version": "2.35.7"
 }

package/src/components/CollapsibleDrawer/CollapseToggle.tsx

@@ -0,0 +1,29 @@
+import KeyboardDoubleArrowLeftRoundedIcon from '@mui/icons-material/KeyboardDoubleArrowLeftRounded'
+import KeyboardDoubleArrowRightRounded from '@mui/icons-material/KeyboardDoubleArrowRightRounded'
+import { IconButton } from '@mui/material'
+import { FlexBoxProps, FlexRow } from '@xylabs/react-flexbox'
+
+import { useCollapsible } from '../../contexts'
+
+export const CollapseToggleFlex: React.FC<FlexBoxProps> = (props) => {
+  const { collapse, setCollapse, setCollapseEnd } = useCollapsible()
+
+  const handleCollapseToggle = () => {
+    setCollapse?.(!collapse)
+    setCollapseEnd?.((previous) => (previous ? false : previous))
+  }
+
+  return (
+    <FlexRow mt={2} py={2} {...props}>
+      <IconButton
+        onClick={handleCollapseToggle}
+        sx={{
+          flexDirection: 'column',
+          ml: 1,
+        }}
+      >
+        {!collapse ? <KeyboardDoubleArrowLeftRoundedIcon /> : <KeyboardDoubleArrowRightRounded />}
+      </IconButton>
+    </FlexRow>
+  )
+}

package/src/components/CollapsibleDrawer/CollapsibleDrawer.tsx

@@ -0,0 +1,35 @@
+import { Collapse, CollapseProps, styled, useTheme } from '@mui/material'
+import { WithChildren } from '@xylabs/react-shared'
+
+import { useCollapsible } from '../../contexts'
+
+export const CollapsibleDrawer: React.FC<WithChildren<CollapseProps>> = ({ children, ...props }) => {
+  const { collapse, setCollapseEnd } = useCollapsible()
+  const theme = useTheme()
+
+  const collapsedSize = props.collapsedSize ?? theme.spacing(5)
+
+  return (
+    <CollapsibleFlexInner
+      in={!collapse}
+      orientation="horizontal"
+      collapsedSize={collapsedSize}
+      onExited={() => setCollapseEnd?.(true)}
+      sx={{
+        alignItems: 'start',
+        display: 'flex',
+        height: '100%',
+      }}
+      {...props}
+    >
+      {children}
+    </CollapsibleFlexInner>
+  )
+}
+
+const CollapsibleFlexInner = styled(Collapse)(() => ({
+  '& .MuiCollapse-wrapperInner': {
+    display: 'flex',
+    flexDirection: 'column',
+  },
+}))

package/src/components/CollapsibleDrawer/index.ts

@@ -0,0 +1,2 @@
+export * from './CollapseToggle'
+export * from './CollapsibleDrawer'

package/src/components/SiteMenu/Menu.tsx

@@ -2,18 +2,23 @@ import MenuIcon from '@mui/icons-material/Menu'
 import SettingsIcon from '@mui/icons-material/Settings'
 import { IconButton, List, SwipeableDrawer } from '@mui/material'
 import { FlexBoxProps, FlexRow } from '@xylabs/react-flexbox'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 
 import { SiteMenuListItem } from './MenuItems'
 
 export interface SiteMenuProps extends FlexBoxProps {
   hideSettingsMenuItem?: boolean
   side?: 'left' | 'right' | 'top' | 'bottom'
+  onMenuToggle?: (state?: boolean) => void
 }
 
-export const SiteMenu: React.FC<SiteMenuProps> = ({ side = 'right', children, ...props }) => {
+export const SiteMenu: React.FC<SiteMenuProps> = ({ side = 'right', children, onMenuToggle, ...props }) => {
   const [open, setOpen] = useState(false)
 
+  useEffect(() => {
+    onMenuToggle?.(open)
+  }, [onMenuToggle, open])
+
   return (
     <FlexRow alignItems="stretch" {...props}>
       <IconButton

package/src/components/SiteMenu/MenuItems.tsx

@@ -29,7 +29,7 @@ export const SiteMenuListItem: React.FC<SiteMenuListItemProps> = ({
 }) => {
   const { dense } = props
   return (
-    <MenuListItem style={style} iconOnly={iconOnly} {...props}>
+    <MenuListItem style={{ whiteSpace: 'nowrap', ...style }} iconOnly={iconOnly} {...props}>
       <MenuListItemButtonEx iconOnly={iconOnly} onClick={onButtonClick} collapseEnd={collapseEnd} dense={dense} to={to}>
         <MenuIcon icon={icon} />
         <MenuListItemText primary={primary} iconOnly={iconOnly} />

package/src/components/Toolbar/System/SystemToolbar.stories.tsx

@@ -12,6 +12,12 @@ import { BrowserRouter } from 'react-router-dom'
 import { SiteMenuListItem } from '../../SiteMenu'
 import { SystemToolbar } from './SystemToolbar'
 
+const DefaultMenu = (
+  <List>
+    <SiteMenuListItem primary="Hello" />
+  </List>
+)
+
 const StorybookEntry: Meta = {
   component: SystemToolbar,
   parameters: {
@@ -43,13 +49,7 @@ const TemplateWithAuthContext: ComponentStory<WrappedAuthComponent> = ({ authSta
         <BrowserRouter>
           <NetworkMemoryProvider>
             <ArchiveProvider>
-              <SystemToolbar
-                menuItems={
-                  <List>
-                    <SiteMenuListItem primary="Hello" />
-                  </List>
-                }
-              />
+              <SystemToolbar menuItems={DefaultMenu} />
             </ArchiveProvider>
           </NetworkMemoryProvider>
         </BrowserRouter>
@@ -84,7 +84,13 @@ PrecedingChildren.args = {
   ),
 }
 
-export { Default, NeedsReAuth, PrecedingChildren, WithLoggedInAccount }
+const WithOnMenuToggle = Template.bind({})
+WithOnMenuToggle.args = {
+  menuItems: DefaultMenu,
+  onMenuToggle: (state) => console.log(state),
+}
+
+export { Default, NeedsReAuth, PrecedingChildren, WithLoggedInAccount, WithOnMenuToggle }
 
 // eslint-disable-next-line import/no-default-export
 export default StorybookEntry

package/src/components/Toolbar/System/SystemToolbar.tsx

@@ -7,7 +7,7 @@ import { AuthSetsStatusIconButton } from '@xyo-network/react-auth-sets'
 import { NetworkSelectEx, NetworkSelectExProps } from '@xyo-network/react-network'
 import { ReactNode } from 'react'
 
-import { SiteMenu } from '../../SiteMenu'
+import { SiteMenu, SiteMenuProps } from '../../SiteMenu'
 
 export interface SystemToolbarProps extends ToolbarProps {
   networkSelectProps?: NetworkSelectExProps
@@ -19,6 +19,7 @@ export interface SystemToolbarProps extends ToolbarProps {
   menuItems?: ReactNode
   precedingChildren?: ReactNode
   developerMode?: boolean
+  onMenuToggle?: SiteMenuProps['onMenuToggle']
 }
 
 export const SystemToolbar: React.FC<SystemToolbarProps> = ({
@@ -31,6 +32,7 @@ export const SystemToolbar: React.FC<SystemToolbarProps> = ({
   darkModeButton = false,
   authButton = false,
   menuItems,
+  onMenuToggle,
   ...props
 }) => {
   return (
@@ -53,7 +55,7 @@ export const SystemToolbar: React.FC<SystemToolbarProps> = ({
       {children}
       {authButton ? <AuthSetsStatusIconButton color="inherit" /> : null}
       {darkModeButton ? <DarkModeIconButton color="inherit" /> : null}
-      {menuItems ? <SiteMenu>{menuItems}</SiteMenu> : null}
+      {menuItems ? <SiteMenu onMenuToggle={onMenuToggle}>{menuItems}</SiteMenu> : null}
     </Toolbar>
   )
 }

package/src/components/index.ts

@@ -1,4 +1,5 @@
 export * from './AppBar'
+export * from './CollapsibleDrawer'
 export * from './MobileSystemControls'
 export * from './SearchBar'
 export * from './SiteMenu'

package/src/contexts/Collapsible/State.ts

@@ -0,0 +1,9 @@
+import { ContextExState } from '@xyo-network/react-shared'
+import { Dispatch, SetStateAction } from 'react'
+
+export interface CollapsibleState extends ContextExState {
+  collapse?: boolean
+  setCollapse?: Dispatch<SetStateAction<boolean>>
+  collapseEnd?: boolean
+  setCollapseEnd?: Dispatch<SetStateAction<boolean>>
+}

package/src/contexts/Collapsible/context.ts

@@ -0,0 +1,5 @@
+import { createContextEx } from '@xyo-network/react-shared'
+
+import { CollapsibleState } from './State'
+
+export const CollapsibleContext = createContextEx<CollapsibleState>()

package/src/contexts/Collapsible/index.ts

@@ -0,0 +1,2 @@
+export * from './provider'
+export * from './use'