@innovaccer/design-system 2.27.0 → 2.28.1

package/css/src/components/avatar.css

@@ -12,6 +12,17 @@
   cursor: default;
 }
 
+.Avatar--wrapper {
+  padding: var(--spacing-xs);
+  box-sizing: border-box;
+}
+
+.Avatar--square {
+  width: 100%;
+  height: 100%;
+  border-radius: var(--spacing-m);
+}
+
 .Avatar--regular {
   height: var(--spacing-3);
   width: var(--spacing-3);

package/css/src/components/avatarGroup.css

@@ -4,10 +4,12 @@
 
 .AvatarGroup-item--regular {
   margin-right: calc(var(--spacing-m) * -1);
+  height: var(--spacing-3);
 }
 
 .AvatarGroup-item--tiny {
   margin-right: calc(var(--spacing-s) * -1);
+  height: var(--spacing-xl);
 }
 
 .AvatarGroup-Popper {

package/css/src/components/textarea.css

@@ -47,5 +47,5 @@
 }
 
 .Textarea--resize {
-  resize: auto;
+  resize: both;
 }

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

@@ -287,8 +287,8 @@
         "affectsGlobalScope": false
       },
       "../../core/components/atoms/avatar/Avatar.tsx": {
-        "version": "b17b59c64c17a903681219b62267716fd396273c036e4f2ce0a80acbf7249609",
-        "signature": "4c6faf5f4fed2405b98d40d1991a1f1d173e58252cbbc2002b6a0b8c3bcb37d3",
+        "version": "eee8412d715d9aeb2bce5e153921f3e709f56ff53313d80ee9ed4eee9b6615e5",
+        "signature": "c057a5e30a8496a407cd5b866594866f473ac335a314bc9d189c1ecb002f9564",
         "affectsGlobalScope": false
       },
       "../../core/components/atoms/avatar/index.tsx": {
@@ -302,7 +302,7 @@
         "affectsGlobalScope": false
       },
       "../../core/components/atoms/avatarGroup/Avatars.tsx": {
-        "version": "c3e28979e684787b885964e7daec3674d63ac42fecc66dc6aa86c0e22080e1a1",
+        "version": "2ebb430d6b98659ad239c589d291a3c76ad4c119da043444938630c29db708c3",
         "signature": "695e51eeb303f29c0263fa5c6b977153066291197a52797f11988ab8e4e7e43b",
         "affectsGlobalScope": false
       },
@@ -312,8 +312,8 @@
         "affectsGlobalScope": false
       },
       "../../core/components/atoms/avatarGroup/AvatarGroup.tsx": {
-        "version": "98ffacedf310585b5dcb23d9ac1d9d0100bd4fd6e55966a34735537599f46023",
-        "signature": "f1ce022850aac94e4b631f7169a974fae72bec47b9db5df00244abd1822835e9",
+        "version": "00e07a879d4488cb0321aa4e666afc18293c05275c2f3002ba5679fd9b0106b6",
+        "signature": "ce3f3fd390bd9db8bae71aa4bd609a13cc1c13ff45b2a72f8de33ff7677e4cd6",
         "affectsGlobalScope": false
       },
       "../../core/components/atoms/avatarGroup/index.tsx": {
@@ -697,7 +697,7 @@
         "affectsGlobalScope": false
       },
       "../../core/components/atoms/metricInput/MetricInput.tsx": {
-        "version": "275cfb669536c3eb0c47bab6b6cf54958f80eed16315ccbfa1b5e5c0afbe2f69",
+        "version": "7d02c2bb3c95e24914c9639543261c57779bc7d184bbca02f5497e61272d1d61",
         "signature": "d0d75acbdbaa6aa769ad0c3be2ac9f90957e741170bfc459023f454385bc828b",
         "affectsGlobalScope": false
       },
@@ -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
       },
