@superdispatch/ui-lab 0.50.4 → 0.50.5

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 {
@@ -1483,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,
@@ -1503,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);
       }
     },
@@ -1533,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);
           }
@@ -1657,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);
             }
@@ -1686,7 +1695,9 @@ function Navbar(_ref) {
     bottomItems,
     children,
     containerStyle,
-    hasExtraBadge
+    hasExtraBadge,
+    isMenuExpanded: controlledIsMenuExpanded,
+    onMenuExpandedChange
   } = _ref;
   var theme = useTheme();
   var [isDrawerOpen, setDrawerOpen] = useState(false);
@@ -1695,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,
@@ -1703,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", {
@@ -2154,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();
       }
@@ -2350,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();
         }
@@ -2464,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);
         }
       })
     });
@@ -2509,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