@superdispatch/ui-lab 0.50.6 → 0.50.7

package/dist-node/index.js

@@ -1341,8 +1341,10 @@ var NavbarContext = /*#__PURE__*/react.createContext({
   isDrawerOpen: false,
   isMenuExpanded: false,
   isNavbarExpanded: false,
+  groupExpanded: {},
   setMenuExpanded: () => void 0,
-  setDrawerOpen: () => void 0
+  setDrawerOpen: () => void 0,
+  setGroupExpanded: () => void 0
 });
 function useNavbarContext() {
   return react.useContext(NavbarContext);
@@ -1485,33 +1487,23 @@ var IconWrapper$2 = /*#__PURE__*/styled__default.div.withConfig({
   componentId: "SD__sc-1s7g3kw-3"
 })(["width:24px;margin-right:8px;& svg{font-size:24px;}"]);
 function NavbarAccordion(_ref2) {
+  var _groupExpanded$groupK;
   var {
     label,
     icon,
     gutter,
     items,
     onClick: _onClick,
-    isExpanded: controlledIsExpanded,
-    onExpandedChange
+    groupKey
   } = _ref2;
   var uid = ui.useUID();
   var {
     setDrawerOpen,
-    isNavbarExpanded
+    isNavbarExpanded,
+    groupExpanded,
+    setGroupExpanded
   } = useNavbarContext();
-  var [internalIsExpanded, setInternalExpanded] = react.useState(true);
-  react.useEffect(() => {
-    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 isExpanded = (_groupExpanded$groupK = groupExpanded[groupKey]) !== null && _groupExpanded$groupK !== void 0 ? _groupExpanded$groupK : true;
   var filteredItems = react.useMemo(() => items.filter(item => !item.hide), [items]);
   return /*#__PURE__*/jsxRuntime.jsxs(NavbarAccordionRoot, {
     square: true,
@@ -1520,8 +1512,8 @@ function NavbarAccordion(_ref2) {
     expanded: isExpanded,
     onClick: event => {
       _onClick === null || _onClick === void 0 || _onClick(event);
-      if (controlledIsExpanded !== undefined || isNavbarExpanded) {
-        setExpanded(!isExpanded);
+      if (isNavbarExpanded) {
+        setGroupExpanded(groupKey, !isExpanded);
       }
     },
     children: [/*#__PURE__*/jsxRuntime.jsxs(NavbarAccordionSummary, {
@@ -1665,7 +1657,8 @@ function NavbarList(_ref6) {
           return /*#__PURE__*/react.createElement(NavbarAccordion, _objectSpread(_objectSpread({}, item), {}, {
             key: item.key,
             gutter: prev && prev.groupKey !== item.groupKey,
-            onClick: item.onClick
+            onClick: item.onClick,
+            groupKey: item.groupKey || item.key
           }));
         }
         return /*#__PURE__*/react.createElement(NavbarItem, _objectSpread(_objectSpread({}, item), {}, {
@@ -1703,8 +1696,10 @@ function Navbar(_ref) {
     children,
     containerStyle,
     hasExtraBadge,
+    groupExpanded: controlledGroupExpanded,
     isMenuExpanded: controlledIsMenuExpanded,
-    onMenuExpandedChange
+    onMenuExpandedChange,
+    onGroupExpandedChange
   } = _ref;
   var theme = core.useTheme();
   var [isDrawerOpen, setDrawerOpen] = react.useState(false);
@@ -1714,6 +1709,8 @@ function Navbar(_ref) {
     noSsr: true
   });
   var [internalIsMenuExpanded, setInternalMenuExpanded] = react.useState(matches);
+  var [groupExpandedState, setGroupExpandedState] = react.useState(controlledGroupExpanded || {});
+  var groupExpanded = controlledGroupExpanded ? controlledGroupExpanded : groupExpandedState;
   var isMenuExpanded = controlledIsMenuExpanded !== undefined ? controlledIsMenuExpanded : internalIsMenuExpanded;
   var setMenuExpanded = react.useCallback(value => {
     if (controlledIsMenuExpanded === undefined) {
@@ -1721,14 +1718,25 @@ function Navbar(_ref) {
     }
     onMenuExpandedChange === null || onMenuExpandedChange === void 0 || onMenuExpandedChange(value);
   }, [controlledIsMenuExpanded, onMenuExpandedChange]);
+  var setGroupExpanded = react.useCallback((groupKey, isExpanded) => {
+    var updatedGroupExpanded = _objectSpread(_objectSpread({}, groupExpanded), {}, {
+      [groupKey]: isExpanded
+    });
+    if (!controlledGroupExpanded) {
+      setGroupExpandedState(updatedGroupExpanded);
+    }
+    onGroupExpandedChange === null || onGroupExpandedChange === void 0 || onGroupExpandedChange(updatedGroupExpanded);
+  }, [controlledGroupExpanded, groupExpanded, onGroupExpandedChange]);
   var hasBadge = hasExtraBadge || items.some(item => item.badge);
   var ctx = react.useMemo(() => ({
     isDrawerOpen,
     isMenuExpanded,
     setDrawerOpen,
     setMenuExpanded,
-    isNavbarExpanded: isMenuExpanded || isDrawerOpen
-  }), [isDrawerOpen, isMenuExpanded, setDrawerOpen, setMenuExpanded]);
+    isNavbarExpanded: isMenuExpanded || isDrawerOpen,
+    setGroupExpanded,
+    groupExpanded
+  }), [isDrawerOpen, isMenuExpanded, setMenuExpanded, setGroupExpanded, groupExpanded]);
   return /*#__PURE__*/jsxRuntime.jsx(NavbarContext.Provider, {
     value: ctx,
     children: /*#__PURE__*/jsxRuntime.jsxs("div", {