admin-lte 4.0.2 → 4.1.0

package/src/ts/fullscreen.ts

@@ -6,7 +6,9 @@
  * --------------------------------------------
  */
 
+import { BaseComponent, dispatchCustomEvent } from './base-component'
 import {
+  getLifecycleSignal,
   onDOMContentLoaded
 } from './util/index'
 
@@ -14,8 +16,8 @@ import {
  * Constants
  * ============================================================================
  */
-const DATA_KEY = 'lte.fullscreen'
-const EVENT_KEY = `.${DATA_KEY}`
+const NAME = 'fullscreen'
+const EVENT_KEY = `.lte.${NAME}`
 const EVENT_MAXIMIZED = `maximized${EVENT_KEY}`
 const EVENT_MINIMIZED = `minimized${EVENT_KEY}`
 
@@ -23,68 +25,75 @@ const SELECTOR_FULLSCREEN_TOGGLE = '[data-lte-toggle="fullscreen"]'
 const SELECTOR_MAXIMIZE_ICON = '[data-lte-icon="maximize"]'
 const SELECTOR_MINIMIZE_ICON = '[data-lte-icon="minimize"]'
 
+/**
+ * Keep the icons and custom events in sync with the browser's actual
+ * fullscreen state. Driving this from the `fullscreenchange` event (rather
+ * than from the request/exit calls) means the UI stays correct no matter how
+ * the transition happened — including the cases the imperative approach could
+ * never catch: a request that was denied (permissions policy, missing
+ * `allowfullscreen` on an iframe, lost user gesture) and an exit triggered by
+ * the user pressing ESC or F11.
+ */
+function syncFullScreenState(): void {
+  const iconMaximize = document.querySelector<HTMLElement>(SELECTOR_MAXIMIZE_ICON)
+  const iconMinimize = document.querySelector<HTMLElement>(SELECTOR_MINIMIZE_ICON)
+  const isFullScreen = Boolean(document.fullscreenElement)
+
+  // Toggle Bootstrap's .d-none utility instead of hardcoding inline
+  // display:block. The previous approach overrode the icon library's
+  // natural display value (eg. some icon fonts use inline-block) and
+  // caused the icon to shift its position. Fixes #6021.
+  iconMaximize?.classList.toggle('d-none', isFullScreen)
+  iconMinimize?.classList.toggle('d-none', !isFullScreen)
+
+  const eventName = isFullScreen ? EVENT_MAXIMIZED : EVENT_MINIMIZED
+
+  document.querySelectorAll(SELECTOR_FULLSCREEN_TOGGLE).forEach(button => {
+    dispatchCustomEvent(button, eventName)
+  })
+}
+
 /**
  * Class Definition.
  * ============================================================================
  */
-class FullScreen {
-  _element: HTMLElement
-  _config: undefined
-
-  constructor(element: HTMLElement, config?: undefined) {
-    this._element = element
-    this._config = config
+class FullScreen extends BaseComponent {
+  static get NAME(): string {
+    return NAME
   }
 
-  inFullScreen(): void {
-    const event = new Event(EVENT_MAXIMIZED)
-
-    const iconMaximize = document.querySelector<HTMLElement>(SELECTOR_MAXIMIZE_ICON)
-    const iconMinimize = document.querySelector<HTMLElement>(SELECTOR_MINIMIZE_ICON)
-
-    void document.documentElement.requestFullscreen()
-
-    // Toggle Bootstrap's .d-none utility instead of hardcoding inline
-    // display:block. The previous approach overrode the icon library's
-    // natural display value (eg. some icon fonts use inline-block) and
-    // caused the icon to shift its position. Fixes #6021.
-    if (iconMaximize) {
-      iconMaximize.classList.add('d-none')
-    }
+  static getInstance(element: Element | null | undefined): FullScreen | null {
+    return this._getInstance(element) as FullScreen | null
+  }
 
-    if (iconMinimize) {
-      iconMinimize.classList.remove('d-none')
-    }
+  static getOrCreateInstance(element: HTMLElement): FullScreen {
+    return this.getInstance(element) ?? new this(element)
+  }
 
-    this._element.dispatchEvent(event)
+  inFullScreen(): void {
+    // Fire-and-forget: the resulting `fullscreenchange` event updates the
+    // icons and dispatches `maximized.lte.fullscreen`. If the request is
+    // denied the event never fires, so the UI correctly stays untouched.
+    void document.documentElement.requestFullscreen().catch(() => {
+      // Request denied — nothing to undo.
+    })
   }
 
   outFullscreen(): void {
-    const event = new Event(EVENT_MINIMIZED)
-
-    const iconMaximize = document.querySelector<HTMLElement>(SELECTOR_MAXIMIZE_ICON)
-    const iconMinimize = document.querySelector<HTMLElement>(SELECTOR_MINIMIZE_ICON)
-
-    void document.exitFullscreen()
-
-    if (iconMaximize) {
-      iconMaximize.classList.remove('d-none')
-    }
-
-    if (iconMinimize) {
-      iconMinimize.classList.add('d-none')
-    }
-
-    this._element.dispatchEvent(event)
+    void document.exitFullscreen().catch(() => {
+      // Exit failed — nothing to undo.
+    })
   }
 
   toggleFullScreen(): void {
-    if (document.fullscreenEnabled) {
-      if (document.fullscreenElement) {
-        this.outFullscreen()
-      } else {
-        this.inFullScreen()
-      }
+    if (!document.fullscreenEnabled) {
+      return
+    }
+
+    if (document.fullscreenElement) {
+      this.outFullscreen()
+    } else {
+      this.inFullScreen()
     }
   }
 }
@@ -92,23 +101,29 @@ class FullScreen {
 /**
  * Data Api implementation
  * ============================================================================
+ * Toggle clicks are delegated on `document`; the fullscreenchange listener is
+ * re-registered per page load with the lifecycle signal.
  */
-onDOMContentLoaded(() => {
-  const buttons = document.querySelectorAll(SELECTOR_FULLSCREEN_TOGGLE)
 
-  buttons.forEach(btn => {
-    btn.addEventListener('click', event => {
-      event.preventDefault()
+document.addEventListener('click', event => {
+  const target = event.target
 
-      const target = event.target as HTMLElement
-      const button = target.closest(SELECTOR_FULLSCREEN_TOGGLE) as HTMLElement | undefined
+  if (!(target instanceof Element)) {
+    return
+  }
 
-      if (button) {
-        const data = new FullScreen(button, undefined)
-        data.toggleFullScreen()
-      }
-    })
-  })
+  const button = target.closest(SELECTOR_FULLSCREEN_TOGGLE) as HTMLElement | null
+
+  if (!button) {
+    return
+  }
+
+  event.preventDefault()
+  FullScreen.getOrCreateInstance(button).toggleFullScreen()
+})
+
+onDOMContentLoaded(() => {
+  document.addEventListener('fullscreenchange', syncFullScreenState, { signal: getLifecycleSignal() })
 })
 
 export default FullScreen

package/src/ts/layout.ts

@@ -7,6 +7,7 @@
  */
 
 import {
+  getLifecycleSignal,
   onDOMContentLoaded
 } from './util/index'
 
@@ -62,7 +63,7 @@ class Layout {
 
 onDOMContentLoaded(() => {
   const layout = new Layout(document.body)
-  window.addEventListener('resize', () => layout.holdTransition(200))
+  window.addEventListener('resize', () => layout.holdTransition(200), { signal: getLifecycleSignal() })
 
   setTimeout(() => {
     document.body.classList.add(CLASS_NAME_APP_LOADED)

package/src/ts/push-menu.ts

@@ -6,7 +6,9 @@
  * ----------------------------------------------------------------------------
  */
 
+import { BaseComponent, dispatchCustomEvent } from './base-component'
 import {
+  getLifecycleSignal,
   onDOMContentLoaded
 } from './util/index'
 
@@ -16,11 +18,17 @@ import {
  * ----------------------------------------------------------------------------
  */
 
-const DATA_KEY = 'lte.push-menu'
-const EVENT_KEY = `.${DATA_KEY}`
+const NAME = 'push-menu'
+const EVENT_KEY = `.lte.${NAME}`
+
+// Cancelable "before" events: preventDefault() aborts the state change.
 const EVENT_OPEN = `open${EVENT_KEY}`
 const EVENT_COLLAPSE = `collapse${EVENT_KEY}`
 
+// "After" events, dispatched once the classes have been applied.
+const EVENT_OPENED = `opened${EVENT_KEY}`
+const EVENT_COLLAPSED = `collapsed${EVENT_KEY}`
+
 const CLASS_NAME_SIDEBAR_MINI = 'sidebar-mini'
 const CLASS_NAME_SIDEBAR_EXPAND = 'sidebar-expand'
 const CLASS_NAME_SIDEBAR_OVERLAY = 'sidebar-overlay'
@@ -55,7 +63,9 @@ type Config = {
 }
 
 const Defaults: Config = {
-  sidebarBreakpoint: 992,
+  // Matches the CSS convention (breakpoint-max = breakpoint - .02) so that a
+  // window of exactly 992px is classified as desktop by both JS and CSS.
+  sidebarBreakpoint: 991.98,
   enablePersistence: false
 }
 
@@ -65,12 +75,23 @@ const Defaults: Config = {
  * ----------------------------------------------------------------------------
  */
 
-class PushMenu {
-  _element: HTMLElement
+class PushMenu extends BaseComponent {
+  static get NAME(): string {
+    return NAME
+  }
+
+  static getInstance(element: Element | null | undefined): PushMenu | null {
+    return this._getInstance(element) as PushMenu | null
+  }
+
+  static getOrCreateInstance(element: HTMLElement, config: Partial<Config> = {}): PushMenu {
+    return this.getInstance(element) ?? new this(element, config)
+  }
+
   _config: Config
 
-  constructor(element: HTMLElement, config: Config) {
-    this._element = element
+  constructor(element: HTMLElement, config: Partial<Config> = {}) {
+    super(element)
     this._config = { ...Defaults, ...config }
   }
 
@@ -115,6 +136,12 @@ class PushMenu {
    * Expand the sidebar menu.
    */
   expand(): void {
+    // The "open" event is cancelable: preventDefault() keeps the sidebar
+    // in its current state.
+    if (dispatchCustomEvent(this._element, EVENT_OPEN, { cancelable: true }).defaultPrevented) {
+      return
+    }
+
     // Remove the sidebar-collapse class. Only on mobile, add the sidebar-open
     // class to indicate the sidebar is explicitly open.
 
@@ -124,24 +151,24 @@ class PushMenu {
       document.body.classList.add(CLASS_NAME_SIDEBAR_OPEN)
     }
 
-    // Dispatch the expand event.
-
-    this._element.dispatchEvent(new Event(EVENT_OPEN))
+    dispatchCustomEvent(this._element, EVENT_OPENED)
   }
 
   /**
    * Collapse the sidebar menu.
    */
   collapse(): void {
+    if (dispatchCustomEvent(this._element, EVENT_COLLAPSE, { cancelable: true }).defaultPrevented) {
+      return
+    }
+
     // Remove the sidebar-open class (if present), and add the sidebar-collapse
     // class.
 
     document.body.classList.remove(CLASS_NAME_SIDEBAR_OPEN)
     document.body.classList.add(CLASS_NAME_SIDEBAR_COLLAPSE)
 
-    // Dispatch the collapse event.
-
-    this._element.dispatchEvent(new Event(EVENT_COLLAPSE))
+    dispatchCustomEvent(this._element, EVENT_COLLAPSED)
   }
 
   /**
@@ -329,12 +356,40 @@ class PushMenu {
  * ----------------------------------------------------------------------------
  * Data Api implementation
  * ----------------------------------------------------------------------------
+ * Toggle clicks are handled by one delegated listener on `document`, so
+ * toggle buttons added later work and the listener survives Turbo's <body>
+ * swaps. The instance itself is created per page load below and can be
+ * retrieved anywhere with:
+ *
+ *   PushMenu.getInstance(document.querySelector('.app-sidebar'))
  */
 
+document.addEventListener('click', event => {
+  const target = event.target
+
+  if (!(target instanceof Element)) {
+    return
+  }
+
+  const button = target.closest(SELECTOR_SIDEBAR_TOGGLE)
+
+  if (!button) {
+    return
+  }
+
+  event.preventDefault()
+
+  const sidebar = document.querySelector(SELECTOR_APP_SIDEBAR) as HTMLElement | null
+
+  if (sidebar) {
+    PushMenu.getOrCreateInstance(sidebar).toggle()
+  }
+})
+
 onDOMContentLoaded(() => {
   // Find the sidebar element in the DOM.
 
-  const sidebar = document?.querySelector(SELECTOR_APP_SIDEBAR) as HTMLElement | undefined
+  const sidebar = document.querySelector(SELECTOR_APP_SIDEBAR) as HTMLElement | null
 
   if (!sidebar) {
     return
@@ -355,23 +410,38 @@ onDOMContentLoaded(() => {
       enablePersistenceAttr === 'true'
   }
 
-  // Initialize the PushMenu plugin (a unique instance).
+  // Initialize the PushMenu plugin (a unique instance per sidebar element;
+  // Turbo navigations swap in a fresh element, so a fresh instance is
+  // created and the old one is garbage-collected with the old <body>).
 
-  const pushMenu = new PushMenu(sidebar, config)
+  const pushMenu = PushMenu.getOrCreateInstance(sidebar, config)
   pushMenu.init()
 
-  // Update the sidebar state on window resize events.
+  // Update the sidebar state only when the viewport crosses the sidebar
+  // breakpoint. matchMedia fires exactly on crossings, so height-only resizes
+  // (mobile URL bar / keyboard show-hide) and same-side width changes never
+  // disturb a sidebar state the user chose. init() has already read the
+  // effective breakpoint from the CSS, so the query uses the final value.
+
+  const breakpointQuery = globalThis.matchMedia(`(max-width: ${pushMenu._config.sidebarBreakpoint}px)`)
 
-  window.addEventListener('resize', () => {
-    pushMenu.setupSidebarBreakPoint()
+  breakpointQuery.addEventListener('change', () => {
     pushMenu.updateStateByResponsiveLogic()
-  })
+  }, { signal: getLifecycleSignal() })
 
   // Create the sidebar overlay element and append it to the app wrapper.
+  // Reuse an existing overlay if present: Turbo restores cached <body>
+  // snapshots that already contain the injected node (listeners are gone
+  // after the restore — the snapshot is a clone — so they are rebound below).
 
-  const sidebarOverlay = document.createElement('div')
-  sidebarOverlay.className = CLASS_NAME_SIDEBAR_OVERLAY
-  document.querySelector(SELECTOR_APP_WRAPPER)?.append(sidebarOverlay)
+  const appWrapper = document.querySelector(SELECTOR_APP_WRAPPER)
+  let sidebarOverlay = appWrapper?.querySelector(`:scope > .${CLASS_NAME_SIDEBAR_OVERLAY}`) as HTMLElement | null
+
+  if (!sidebarOverlay) {
+    sidebarOverlay = document.createElement('div')
+    sidebarOverlay.className = CLASS_NAME_SIDEBAR_OVERLAY
+    appWrapper?.append(sidebarOverlay)
+  }
 
   // Handle touch events on overlay (area outside sidebar), usually we want to
   // close the sidebar when the user taps outside the sidebar on mobile
@@ -400,27 +470,6 @@ onDOMContentLoaded(() => {
     event.preventDefault()
     pushMenu.collapse()
   })
-
-  // Handle click events on sidebar toggle buttons.
-
-  const fullBtn = document.querySelectorAll(SELECTOR_SIDEBAR_TOGGLE)
-
-  fullBtn.forEach(btn => {
-    btn.addEventListener('click', event => {
-      event.preventDefault()
-
-      let button = event.currentTarget as HTMLElement | undefined
-
-      if (button?.dataset.lteToggle !== 'sidebar') {
-        button = button?.closest(SELECTOR_SIDEBAR_TOGGLE) as HTMLElement | undefined
-      }
-
-      if (button) {
-        event?.preventDefault()
-        pushMenu.toggle()
-      }
-    })
-  })
 })
 
 export default PushMenu

package/src/ts/treeview.ts

@@ -6,6 +6,7 @@
  * --------------------------------------------
  */
 
+import { BaseComponent, dispatchCustomEvent } from './base-component'
 import {
   onDOMContentLoaded,
   slideDown,
@@ -18,10 +19,14 @@ import {
  * ------------------------------------------------------------------------
  */
 
-// const NAME = 'Treeview'
-const DATA_KEY = 'lte.treeview'
-const EVENT_KEY = `.${DATA_KEY}`
+const NAME = 'treeview'
+const EVENT_KEY = `.lte.${NAME}`
 
+// Cancelable "before" events (dispatched on the nav-item as an action starts)
+const EVENT_EXPAND = `expand${EVENT_KEY}`
+const EVENT_COLLAPSE = `collapse${EVENT_KEY}`
+
+// "After" events (dispatched on the nav-item when the animation finished)
 const EVENT_EXPANDED = `expanded${EVENT_KEY}`
 const EVENT_COLLAPSED = `collapsed${EVENT_KEY}`
 const EVENT_LOAD_DATA_API = `load${EVENT_KEY}`
@@ -42,29 +47,56 @@ type Config = {
   accordion: boolean;
 }
 
+/**
+ * Reflect a submenu's open state on its toggle link so screen readers can
+ * announce the treeview as expandable/expanded (WCAG 4.1.2).
+ */
+const setAriaExpanded = (navItem: Element, expanded: boolean): void => {
+  const link = navItem.querySelector(`:scope > ${SELECTOR_NAV_LINK}`)
+  link?.setAttribute('aria-expanded', String(expanded))
+}
+
 /**
  * Class Definition
  * ====================================================
  */
 
-class Treeview {
-  _element: HTMLElement
+class Treeview extends BaseComponent {
+  static get NAME(): string {
+    return NAME
+  }
+
+  static getInstance(element: Element | null | undefined): Treeview | null {
+    return this._getInstance(element) as Treeview | null
+  }
+
+  static getOrCreateInstance(element: HTMLElement, config: Partial<Config> = {}): Treeview {
+    return this.getInstance(element) ?? new this(element, config)
+  }
+
   _config: Config
 
-  constructor(element: HTMLElement, config: Config) {
-    this._element = element
+  constructor(element: HTMLElement, config: Partial<Config> = {}) {
+    super(element)
     this._config = { ...Default, ...config }
   }
 
   open(): void {
-    const event = new Event(EVENT_EXPANDED)
+    if (dispatchCustomEvent(this._element, EVENT_EXPAND, { cancelable: true }).defaultPrevented) {
+      return
+    }
 
     if (this._config.accordion) {
       const openMenuList = this._element.parentElement?.querySelectorAll(`${SELECTOR_NAV_ITEM}.${CLASS_NAME_MENU_OPEN}`)
 
       openMenuList?.forEach(openMenu => {
-        if (openMenu !== this._element.parentElement) {
+        // Skip the item being opened and anything nested inside it. The old
+        // guard compared against the parent <ul> — which never matches a
+        // nav-item — so calling open() on an already-open item slid its own
+        // menu shut.
+        if (!this._element.contains(openMenu)) {
           openMenu.classList.remove(CLASS_NAME_MENU_OPEN)
+          setAriaExpanded(openMenu, false)
           const childElement = openMenu?.querySelector(SELECTOR_TREEVIEW_MENU) as HTMLElement | undefined
           if (childElement) {
             slideUp(childElement, this._config.animationSpeed)
@@ -74,26 +106,38 @@ class Treeview {
     }
 
     this._element.classList.add(CLASS_NAME_MENU_OPEN)
+    setAriaExpanded(this._element, true)
 
-    const childElement = this._element?.querySelector(SELECTOR_TREEVIEW_MENU) as HTMLElement | undefined
+    const childElement = this._element.querySelector(SELECTOR_TREEVIEW_MENU) as HTMLElement | undefined
     if (childElement) {
       slideDown(childElement, this._config.animationSpeed)
     }
 
-    this._element.dispatchEvent(event)
+    setTimeout(() => {
+      if (this._element.classList.contains(CLASS_NAME_MENU_OPEN)) {
+        dispatchCustomEvent(this._element, EVENT_EXPANDED)
+      }
+    }, this._config.animationSpeed)
   }
 
   close(): void {
-    const event = new Event(EVENT_COLLAPSED)
+    if (dispatchCustomEvent(this._element, EVENT_COLLAPSE, { cancelable: true }).defaultPrevented) {
+      return
+    }
 
     this._element.classList.remove(CLASS_NAME_MENU_OPEN)
+    setAriaExpanded(this._element, false)
 
-    const childElement = this._element?.querySelector(SELECTOR_TREEVIEW_MENU) as HTMLElement | undefined
+    const childElement = this._element.querySelector(SELECTOR_TREEVIEW_MENU) as HTMLElement | undefined
     if (childElement) {
       slideUp(childElement, this._config.animationSpeed)
     }
 
-    this._element.dispatchEvent(event)
+    setTimeout(() => {
+      if (!this._element.classList.contains(CLASS_NAME_MENU_OPEN)) {
+        dispatchCustomEvent(this._element, EVENT_COLLAPSED)
+      }
+    }, this._config.animationSpeed)
   }
 
   toggle(): void {
@@ -109,8 +153,50 @@ class Treeview {
  * ------------------------------------------------------------------------
  * Data Api implementation
  * ------------------------------------------------------------------------
+ * Clicks are handled by one delegated listener on `document`, so nav items
+ * added after load (dynamic menus, Turbo Frames) work without
+ * re-initialisation. Initial state (pre-opened menus, ARIA stamping) is
+ * applied per page load below.
  */
 
+document.addEventListener('click', event => {
+  const target = event.target
+
+  if (!(target instanceof Element)) {
+    return
+  }
+
+  const toggleRoot = target.closest(SELECTOR_DATA_TOGGLE) as HTMLElement | null
+
+  if (!toggleRoot) {
+    return
+  }
+
+  const targetItem = target.closest(SELECTOR_NAV_ITEM) as HTMLElement | null
+  const targetLink = target.closest(SELECTOR_NAV_LINK)
+
+  // Avoid creating Treeview instances on non menu elements
+  if (!targetItem?.querySelector(SELECTOR_TREEVIEW_MENU)) {
+    return
+  }
+
+  if (target.getAttribute('href') === '#' || targetLink?.getAttribute('href') === '#') {
+    event.preventDefault()
+  }
+
+  // Read config from data attributes on the treeview root, falling back to
+  // Default. The config of the first interaction sticks to the instance.
+  const accordionAttr = toggleRoot.dataset.accordion
+  const animationSpeedAttr = toggleRoot.dataset.animationSpeed
+
+  const config: Config = {
+    accordion: accordionAttr === undefined ? Default.accordion : accordionAttr === 'true',
+    animationSpeed: animationSpeedAttr === undefined ? Default.animationSpeed : Number(animationSpeedAttr)
+  }
+
+  Treeview.getOrCreateInstance(targetItem, config).toggle()
+})
+
 onDOMContentLoaded(() => {
   const openMenuItems = document.querySelectorAll(`${SELECTOR_NAV_ITEM}.${CLASS_NAME_MENU_OPEN}`)
 
@@ -124,41 +210,15 @@ onDOMContentLoaded(() => {
     }
   })
 
-  const button = document.querySelectorAll(SELECTOR_DATA_TOGGLE)
-
-  button.forEach(btn => {
-    btn.addEventListener('click', event => {
-      const target = event.target as HTMLElement
-      const targetItem = target.closest(SELECTOR_NAV_ITEM) as HTMLElement | undefined
-      const targetLink = target.closest(SELECTOR_NAV_LINK) as HTMLAnchorElement | undefined
-      const targetTreeviewMenu = targetItem?.querySelector(SELECTOR_TREEVIEW_MENU) as HTMLElement | undefined
-      const lteToggleElement = event.currentTarget as HTMLElement
-
-      // Avoid creating Treeview instances on non menu elements
-      if (!targetTreeviewMenu) {
-        return
-      }
-
-      if (target?.getAttribute('href') === '#' || targetLink?.getAttribute('href') === '#') {
-        event.preventDefault()
-      }
-
-      if (targetItem) {
-        // Read data attributes
-        const accordionAttr = lteToggleElement.dataset.accordion
-        const animationSpeedAttr = lteToggleElement.dataset.animationSpeed
-
-        // Build config from data attributes, fallback to Default
-        const config: Config = {
-          accordion: accordionAttr === undefined ? Default.accordion : accordionAttr === 'true',
-          animationSpeed: animationSpeedAttr === undefined ? Default.animationSpeed : Number(animationSpeedAttr)
-        }
-
-        const data = new Treeview(targetItem, config)
-        data.toggle()
+  // Stamp the initial ARIA state on every submenu toggle so assistive tech
+  // knows the items are expandable before any interaction.
+  document.querySelectorAll(SELECTOR_DATA_TOGGLE).forEach(root => {
+    root.querySelectorAll(SELECTOR_NAV_ITEM).forEach(item => {
+      if (item.querySelector(`:scope > ${SELECTOR_TREEVIEW_MENU}`)) {
+        setAriaExpanded(item, item.classList.contains(CLASS_NAME_MENU_OPEN))
       }
     })
   })
 })
 
-export default Treeview
+export default Treeview