@innovaccer/design-system 2.32.1 → 2.33.0

package/css/src/components/fileList.css

@@ -23,6 +23,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  flex-shrink: 0;
 }
 .FileItem-file {
   display: flex;
@@ -38,6 +39,7 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  margin-right: var(--spacing);
   margin-left: var(--spacing-l);
 }
 .FileItem-error {

package/css/src/components/verticalNav.css

@@ -119,6 +119,12 @@
   white-space: nowrap;
 }
 
+.MenuItem--overflow {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .MenuItem-count {
   margin-right: var(--spacing-m);
 }

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

@@ -747,12 +747,12 @@
         "affectsGlobalScope": false
       },
       "../../core/components/organisms/verticalNav/MenuItem.tsx": {
-        "version": "62860f2b2b48c6ca6012ce1379047dde1f8cb91cc3e3024fd82a2a6397e37e49",
+        "version": "37c875613577027e6abd3d875599079e27f06080d6b0774dd4a398a21b07b15c",
         "signature": "5e37b7f569d09c007d1f438d81dbf26264baa12d49b0d34921a4233bb29dea05",
         "affectsGlobalScope": false
       },
       "../../core/components/organisms/verticalNav/VerticalNav.tsx": {
-        "version": "7311d817228228ec6fa49fdd2af55dee35f57927e71d2a533b99d00a5d0ff52b",
+        "version": "65cfe866cff1438e203b3bc8afd395beea4047f3cf2a3e8e3c48182159886b8e",
         "signature": "b6a81d40026ba8bd3a2cbf23c794ebad04a3cd7ae697b1a3fcbca6f0cb11ad7f",
         "affectsGlobalScope": false
       },
@@ -1507,7 +1507,7 @@
         "affectsGlobalScope": false
       },
       "../../core/components/molecules/fileList/FileListItem.tsx": {
-        "version": "2d2ff75edf674c035eb2828f0f071eb73ab894b712974f2df2bea460e4dbf044",
+        "version": "450340557762254d4fe912fb7a7d8fb783dee6b39320c85ab2b6d6ea1875dc91",
         "signature": "0210946614d27a667d765a6b5ca34d24ff0e7bbb943879ef1e5ba80451586260",
         "affectsGlobalScope": false
       },

package/dist/index.esm.js

@@ -1,8 +1,8 @@
 
   /**
-   * Generated on: 1715179205372 
+   * Generated on: 1715707009997 
    *      Package: @innovaccer/design-system
-   *      Version: v2.32.1
+   *      Version: v2.33.0
    *      License: MIT
    *         Docs: https://innovaccer.github.io/design-system
    */
@@ -14445,16 +14445,6 @@ var getNavItemColor = function getNavItemColor(isActive, disabled) {
   return disabled ? 'inverse-lightest' : isActive ? 'primary-dark' : 'inverse';
 };
 
