@superdispatch/ui-lab 0.50.3 → 0.50.5

package/{dist-src → pkg/dist-src}/flag-list/FlagListItem.js

@@ -32,46 +32,38 @@ var EndActions = /*#__PURE__*/styled.div.withConfig({
   } = _ref2;
   return theme.breakpoints.down('xs');
 });
-var BannerListItemDanger = /*#__PURE__*/css(["& ", "{background:", ";color:", ";}&:hover{background:", ";}"], IconContainer, ColorDynamic.Red50, ColorDynamic.Red300, ColorDynamic.Red50);
 var BannerListItemStandalone = /*#__PURE__*/css(["background:", ";"], ColorDynamic.Silver200);
 var BannerListContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "FlagListItem__BannerListContainer",
   componentId: "SD__sc-o5bqru-4"
-})(["display:flex;align-items:center;gap:8px;padding:8px 16px 8px 12px;border:1px solid ", ";background:", ";cursor:default;transition:", ";& + &{border-top:none;}&:last-child{border-radius:0 0 4px 4px;}&:hover{background:", ";& ", "{background:", ";}& ", " > svg{color:", ";}}[data-variant='standalone'] &:not(:hover){", "}", " ", "{flex-direction:column;align-items:flex-start;}"], ColorDynamic.Silver400, ColorDynamic.White, _ref3 => {
+})(["display:flex;align-items:center;gap:8px;padding:8px 16px 8px 12px;border:1px solid ", ";background:", ";cursor:default;transition:", ";& + &{border-top:none;}&:last-child{border-radius:0 0 4px 4px;}&:hover{background:", ";& ", "{background:", ";}}[data-variant='standalone'] &:not(:hover){", "}", "{flex-direction:column;align-items:flex-start;}"], ColorDynamic.Silver400, ColorDynamic.White, _ref3 => {
   var {
     theme
   } = _ref3;
   return theme.transitions.create(['color', 'background-color']);
-}, ColorDynamic.Blue50, IconContainer, ColorDynamic.White, HelpIcon, _ref4 => {
-  var {
-    $variant
-  } = _ref4;
-  return $variant === 'danger' ? ColorDynamic.Red300 : ColorDynamic.Blue300;
-}, BannerListItemStandalone, _ref5 => {
-  var {
-    $variant
-  } = _ref5;
-  return $variant === 'danger' ? BannerListItemDanger : null;
-}, _ref6 => {
+}, ColorDynamic.Silver200, IconContainer, ColorDynamic.White, BannerListItemStandalone, _ref4 => {
   var {
     theme
-  } = _ref6;
+  } = _ref4;
   return theme.breakpoints.down('xs');
 });
