@redsift/design-system 10.6.0 → 10.6.1-muiv5

package/index.d.ts

@@ -2156,6 +2156,42 @@ type StyledAppSidePanelProps = Omit<AppSidePanelProps, 'isCollapsed' | 'logo'> &
  */
 declare const AppSidePanel: Comp<AppSidePanelProps, HTMLDivElement>;
 
+/**
+ * Component variant.
+ */
+declare const BadgeVariant: {
+    readonly dot: "dot";
+    readonly standard: "standard";
+};
+type BadgeVariant = ValueOf<typeof BadgeVariant>;
+/**
+ * Component props.
+ */
+interface BadgeProps extends ComponentProps<'div'>, LayoutProps, SpacingProps, PositioningProps {
+    /** Whether the badge should automatically break content. */
+    autoBreak?: boolean;
+    /** Color variant. The product colors are available but should only be used to display the Badge in the color of another product. To display a Badge with a color of the current product, use `default`. */
+    color?: NotificationsColorPalette | PresentationColorPalette;
+    /** Whether the Badge has its colors reversed or not. */
+    isReversed?: boolean;
+    /** Theme. */
+    theme?: Theme;
+    /** Badge variant. */
+    variant?: BadgeVariant;
+}
+type StyledBadgeProps = Omit<BadgeProps, 'color' | 'variant' | 'isReversed' | 'autoBreak'> & {
+    $autoBreak: BadgeProps['autoBreak'];
+    $color: BadgeProps['color'];
+    $isReversed: BadgeProps['isReversed'];
+    $variant: BadgeProps['variant'];
+    $theme: BadgeProps['theme'];
+};
+
+/**
+ * The Badge component.
+ */
+declare const Badge: Comp<BadgeProps, HTMLDivElement>;
+
 /**
  * Context props.
  */
@@ -2187,6 +2223,8 @@ interface SideNavigationMenuProps extends ComponentProps<'div'> {
     buttonProps?: ComponentProps<'button'>;
     /** Custom ref to pass to the button. */
     buttonRef?: MutableRefObject<HTMLButtonElement>;
+    /** Custom props to pass to the Badge component, if any. */
+    badgeProps?: Omit<BadgeProps, 'ref'>;
     /** Whether or not the menu contains children that have a badge. */
     hasBadge?: boolean;
     /**
@@ -2202,6 +2240,8 @@ interface SideNavigationMenuProps extends ComponentProps<'div'> {
     isDisabled?: boolean;
     /** Whether the menu is expanded or not. */
     isExpanded?: boolean;
+    /** By default, the badge is hidden when the menu is expanded. This prop controls this behavior. */
+    keepBadgeVisible?: boolean;
     /** Custom props to pass to the menu. */
     menuProps?: ComponentProps<'ul'>;
     /** Custom ref to pass to the menu. */
@@ -2222,42 +2262,6 @@ type StyledSideNavigationMenuProps = Omit<SideNavigationMenuProps, 'isDisabled'
  */
 declare const SideNavigationMenu: Comp<SideNavigationMenuProps, HTMLDivElement>;
 
-/**
- * Component variant.
- */
-declare const BadgeVariant: {
-    readonly dot: "dot";
-    readonly standard: "standard";
-};
-type BadgeVariant = ValueOf<typeof BadgeVariant>;
-/**
- * Component props.
- */
-interface BadgeProps extends ComponentProps<'div'>, LayoutProps, SpacingProps, PositioningProps {
-    /** Whether the badge should automatically break content. */
-    autoBreak?: boolean;
-    /** Color variant. The product colors are available but should only be used to display the Badge in the color of another product. To display a Badge with a color of the current product, use `default`. */
-    color?: NotificationsColorPalette | PresentationColorPalette;
-    /** Whether the Badge has its colors reversed or not. */
-    isReversed?: boolean;
-    /** Theme. */
-    theme?: Theme;
-    /** Badge variant. */
-    variant?: BadgeVariant;
-}
-type StyledBadgeProps = Omit<BadgeProps, 'color' | 'variant' | 'isReversed' | 'autoBreak'> & {
-    $autoBreak: BadgeProps['autoBreak'];
-    $color: BadgeProps['color'];
-    $isReversed: BadgeProps['isReversed'];
-    $variant: BadgeProps['variant'];
-    $theme: BadgeProps['theme'];
-};
-
-/**
- * The Badge component.
- */
-declare const Badge: Comp<BadgeProps, HTMLDivElement>;
-
 /**
  * Component props.
  */

package/index.js

@@ -6866,6 +6866,10 @@ const StyledSideNavigationMenu = styled.div`
     width: 100%;
   }
 
+  .redsift-badge {
+    margin-left: 8px;
+  }
+
   ${_ref => {
   let {
     $isDisabled,
@@ -7193,7 +7197,7 @@ const AppContainer = /*#__PURE__*/forwardRef((props, ref) => {
 AppContainer.className = CLASSNAME$H;
 AppContainer.displayName = COMPONENT_NAME$H;
 
-const _excluded$K = ["aria-label", "buttonProps", "buttonRef", "children", "className", "hasBadge", "icon", "iconProps", "iconRef", "id", "isDisabled", "isExpanded", "menuProps", "menuRef", "tabIndex", "theme"];
+const _excluded$K = ["aria-label", "buttonProps", "buttonRef", "children", "className", "badgeProps", "hasBadge", "icon", "iconProps", "iconRef", "id", "isDisabled", "isExpanded", "keepBadgeVisible", "menuProps", "menuRef", "tabIndex", "theme"];
 const COMPONENT_NAME$G = 'SideNavigationMenu';
 const CLASSNAME$G = 'redsift-side-navigation-menu';
 
@@ -7207,6 +7211,7 @@ const SideNavigationMenu = /*#__PURE__*/forwardRef((props, ref) => {
       buttonRef = useRef(),
       children,
       className,
+      badgeProps,
       hasBadge,
       icon,
       iconProps,
@@ -7214,6 +7219,7 @@ const SideNavigationMenu = /*#__PURE__*/forwardRef((props, ref) => {
       id: propsId,
       isDisabled,
       isExpanded: propsIsExpanded,
+      keepBadgeVisible,
       menuProps = {},
       menuRef = useRef(),
       tabIndex,
@@ -7517,9 +7523,9 @@ const SideNavigationMenu = /*#__PURE__*/forwardRef((props, ref) => {
     size: IconSize.large
   })), /*#__PURE__*/React__default.createElement("span", {
     className: "content"
-  }, ariaLabel), hasBadge && !isExpanded ? /*#__PURE__*/React__default.createElement(Badge, {
+  }, ariaLabel), hasBadge && (!isExpanded || keepBadgeVisible) ? /*#__PURE__*/React__default.createElement(Badge, _extends$1({
     color: "error"
-  }) : null, /*#__PURE__*/React__default.createElement(Icon, {
+  }, badgeProps)) : null, /*#__PURE__*/React__default.createElement(Icon, {
     icon: mdiChevronDown,
     className: `${SideNavigationMenu.className}__expand-icon`,
     size: IconSize.medium