@@ -1203,7 +1203,7 @@
       },
       "../../core/components/atoms/popperWrapper/PopperWrapper.tsx": {
         "version": "a9b0f82d2ae14e36df05c70e60ad62c2200abe32e03ac56f4e86bacf43304be4",
-        "signature": "9f8790145ebb89fab7f7f93da7c3ec0398f5946fe890666435a94d29e04e995b",
+        "signature": "d3a1dcb83226bbb67f2a55e75d8024e63960ec04dbff72fef6e01a684ef16b0b",
         "affectsGlobalScope": false
       },
       "../../core/components/atoms/popperWrapper/index.tsx": {
@@ -1752,8 +1752,8 @@
         "affectsGlobalScope": false
       },
       "../../core/common.type.tsx": {
-        "version": "19899f656b7fb9c323fa1a3a392cb20ebe876a02c99c4fef60bb856d004e0c55",
-        "signature": "f3d060ac2c3965d3f316a3afc4ffa4c953a1cf76d204046cb90024141798264e",
+        "version": "6a0b5cea6e6f34ef002f1de547407cf2bfcb3a0b2d5e58c590018793f7adca26",
+        "signature": "e7bb809f66394d9532c72477519acf0e8ea603e3ec409c80aaae82fdf5709b9f",
         "affectsGlobalScope": false
       },
       "../../core/global.d.ts": {

package/dist/core/common.type.d.ts

@@ -12,4 +12,5 @@ export declare type NumberRange = [number, number];
 export declare type ChangeEvent = React.ChangeEvent<HTMLInputElement>;
 export declare type TextColor = 'white' | 'primary' | 'secondary' | 'success' | 'alert' | 'warning' | 'accent1' | 'accent2' | 'accent3' | 'accent4' | 'inverse' | 'primary-dark' | 'secondary-dark' | 'success-dark' | 'alert-dark' | 'warning-dark' | 'accent1-dark' | 'accent2-dark' | 'accent3-dark' | 'accent4-dark' | 'primary-darker' | 'success-darker' | 'alert-darker' | 'warning-darker' | 'accent1-darker' | 'accent2-darker' | 'accent3-darker' | 'accent4-darker' | 'primary-light' | 'secondary-light' | 'success-light' | 'alert-light' | 'warning-light' | 'accent1-light' | 'accent2-light' | 'accent3-light' | 'accent4-light' | 'inverse-light' | 'primary-lighter' | 'secondary-lighter' | 'success-lighter' | 'alert-lighter' | 'warning-lighter' | 'accent1-lighter' | 'accent2-lighter' | 'accent3-lighter' | 'accent4-lighter' | 'inverse-lighter' | 'primary-lightest' | 'secondary-lightest' | 'success-lightest' | 'alert-lightest' | 'warning-lightest' | 'accent1-lightest' | 'accent2-lightest' | 'accent3-lightest' | 'accent4-lightest' | 'inverse-lightest' | 'primary-shadow' | 'secondary-shadow' | 'success-shadow' | 'alert-shadow' | 'warning-shadow' | 'accent1-shadow' | 'accent2-shadow' | 'accent3-shadow' | 'accent4-shadow' | 'inverse-shadow';
 export declare type AvatarSize = 'regular' | 'tiny';
+export declare type AvatarShape = 'round' | 'square';
 export declare type IconType = 'rounded' | 'outlined';

package/dist/core/components/atoms/avatar/Avatar.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { BaseProps } from "../../../utils/types";
 import { TooltipProps } from "../../../index.type";
-import { AccentAppearance, AvatarSize } from "../../../common.type";
+import { AccentAppearance, AvatarSize, AvatarShape } from "../../../common.type";
 export interface AvatarProps extends BaseProps {
     appearance?: AccentAppearance;
     children?: string | React.ReactNode;
@@ -10,6 +10,7 @@ export interface AvatarProps extends BaseProps {
     withTooltip: boolean;
     tooltipPosition: TooltipProps['position'];
     size: AvatarSize;
+    shape: AvatarShape;
 }
 export declare const Avatar: {
     (props: AvatarProps): JSX.Element;
@@ -20,6 +21,7 @@ export declare const Avatar: {
         tooltipPosition: string;
         withTooltip: boolean;
         size: string;
+        shape: string;
     };
 };
 export default Avatar;

package/dist/core/components/atoms/avatarGroup/AvatarGroup.d.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { BaseProps } from "../../../utils/types";
 import { AvatarProps, PopoverProps } from "../../../index.type";
 import { AvatarSize } from "../../../common.type";
@@ -5,6 +6,8 @@ interface AvatarData extends Record<string, any> {
     firstName?: string;
     lastName?: string;
     appearance?: AvatarProps['appearance'];
+    icon?: React.ReactNode;
+    image?: React.ReactNode;
 }
 interface AvatarPopoverProps {
     popperRenderer?: (names: AvatarData[]) => JSX.Element;

package/dist/core/components/atoms/popperWrapper/PopperWrapper.d.ts

@@ -845,7 +845,7 @@ export declare class PopperWrapper extends React.Component<PopperWrapperProps, P
         stroke?: "none" | (string & {}) | "white" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "transparent" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "turquoise" | "violet" | "wheat" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "child" | "context-fill" | "context-stroke" | undefined;
         strokeDasharray?: string | number | (string & {}) | (number & {}) | undefined;
         strokeDashoffset?: string | number | (string & {}) | undefined;
-        strokeLinecap?: "round" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "butt" | "square" | undefined;
+        strokeLinecap?: "round" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "square" | "butt" | undefined;
         strokeLinejoin?: "round" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "bevel" | "miter" | undefined;
         strokeMiterlimit?: (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | (number & {}) | undefined;
         strokeOpacity?: (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | (number & {}) | undefined;

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: 1705328657749 
+   * Generated on: 1708350879254 
    *      Package: @innovaccer/design-system
-   *      Version: v2.27.0
+   *      Version: v2.28.1
    *      License: MIT
    *         Docs: https://innovaccer.github.io/design-system
    */
@@ -895,7 +895,7 @@ var initialsLength = 2;
 var DefaultAppearance = 'secondary';
 var colors = ['accent4', 'primary', 'accent3', 'alert', 'accent2', 'warning', 'accent1', 'success'];
 var Avatar = function Avatar(props) {
-  var _classNames, _classNames2;
+  var _classNames, _classNames2, _classNames3;
 
   var withTooltip = props.withTooltip,
       tooltipPosition = props.tooltipPosition,
@@ -904,15 +904,17 @@ var Avatar = function Avatar(props) {
       firstName = props.firstName,
       lastName = props.lastName,
       className = props.className,
-      appearance = props.appearance;
+      appearance = props.appearance,
+      shape = props.shape;
   var baseProps = extractBaseProps(props);
   var initials = children && typeof children === 'string' ? children.trim().slice(0, initialsLength) : "".concat(firstName ? firstName.trim()[0] : '').concat(lastName ? lastName.trim()[0] : '');
   var tooltip = children && typeof children === 'string' ? children : "".concat(firstName || '', " ").concat(lastName || '') || '';
   var AvatarAppearance = appearance || colors[(initials.charCodeAt(0) + (initials.charCodeAt(1) || 0)) % 8] || DefaultAppearance;
   var AvatarClassNames = classnames((_classNames = {
     Avatar: true
-  }, _defineProperty$1(_classNames, "Avatar--".concat(size), size), _defineProperty$1(_classNames, "Avatar--".concat(AvatarAppearance), AvatarAppearance), _defineProperty$1(_classNames, 'Avatar--disabled', !initials || !withTooltip), _classNames), className);
-  var TextClassNames = classnames((_classNames2 = {}, _defineProperty$1(_classNames2, "Avatar-content--".concat(size), size), _defineProperty$1(_classNames2, "Avatar-content--".concat(AvatarAppearance), AvatarAppearance), _classNames2));
+  }, _defineProperty$1(_classNames, 'Avatar--square', shape === 'square'), _defineProperty$1(_classNames, "Avatar--".concat(size), shape !== 'square'), _defineProperty$1(_classNames, "Avatar--".concat(AvatarAppearance), AvatarAppearance), _defineProperty$1(_classNames, 'Avatar--disabled', !initials || !withTooltip), _classNames), className);
+  var AvatarWrapperClassNames = classnames((_classNames2 = {}, _defineProperty$1(_classNames2, 'Avatar--wrapper', shape === 'square'), _defineProperty$1(_classNames2, "Avatar--".concat(size), shape === 'square'), _classNames2), className);
+  var TextClassNames = classnames((_classNames3 = {}, _defineProperty$1(_classNames3, "Avatar-content--".concat(size), size), _defineProperty$1(_classNames3, "Avatar-content--".concat(AvatarAppearance), AvatarAppearance), _classNames3));
   var IconClassNames = classnames(_defineProperty$1({}, "Avatar-content--".concat(AvatarAppearance), AvatarAppearance));
   var sharedProp = {
     size: size,
@@ -923,16 +925,22 @@ var Avatar = function Avatar(props) {
 
   var renderAvatar = function renderAvatar() {
     if (children && typeof children !== 'string') {
-      return /*#__PURE__*/React.createElement(AvatarProvider, {
+      return /*#__PURE__*/React.createElement("span", {
+        "data-test": "DesignSystem-AvatarWrapper",
+        className: AvatarWrapperClassNames
+      }, /*#__PURE__*/React.createElement(AvatarProvider, {
         value: sharedProp
       }, /*#__PURE__*/React.createElement("span", _extends$2({
         "data-test": "DesignSystem-Avatar"
       }, baseProps, {
         className: AvatarClassNames
-      }), children));
+      }), children)));
     }
 
-    return /*#__PURE__*/React.createElement("span", _extends$2({
+    return /*#__PURE__*/React.createElement("span", {
+      "data-test": "DesignSystem-AvatarWrapper",
+      className: AvatarWrapperClassNames
+    }, /*#__PURE__*/React.createElement("span", _extends$2({
       "data-test": "DesignSystem-Avatar"
     }, baseProps, {
       className: AvatarClassNames
@@ -946,7 +954,7 @@ var Avatar = function Avatar(props) {
       size: size === 'regular' ? 20 : 16,
       appearance: 'white',
       className: IconClassNames
-    }));
+    })));
   };
 
   var renderTooltip = function renderTooltip() {
@@ -969,7 +977,8 @@ Avatar.Image = AvatarImage;
 Avatar.defaultProps = {
   tooltipPosition: 'bottom',
   withTooltip: true,
-  size: 'regular'
+  size: 'regular',
+  shape: 'round'
 };
 
 var AvatarCount = function AvatarCount(props) {
@@ -1005,7 +1014,9 @@ var Avatars = function Avatars(props) {
   var avatars = avatarList.map(function (item, index) {
     var appearance = item.appearance,
         firstName = item.firstName,
-        lastName = item.lastName;
+        lastName = item.lastName,
+        icon = item.icon,
+        image = item.image;
     return /*#__PURE__*/React.createElement("div", {
       "data-test": "DesignSystem-AvatarGroup--Avatar",
       className: GroupClass,
@@ -1018,7 +1029,7 @@ var Avatars = function Avatars(props) {
       lastName: lastName,
       withTooltip: true,
       tooltipPosition: tooltipPosition
-    }));
+    }, image || icon));
   });
   return avatars;
 };
@@ -6879,6 +6890,7 @@ var MetricInput = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
   }, suffix), showActionButton && /*#__PURE__*/React.createElement("div", {
     className: "MetricInput-arrowIcons"
   }, /*#__PURE__*/React.createElement(Button, {
+    type: "button",
     icon: "keyboard_arrow_up",
     size: actionButtonSize,
     className: "".concat(actionButton, " mb-2"),
@@ -6887,6 +6899,7 @@ var MetricInput = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
     },
     "data-test": "DesignSystem-MetricInput--upIcon"
   }), /*#__PURE__*/React.createElement(Button, {
+    type: "button",
     icon: "keyboard_arrow_down",
     size: actionButtonSize,
     className: actionButton,
@@ -14300,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);
@@ -14453,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 () {
@@ -14463,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);
@@ -14494,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);
@@ -14507,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, {
@@ -14544,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"
@@ -23539,6 +23591,6 @@ var TextField = function TextField(props) {
 };
 TextField.displayName = 'TextField';
 
-var version = "2.27.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: 1705328657988 
+   * Generated on: 1708350879498 
    *      Package: @innovaccer/design-system
-   *      Version: v2.27.0
+   *      Version: v2.28.1
    *      License: MIT
    *         Docs: https://innovaccer.github.io/design-system
    */
@@ -537,7 +537,7 @@
     var DefaultAppearance = 'secondary';
     var colors = ['accent4', 'primary', 'accent3', 'alert', 'accent2', 'warning', 'accent1', 'success'];
     var Avatar = function Avatar(props) {
-      var _a, _b, _c;
+      var _a, _b, _c, _d;
 
       var withTooltip = props.withTooltip,
           tooltipPosition = props.tooltipPosition,
@@ -546,16 +546,18 @@
           firstName = props.firstName,
           lastName = props.lastName,
           className = props.className,
-          appearance = props.appearance;
+          appearance = props.appearance,
+          shape = props.shape;
       var baseProps = extractBaseProps(props);
       var initials = children && typeof children === 'string' ? children.trim().slice(0, initialsLength) : "" + (firstName ? firstName.trim()[0] : '') + (lastName ? lastName.trim()[0] : '');
       var tooltip = children && typeof children === 'string' ? children : (firstName || '') + " " + (lastName || '') || '';
       var AvatarAppearance = appearance || colors[(initials.charCodeAt(0) + (initials.charCodeAt(1) || 0)) % 8] || DefaultAppearance;
       var AvatarClassNames = classNames__default["default"]((_a = {
         Avatar: true
-      }, _a["Avatar--" + size] = size, _a["Avatar--" + AvatarAppearance] = AvatarAppearance, _a['Avatar--disabled'] = !initials || !withTooltip, _a), className);
-      var TextClassNames = classNames__default["default"]((_b = {}, _b["Avatar-content--" + size] = size, _b["Avatar-content--" + AvatarAppearance] = AvatarAppearance, _b));
-      var IconClassNames = classNames__default["default"]((_c = {}, _c["Avatar-content--" + AvatarAppearance] = AvatarAppearance, _c));
+      }, _a['Avatar--square'] = shape === 'square', _a["Avatar--" + size] = shape !== 'square', _a["Avatar--" + AvatarAppearance] = AvatarAppearance, _a['Avatar--disabled'] = !initials || !withTooltip, _a), className);
+      var AvatarWrapperClassNames = classNames__default["default"]((_b = {}, _b['Avatar--wrapper'] = shape === 'square', _b["Avatar--" + size] = shape === 'square', _b), className);
+      var TextClassNames = classNames__default["default"]((_c = {}, _c["Avatar-content--" + size] = size, _c["Avatar-content--" + AvatarAppearance] = AvatarAppearance, _c));
+      var IconClassNames = classNames__default["default"]((_d = {}, _d["Avatar-content--" + AvatarAppearance] = AvatarAppearance, _d));
       var sharedProp = {
         size: size,
         firstName: firstName,
@@ -565,16 +567,22 @@
 
       var renderAvatar = function renderAvatar() {
         if (children && typeof children !== 'string') {
-          return /*#__PURE__*/React__namespace.createElement(AvatarProvider, {
+          return /*#__PURE__*/React__namespace.createElement("span", {
+            "data-test": "DesignSystem-AvatarWrapper",
+            className: AvatarWrapperClassNames
+          }, /*#__PURE__*/React__namespace.createElement(AvatarProvider, {
             value: sharedProp
           }, /*#__PURE__*/React__namespace.createElement("span", __assign({
             "data-test": "DesignSystem-Avatar"
           }, baseProps, {
             className: AvatarClassNames
-          }), children));
+          }), children)));
         }
 
-        return /*#__PURE__*/React__namespace.createElement("span", __assign({
+        return /*#__PURE__*/React__namespace.createElement("span", {
+          "data-test": "DesignSystem-AvatarWrapper",
+          className: AvatarWrapperClassNames
+        }, /*#__PURE__*/React__namespace.createElement("span", __assign({
           "data-test": "DesignSystem-Avatar"
         }, baseProps, {
           className: AvatarClassNames
@@ -588,7 +596,7 @@
           size: size === 'regular' ? 20 : 16,
           appearance: 'white',
           className: IconClassNames
-        }));
+        })));
       };
 
       var renderTooltip = function renderTooltip() {
@@ -611,7 +619,8 @@
     Avatar.defaultProps = {
       tooltipPosition: 'bottom',
       withTooltip: true,
-      size: 'regular'
+      size: 'regular',
+      shape: 'round'
     };
 
     var AvatarCount = function AvatarCount(props) {
@@ -647,7 +656,9 @@
       var avatars = avatarList.map(function (item, index) {
         var appearance = item.appearance,
             firstName = item.firstName,
-            lastName = item.lastName;
+            lastName = item.lastName,
+            icon = item.icon,
+            image = item.image;
         return /*#__PURE__*/React__namespace.createElement("div", {
           "data-test": "DesignSystem-AvatarGroup--Avatar",
           className: GroupClass,
@@ -660,7 +671,7 @@
           lastName: lastName,
           withTooltip: true,
           tooltipPosition: tooltipPosition
-        }));
+        }, image || icon));
       });
       return avatars;
     };
@@ -6269,6 +6280,7 @@
       }, suffix), showActionButton && /*#__PURE__*/React__namespace.createElement("div", {
         className: "MetricInput-arrowIcons"
       }, /*#__PURE__*/React__namespace.createElement(Button, {
+        type: "button",
         icon: "keyboard_arrow_up",
         size: actionButtonSize,
         className: actionButton + " mb-2",
@@ -6277,6 +6289,7 @@
         },
         "data-test": "DesignSystem-MetricInput--upIcon"
       }), /*#__PURE__*/React__namespace.createElement(Button, {
+        type: "button",
         icon: "keyboard_arrow_down",
         size: actionButtonSize,
         className: actionButton,
@@ -8956,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);
@@ -9103,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 () {
@@ -9113,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;
@@ -9142,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);
@@ -9159,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, {
@@ -9196,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"
@@ -17781,7 +17824,7 @@
     };
     TextField.displayName = 'TextField';
 
-    var version = "2.27.0";
+    var version = "2.28.1";
 
     exports.ActionCard = ActionCard;
     exports.Avatar = Avatar;