-var _MenuLabel = function MenuLabel(props) {
-  var label = props.label,
-      labelColor = props.labelColor;
-  return /*#__PURE__*/React.createElement(Text, {
-    "data-test": "DesignSystem-VerticalNav--Text",
-    color: labelColor,
-    className: "MenuItem-Text"
-  }, label);
-};
-
 var _MenuIcon = function MenuIcon(props) {
   var isChildrenVisible = props.isChildrenVisible;
   return /*#__PURE__*/React.createElement(Icon, {
@@ -14491,6 +14481,31 @@ var MenuItem$1 = function MenuItem(props) {
       onClick = props.onClick,
       customItemRenderer = props.customItemRenderer;
 
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      isTextTruncated = _React$useState2[0],
+      setIsTextTruncated = _React$useState2[1];
+
+  var _Tooltip$useAutoToolt = Tooltip.useAutoTooltip(),
+      detectTruncation = _Tooltip$useAutoToolt.detectTruncation;
+
+  var contentRef = /*#__PURE__*/React.createRef();
+  React.useEffect(function () {
+    var isTruncated = detectTruncation(contentRef);
+    setIsTextTruncated(isTruncated);
+  }, [contentRef]);
+
+  var _MenuLabel = function MenuLabel(props) {
+    var label = props.label,
+        labelColor = props.labelColor;
+    return /*#__PURE__*/React.createElement(Text, {
+      "data-test": "DesignSystem-VerticalNav--Text",
+      ref: contentRef,
+      color: labelColor,
+      className: "MenuItem-Text MenuItem--overflow ".concat(hasSubmenu || menu.count !== undefined ? '' : 'mr-5')
+    }, label);
+  };
+
   var onClickHandler = function onClickHandler(ev) {
     ev.preventDefault();
     if (onClick) onClick(menu);
@@ -14527,6 +14542,7 @@ var MenuItem$1 = function MenuItem(props) {
   if (!expanded && !menu.icon) return null;
 
   var customItemProps = _objectSpread2(_objectSpread2({}, props), {}, {
+    contentRef: contentRef,
     MenuIcon: function MenuIcon() {
       return _MenuIcon({
         isChildrenVisible: isChildrenVisible
@@ -14551,7 +14567,11 @@ var MenuItem$1 = function MenuItem(props) {
   /*#__PURE__*/
   // TODO(a11y)
   // eslint-disable-next-line
-  React.createElement(Link$1, _extends$2({
+  React.createElement(Tooltip, {
+    showTooltip: expanded ? isTextTruncated : true,
+    tooltip: menu.label,
+    position: "right"
+  }, /*#__PURE__*/React.createElement(Link$1, _extends$2({
     componentType: "a",
     className: ItemClass
   }, baseProps), /*#__PURE__*/React.createElement("div", {
@@ -14564,7 +14584,7 @@ var MenuItem$1 = function MenuItem(props) {
   }), expanded && /*#__PURE__*/React.createElement(_MenuLabel, {
     label: menu.label,
     labelColor: itemColor
-  })), expanded && renderSubMenu());
+  })), expanded && renderSubMenu()));
 };
 MenuItem$1.defaultProps = {
   isActive: false
@@ -14581,8 +14601,7 @@ var VerticalNav = function VerticalNav(props) {
       rounded = props.rounded,
       autoCollapse = props.autoCollapse,
       className = props.className,
-      customItemRenderer = props.customItemRenderer,
-      showTooltip = props.showTooltip;
+      customItemRenderer = props.customItemRenderer;
 
   var _React$useState = React.useState({}),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -14666,21 +14685,7 @@ var VerticalNav = function VerticalNav(props) {
         size: "small",
         weight: "strong",
         appearance: "subtle"
-      }, menu.group)), showTooltip ? /*#__PURE__*/React.createElement(Tooltip, {
-        tooltip: menu.label,
-        position: "right"
-      }, /*#__PURE__*/React.createElement(MenuItem$1, {
-        "data-test": "DesignSystem-VerticalNav--Item",
-        menu: menu,
-        expanded: expanded,
-        isActive: isActive,
-        hasSubmenu: hasSubmenu,
-        isChildren: false,
-        rounded: rounded,
-        isChildrenVisible: isChildrenVisible,
-        onClick: onClickHandler,
-        customItemRenderer: customItemRenderer
-      })) : /*#__PURE__*/React.createElement(MenuItem$1, {
+      }, menu.group)), /*#__PURE__*/React.createElement(MenuItem$1, {
         "data-test": "DesignSystem-VerticalNav--Item",
         menu: menu,
         expanded: expanded,
@@ -14692,20 +14697,7 @@ var VerticalNav = function VerticalNav(props) {
         onClick: onClickHandler,
         customItemRenderer: customItemRenderer
       }), isChildrenVisible && menu.subMenu.map(function (subMenu, id) {
-        return showTooltip ? /*#__PURE__*/React.createElement(Tooltip, {
-          tooltip: subMenu.label,
-          position: "right"
-        }, /*#__PURE__*/React.createElement(MenuItem$1, {
-          key: id,
-          menu: subMenu,
-          expanded: expanded,
-          hasSubmenu: false,
-          isChildren: true,
-          rounded: rounded,
-          onClick: onClickHandler,
-          isActive: isMenuActive(menus, subMenu, active),
-          customItemRenderer: customItemRenderer
-        })) : /*#__PURE__*/React.createElement(MenuItem$1, {
+        return /*#__PURE__*/React.createElement(MenuItem$1, {
           key: id,
           menu: subMenu,
           expanded: expanded,
@@ -22243,11 +22235,13 @@ var FileListItem = function FileListItem(props) {
     }), /*#__PURE__*/React.createElement(Text, {
       "data-test": "DesignSystem-FileListItem--Name",
       className: "FileItem-text",
-      appearance: status === 'completed' ? 'default' : 'subtle'
+      appearance: status === 'completed' ? 'default' : 'subtle',
+      weight: "medium"
     }, name)), /*#__PURE__*/React.createElement("div", {
       className: "FileItem-actions"
     }, /*#__PURE__*/React.createElement(Text, {
       className: "FileItem-size",
+      size: "small",
       appearance: 'subtle',
       "data-test": "DesignSystem-FileListItem--Size"
     }, fileSize || file.size), !!actions && actions)), status === 'error' && /*#__PURE__*/React.createElement(InlineMessage, {
@@ -26595,6 +26589,6 @@ Menu.defaultProps = {
   position: 'bottom-start'
 };
 
-var version = "2.32.1";
+var version = "2.33.0";
 
 export { ActionCard, Avatar, AvatarGroup, AvatarSelection, Backdrop, Badge, Breadcrumbs, Button, Calendar, Caption, Card, CardBody, CardFooter, CardHeader, CardSubdued, ChatMessage, Checkbox, Chip, ChipGroup, ChipInput, ChoiceList, Collapsible, Column, Combobox, 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, Menu, Message, MetaList, MetricInput, Modal, ModalBody, ModalDescription, ModalFooter, ModalHeader, MultiSlider, Navigation, OutsideClick, PageHeader, Pagination, Paragraph, Pills, Placeholder, PlaceholderImage, PlaceholderParagraph, Popover, ProgressBar, ProgressRing, Radio, RangeSlider, Row, Select, 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: 1715179205608 
+   * Generated on: 1715707010250 
    *      Package: @innovaccer/design-system
-   *      Version: v2.32.1
+   *      Version: v2.33.0
    *      License: MIT
    *         Docs: https://innovaccer.github.io/design-system
    */
@@ -9084,16 +9084,6 @@
       return disabled ? 'inverse-lightest' : isActive ? 'primary-dark' : 'inverse';
     };
 
-    var _MenuLabel = function MenuLabel(props) {
-      var label = props.label,
-          labelColor = props.labelColor;
-      return /*#__PURE__*/React__namespace.createElement(Text, {
-        "data-test": "DesignSystem-VerticalNav--Text",
-        color: labelColor,
-        className: "MenuItem-Text"
-      }, label);
-    };
-
     var _MenuIcon = function MenuIcon(props) {
       var isChildrenVisible = props.isChildrenVisible;
       return /*#__PURE__*/React__namespace.createElement(Icon, {
@@ -9130,6 +9120,28 @@
           onClick = props.onClick,
           customItemRenderer = props.customItemRenderer;
 
+      var _b = React__namespace.useState(false),
+          isTextTruncated = _b[0],
+          setIsTextTruncated = _b[1];
+
+      var detectTruncation = Tooltip.useAutoTooltip().detectTruncation;
+      var contentRef = /*#__PURE__*/React__namespace.createRef();
+      React__namespace.useEffect(function () {
+        var isTruncated = detectTruncation(contentRef);
+        setIsTextTruncated(isTruncated);
+      }, [contentRef]);
+
+      var _MenuLabel = function MenuLabel(props) {
+        var label = props.label,
+            labelColor = props.labelColor;
+        return /*#__PURE__*/React__namespace.createElement(Text, {
+          "data-test": "DesignSystem-VerticalNav--Text",
+          ref: contentRef,
+          color: labelColor,
+          className: "MenuItem-Text MenuItem--overflow " + (hasSubmenu || menu.count !== undefined ? '' : 'mr-5')
+        }, label);
+      };
+
       var onClickHandler = function onClickHandler(ev) {
         ev.preventDefault();
         if (onClick) onClick(menu);
@@ -9166,6 +9178,7 @@
       if (!expanded && !menu.icon) return null;
 
       var customItemProps = __assign(__assign({}, props), {
+        contentRef: contentRef,
         MenuIcon: function MenuIcon() {
           return _MenuIcon({
             isChildrenVisible: isChildrenVisible
@@ -9186,7 +9199,11 @@
         }
       });
 
-      return customItemRenderer ? customItemRenderer(customItemProps) : /*#__PURE__*/React__namespace.createElement(Link$1, __assign({
+      return customItemRenderer ? customItemRenderer(customItemProps) : /*#__PURE__*/React__namespace.createElement(Tooltip, {
+        showTooltip: expanded ? isTextTruncated : true,
+        tooltip: menu.label,
+        position: "right"
+      }, /*#__PURE__*/React__namespace.createElement(Link$1, __assign({
         componentType: "a",
         className: ItemClass
       }, baseProps), /*#__PURE__*/React__namespace.createElement("div", {
@@ -9199,7 +9216,7 @@
       }), expanded && /*#__PURE__*/React__namespace.createElement(_MenuLabel, {
         label: menu.label,
         labelColor: itemColor
-      })), expanded && renderSubMenu());
+      })), expanded && renderSubMenu()));
     };
     MenuItem$1.defaultProps = {
       isActive: false
@@ -9215,8 +9232,7 @@
           rounded = props.rounded,
           autoCollapse = props.autoCollapse,
           className = props.className,
-          customItemRenderer = props.customItemRenderer,
-          showTooltip = props.showTooltip;
+          customItemRenderer = props.customItemRenderer;
 
       var _b = React__namespace.useState({}),
           subMenuExpandedState = _b[0],
@@ -9302,21 +9318,7 @@
             size: "small",
             weight: "strong",
             appearance: "subtle"
-          }, menu.group)), showTooltip ? /*#__PURE__*/React__namespace.createElement(Tooltip, {
-            tooltip: menu.label,
-            position: "right"
-          }, /*#__PURE__*/React__namespace.createElement(MenuItem$1, {
-            "data-test": "DesignSystem-VerticalNav--Item",
-            menu: menu,
-            expanded: expanded,
-            isActive: isActive,
-            hasSubmenu: hasSubmenu,
-            isChildren: false,
-            rounded: rounded,
-            isChildrenVisible: isChildrenVisible,
-            onClick: onClickHandler,
-            customItemRenderer: customItemRenderer
-          })) : /*#__PURE__*/React__namespace.createElement(MenuItem$1, {
+          }, menu.group)), /*#__PURE__*/React__namespace.createElement(MenuItem$1, {
             "data-test": "DesignSystem-VerticalNav--Item",
             menu: menu,
             expanded: expanded,
@@ -9328,20 +9330,7 @@
             onClick: onClickHandler,
             customItemRenderer: customItemRenderer
           }), isChildrenVisible && menu.subMenu.map(function (subMenu, id) {
-            return showTooltip ? /*#__PURE__*/React__namespace.createElement(Tooltip, {
-              tooltip: subMenu.label,
-              position: "right"
-            }, /*#__PURE__*/React__namespace.createElement(MenuItem$1, {
-              key: id,
-              menu: subMenu,
-              expanded: expanded,
-              hasSubmenu: false,
-              isChildren: true,
-              rounded: rounded,
-              onClick: onClickHandler,
-              isActive: isMenuActive(menus, subMenu, active),
-              customItemRenderer: customItemRenderer
-            })) : /*#__PURE__*/React__namespace.createElement(MenuItem$1, {
+            return /*#__PURE__*/React__namespace.createElement(MenuItem$1, {
               key: id,
               menu: subMenu,
               expanded: expanded,
@@ -16503,11 +16492,13 @@
       }), /*#__PURE__*/React__namespace.createElement(Text, {
         "data-test": "DesignSystem-FileListItem--Name",
         className: "FileItem-text",
-        appearance: status === 'completed' ? 'default' : 'subtle'
+        appearance: status === 'completed' ? 'default' : 'subtle',
+        weight: "medium"
       }, name)), /*#__PURE__*/React__namespace.createElement("div", {
         className: "FileItem-actions"
       }, /*#__PURE__*/React__namespace.createElement(Text, {
         className: "FileItem-size",
+        size: "small",
         appearance: 'subtle',
         "data-test": "DesignSystem-FileListItem--Size"
       }, fileSize || file.size), !!actions && actions)), status === 'error' && /*#__PURE__*/React__namespace.createElement(InlineMessage, {
@@ -20745,7 +20736,7 @@
       position: 'bottom-start'
     };
 
-    var version = "2.32.1";
+    var version = "2.33.0";
 
     exports.ActionCard = ActionCard;
     exports.Avatar = Avatar;