@redsift/design-system 9.4.0-muiv5 → 9.4.1-muiv5

package/index.d.ts

@@ -1008,7 +1008,6 @@ interface SideNavigationMenuItemProps extends ComponentProps<'a'> {
     isSecondLevel?: boolean;
 }
 type StyledSideNavigationMenuItemProps = Omit<SideNavigationMenuItemProps, 'isCurrent' | 'isDisabled' | 'isSecondLevel' | 'hasBorder'> & {
-    $hasBorder: SideNavigationMenuItemProps['hasBorder'];
     $isCurrent: SideNavigationMenuItemProps['isCurrent'];
     $isDisabled: SideNavigationMenuItemProps['isDisabled'];
     $isSecondLevel: SideNavigationMenuItemProps['isSecondLevel'];

package/index.js

@@ -2528,6 +2528,14 @@ const StyledSideNavigationMenuItemIndicator = styled.div`
   border-radius: 0px 4px 4px 0px;
   background-color: var(--redsift-color-neutral-black);
 `;
+const StyledSideNavigationMenuItemBorder = styled.div`
+  position: relative;
+  width: 100%;
+  height: 1px;
+  background-color: var(--redsift-color-neutral-lightgrey);
+  margin-left: 62px;
+  margin-top: -1px;
+`;
 
 /**
  * Component style.
@@ -2621,7 +2629,6 @@ const StyledSideNavigationMenuItem = styled.a`
       transition: opacity 300ms ease-out;
       opacity: ${$variant === SideNavigationMenuBarVariant.shrinked ? '0' : '1'};
       overflow: hidden;
-      text-overflow: ellipsis;
       white-space: nowrap;
     }
   `;
@@ -2655,8 +2662,8 @@ const StyledSideNavigationMenuItem = styled.a`
     background-color: var(--redsift-side-navigation-color-menu-item-background-secondary);
     font-size: var(--redsift-typography-caption-font-size);
     padding-bottom: 7px;
-    margin-left: 62px;
-    margin-right: 8px;
+    padding-left: 62px;
+    padding-right: 8px;
     padding-top: 7px;
     border-radius: 0;
 
@@ -2667,15 +2674,6 @@ const StyledSideNavigationMenuItem = styled.a`
     }
   `;
 }}
-
-  ${_ref6 => {
-  let {
-    $hasBorder
-  } = _ref6;
-  return $hasBorder ? css`
-          border-bottom: 1px solid var(--redsift-color-neutral-lightgrey);
-        ` : '';
-}}
 `;
 
 /**
@@ -2863,13 +2861,15 @@ const SideNavigationMenuItem = /*#__PURE__*/forwardRef((props, ref) => {
   }, [menuItems]);
   const sideNavigationVariant = sideNavigationMenuBarContext === null || sideNavigationMenuBarContext === void 0 ? void 0 : sideNavigationMenuBarContext.sideNavigationMenuBarVariant;
   return /*#__PURE__*/React__default.createElement(Flexbox, {
+    flexDirection: "column",
+    gap: "0px"
+  }, /*#__PURE__*/React__default.createElement(Flexbox, {
     flexDirection: "row",
     gap: "0px"
   }, !isSecondLevel ? /*#__PURE__*/React__default.createElement(StyledSideNavigationMenuItemIndicatorContainer, null, isCurrent ? /*#__PURE__*/React__default.createElement(StyledSideNavigationMenuItemIndicator, null) : null) : null, /*#__PURE__*/React__default.createElement(StyledSideNavigationMenuItem, _extends$1({
     as: as,
     role: "menuitem"
   }, forwardedProps, {
-    $hasBorder: hasBorder,
     $isCurrent: isCurrent,
     $isDisabled: isDisabled,
     $isSecondLevel: isSecondLevel,
@@ -2894,7 +2894,7 @@ const SideNavigationMenuItem = /*#__PURE__*/forwardRef((props, ref) => {
   }, children), badge ? /*#__PURE__*/React__default.createElement(Badge, _extends$1({
     variant: BadgeVariant.standard,
     color: "error"
-  }, badgeProps), badge) : null));
+  }, badgeProps), badge) : null)), isSecondLevel && hasBorder ? /*#__PURE__*/React__default.createElement(StyledSideNavigationMenuItemBorder, null) : null);
 });
 SideNavigationMenuItem.className = CLASSNAME$F;
 SideNavigationMenuItem.defaultProps = DEFAULT_PROPS$F;
@@ -2991,10 +2991,8 @@ const StyledSideNavigationMenu = styled.div`
 
     .content {
       transition: opacity 300ms ease-out;
-      max-width: 140px;
       opacity: ${$variant === SideNavigationMenuBarVariant.shrinked ? '0' : '1'};
       overflow: hidden;
-      text-overflow: ellipsis;
       white-space: nowrap;
     }
   `;