@momentum-design/components 0.104.14 → 0.104.15

package/dist/components/sidenavigation/sidenavigation.component.d.ts

@@ -1,4 +1,4 @@
-import { CSSResult } from 'lit';
+import { CSSResult, PropertyValues } from 'lit';
 import { Provider } from '../../models';
 import type { SideNavigationVariant } from './sidenavigation.types';
 import SideNavigationContext from './sidenavigation.context';
@@ -50,15 +50,23 @@ import SideNavigationContext from './sidenavigation.context';
  * @slot fixed-section - Slot for the fixed content area of the side navigation.
  * @slot brand-logo - Slot for the brand logo (e.g., icon or img).
  *
+ * @csspart side-navigation-container - The main container wrapping the entire side navigation.
+ * @csspart scrollable-section - The scrollable section of the side navigation.
+ * @csspart fixed-section - The fixed section of the side navigation.
+ * @csspart separator - The divider between the scrollable and fixed sections.
+ * @csspart brand-logo-container - The container wrapping the brand logo and footer text.
+ * @csspart footer-text - The footer text label in the fixed section.
+ * @csspart vertical-divider - The vertical divider between the scrollable and fixed sections.
+ * @csspart vertical-divider-button - The button inside the vertical divider used to toggle expand/collapse.
+ *
+ * @event toggle - (React: onToggle) Dispatched when the grabber button is clicked to expand/collapse the sidenavigation.
+ * @event activechange - (React: onActiveChange) Dispatched when the active state of a nested navmenuitem changes.
+ *
  * @cssproperty --mdc-sidenavigation-expanded-width - width of the sideNavigation when expanded
