@innovaccer/design-system 2.28.0 → 2.28.1

package/CHANGELOG.md

@@ -1,3 +1,39 @@
+## 2.28.1 (2024-02-19)
+
+### Highlights
+
+- feat(verticalNav): add expanded state in menu items (84635a2e)
+
+### Breaking changes
+
+NA
+
+### Migration guide
+
+NA
+
+### Deprecations
+
+NA
+
+### Features
+
+- feat(verticalNav): add expanded state in menu items (84635a2e)
+
+### Fixes
+
+NA
+
+### Improvements
+
+- fix(selection-card): update spacing between selection cards and action cards in story (f9580def)
+
+### Documentation
+
+- docs(docs): update images and spacing documentation between interactive cards (f45c8873)
+
+---
+
 ## 2.28.0 (2024-02-09)
 
 ### Highlights

package/dist/.lib/tsconfig.type.tsbuildinfo

@@ -742,8 +742,8 @@
         "affectsGlobalScope": false
       },
       "../../core/utils/navigationHelper.tsx": {
-        "version": "ac967412fc05024f78223436953d015a25500ff0a59cb8de5bba8e6f71ba2d40",
-        "signature": "3ddaeda50c19bfb770fd46a8d45c9f7461bd83cfe514aec875e4e7472de8480c",
+        "version": "714b964d2364d5db4398249ccaa3ddfe3f39fca2b470707529eacdccedb1d577",
+        "signature": "2e3da2aacaddd7bb64ecb9e7b7b9da839b3771ce64fb6e2c5c49111bc4c5901d",
         "affectsGlobalScope": false
       },
       "../../core/components/organisms/verticalNav/MenuItem.tsx": {
@@ -752,7 +752,7 @@
         "affectsGlobalScope": false
       },
       "../../core/components/organisms/verticalNav/VerticalNav.tsx": {
-        "version": "bc57700d47d3c63e19e408c3b2032ccc459df2eac0356f69de8dcc752d2ec8a7",
+        "version": "7311d817228228ec6fa49fdd2af55dee35f57927e71d2a533b99d00a5d0ff52b",
         "signature": "b6a81d40026ba8bd3a2cbf23c794ebad04a3cd7ae697b1a3fcbca6f0cb11ad7f",
         "affectsGlobalScope": false
       },

package/dist/core/utils/navigationHelper.d.ts