-export var FlagListItem = /*#__PURE__*/forwardRef((_ref7, ref) => {
+export var FlagListItem = /*#__PURE__*/forwardRef((_ref5, ref) => {
   var {
       variant = 'primary',
       showHelpIcon,
       endAction,
       children
-    } = _ref7,
-    rest = _objectWithoutProperties(_ref7, _excluded);
+    } = _ref5,
+    rest = _objectWithoutProperties(_ref5, _excluded);
   return /*#__PURE__*/_jsxs(BannerListContainer, _objectSpread(_objectSpread({}, rest), {}, {
     ref: ref,
-    $variant: variant,
     children: [/*#__PURE__*/_jsxs(Content, {
       children: [/*#__PURE__*/_jsx(IconContainer, {
-        children: variant === 'danger' ? /*#__PURE__*/_jsx(Error, {}) : variant === 'warning' ? /*#__PURE__*/_jsx(Warning, {}) : /*#__PURE__*/_jsx(Flag, {})
+        children: variant === 'danger' ? /*#__PURE__*/_jsx(Error, {
+          htmlColor: ColorDynamic.Red300
+        }) : variant === 'warning' ? /*#__PURE__*/_jsx(Warning, {
+          htmlColor: ColorDynamic.Yellow300
+        }) : /*#__PURE__*/_jsx(Flag, {})
       }), children, /*#__PURE__*/_jsx(HelpIcon, {
         children: showHelpIcon && /*#__PURE__*/_jsx(Help, {})
       })]

package/{dist-src → pkg/dist-src}/index.js

@@ -16,6 +16,7 @@ export * from "./flag-list/FlagListItem.js";
 export * from "./linked-text/LinkedText.js";
 export * from "./multiline-text/MultilineText.js";
 export * from "./navbar/Navbar.js";
+export * from "./navbar/NavbarAccordion.js";
 export * from "./navbar/NavbarAvatar.js";
 export * from "./navbar/NavbarBottomBar.js";
 export { useNavbarContext } from "./navbar/NavbarContext.js";

package/{dist-src → pkg/dist-src}/navbar/Navbar.js

@@ -1,7 +1,7 @@
 import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import { Drawer, useMediaQuery, useTheme } from '@material-ui/core';
 import { ColorDynamic, useResponsiveValue } from '@superdispatch/ui';
-import { useMemo, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import styled from 'styled-components';
 import { NavbarBottomBar } from "./NavbarBottomBar.js";
 import { NavbarContext } from "./NavbarContext.js";
@@ -23,7 +23,9 @@ export function Navbar(_ref) {
     bottomItems,
     children,
     containerStyle,
-    hasExtraBadge
+    hasExtraBadge,
+    isMenuExpanded: controlledIsMenuExpanded,
+    onMenuExpandedChange
   } = _ref;
   var theme = useTheme();
   var [isDrawerOpen, setDrawerOpen] = useState(false);
@@ -32,7 +34,14 @@ export function Navbar(_ref) {
   var matches = useMediaQuery(theme.breakpoints.up('md'), {
     noSsr: true
   });
-  var [isMenuExpanded, setMenuExpanded] = useState(matches);
+  var [internalIsMenuExpanded, setInternalMenuExpanded] = useState(matches);
+  var isMenuExpanded = controlledIsMenuExpanded !== undefined ? controlledIsMenuExpanded : internalIsMenuExpanded;
+  var setMenuExpanded = useCallback(value => {
+    if (controlledIsMenuExpanded === undefined) {
+      setInternalMenuExpanded(value);
+    }
+    onMenuExpandedChange === null || onMenuExpandedChange === void 0 || onMenuExpandedChange(value);
+  }, [controlledIsMenuExpanded, onMenuExpandedChange]);
   var hasBadge = hasExtraBadge || items.some(item => item.badge);
   var ctx = useMemo(() => ({
     isDrawerOpen,
@@ -40,7 +49,7 @@ export function Navbar(_ref) {
     setDrawerOpen,
     setMenuExpanded,
     isNavbarExpanded: isMenuExpanded || isDrawerOpen
-  }), [isDrawerOpen, isMenuExpanded, setMenuExpanded, setDrawerOpen]);
+  }), [isDrawerOpen, isMenuExpanded, setDrawerOpen, setMenuExpanded]);
   return /*#__PURE__*/_jsx(NavbarContext.Provider, {
     value: ctx,
     children: /*#__PURE__*/_jsxs("div", {

package/{dist-src → pkg/dist-src}/navbar/NavbarAccordion.js

@@ -34,19 +34,28 @@ export function NavbarAccordion(_ref2) {
     icon,
     gutter,
     items,
-    onClick: _onClick
+    onClick: _onClick,
+    isExpanded: controlledIsExpanded,
+    onExpandedChange
   } = _ref2;
   var uid = useUID();
   var {
     setDrawerOpen,
     isNavbarExpanded
   } = useNavbarContext();
-  var [isExpanded, setExpanded] = useState(true);
-
-  // sync accordion state with Desktop menu state
+  var [internalIsExpanded, setInternalExpanded] = useState(true);
   useEffect(() => {
-    setExpanded(isNavbarExpanded);
-  }, [isNavbarExpanded]);
+    if (controlledIsExpanded === undefined) {
+      setInternalExpanded(isNavbarExpanded);
+    }
+  }, [isNavbarExpanded, controlledIsExpanded]);
+  var isExpanded = controlledIsExpanded !== undefined ? controlledIsExpanded : internalIsExpanded;
+  function setExpanded(value) {
+    if (controlledIsExpanded === undefined) {
+      setInternalExpanded(value);
+    }
+    onExpandedChange === null || onExpandedChange === void 0 || onExpandedChange(value);
+  }
   var filteredItems = useMemo(() => items.filter(item => !item.hide), [items]);
   return /*#__PURE__*/_jsxs(NavbarAccordionRoot, {
     square: true,
@@ -54,8 +63,8 @@ export function NavbarAccordion(_ref2) {
     "aria-labelledby": uid,
     expanded: isExpanded,
     onClick: event => {
-      _onClick === null || _onClick === void 0 ? void 0 : _onClick(event);
-      if (isNavbarExpanded) {
+      _onClick === null || _onClick === void 0 || _onClick(event);
+      if (controlledIsExpanded !== undefined || isNavbarExpanded) {
         setExpanded(!isExpanded);
       }
     },
@@ -84,7 +93,7 @@ export function NavbarAccordion(_ref2) {
         onClick: event => {
           var _item$onClick;
           event.stopPropagation();
-          (_item$onClick = item.onClick) === null || _item$onClick === void 0 ? void 0 : _item$onClick.call(item, event);
+          (_item$onClick = item.onClick) === null || _item$onClick === void 0 || _item$onClick.call(item, event);
           if (!event.isDefaultPrevented()) {
             setDrawerOpen(false);
           }

package/{dist-src → pkg/dist-src}/navbar/NavbarList.js

@@ -122,7 +122,7 @@ export function NavbarList(_ref6) {
           gutter: prev && prev.groupKey !== item.groupKey,
           onClick: event => {
             var _item$onClick;
-            (_item$onClick = item.onClick) === null || _item$onClick === void 0 ? void 0 : _item$onClick.call(item, event);
+            (_item$onClick = item.onClick) === null || _item$onClick === void 0 || _item$onClick.call(item, event);
             if (!event.isDefaultPrevented()) {
               setDrawerOpen(false);
             }

package/{dist-src → pkg/dist-src}/sidebar/SidebarBackButton.js

@@ -24,7 +24,7 @@ export function SidebarBackButton(_ref) {
   return /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({}, props), {}, {
     size: "small",
     onClick: event => {
-      _onClick === null || _onClick === void 0 ? void 0 : _onClick(event);
+      _onClick === null || _onClick === void 0 || _onClick(event);
       if (!event.isDefaultPrevented()) {
         openSidebar();
       }

package/{dist-src → pkg/dist-src}/sidebar/SidebarMenuItem.js

@@ -68,7 +68,7 @@ export var SidebarMenuItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
       disabled: disabled,
       "aria-current": selected,
       onClick: event => {
-        _onClick === null || _onClick === void 0 ? void 0 : _onClick(event);
+        _onClick === null || _onClick === void 0 || _onClick(event);
         if (!event.isDefaultPrevented() && openContentOnClick) {
           openSidebarContent();
         }

package/{dist-src → pkg/dist-src}/sidebar/SidebarMenuItemAvatar.js

@@ -36,7 +36,7 @@ export var SidebarMenuItemAvatar = /*#__PURE__*/forwardRef((_ref, ref) => {
         onMouseDown: stopPropagation,
         onTouchStart: stopPropagation,
         onChange: (_, checked) => {
-          _onChange === null || _onChange === void 0 ? void 0 : _onChange(checked);
+          _onChange === null || _onChange === void 0 || _onChange(checked);
         }
       })
     });

package/{dist-types → pkg/dist-types}/index.d.ts

@@ -252,13 +252,17 @@ interface NavbarBottomBarProps {
 }
 declare function NavbarBottomBar({ items, hasMenuBadge, }: NavbarBottomBarProps): ReactElement;
 
+declare const NavbarAccordionLabel: StyledComponent<"span", DefaultTheme, {}, never>;
 interface NavbarAccordionProps {
     label: ReactNode;
     icon?: ReactNode;
     gutter?: boolean;
     items: Array<Omit<NavbarItemOptions, 'icon'>>;
     onClick?: (event: MouseEvent<HTMLDivElement>) => void;
+    isExpanded?: boolean;
+    onExpandedChange?: (isExpanded: boolean) => void;
 }
+declare function NavbarAccordion({ label, icon, gutter, items, onClick, isExpanded: controlledIsExpanded, onExpandedChange, }: NavbarAccordionProps): ReactElement;
 
 declare const NavbarBadge: StyledComponent<"span", DefaultTheme, {}, never>;
 declare const NavbarLabel: StyledComponent<"span", DefaultTheme, {}, never>;
@@ -307,8 +311,10 @@ interface NavbarProps {
     bottomItems: NavbarBottomBarItem[];
     footer?: ReactNode;
     hasExtraBadge?: boolean;
+    isMenuExpanded?: boolean;
+    onMenuExpandedChange?: (isExpanded: boolean) => void;
 }
-declare function Navbar({ footer, items, header, bottomItems, children, containerStyle, hasExtraBadge, }: NavbarProps): ReactElement;
+declare function Navbar({ footer, items, header, bottomItems, children, containerStyle, hasExtraBadge, isMenuExpanded: controlledIsMenuExpanded, onMenuExpandedChange, }: NavbarProps): ReactElement;
 
 interface NavbarAvatarProps extends Omit<AvatarProps, 'title'> {
     title: ReactNode;
@@ -435,4 +441,4 @@ interface TextBoxProps {
 }
 declare const TextBox: ForwardRefExoticComponent<TextBoxProps & RefAttributes<HTMLElement>>;
 
-export { Alert, AlertProps, AlertSeverityProp, AnchorButton, AnchorButtonProps, Banner, BorderRadiusProp, BorderWidthProp, Box, BoxProps, Button, ButtonArea, ButtonAreaProps, ButtonProps, ButtonSizeProp, ButtonVariantProp, Chat, ChatMessage, Container, ContainerProps, DescriptionItem, DescriptionItemProps, DescriptionLineItem, DottedLine, EmailAutocomplete, EmailAutocompleteProps, FileDropZone, FileDropZoneProps, FileListItem, FileListItemProps, FlagList, FlagListItem, LinkComponentProps, LinkedText, LinkedTextProps, MarginProp, MultilineText, MultilineTextProps, Navbar, NavbarAccordionOptions, NavbarAvatar, NavbarBadge, NavbarBottomBar, NavbarBottomBarItem, NavbarItem, NavbarItemOptions, NavbarItemProps, NavbarLabel, NavbarList, NavbarMenu, NavbarMenuItem, NavbarMenuItemOption, PasswordStrength, Sidebar, SidebarBackButton, SidebarContainer, SidebarContainerProps, SidebarContent, SidebarContentProps, SidebarDivider, SidebarMenuItem, SidebarMenuItemAction, SidebarMenuItemActionProps, SidebarMenuItemAvatar, SidebarMenuItemAvatarProps, SidebarMenuItemProps, SidebarProps, SidebarSubheader, SidebarSubheaderProps, TextAlignProp, TextBox, TextBoxProps, TextColorProp, TextDisplayProp, TextVariantProp, formatBytes, toBytes, useNavbarContext, useSidebarContext };
+export { Alert, AlertProps, AlertSeverityProp, AnchorButton, AnchorButtonProps, Banner, BorderRadiusProp, BorderWidthProp, Box, BoxProps, Button, ButtonArea, ButtonAreaProps, ButtonProps, ButtonSizeProp, ButtonVariantProp, Chat, ChatMessage, Container, ContainerProps, DescriptionItem, DescriptionItemProps, DescriptionLineItem, DottedLine, EmailAutocomplete, EmailAutocompleteProps, FileDropZone, FileDropZoneProps, FileListItem, FileListItemProps, FlagList, FlagListItem, LinkComponentProps, LinkedText, LinkedTextProps, MarginProp, MultilineText, MultilineTextProps, Navbar, NavbarAccordion, NavbarAccordionLabel, NavbarAccordionOptions, NavbarAccordionProps, NavbarAvatar, NavbarBadge, NavbarBottomBar, NavbarBottomBarItem, NavbarItem, NavbarItemOptions, NavbarItemProps, NavbarLabel, NavbarList, NavbarMenu, NavbarMenuItem, NavbarMenuItemOption, PasswordStrength, Sidebar, SidebarBackButton, SidebarContainer, SidebarContainerProps, SidebarContent, SidebarContentProps, SidebarDivider, SidebarMenuItem, SidebarMenuItemAction, SidebarMenuItemActionProps, SidebarMenuItemAvatar, SidebarMenuItemAvatarProps, SidebarMenuItemProps, SidebarProps, SidebarSubheader, SidebarSubheaderProps, TextAlignProp, TextBox, TextBoxProps, TextColorProp, TextDisplayProp, TextVariantProp, formatBytes, toBytes, useNavbarContext, useSidebarContext };

package/{dist-web → pkg/dist-web}/index.js

@@ -1,7 +1,7 @@
 import { CheckCircle, Info, Error as Error$1, WarningRounded, Image, Refresh, Delete, Warning, Flag, Help, Menu, ExpandMore, MenuOpen, Check, ArrowBack, OpenInNew } from '@material-ui/icons';
 import { Alert as Alert$1, Autocomplete } from '@material-ui/lab';
 import { ColorDynamic, parseResponsiveProp, isColorDynamicProp, parseSpaceProp, Stack, Color, Inline, mergeRefs, useUID, isEmptyReactNode, Columns, Column, Tag, CardButton, useResponsiveValue, ColorDark, useCollapseBreakpoint } from '@superdispatch/ui';
-import { forwardRef, useState, useEffect, Children, useRef, useLayoutEffect, Suspense, memo, useContext, createContext, useMemo, createElement } from 'react';
+import { forwardRef, useState, useEffect, Children, useRef, useLayoutEffect, Suspense, memo, useContext, createContext, useMemo, createElement, useCallback } from 'react';
 import styled, { css, keyframes } from 'styled-components';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
@@ -902,7 +902,7 @@ var EmailAutocomplete = /*#__PURE__*/forwardRef((_ref, ref) => {
     },
     onChange: (_event, selectedValue, reason) => {
       var emails = selectedValue.flatMap(item => item.split(',')).map(item => item.trim());
-      _onChange === null || _onChange === void 0 ? void 0 : _onChange(emails, reason);
+      _onChange === null || _onChange === void 0 || _onChange(emails, reason);
     },
     renderTags: items => {
       return /*#__PURE__*/jsx(Inline, {
@@ -937,13 +937,13 @@ var EmailAutocomplete = /*#__PURE__*/forwardRef((_ref, ref) => {
         var text = event.target.value.replace(/,/g, '');
         var hasCommaOrSpace = /,|\s/.test(event.target.value);
         if (hasCommaOrSpace && text.trim() !== '') {
-          _onChange === null || _onChange === void 0 ? void 0 : _onChange([...(value || []), text.trim()], 'select-option');
+          _onChange === null || _onChange === void 0 || _onChange([...(value || []), text.trim()], 'select-option');
         }
       },
       onBlur: event => {
         var text = event.target.value;
         if (text.trim() !== '') {
-          _onChange === null || _onChange === void 0 ? void 0 : _onChange([...(value || []), text.trim()], 'select-option');
+          _onChange === null || _onChange === void 0 || _onChange([...(value || []), text.trim()], 'select-option');
         }
       }
     }))
@@ -1030,10 +1030,10 @@ var FileDropZone = /*#__PURE__*/forwardRef((props, ref) => {
       maxFiles: maxFiles,
       disabled: disabled,
       onDropAccepted: files => {
-        _onDropAccepted === null || _onDropAccepted === void 0 ? void 0 : _onDropAccepted(files);
+        _onDropAccepted === null || _onDropAccepted === void 0 || _onDropAccepted(files);
       },
       onDropRejected: fileRejections => {
-        _onDropRejected === null || _onDropRejected === void 0 ? void 0 : _onDropRejected(fileRejections);
+        _onDropRejected === null || _onDropRejected === void 0 || _onDropRejected(fileRejections);
       },
       children: _ref3 => {
         var {
@@ -1245,46 +1245,38 @@ var EndActions = /*#__PURE__*/styled.div.withConfig({
   } = _ref2;
   return theme.breakpoints.down('xs');
 });
-var BannerListItemDanger = /*#__PURE__*/css(["& ", "{background:", ";color:", ";}&:hover{background:", ";}"], IconContainer, ColorDynamic.Red50, ColorDynamic.Red300, ColorDynamic.Red50);
 var BannerListItemStandalone = /*#__PURE__*/css(["background:", ";"], ColorDynamic.Silver200);
 var BannerListContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "FlagListItem__BannerListContainer",
   componentId: "SD__sc-o5bqru-4"
-})(["display:flex;align-items:center;gap:8px;padding:8px 16px 8px 12px;border:1px solid ", ";background:", ";cursor:default;transition:", ";& + &{border-top:none;}&:last-child{border-radius:0 0 4px 4px;}&:hover{background:", ";& ", "{background:", ";}& ", " > svg{color:", ";}}[data-variant='standalone'] &:not(:hover){", "}", " ", "{flex-direction:column;align-items:flex-start;}"], ColorDynamic.Silver400, ColorDynamic.White, _ref3 => {
+})(["display:flex;align-items:center;gap:8px;padding:8px 16px 8px 12px;border:1px solid ", ";background:", ";cursor:default;transition:", ";& + &{border-top:none;}&:last-child{border-radius:0 0 4px 4px;}&:hover{background:", ";& ", "{background:", ";}}[data-variant='standalone'] &:not(:hover){", "}", "{flex-direction:column;align-items:flex-start;}"], ColorDynamic.Silver400, ColorDynamic.White, _ref3 => {
   var {
     theme
   } = _ref3;
   return theme.transitions.create(['color', 'background-color']);
-}, ColorDynamic.Blue50, IconContainer, ColorDynamic.White, HelpIcon, _ref4 => {
-  var {
-    $variant
-  } = _ref4;
-  return $variant === 'danger' ? ColorDynamic.Red300 : ColorDynamic.Blue300;
-}, BannerListItemStandalone, _ref5 => {
-  var {
-    $variant
-  } = _ref5;
-  return $variant === 'danger' ? BannerListItemDanger : null;
-}, _ref6 => {
+}, ColorDynamic.Silver200, IconContainer, ColorDynamic.White, BannerListItemStandalone, _ref4 => {
   var {
     theme
-  } = _ref6;
+  } = _ref4;
   return theme.breakpoints.down('xs');
 });
-var FlagListItem = /*#__PURE__*/forwardRef((_ref7, ref) => {
+var FlagListItem = /*#__PURE__*/forwardRef((_ref5, ref) => {
   var {
       variant = 'primary',
       showHelpIcon,
       endAction,
       children
-    } = _ref7,
-    rest = _objectWithoutProperties(_ref7, _excluded$7);
+    } = _ref5,
+    rest = _objectWithoutProperties(_ref5, _excluded$7);
   return /*#__PURE__*/jsxs(BannerListContainer, _objectSpread(_objectSpread({}, rest), {}, {
     ref: ref,
-    $variant: variant,
     children: [/*#__PURE__*/jsxs(Content, {
       children: [/*#__PURE__*/jsx(IconContainer, {
-        children: variant === 'danger' ? /*#__PURE__*/jsx(Error$1, {}) : variant === 'warning' ? /*#__PURE__*/jsx(Warning, {}) : /*#__PURE__*/jsx(Flag, {})
+        children: variant === 'danger' ? /*#__PURE__*/jsx(Error$1, {
+          htmlColor: ColorDynamic.Red300
+        }) : variant === 'warning' ? /*#__PURE__*/jsx(Warning, {
+          htmlColor: ColorDynamic.Yellow300
+        }) : /*#__PURE__*/jsx(Flag, {})
       }), children, /*#__PURE__*/jsx(HelpIcon, {
         children: showHelpIcon && /*#__PURE__*/jsx(Help, {})
       })]
@@ -1491,19 +1483,28 @@ function NavbarAccordion(_ref2) {
     icon,
     gutter,
     items,
-    onClick: _onClick
+    onClick: _onClick,
+    isExpanded: controlledIsExpanded,
+    onExpandedChange
   } = _ref2;
   var uid = useUID();
   var {
     setDrawerOpen,
     isNavbarExpanded
   } = useNavbarContext();
-  var [isExpanded, setExpanded] = useState(true);
-
-  // sync accordion state with Desktop menu state
+  var [internalIsExpanded, setInternalExpanded] = useState(true);
   useEffect(() => {
-    setExpanded(isNavbarExpanded);
-  }, [isNavbarExpanded]);
+    if (controlledIsExpanded === undefined) {
+      setInternalExpanded(isNavbarExpanded);
+    }
+  }, [isNavbarExpanded, controlledIsExpanded]);
+  var isExpanded = controlledIsExpanded !== undefined ? controlledIsExpanded : internalIsExpanded;
+  function setExpanded(value) {
+    if (controlledIsExpanded === undefined) {
+      setInternalExpanded(value);
+    }
+    onExpandedChange === null || onExpandedChange === void 0 || onExpandedChange(value);
+  }
   var filteredItems = useMemo(() => items.filter(item => !item.hide), [items]);
   return /*#__PURE__*/jsxs(NavbarAccordionRoot, {
     square: true,
@@ -1511,8 +1512,8 @@ function NavbarAccordion(_ref2) {
     "aria-labelledby": uid,
     expanded: isExpanded,
     onClick: event => {
-      _onClick === null || _onClick === void 0 ? void 0 : _onClick(event);
-      if (isNavbarExpanded) {
+      _onClick === null || _onClick === void 0 || _onClick(event);
+      if (controlledIsExpanded !== undefined || isNavbarExpanded) {
         setExpanded(!isExpanded);
       }
     },
@@ -1541,7 +1542,7 @@ function NavbarAccordion(_ref2) {
         onClick: event => {
           var _item$onClick;
           event.stopPropagation();
-          (_item$onClick = item.onClick) === null || _item$onClick === void 0 ? void 0 : _item$onClick.call(item, event);
+          (_item$onClick = item.onClick) === null || _item$onClick === void 0 || _item$onClick.call(item, event);
           if (!event.isDefaultPrevented()) {
             setDrawerOpen(false);
           }
@@ -1665,7 +1666,7 @@ function NavbarList(_ref6) {
           gutter: prev && prev.groupKey !== item.groupKey,
           onClick: event => {
             var _item$onClick;
-            (_item$onClick = item.onClick) === null || _item$onClick === void 0 ? void 0 : _item$onClick.call(item, event);
+            (_item$onClick = item.onClick) === null || _item$onClick === void 0 || _item$onClick.call(item, event);
             if (!event.isDefaultPrevented()) {
               setDrawerOpen(false);
             }
@@ -1694,7 +1695,9 @@ function Navbar(_ref) {
     bottomItems,
     children,
     containerStyle,
-    hasExtraBadge
+    hasExtraBadge,
+    isMenuExpanded: controlledIsMenuExpanded,
+    onMenuExpandedChange
   } = _ref;
   var theme = useTheme();
   var [isDrawerOpen, setDrawerOpen] = useState(false);
@@ -1703,7 +1706,14 @@ function Navbar(_ref) {
   var matches = useMediaQuery(theme.breakpoints.up('md'), {
     noSsr: true
   });
-  var [isMenuExpanded, setMenuExpanded] = useState(matches);
+  var [internalIsMenuExpanded, setInternalMenuExpanded] = useState(matches);
+  var isMenuExpanded = controlledIsMenuExpanded !== undefined ? controlledIsMenuExpanded : internalIsMenuExpanded;
+  var setMenuExpanded = useCallback(value => {
+    if (controlledIsMenuExpanded === undefined) {
+      setInternalMenuExpanded(value);
+    }
+    onMenuExpandedChange === null || onMenuExpandedChange === void 0 || onMenuExpandedChange(value);
+  }, [controlledIsMenuExpanded, onMenuExpandedChange]);
   var hasBadge = hasExtraBadge || items.some(item => item.badge);
   var ctx = useMemo(() => ({
     isDrawerOpen,
@@ -1711,7 +1721,7 @@ function Navbar(_ref) {
     setDrawerOpen,
     setMenuExpanded,
     isNavbarExpanded: isMenuExpanded || isDrawerOpen
-  }), [isDrawerOpen, isMenuExpanded, setMenuExpanded, setDrawerOpen]);
+  }), [isDrawerOpen, isMenuExpanded, setDrawerOpen, setMenuExpanded]);
   return /*#__PURE__*/jsx(NavbarContext.Provider, {
     value: ctx,
     children: /*#__PURE__*/jsxs("div", {
@@ -2162,7 +2172,7 @@ function SidebarBackButton(_ref) {
   return /*#__PURE__*/jsx(IconButton, _objectSpread(_objectSpread({}, props), {}, {
     size: "small",
     onClick: event => {
-      _onClick === null || _onClick === void 0 ? void 0 : _onClick(event);
+      _onClick === null || _onClick === void 0 || _onClick(event);
       if (!event.isDefaultPrevented()) {
         openSidebar();
       }
@@ -2358,7 +2368,7 @@ var SidebarMenuItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
       disabled: disabled,
       "aria-current": selected,
       onClick: event => {
-        _onClick === null || _onClick === void 0 ? void 0 : _onClick(event);
+        _onClick === null || _onClick === void 0 || _onClick(event);
         if (!event.isDefaultPrevented() && openContentOnClick) {
           openSidebarContent();
         }
@@ -2472,7 +2482,7 @@ var SidebarMenuItemAvatar = /*#__PURE__*/forwardRef((_ref, ref) => {
         onMouseDown: stopPropagation,
         onTouchStart: stopPropagation,
         onChange: (_, checked) => {
-          _onChange === null || _onChange === void 0 ? void 0 : _onChange(checked);
+          _onChange === null || _onChange === void 0 || _onChange(checked);
         }
       })
     });
@@ -2517,5 +2527,5 @@ var SidebarSubheader = /*#__PURE__*/forwardRef((_ref, ref) => {
 });
 if (process.env.NODE_ENV !== "production") SidebarSubheader.displayName = "SidebarSubheader";
 
-export { Alert, AnchorButton, Banner, Box, Button, ButtonArea, Chat, ChatMessage, Container, DescriptionItem, DescriptionLineItem, DottedLine, EmailAutocomplete, FileDropZone, FileListItem, FlagList, FlagListItem, LinkedText, MultilineText, Navbar, NavbarAvatar, NavbarBadge, NavbarBottomBar, NavbarItem, NavbarLabel, NavbarList, NavbarMenu, NavbarMenuItem, PasswordStrength, Sidebar, SidebarBackButton, SidebarContainer, SidebarContent, SidebarDivider, SidebarMenuItem, SidebarMenuItemAction, SidebarMenuItemAvatar, SidebarSubheader, TextBox, formatBytes, toBytes, useNavbarContext, useSidebarContext };
+export { Alert, AnchorButton, Banner, Box, Button, ButtonArea, Chat, ChatMessage, Container, DescriptionItem, DescriptionLineItem, DottedLine, EmailAutocomplete, FileDropZone, FileListItem, FlagList, FlagListItem, LinkedText, MultilineText, Navbar, NavbarAccordion, NavbarAccordionLabel, NavbarAvatar, NavbarBadge, NavbarBottomBar, NavbarItem, NavbarLabel, NavbarList, NavbarMenu, NavbarMenuItem, PasswordStrength, Sidebar, SidebarBackButton, SidebarContainer, SidebarContent, SidebarDivider, SidebarMenuItem, SidebarMenuItemAction, SidebarMenuItemAvatar, SidebarSubheader, TextBox, formatBytes, toBytes, useNavbarContext, useSidebarContext };
 //# sourceMappingURL=index.js.map