From 5bf36e56c132781b62a28eeb5a01c523aa6633bb Mon Sep 17 00:00:00 2001
From: Jian Liao <jian.liao@gmail.com>
Date: Mon, 27 Feb 2023 14:59:53 -0800
Subject: [PATCH] feat: implement #2964 for sidenav component

---
 packages/sidenav/src/SidenavItem.ts         | 12 +++
 packages/sidenav/stories/sidenav.stories.ts |  4 +-
 packages/sidenav/test/sidenav-item.test.ts  | 92 +++++++++++++++++++++
 3 files changed, 106 insertions(+), 2 deletions(-)

diff --git a/packages/sidenav/src/SidenavItem.ts b/packages/sidenav/src/SidenavItem.ts
index 98ca5109d9..308d26203d 100644
--- a/packages/sidenav/src/SidenavItem.ts
+++ b/packages/sidenav/src/SidenavItem.ts
@@ -166,6 +166,18 @@ export class SideNavItem extends LikeAnchor(Focusable) {
             parentSideNav.startTrackingSelectionForItem(this);
             this.selected =
                 this.value != null && this.value === parentSideNav.value;
+            if (
+                this.selected === true &&
+                parentSideNav.variant === 'multilevel'
+            ) {
+                let element = this.parentElement;
+                while (element instanceof SideNavItem) {
+                    if (element.expanded === false) {
+                        element.expanded = true;
+                    }
+                    element = element.parentElement;
+                }
+            }
         }
     }
 
diff --git a/packages/sidenav/stories/sidenav.stories.ts b/packages/sidenav/stories/sidenav.stories.ts
index fe6bc17b1b..43e324d1e9 100644
--- a/packages/sidenav/stories/sidenav.stories.ts
+++ b/packages/sidenav/stories/sidenav.stories.ts
@@ -61,10 +61,10 @@ export const Multilevel = ({
     return html`
         <sp-sidenav variant="multilevel" value="2.3.1" @change=${onChange}>
             <sp-sidenav-item value="foo" label="foo"></sp-sidenav-item>
-            <sp-sidenav-item value="baz" label="baz" expanded>
+            <sp-sidenav-item value="baz" label="baz">
                 <sp-sidenav-item value="2.1" label="2.1"></sp-sidenav-item>
                 <sp-sidenav-item value="2.2" label="2.2"></sp-sidenav-item>
-                <sp-sidenav-item value="2.3" label="2.3" expanded>
+                <sp-sidenav-item value="2.3" label="2.3">
                     <sp-sidenav-item
                         value="2.3.1"
                         label="2.3.1"
diff --git a/packages/sidenav/test/sidenav-item.test.ts b/packages/sidenav/test/sidenav-item.test.ts
index 5b8372ec6c..e53dd35852 100644
--- a/packages/sidenav/test/sidenav-item.test.ts
+++ b/packages/sidenav/test/sidenav-item.test.ts
@@ -130,4 +130,96 @@ describe('Sidenav Item', () => {
         expect(otherItem.focusElement.hasAttribute('aria-current'), 'other').to
             .be.false;
     });
+
+    it('automatically expand parent items in multilevel mode', async () => {
+        const el = await fixture<SideNavItem>(
+            html`
+                <sp-sidenav variant="multilevel" value="2.3.1">
+                    <sp-sidenav-item value="foo" label="foo"></sp-sidenav-item>
+                    <sp-sidenav-item value="baz" label="baz">
+                        <sp-sidenav-item
+                            value="2.1"
+                            label="2.1"
+                        ></sp-sidenav-item>
+                        <sp-sidenav-item
+                            value="2.2"
+                            label="2.2"
+                        ></sp-sidenav-item>
+                        <sp-sidenav-item value="2.3" label="2.3">
+                            <sp-sidenav-item
+                                value="2.3.1"
+                                label="2.3.1"
+                            ></sp-sidenav-item>
+                            <sp-sidenav-item
+                                disabled
+                                value="2.3.2"
+                                label="2.3.2"
+                            ></sp-sidenav-item>
+                        </sp-sidenav-item>
+                    </sp-sidenav-item>
+                    <sp-sidenav-item
+                        value="test"
+                        label="test"
+                    ></sp-sidenav-item>
+                    <sp-sidenav-item value="hi" label="hi"></sp-sidenav-item>
+                </sp-sidenav>
+            `
+        );
+
+        await elementUpdated(el);
+
+        const sideNavItem_foo = el.querySelector(
+            'sp-sidenav-item[label="foo"]'
+        ) as SideNavItem;
+        const sideNavItem_baz = el.querySelector(
+            'sp-sidenav-item[label="baz"]'
+        ) as SideNavItem;
+        const sideNavItem_test = el.querySelector(
+            'sp-sidenav-item[label="test"]'
+        ) as SideNavItem;
+        const sideNavItem_hi = el.querySelector(
+            'sp-sidenav-item[label="hi"]'
+        ) as SideNavItem;
+
+        await elementUpdated(sideNavItem_foo);
+        await elementUpdated(sideNavItem_baz);
+        await elementUpdated(sideNavItem_test);
+        await elementUpdated(sideNavItem_hi);
+
+        expect(sideNavItem_foo.hasAttribute('expanded')).to.be.false;
+        expect(sideNavItem_baz.hasAttribute('expanded')).to.be.true;
+        expect(sideNavItem_test.hasAttribute('expanded')).to.be.false;
+        expect(sideNavItem_hi.hasAttribute('expanded')).to.be.false;
+
+        const sideNavItem_2_1 = sideNavItem_baz.querySelector(
+            'sp-sidenav-item[label="2.1"]'
+        ) as SideNavItem;
+        const sideNavItem_2_2 = sideNavItem_baz.querySelector(
+            'sp-sidenav-item[label="2.2"]'
+        ) as SideNavItem;
+        const sideNavItem_2_3 = sideNavItem_baz.querySelector(
+            'sp-sidenav-item[label="2.3"]'
+        ) as SideNavItem;
+
+        await elementUpdated(sideNavItem_2_1);
+        await elementUpdated(sideNavItem_2_2);
+        await elementUpdated(sideNavItem_2_3);
+
+        expect(sideNavItem_2_1.hasAttribute('expanded')).to.be.false;
+        expect(sideNavItem_2_2.hasAttribute('expanded')).to.be.false;
+        expect(sideNavItem_2_3.hasAttribute('expanded')).to.be.true;
+
+        const sideNavItem_2_3_1 = sideNavItem_2_3.querySelector(
+            'sp-sidenav-item[label="2.3.1"]'
+        ) as SideNavItem;
+        const sideNavItem_2_3_2 = sideNavItem_2_3.querySelector(
+            'sp-sidenav-item[label="2.3.2"]'
+        ) as SideNavItem;
+
+        await elementUpdated(sideNavItem_2_3_1);
+        await elementUpdated(sideNavItem_2_3_2);
+
+        expect(sideNavItem_2_3_1.hasAttribute('selected')).to.be.true;
+        expect(sideNavItem_2_3_2.hasAttribute('selected')).to.be.false;
+    });
 });