- * @cssproperty --mdc-sidenavigation-collapsed-width - width of the sideNavigation when collpased
+ * @cssproperty --mdc-sidenavigation-collapsed-width - width of the sideNavigation when collapsed
+ * @cssproperty --mdc-sidenavigation-vertical-divider-button-z-index - z-index of the vertical divider button
  */
 declare class SideNavigation extends Provider<SideNavigationContext> {
-    constructor();
-    connectedCallback(): void;
-    static get Context(): {
-        __context__: SideNavigationContext;
-    };
     /**
      * Four variants of the sideNavigation
      * - **fixed-collapsed**: Shows icons without labels and has fixed width, 4.5rem.
@@ -90,25 +98,13 @@ declare class SideNavigation extends Provider<SideNavigationContext> {
      * Tooltip text shown on parent nav items when a child is active.
      */
     parentNavTooltipText?: string;
-    /**
-     * Toggles between true and false when it's variant is flexible.
-     * @default true
-     *
-     * @internal
-     */
-    private flexibleExpanded;
-    /**
-     * Direction of the arrow icon, if applicable.
-     * - **positive**
-     * - **negative**
-     *
-     * Note: Positive and Negative directions are defined based on Cartesian plane.
-     * @default 'negative'
-     *
-     * @internal
-     */
-    private arrowDirection;
+    constructor();
+    connectedCallback(): void;
+    static get Context(): {
+        __context__: SideNavigationContext;
+    };
     protected updated(changedProperties: Map<string, any>): void;
+    protected firstUpdated(changedProperties: PropertyValues): void;
     /**
      * Update all observing components of this
      * provider to update the values
@@ -131,14 +127,9 @@ declare class SideNavigation extends Provider<SideNavigationContext> {
     private findNav;
     /**
      * Returns all nested, non-disabled mdc-navmenuitem elements inside this component.
-     */
-    private get navMenuItems();
-    /**
-     * Syncs `expanded` and `aria-expanded` based on `variant` and `flexibleExpanded`.
-     *
      * @internal
      */
-    private updateExpansionState;
+    private get navMenuItems();
     /**
      * Sets the variant attribute for the sideNavigation component.
      * If the provided variant is not included in the variant,
@@ -151,7 +142,6 @@ declare class SideNavigation extends Provider<SideNavigationContext> {
     private setVariant;
     /**
      * Toggles navigation state for the flexible variant.
-     * Updates `flexibleExpanded`, `ariaExpanded`, and `arrowDirection`.
      *
      * @internal
      */

package/dist/components/sidenavigation/sidenavigation.component.js

@@ -8,7 +8,7 @@ var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 import { html, nothing } from 'lit';
-import { property, state } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 import { Component, Provider } from '../../models';
 import { TYPE, VALID_TEXT_TAGS } from '../text/text.constants';
 import { TAG_NAME as NAVMENUITEM_TAGNAME } from '../navmenuitem/navmenuitem.constants';
@@ -66,8 +66,21 @@ import styles from './sidenavigation.styles';
  * @slot fixed-section - Slot for the fixed content area of the side navigation.
  * @slot brand-logo - Slot for the brand logo (e.g., icon or img).
  *
+ * @csspart side-navigation-container - The main container wrapping the entire side navigation.
+ * @csspart scrollable-section - The scrollable section of the side navigation.
+ * @csspart fixed-section - The fixed section of the side navigation.
+ * @csspart separator - The divider between the scrollable and fixed sections.
+ * @csspart brand-logo-container - The container wrapping the brand logo and footer text.
+ * @csspart footer-text - The footer text label in the fixed section.
+ * @csspart vertical-divider - The vertical divider between the scrollable and fixed sections.
+ * @csspart vertical-divider-button - The button inside the vertical divider used to toggle expand/collapse.
+ *
+ * @event toggle - (React: onToggle) Dispatched when the grabber button is clicked to expand/collapse the sidenavigation.
+ * @event activechange - (React: onActiveChange) Dispatched when the active state of a nested navmenuitem changes.
+ *
  * @cssproperty --mdc-sidenavigation-expanded-width - width of the sideNavigation when expanded
- * @cssproperty --mdc-sidenavigation-collapsed-width - width of the sideNavigation when collpased
+ * @cssproperty --mdc-sidenavigation-collapsed-width - width of the sideNavigation when collapsed
+ * @cssproperty --mdc-sidenavigation-vertical-divider-button-z-index - z-index of the vertical divider button
  */
 class SideNavigation extends Provider {
     constructor() {
@@ -89,24 +102,6 @@ class SideNavigation extends Provider {
          * @default ''
          */
         this.footerText = '';
-        /**
-         * Toggles between true and false when it's variant is flexible.
-         * @default true
-         *
-         * @internal
-         */
-        this.flexibleExpanded = this.variant === DEFAULTS.VARIANT;
-        /**
-         * Direction of the arrow icon, if applicable.
-         * - **positive**
-         * - **negative**
-         *
-         * Note: Positive and Negative directions are defined based on Cartesian plane.
-         * @default 'negative'
-         *
-         * @internal
-         */
-        this.arrowDirection = this.flexibleExpanded ? DIRECTIONS.NEGATIVE : DIRECTIONS.POSITIVE;
         /**
          * Handle the navMenuItem active change event fired from the nested navMenuItem.
          * @internal
@@ -126,25 +121,6 @@ class SideNavigation extends Provider {
          * @internal
          */
         this.findNav = (navs, navId) => navs.find(nav => nav.navId === navId);
-        /**
-         * Syncs `expanded` and `aria-expanded` based on `variant` and `flexibleExpanded`.
-         *
-         * @internal
-         */
-        this.updateExpansionState = () => {
-            switch (this.variant) {
-                case VARIANTS.FLEXIBLE:
-                    this.expanded = this.flexibleExpanded;
-                    break;
-                case VARIANTS.FIXED_EXPANDED:
-                    this.expanded = true;
-                    break;
-                case VARIANTS.FIXED_COLLAPSED:
-                    this.expanded = false;
-                    break;
-                default:
-            }
-        };
         this.addEventListener('activechange', this.handleNestedNavMenuItemActiveChange.bind(this));
     }
     connectedCallback() {
@@ -158,12 +134,29 @@ class SideNavigation extends Provider {
         super.updated(changedProperties);
         if (changedProperties.has('variant')) {
             this.setVariant(this.variant);
-            this.updateExpansionState();
+            // hard set expanded state for fixed variants:
+            switch (this.variant) {
+                case VARIANTS.FIXED_EXPANDED:
+                    this.expanded = true;
+                    break;
+                case VARIANTS.FIXED_COLLAPSED:
+                    this.expanded = false;
+                    break;
+                default:
+            }
         }
         if (changedProperties.has('variant') || changedProperties.has('expanded')) {
             this.updateContext();
         }
     }
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
+        if (this.variant === VARIANTS.FLEXIBLE && this.expanded === undefined) {
+            // if on first update the variant is flexible and expanded is not set, default to expanded true
+            this.expanded = true;
+            this.updateContext();
+        }
+    }
     /**
      * Update all observing components of this
      * provider to update the values
@@ -182,6 +175,7 @@ class SideNavigation extends Provider {
     }
     /**
      * Returns all nested, non-disabled mdc-navmenuitem elements inside this component.
+     * @internal
      */
     get navMenuItems() {
         return Array.from(this.querySelectorAll(`${NAVMENUITEM_TAGNAME}:not([disabled])`));
@@ -200,14 +194,12 @@ class SideNavigation extends Provider {
     }
     /**
      * Toggles navigation state for the flexible variant.
-     * Updates `flexibleExpanded`, `ariaExpanded`, and `arrowDirection`.
      *
      * @internal
      */
     toggleSideNavigation() {
-        this.flexibleExpanded = !this.flexibleExpanded;
-        this.arrowDirection = this.arrowDirection === DIRECTIONS.NEGATIVE ? DIRECTIONS.POSITIVE : DIRECTIONS.NEGATIVE;
-        this.updateExpansionState();
+        this.expanded = !this.expanded;
+        this.dispatchEvent(new CustomEvent('toggle', { detail: { expanded: this.expanded } }));
     }
     preventScrollOnSpace(event) {
         // Prevent default space key behavior to avoid scrolling the page
@@ -239,7 +231,7 @@ class SideNavigation extends Provider {
           <div part="brand-logo-container">
             <slot name="brand-logo"></slot>
             ${this.expanded
-            ? html `<mdc-text type=${TYPE.BODY_MIDSIZE_MEDIUM} tagname=${VALID_TEXT_TAGS.SPAN} part="label"
+            ? html `<mdc-text type=${TYPE.BODY_MIDSIZE_MEDIUM} tagname=${VALID_TEXT_TAGS.SPAN} part="footer-text"
                   >${this.footerText}</mdc-text
                 >`
             : nothing}
@@ -248,17 +240,18 @@ class SideNavigation extends Provider {
       </div>
       ${this.variant === VARIANTS.FLEXIBLE
             ? html `<mdc-divider
+            part="vertical-divider"
             orientation=${DIVIDER_ORIENTATION.VERTICAL}
             variant=${DIVIDER_VARIANT.GRADIENT}
-            arrow-direction=${this.arrowDirection}
+            arrow-direction=${this.expanded ? DIRECTIONS.NEGATIVE : DIRECTIONS.POSITIVE}
             button-position=${DIRECTIONS.POSITIVE}
           >
             <mdc-button
+              part="vertical-divider-button"
               aria-label=${(_a = this.grabberBtnAriaLabel) !== null && _a !== void 0 ? _a : ''}
               @click=${this.toggleSideNavigation}
               aria-expanded="${!!this.expanded}"
               aria-controls="side-nav-container"
-              part="grabber-btn"
             ></mdc-button>
           </mdc-divider>`
             : nothing}
@@ -286,12 +279,4 @@ __decorate([
     property({ type: String, reflect: true, attribute: 'parent-nav-tooltip-text' }),
     __metadata("design:type", String)
 ], SideNavigation.prototype, "parentNavTooltipText", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], SideNavigation.prototype, "flexibleExpanded", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", String)
-], SideNavigation.prototype, "arrowDirection", void 0);
 export default SideNavigation;

package/dist/components/sidenavigation/sidenavigation.styles.js

@@ -3,6 +3,7 @@ const styles = css `
   :host {
     --mdc-sidenavigation-expanded-width: 15rem;
     --mdc-sidenavigation-collapsed-width: 4.5rem;
+    --mdc-sidenavigation-vertical-divider-button-z-index: auto;
 
     display: flex;
     height: 100%;
@@ -64,5 +65,9 @@ const styles = css `
   :host::part(separator) {
     margin-bottom: 0.75rem;
   }
+
+  :host::part(vertical-divider-button) {
+    z-index: var(--mdc-sidenavigation-vertical-divider-button-z-index);
+  }
 `;
 export default [styles];

package/dist/components/sidenavigation/sidenavigation.types.d.ts

@@ -2,10 +2,15 @@ import type { TypedCustomEvent, ValueOf } from '../../utils/types';
 import type SideNavigation from './sidenavigation.component';
 import { VARIANTS } from './sidenavigation.constants';
 type SideNavigationVariant = ValueOf<typeof VARIANTS>;
+type SideNavigationActiveChangeEvent = TypedCustomEvent<SideNavigation, {
+    navId: string;
+    active: boolean;
+}>;
+type SideNavigationToggleEvent = TypedCustomEvent<SideNavigation, {
+    expanded: boolean;
+}>;
 interface Events {
-    onActiveChangeEvent: TypedCustomEvent<SideNavigation, {
-        navId: string;
-        active: boolean;
-    }>;
+    onActiveChangeEvent: SideNavigationActiveChangeEvent;
+    onToggleEvent: SideNavigationToggleEvent;
 }
 export type { SideNavigationVariant, Events };