@superdispatch/ui-lab 0.50.4 → 0.50.6

package/dist-node/index.js

@@ -909,7 +909,7 @@ var EmailAutocomplete = /*#__PURE__*/react.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__*/jsxRuntime.jsx(ui.Inline, {
@@ -944,13 +944,13 @@ var EmailAutocomplete = /*#__PURE__*/react.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');
         }
       }
     }))
@@ -1037,10 +1037,10 @@ var FileDropZone = /*#__PURE__*/react.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 {
@@ -1490,19 +1490,28 @@ function NavbarAccordion(_ref2) {
     icon,
     gutter,
     items,
-    onClick: _onClick
+    onClick: _onClick,
+    isExpanded: controlledIsExpanded,
+    onExpandedChange
   } = _ref2;
   var uid = ui.useUID();
   var {
     setDrawerOpen,
     isNavbarExpanded
   } = useNavbarContext();
-  var [isExpanded, setExpanded] = react.useState(true);
-
-  // sync accordion state with Desktop menu state
+  var [internalIsExpanded, setInternalExpanded] = react.useState(true);
   react.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 = react.useMemo(() => items.filter(item => !item.hide), [items]);
   return /*#__PURE__*/jsxRuntime.jsxs(NavbarAccordionRoot, {
     square: true,
@@ -1510,8 +1519,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);
       }
     },
@@ -1540,7 +1549,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);
           }
@@ -1664,7 +1673,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);
             }
@@ -1693,7 +1702,9 @@ function Navbar(_ref) {
     bottomItems,
     children,
     containerStyle,
-    hasExtraBadge
+    hasExtraBadge,
+    isMenuExpanded: controlledIsMenuExpanded,
+    onMenuExpandedChange
   } = _ref;
   var theme = core.useTheme();
   var [isDrawerOpen, setDrawerOpen] = react.useState(false);
@@ -1702,7 +1713,14 @@ function Navbar(_ref) {
   var matches = core.useMediaQuery(theme.breakpoints.up('md'), {
     noSsr: true
   });
-  var [isMenuExpanded, setMenuExpanded] = react.useState(matches);
+  var [internalIsMenuExpanded, setInternalMenuExpanded] = react.useState(matches);
+  var isMenuExpanded = controlledIsMenuExpanded !== undefined ? controlledIsMenuExpanded : internalIsMenuExpanded;
+  var setMenuExpanded = react.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 = react.useMemo(() => ({
     isDrawerOpen,
@@ -1710,7 +1728,7 @@ function Navbar(_ref) {
     setDrawerOpen,
     setMenuExpanded,
     isNavbarExpanded: isMenuExpanded || isDrawerOpen
-  }), [isDrawerOpen, isMenuExpanded, setMenuExpanded, setDrawerOpen]);
+  }), [isDrawerOpen, isMenuExpanded, setDrawerOpen, setMenuExpanded]);
   return /*#__PURE__*/jsxRuntime.jsx(NavbarContext.Provider, {
     value: ctx,
     children: /*#__PURE__*/jsxRuntime.jsxs("div", {
@@ -2161,7 +2179,7 @@ function SidebarBackButton(_ref) {
   return /*#__PURE__*/jsxRuntime.jsx(core.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();
       }
@@ -2357,7 +2375,7 @@ var SidebarMenuItem = /*#__PURE__*/react.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();
         }
@@ -2471,7 +2489,7 @@ var SidebarMenuItemAvatar = /*#__PURE__*/react.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);
         }
       })
     });
@@ -2536,6 +2554,8 @@ exports.FlagListItem = FlagListItem;
 exports.LinkedText = LinkedText;
 exports.MultilineText = MultilineText;
 exports.Navbar = Navbar;
+exports.NavbarAccordion = NavbarAccordion;
+exports.NavbarAccordionLabel = NavbarAccordionLabel;
 exports.NavbarAvatar = NavbarAvatar;
 exports.NavbarBadge = NavbarBadge;
 exports.NavbarBottomBar = NavbarBottomBar;