@superdispatch/ui-lab 0.50.6 → 0.50.8

package/dist-src/navbar/Navbar.js

@@ -24,8 +24,10 @@ export function Navbar(_ref) {
     children,
     containerStyle,
     hasExtraBadge,
+    groupExpanded: controlledGroupExpanded,
     isMenuExpanded: controlledIsMenuExpanded,
-    onMenuExpandedChange
+    onMenuExpandedChange,
+    onGroupExpandedChange
   } = _ref;
   var theme = useTheme();
   var [isDrawerOpen, setDrawerOpen] = useState(false);
@@ -35,6 +37,8 @@ export function Navbar(_ref) {
     noSsr: true
   });
   var [internalIsMenuExpanded, setInternalMenuExpanded] = useState(matches);
+  var [groupExpandedState, setGroupExpandedState] = useState(controlledGroupExpanded || {});
+  var groupExpanded = controlledGroupExpanded ? controlledGroupExpanded : groupExpandedState;
   var isMenuExpanded = controlledIsMenuExpanded !== undefined ? controlledIsMenuExpanded : internalIsMenuExpanded;
   var setMenuExpanded = useCallback(value => {
     if (controlledIsMenuExpanded === undefined) {
@@ -42,14 +46,25 @@ export function Navbar(_ref) {
     }
     onMenuExpandedChange === null || onMenuExpandedChange === void 0 || onMenuExpandedChange(value);
   }, [controlledIsMenuExpanded, onMenuExpandedChange]);
+  var setGroupExpanded = 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 = useMemo(() => ({
     isDrawerOpen,
     isMenuExpanded,
     setDrawerOpen,
     setMenuExpanded,
-    isNavbarExpanded: isMenuExpanded || isDrawerOpen
-  }), [isDrawerOpen, isMenuExpanded, setDrawerOpen, setMenuExpanded]);
+    isNavbarExpanded: isMenuExpanded || isDrawerOpen,
+    setGroupExpanded,
+    groupExpanded
+  }), [isDrawerOpen, isMenuExpanded, setMenuExpanded, setGroupExpanded, groupExpanded]);
   return /*#__PURE__*/_jsx(NavbarContext.Provider, {
     value: ctx,
     children: /*#__PURE__*/_jsxs("div", {

package/dist-src/navbar/NavbarAccordion.js

@@ -2,7 +2,7 @@ import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import { Accordion, AccordionSummary } from '@material-ui/core';
 import { ExpandMore } from '@material-ui/icons';
 import { Color, ColorDark, ColorDynamic, useUID } from '@superdispatch/ui';
-import { useEffect, useMemo, useState, createElement as _createElement } from 'react';
+import { useMemo, createElement as _createElement } from 'react';
 import styled from 'styled-components';
 import { useNavbarContext } from "./NavbarContext.js";
 import { NavbarItem } from "./NavbarItem.js";
@@ -29,33 +29,23 @@ var IconWrapper = /*#__PURE__*/styled.div.withConfig({
   componentId: "SD__sc-1s7g3kw-3"
 })(["width:24px;margin-right:8px;& svg{font-size:24px;}"]);
 export function NavbarAccordion(_ref2) {
+  var _groupExpanded$groupK;
   var {
     label,
     icon,
     gutter,
     items,
     onClick: _onClick,
-    isExpanded: controlledIsExpanded,
-    onExpandedChange
+    groupKey
   } = _ref2;
   var uid = useUID();
   var {
     setDrawerOpen,
-    isNavbarExpanded
+    isNavbarExpanded,
+    groupExpanded,
+    setGroupExpanded
   } = useNavbarContext();
-  var [internalIsExpanded, setInternalExpanded] = useState(true);
-  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 = isNavbarExpanded ? (_groupExpanded$groupK = groupExpanded[groupKey]) !== null && _groupExpanded$groupK !== void 0 ? _groupExpanded$groupK : true : false;
   var filteredItems = useMemo(() => items.filter(item => !item.hide), [items]);
   return /*#__PURE__*/_jsxs(NavbarAccordionRoot, {
     square: true,
@@ -64,8 +54,8 @@ export 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__*/_jsxs(NavbarAccordionSummary, {

package/dist-src/navbar/NavbarContext.js

@@ -3,8 +3,10 @@ export var NavbarContext = /*#__PURE__*/createContext({
   isDrawerOpen: false,
   isMenuExpanded: false,
   isNavbarExpanded: false,
+  groupExpanded: {},
   setMenuExpanded: () => void 0,
-  setDrawerOpen: () => void 0
+  setDrawerOpen: () => void 0,
+  setGroupExpanded: () => void 0
 });
 export function useNavbarContext() {
   return useContext(NavbarContext);

package/dist-src/navbar/NavbarList.js

@@ -114,7 +114,8 @@ export function NavbarList(_ref6) {
           return /*#__PURE__*/_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__*/_createElement(NavbarItem, _objectSpread(_objectSpread({}, item), {}, {

package/dist-types/index.d.ts

@@ -259,10 +259,9 @@ interface NavbarAccordionProps {
     gutter?: boolean;
     items: Array<Omit<NavbarItemOptions, 'icon'>>;
     onClick?: (event: MouseEvent<HTMLDivElement>) => void;
-    isExpanded?: boolean;
-    onExpandedChange?: (isExpanded: boolean) => void;
+    groupKey: Key;
 }
-declare function NavbarAccordion({ label, icon, gutter, items, onClick, isExpanded: controlledIsExpanded, onExpandedChange, }: NavbarAccordionProps): ReactElement;
+declare function NavbarAccordion({ label, icon, gutter, items, onClick, groupKey, }: NavbarAccordionProps): ReactElement;
 
 declare const NavbarBadge: StyledComponent<"span", DefaultTheme, {}, never>;
 declare const NavbarLabel: StyledComponent<"span", DefaultTheme, {}, never>;
@@ -286,7 +285,7 @@ interface NavbarMenuItemProps {
     component?: ComponentType<HTMLAttributes<HTMLElement>>;
 }
 declare function NavbarMenuItem({ label, icon, onClick, component, }: NavbarMenuItemProps): ReactElement;
-interface NavbarAccordionOptions extends NavbarAccordionProps {
+interface NavbarAccordionOptions extends Omit<NavbarAccordionProps, 'groupKey'> {
     key: Key;
     groupKey?: Key;
     hide?: boolean;
@@ -312,9 +311,11 @@ interface NavbarProps {
     footer?: ReactNode;
     hasExtraBadge?: boolean;
     isMenuExpanded?: boolean;
+    groupExpanded?: Record<Key, boolean>;
     onMenuExpandedChange?: (isExpanded: boolean) => void;
+    onGroupExpandedChange?: (groupExpanded: Record<Key, boolean>) => void;
 }
-declare function Navbar({ footer, items, header, bottomItems, children, containerStyle, hasExtraBadge, isMenuExpanded: controlledIsMenuExpanded, onMenuExpandedChange, }: NavbarProps): ReactElement;
+declare function Navbar({ footer, items, header, bottomItems, children, containerStyle, hasExtraBadge, groupExpanded: controlledGroupExpanded, isMenuExpanded: controlledIsMenuExpanded, onMenuExpandedChange, onGroupExpandedChange, }: NavbarProps): ReactElement;
 
 interface NavbarAvatarProps extends Omit<AvatarProps, 'title'> {
     title: ReactNode;
@@ -323,13 +324,14 @@ interface NavbarAvatarProps extends Omit<AvatarProps, 'title'> {
 }
 declare function NavbarAvatar({ title, subtitle, children, ...props }: NavbarAvatarProps): ReactElement;
 
-
 interface NavbarContextType {
     isDrawerOpen: boolean;
     isMenuExpanded: boolean;
     isNavbarExpanded: boolean;
+    groupExpanded: Record<Key, boolean>;
     setDrawerOpen: (value: boolean) => void;
     setMenuExpanded: (value: boolean) => void;
+    setGroupExpanded: (expandedKey: Key, isExpanded: boolean) => void;
 }
 declare function useNavbarContext(): NavbarContextType;
 

package/dist-web/index.js

@@ -1334,8 +1334,10 @@ var NavbarContext = /*#__PURE__*/createContext({
   isDrawerOpen: false,
   isMenuExpanded: false,
   isNavbarExpanded: false,
+  groupExpanded: {},
   setMenuExpanded: () => void 0,
-  setDrawerOpen: () => void 0
+  setDrawerOpen: () => void 0,
+  setGroupExpanded: () => void 0
 });
 function useNavbarContext() {
   return useContext(NavbarContext);
@@ -1478,33 +1480,23 @@ var IconWrapper$2 = /*#__PURE__*/styled.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 = useUID();
   var {
     setDrawerOpen,
-    isNavbarExpanded
+    isNavbarExpanded,
+    groupExpanded,
+    setGroupExpanded
   } = useNavbarContext();
-  var [internalIsExpanded, setInternalExpanded] = useState(true);
-  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 = isNavbarExpanded ? (_groupExpanded$groupK = groupExpanded[groupKey]) !== null && _groupExpanded$groupK !== void 0 ? _groupExpanded$groupK : true : false;
   var filteredItems = useMemo(() => items.filter(item => !item.hide), [items]);
   return /*#__PURE__*/jsxs(NavbarAccordionRoot, {
     square: true,
@@ -1513,8 +1505,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__*/jsxs(NavbarAccordionSummary, {
@@ -1658,7 +1650,8 @@ function NavbarList(_ref6) {
           return /*#__PURE__*/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__*/createElement(NavbarItem, _objectSpread(_objectSpread({}, item), {}, {
@@ -1696,8 +1689,10 @@ function Navbar(_ref) {
     children,
     containerStyle,
     hasExtraBadge,
+    groupExpanded: controlledGroupExpanded,
     isMenuExpanded: controlledIsMenuExpanded,
-    onMenuExpandedChange
+    onMenuExpandedChange,
+    onGroupExpandedChange
   } = _ref;
   var theme = useTheme();
   var [isDrawerOpen, setDrawerOpen] = useState(false);
@@ -1707,6 +1702,8 @@ function Navbar(_ref) {
     noSsr: true
   });
   var [internalIsMenuExpanded, setInternalMenuExpanded] = useState(matches);
+  var [groupExpandedState, setGroupExpandedState] = useState(controlledGroupExpanded || {});
+  var groupExpanded = controlledGroupExpanded ? controlledGroupExpanded : groupExpandedState;
   var isMenuExpanded = controlledIsMenuExpanded !== undefined ? controlledIsMenuExpanded : internalIsMenuExpanded;
   var setMenuExpanded = useCallback(value => {
     if (controlledIsMenuExpanded === undefined) {
@@ -1714,14 +1711,25 @@ function Navbar(_ref) {
     }
     onMenuExpandedChange === null || onMenuExpandedChange === void 0 || onMenuExpandedChange(value);
   }, [controlledIsMenuExpanded, onMenuExpandedChange]);
+  var setGroupExpanded = 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 = useMemo(() => ({
     isDrawerOpen,
     isMenuExpanded,
     setDrawerOpen,
     setMenuExpanded,
-    isNavbarExpanded: isMenuExpanded || isDrawerOpen
-  }), [isDrawerOpen, isMenuExpanded, setDrawerOpen, setMenuExpanded]);
+    isNavbarExpanded: isMenuExpanded || isDrawerOpen,
+    setGroupExpanded,
+    groupExpanded
+  }), [isDrawerOpen, isMenuExpanded, setMenuExpanded, setGroupExpanded, groupExpanded]);
   return /*#__PURE__*/jsx(NavbarContext.Provider, {
     value: ctx,
     children: /*#__PURE__*/jsxs("div", {