@@ -9,6 +9,7 @@ export declare type Menu = {
     disabled?: boolean;
     subMenu?: Menu[];
     iconType?: IconType;
+    expanded?: boolean;
 };
 export declare type ActiveMenu = ({
     name: string;
@@ -19,6 +20,11 @@ export declare const getTextAppearance: (isActive: boolean, disabled?: boolean |
 export declare const getIconAppearance: (isActive: boolean, disabled?: boolean | undefined) => "default" | "disabled" | "primary_dark";
 export declare const getPillsAppearance: (isActive: boolean) => "secondary" | "primary";
 export declare const getMenu: (menus: Menu[], active: ActiveMenu) => Menu | null;
+export declare const getExpandedMenus: (menus: Menu[], active?: ({
+    name: string;
+} & Partial<Menu>) | ({
+    link: string;
+} & Partial<Menu>) | undefined) => Record<string, boolean>;
 export declare const isMenuActive: (menus: Menu[], menu: Menu, active?: ({
     name: string;
 } & Partial<Menu>) | ({

package/dist/index.esm.js

@@ -1,8 +1,8 @@
 
   /**
-   * Generated on: 1707429003158 
+   * Generated on: 1708350879254 
    *      Package: @innovaccer/design-system
-   *      Version: v2.28.0
+   *      Version: v2.28.1
    *      License: MIT
    *         Docs: https://innovaccer.github.io/design-system
    */
@@ -14313,6 +14313,31 @@ var getMenu = function getMenu(menus, active) {
 
   return null;
 };
+var getExpandedMenus = function getExpandedMenus(menus, active) {
+  var expandedMenus = {};
+  var activeMenu = active ? getMenu(menus, active) : null;
+
+  var _iterator2 = _createForOfIteratorHelper(menus),
+      _step2;
+
+  try {
+    for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+      var menu = _step2.value;
+      // Determine if the current menu is active or should be expanded by default
+      var isActiveOrExpanded = (activeMenu === null || activeMenu === void 0 ? void 0 : activeMenu.name.split('.')[0]) === menu.name || menu.expanded;
+
+      if (menu.subMenu) {
+        expandedMenus[menu.name] = !!isActiveOrExpanded;
+      }
+    }
+  } catch (err) {
+    _iterator2.e(err);
+  } finally {
+    _iterator2.f();
+  }
+
+  return expandedMenus;
+};
 var isMenuActive = function isMenuActive(menus, menu, active) {
   if (active) {
     var currActiveMenu = getMenu(menus, active);
@@ -14466,8 +14491,13 @@ var VerticalNav = function VerticalNav(props) {
 
   var _React$useState = React.useState({}),
       _React$useState2 = _slicedToArray(_React$useState, 2),
-      menuState = _React$useState2[0],
-      setMenuState = _React$useState2[1];
+      subMenuExpandedState = _React$useState2[0],
+      setSubMenuExpandedState = _React$useState2[1];
+
+  var _React$useState3 = React.useState({}),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      menuState = _React$useState4[0],
+      setMenuState = _React$useState4[1];
 
   var baseProps = extractBaseProps(props);
   React.useEffect(function () {
@@ -14476,6 +14506,10 @@ var VerticalNav = function VerticalNav(props) {
       if (currMenu) updateMenuState(currMenu, true);
     }
   }, [props.active]);
+  React.useEffect(function () {
+    var expandedMenus = getExpandedMenus(menus, active);
+    setSubMenuExpandedState(expandedMenus);
+  }, []);
 
   var updateMenuState = function updateMenuState(menu, val) {
     var currMenu = getMenu(menus, menu);
@@ -14507,7 +14541,12 @@ var VerticalNav = function VerticalNav(props) {
       if (!expanded) {
         if (onClick) onClick(menu.subMenu[0]);
       } else {
-        updateMenuState(menu);
+        if (!subMenuExpandedState[menu.name]) {
+          updateMenuState(menu);
+        }
+
+        setMenuState(_objectSpread2(_objectSpread2({}, menuState), {}, _defineProperty$1({}, menu.name, false)));
+        setSubMenuExpandedState(_objectSpread2(_objectSpread2({}, subMenuExpandedState), {}, _defineProperty$1({}, menu.name, !subMenuExpandedState[menu.name])));
       }
     } else {
       if (onClick) onClick(menu);
@@ -14520,7 +14559,7 @@ var VerticalNav = function VerticalNav(props) {
 
       var isActive = !menuState[menu.name] && isMenuActive(menus, menu, active);
       var hasSubmenu = menu.subMenu && menu.subMenu.length > 0;
-      var isChildrenVisible = hasSubmenu && menuState[menu.name];
+      var isChildrenVisible = hasSubmenu && (menuState[menu.name] || subMenuExpandedState[menu.name]);
       var hasGroup = index === 0 || menus[index - 1].group !== menu.group;
       var sectionClass = classnames((_classNames = {}, _defineProperty$1(_classNames, 'VerticalNav-section', true), _defineProperty$1(_classNames, 'VerticalNav-section--border', index !== 0), _classNames));
       return /*#__PURE__*/React.createElement(React.Fragment, {
@@ -14557,7 +14596,7 @@ var VerticalNav = function VerticalNav(props) {
         isChildrenVisible: isChildrenVisible,
         onClick: onClickHandler,
         customItemRenderer: customItemRenderer
-      }), menuState[menu.name] && menu.subMenu && menu.subMenu.map(function (subMenu, id) {
+      }), isChildrenVisible && menu.subMenu.map(function (subMenu, id) {
         return showTooltip ? /*#__PURE__*/React.createElement(Tooltip, {
           tooltip: subMenu.label,
           position: "right"
@@ -23552,6 +23591,6 @@ var TextField = function TextField(props) {
 };
 TextField.displayName = 'TextField';
 
-var version = "2.28.0";
+var version = "2.28.1";
 
 export { ActionCard, Avatar, AvatarGroup, Backdrop, Badge, Breadcrumbs, Button, Calendar, Caption, Card, CardBody, CardFooter, CardHeader, CardSubdued, ChatMessage, Checkbox, Chip, ChipGroup, ChipInput, ChoiceList, Collapsible, Column, DatePicker, DateRangePicker, Dialog, Divider, Dropdown, Dropzone, EditableChipInput, EditableDropdown, EditableInput, EmptyState, FileList, FileUploader, FileUploaderList, FullscreenModal, Grid, GridCell, Heading, HelpText, HorizontalNav, Icon, InlineMessage, Input, X as InputMask, Label, Legend, Link, LinkButton, List, Listbox, Message, MetaList, MetricInput, Modal, ModalBody, ModalDescription, ModalFooter, ModalHeader, MultiSlider, Navigation, OutsideClick, PageHeader, Pagination, Paragraph, Pills, Placeholder, PlaceholderImage, PlaceholderParagraph, Popover, ProgressBar, ProgressRing, Radio, RangeSlider, Row, SelectionCard, Sidesheet, Slider, Spinner, StatusHint, Stepper, Subheading, Switch, Tab, Table, Tabs, TabsWrapper, Text, TextField, Textarea, TimePicker, Toast, Tooltip, index as Utils, VerificationCodeInput, VerticalNav, version };

package/dist/index.js

@@ -1,8 +1,8 @@
 
   /**
-   * Generated on: 1707429003409 
+   * Generated on: 1708350879498 
    *      Package: @innovaccer/design-system
-   *      Version: v2.28.0
+   *      Version: v2.28.1
    *      License: MIT
    *         Docs: https://innovaccer.github.io/design-system
    */
@@ -8969,6 +8969,21 @@
 
       return null;
     };
+    var getExpandedMenus = function getExpandedMenus(menus, active) {
+      var expandedMenus = {};
+      var activeMenu = active ? getMenu(menus, active) : null;
+
+      for (var _i = 0, menus_2 = menus; _i < menus_2.length; _i++) {
+        var menu = menus_2[_i];
+        var isActiveOrExpanded = (activeMenu === null || activeMenu === void 0 ? void 0 : activeMenu.name.split('.')[0]) === menu.name || menu.expanded;
+
+        if (menu.subMenu) {
+          expandedMenus[menu.name] = !!isActiveOrExpanded;
+        }
+      }
+
+      return expandedMenus;
+    };
     var isMenuActive = function isMenuActive(menus, menu, active) {
       if (active) {
         var currActiveMenu = getMenu(menus, active);
@@ -9116,8 +9131,12 @@
           showTooltip = props.showTooltip;
 
       var _b = React__namespace.useState({}),
-          menuState = _b[0],
-          setMenuState = _b[1];
+          subMenuExpandedState = _b[0],
+          setSubMenuExpandedState = _b[1];
+
+      var _c = React__namespace.useState({}),
+          menuState = _c[0],
+          setMenuState = _c[1];
 
       var baseProps = extractBaseProps(props);
       React__namespace.useEffect(function () {
@@ -9126,6 +9145,10 @@
           if (currMenu) updateMenuState(currMenu, true);
         }
       }, [props.active]);
+      React__namespace.useEffect(function () {
+        var expandedMenus = getExpandedMenus(menus, active);
+        setSubMenuExpandedState(expandedMenus);
+      }, []);
 
       var updateMenuState = function updateMenuState(menu, val) {
         var _a;
@@ -9155,11 +9178,18 @@
       };
 
       var onClickHandler = function onClickHandler(menu) {
+        var _a, _b;
+
         if (menu.subMenu) {
           if (!expanded) {
             if (onClick) onClick(menu.subMenu[0]);
           } else {
-            updateMenuState(menu);
+            if (!subMenuExpandedState[menu.name]) {
+              updateMenuState(menu);
+            }
+
+            setMenuState(__assign(__assign({}, menuState), (_a = {}, _a[menu.name] = false, _a)));
+            setSubMenuExpandedState(__assign(__assign({}, subMenuExpandedState), (_b = {}, _b[menu.name] = !subMenuExpandedState[menu.name], _b)));
           }
         } else {
           if (onClick) onClick(menu);
@@ -9172,7 +9202,7 @@
 
           var isActive = !menuState[menu.name] && isMenuActive(menus, menu, active);
           var hasSubmenu = menu.subMenu && menu.subMenu.length > 0;
-          var isChildrenVisible = hasSubmenu && menuState[menu.name];
+          var isChildrenVisible = hasSubmenu && (menuState[menu.name] || subMenuExpandedState[menu.name]);
           var hasGroup = index === 0 || menus[index - 1].group !== menu.group;
           var sectionClass = classNames__default["default"]((_a = {}, _a['VerticalNav-section'] = true, _a['VerticalNav-section--border'] = index !== 0, _a));
           return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, {
@@ -9209,7 +9239,7 @@
             isChildrenVisible: isChildrenVisible,
             onClick: onClickHandler,
             customItemRenderer: customItemRenderer
-          }), menuState[menu.name] && menu.subMenu && menu.subMenu.map(function (subMenu, id) {
+          }), isChildrenVisible && menu.subMenu.map(function (subMenu, id) {
             return showTooltip ? /*#__PURE__*/React__namespace.createElement(Tooltip, {
               tooltip: subMenu.label,
               position: "right"
@@ -17794,7 +17824,7 @@
     };
     TextField.displayName = 'TextField';
 
-    var version = "2.28.0";
+    var version = "2.28.1";
 
     exports.ActionCard = ActionCard;
     exports.Avatar = Avatar;