Remove unmatched closing div (#6988)

# Pull Request ### 🎫 Issues Closes #6848 ## 👩‍💻 Reviewer Notes This is a re-implementation of #6848 due to waiting on response from contributor.
microsoft · Jun 14, 2024 · 6a0c57a · 6a0c57a
1 parent d1685de
commit 6a0c57a
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 43 deletions.
diff --git a/change/@microsoft-fast-foundation-2ef73bfd-1375-4187-9757-ed8841ea5edf.json b/change/@microsoft-fast-foundation-2ef73bfd-1375-4187-9757-ed8841ea5edf.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Remove unmatched closing div",
+  "packageName": "@microsoft/fast-foundation",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/fast-foundation/src/menu-item/menu-item.template.ts b/packages/web-components/fast-foundation/src/menu-item/menu-item.template.ts
@@ -15,16 +15,16 @@ export function menuItemTemplate<T extends FASTMenuItem>(
     options: MenuItemOptions = {}
 ): ElementViewTemplate<T> {
     return html<T>`
-    <template
-        aria-haspopup="${x => (x.hasSubmenu ? "menu" : void 0)}"
-        aria-checked="${x => (x.role !== MenuItemRole.menuitem ? x.checked : void 0)}"
-        aria-disabled="${x => x.disabled}"
-        aria-expanded="${x => x.expanded}"
-        @keydown="${(x, c) => x.handleMenuItemKeyDown(c.event as KeyboardEvent)}"
-        @click="${(x, c) => x.handleMenuItemClick(c.event as MouseEvent)}"
-        @mouseover="${(x, c) => x.handleMouseOver(c.event as MouseEvent)}"
-        @mouseout="${(x, c) => x.handleMouseOut(c.event as MouseEvent)}"
-    >
+        <template
+            aria-haspopup="${x => (x.hasSubmenu ? "menu" : void 0)}"
+            aria-checked="${x => (x.role !== MenuItemRole.menuitem ? x.checked : void 0)}"
+            aria-disabled="${x => x.disabled}"
+            aria-expanded="${x => x.expanded}"
+            @keydown="${(x, c) => x.handleMenuItemKeyDown(c.event as KeyboardEvent)}"
+            @click="${(x, c) => x.handleMenuItemClick(c.event as MouseEvent)}"
+            @mouseover="${(x, c) => x.handleMouseOver(c.event as MouseEvent)}"
+            @mouseout="${(x, c) => x.handleMouseOut(c.event as MouseEvent)}"
+        >
             ${when(
                 x => x.role === MenuItemRole.menuitemcheckbox,
                 html<FASTMenuItem>`
@@ -49,38 +49,40 @@ export function menuItemTemplate<T extends FASTMenuItem>(
                     </div>
                 `
             )}
-        </div>
-        ${startSlotTemplate(options)}
-        <span class="content" part="content">
-            <slot></slot>
-        </span>
-        ${endSlotTemplate(options)}
-        ${when(
-            x => x.hasSubmenu,
-            html<T>`
-                <div
-                    part="expand-collapse-glyph-container"
-                    class="expand-collapse-glyph-container"
-                >
-                    <span part="expand-collapse" class="expand-collapse">
-                        <slot name="expand-collapse-indicator">
-                            ${staticallyCompose(options.expandCollapseGlyph)}
-                        </slot>
-                    </span>
-                </div>
-            `
-        )}
-        <span
-            ?hidden="${x => !x.expanded}"
-            class="submenu-container"
-            part="submenu-container"
-            ${ref("submenuContainer")}
-        >
-            <slot name="submenu" ${slotted({
-                property: "slottedSubmenu",
-                filter: elements("[role='menu']"),
-            })}></slot>
-        </span>
-    </template>
+            ${startSlotTemplate(options)}
+            <span class="content" part="content">
+                <slot></slot>
+            </span>
+            ${endSlotTemplate(options)}
+            ${when(
+                x => x.hasSubmenu,
+                html<T>`
+                    <div
+                        part="expand-collapse-glyph-container"
+                        class="expand-collapse-glyph-container"
+                    >
+                        <span part="expand-collapse" class="expand-collapse">
+                            <slot name="expand-collapse-indicator">
+                                ${staticallyCompose(options.expandCollapseGlyph)}
+                            </slot>
+                        </span>
+                    </div>
+                `
+            )}
+            <span
+                ?hidden="${x => !x.expanded}"
+                class="submenu-container"
+                part="submenu-container"
+                ${ref("submenuContainer")}
+            >
+                <slot
+                    name="submenu"
+                    ${slotted({
+                        property: "slottedSubmenu",
+                        filter: elements("[role='menu']"),
+                    })}
+                ></slot>
+            </span>
+        </template>
     `;
 }