admin-lte 4.0.1 → 4.0.4

package/src/ts/treeview.ts

@@ -42,6 +42,15 @@ 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
  * ====================================================
@@ -63,8 +72,13 @@ class Treeview {
       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,6 +88,7 @@ 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
     if (childElement) {
@@ -87,6 +102,7 @@ class Treeview {
     const event = new Event(EVENT_COLLAPSED)
 
     this._element.classList.remove(CLASS_NAME_MENU_OPEN)
+    setAriaExpanded(this._element, false)
 
     const childElement = this._element?.querySelector(SELECTOR_TREEVIEW_MENU) as HTMLElement | undefined
     if (childElement) {
@@ -124,6 +140,16 @@ onDOMContentLoaded(() => {
     }
   })
 
+  // 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))
+      }
+    })
+  })
+
   const button = document.querySelectorAll(SELECTOR_DATA_TOGGLE)
 
   button.forEach(btn => {

package/src/ts/util/index.ts

@@ -1,22 +1,80 @@
-const domContentLoadedCallbacks: Array<() => void> = []
+/**
+ * Lifecycle management
+ * ============================================================================
+ *
+ * Plugins register their initialisation through `onDOMContentLoaded`. Besides
+ * the initial page load, every registered callback is re-run on Hotwired Turbo
+ * navigations (`turbo:load`): Turbo Drive swaps the <body> without a full page
+ * reload, so without re-initialisation plugins such as PushMenu and TreeView
+ * stop working after the first in-app link click (#563, #5890).
+ *
+ * Re-running init would normally leak listeners, because callbacks also bind to
+ * `window`/`document`, which survive Turbo's <body> swap. To prevent that, each
+ * cycle has its own `AbortController`: callbacks should attach their
+ * window/document-level listeners with the signal from `getLifecycleSignal()`.
+ * The signal is aborted on `turbo:before-render`, tearing down the previous
+ * cycle's listeners before the callbacks run again. Listeners bound to elements
+ * inside <body> don't need the signal — Turbo discards the old <body>, so they
+ * are cleaned up automatically.
+ */
+
+const lifecycleCallbacks: Array<() => void> = []
+
+// Mutable state is held on an object so the lifecycle hooks below can update it
+// without reassigning top-level bindings.
+const lifecycleState = {
+  controller: new AbortController(),
+  hasInitialized: false
+}
+
+/**
+ * The AbortSignal for the current lifecycle. Pass it as the
+ * `{ signal }` option to window/document `addEventListener` calls made during
+ * initialisation so they are removed automatically on the next Turbo render.
+ */
+const getLifecycleSignal = (): AbortSignal => lifecycleState.controller.signal
+
+const runLifecycleCallbacks = (): void => {
+  if (lifecycleState.hasInitialized) {
+    return
+  }
+
+  lifecycleState.hasInitialized = true
+
+  for (const callback of lifecycleCallbacks) {
+    callback()
+  }
+}
 
 const onDOMContentLoaded = (callback: () => void): void => {
-  if (document.readyState === 'loading') {
-    // add listener on the first call when the document is in loading state
-    if (!domContentLoadedCallbacks.length) {
-      document.addEventListener('DOMContentLoaded', () => {
-        for (const callback of domContentLoadedCallbacks) {
-          callback()
-        }
-      })
-    }
-
-    domContentLoadedCallbacks.push(callback)
-  } else {
+  lifecycleCallbacks.push(callback)
+
+  // Late registration: the batch for the current cycle has already run (the
+  // script loaded after DOMContentLoaded, or a callback was registered after a
+  // Turbo visit), so run the newcomer immediately rather than stranding it
+  // until the next navigation. Preserves the original non-loading behaviour.
+  if (lifecycleState.hasInitialized) {
     callback()
   }
 }
 
+// Initial page load.
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', runLifecycleCallbacks, { once: true })
+} else {
+  runLifecycleCallbacks()
+}
+
+// Hotwired Turbo: drop the previous cycle's window/document listeners, then
+// re-run initialisation against the freshly rendered <body>.
+document.addEventListener('turbo:before-render', () => {
+  lifecycleState.controller.abort()
+  lifecycleState.controller = new AbortController()
+  lifecycleState.hasInitialized = false
+})
+
+document.addEventListener('turbo:load', runLifecycleCallbacks)
+
 /* ES2022 UTILITY FUNCTIONS */
 
 /**
@@ -46,10 +104,35 @@ const safePropertyAccess = (obj: Record<string, unknown>, property: string): unk
   }
 }
 
+/* SLIDE ANIMATION BOOKKEEPING
+ * Pending timers are tracked per element so that starting a new slide cancels
+ * the previous animation's steps: without this, rapidly toggling a treeview or
+ * card leaves a stale cleanup timer that strips height/transition mid-animation
+ * and desyncs the element's display state from its component's classes. */
+const slideTimers = new WeakMap<HTMLElement, number[]>()
+
+const cancelSlide = (target: HTMLElement): void => {
+  const timers = slideTimers.get(target) ?? []
+  for (const timer of timers) {
+    globalThis.clearTimeout(timer)
+  }
+
+  slideTimers.delete(target)
+}
+
+const clearSlideStyles = (target: HTMLElement): void => {
+  for (const property of ['height', 'padding-top', 'padding-bottom', 'margin-top', 'margin-bottom', 'overflow', 'transition-duration', 'transition-property']) {
+    target.style.removeProperty(property)
+  }
+}
+
 /* SLIDE UP */
 const slideUp = (target: HTMLElement, duration = 500) => {
+  cancelSlide(target)
+
   if (duration <= 1) {
     target.style.display = 'none'
+    clearSlideStyles(target)
     return
   }
 
@@ -59,7 +142,7 @@ const slideUp = (target: HTMLElement, duration = 500) => {
   target.style.height = `${target.offsetHeight}px`
   target.style.overflow = 'hidden'
 
-  globalThis.setTimeout(() => {
+  const stepTimer = globalThis.setTimeout(() => {
     target.style.height = '0'
     target.style.paddingTop = '0'
     target.style.paddingBottom = '0'
@@ -67,21 +150,22 @@ const slideUp = (target: HTMLElement, duration = 500) => {
     target.style.marginBottom = '0'
   }, 1)
 
-  globalThis.setTimeout(() => {
+  const cleanupTimer = globalThis.setTimeout(() => {
     target.style.display = 'none'
-    target.style.removeProperty('height')
-    target.style.removeProperty('padding-top')
-    target.style.removeProperty('padding-bottom')
-    target.style.removeProperty('margin-top')
-    target.style.removeProperty('margin-bottom')
-    target.style.removeProperty('overflow')
-    target.style.removeProperty('transition-duration')
-    target.style.removeProperty('transition-property')
+    clearSlideStyles(target)
+    slideTimers.delete(target)
   }, duration)
+
+  slideTimers.set(target, [stepTimer, cleanupTimer])
 }
 
 /* SLIDE DOWN */
 const slideDown = (target: HTMLElement, duration = 500) => {
+  cancelSlide(target)
+  // Drop inline styles a cancelled slideUp may have left behind (height: 0,
+  // overflow: hidden, …) before measuring, or the natural height reads as 0.
+  clearSlideStyles(target)
+
   target.style.removeProperty('display')
   let { display } = globalThis.getComputedStyle(target)
 
@@ -103,7 +187,7 @@ const slideDown = (target: HTMLElement, duration = 500) => {
   target.style.marginTop = '0'
   target.style.marginBottom = '0'
 
-  globalThis.setTimeout(() => {
+  const stepTimer = globalThis.setTimeout(() => {
     target.style.boxSizing = 'border-box'
     target.style.transitionProperty = 'height, margin, padding'
     target.style.transitionDuration = `${duration}ms`
@@ -114,12 +198,12 @@ const slideDown = (target: HTMLElement, duration = 500) => {
     target.style.removeProperty('margin-bottom')
   }, 1)
 
-  globalThis.setTimeout(() => {
-    target.style.removeProperty('height')
-    target.style.removeProperty('overflow')
-    target.style.removeProperty('transition-duration')
-    target.style.removeProperty('transition-property')
+  const cleanupTimer = globalThis.setTimeout(() => {
+    clearSlideStyles(target)
+    slideTimers.delete(target)
   }, duration)
+
+  slideTimers.set(target, [stepTimer, cleanupTimer])
 }
 
 /* TOGGLE */
@@ -134,6 +218,7 @@ const slideToggle = (target: HTMLElement, duration = 500) => {
 
 export {
   onDOMContentLoaded,
+  getLifecycleSignal,
   slideUp,
   slideDown,
   slideToggle,

package/.browserslistrc

@@ -1,17 +0,0 @@
-# https://github.com/browserslist/browserslist#readme
-# Updated for ES2022 compatibility
-
->= 0.5%
-last 2 major versions
-not dead
-Chrome >= 97
-Firefox >= 104
-Firefox ESR
-iOS >= 15.4
-Safari >= 15.4
-Edge >= 97
-not Explorer <= 11
-not ie 11
-not android 4.4.3
-not ios_saf < 15.4
-not kaios <= 2.5 # fix floating label issues in Firefox (see https://github.com/postcss/autoprefixer/issues/1533)

package/.prettierrc

@@ -1,6 +0,0 @@
-{
-  "semi": true,
-  "singleQuote": true,
-  "printWidth": 100,
-  "tabWidth": 2
-}

package/CODE_OF_CONDUCT.md

@@ -1,43 +0,0 @@
-# Contributor Covenant Code of Conduct
-
-## Our Pledge
-
-In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.
-
-## Our Standards
-
-Examples of behavior that contributes to creating a positive environment include:
-
-- Using welcoming and inclusive language
-- Being respectful of differing viewpoints and experiences
-- Gracefully accepting constructive criticism
-- Focusing on what is best for the community
-- Showing empathy towards other community members
-
-Examples of unacceptable behavior by participants include:
-
-- The use of sexualized language or imagery and unwelcome sexual attention or advances
-- Trolling, insulting/derogatory comments, and personal or political attacks
-- Public or private harassment
-- Publishing others' private information, such as a physical or electronic address, without explicit permission
-- Other conduct which could reasonably be considered inappropriate in a professional setting
-
-## Our Responsibilities
-
-Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
-
-Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
-
-## Scope
-
-This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
-
-## Enforcement
-
-Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at https://colorlib.com/wp/contact-us/. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
-
-Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
-
-## Attribution
-
-This Code of Conduct is adapted from the [Contributor Covenant](https://www.contributor-covenant.org/), version 1.4, available at <https://www.contributor-covenant.org/version/1/4/code-of-conduct/>

package/SECURITY.md

@@ -1,99 +0,0 @@
-# Security Policy
-
-## Reporting Security Issues
-
-If you discover a security vulnerability in AdminLTE, please report it by emailing the maintainers or opening a private security advisory on GitHub. We take security seriously and will respond promptly.
-
-## Supported Versions
-
-| Version | Supported          |
-| ------- | ------------------ |
-| 4.x     | :white_check_mark: |
-| 3.x     | :x:                |
-| < 3.0   | :x:                |
-
-## Security Best Practices
-
-AdminLTE is a frontend admin dashboard template. When deploying applications built with AdminLTE, follow these security best practices:
-
-### 1. Production Deployment
-
-- **Never expose `node_modules` directory** in production environments
-- **Remove demo/example files** (like `index2.html`, `index3.html`) from production builds
-- **Use a proper build process** that only includes necessary production assets
-- **Configure web server properly** to prevent directory traversal attacks
-
-### 2. Build Process
-
-When deploying to production:
-
-```bash
-# Build only production assets
-npm run production
-
-# Deploy only the dist/ directory contents you need
-# Typically: dist/js/adminlte.min.js and dist/css/adminlte.min.css
-```
-
-### 3. What NOT to Deploy
-
-Do not deploy these to production:
-- `node_modules/` directory
-- Example/demo HTML files (`index.html`, `index2.html`, `index3.html`, etc.)
-- Source files (`src/` directory)
-- Development configuration files
-- Documentation files
-
-## Known CVE Issues
-
-### CVE-2021-36471 (Disputed)
-
-**Status**: This CVE is **disputed** and does not represent a vulnerability in AdminLTE itself.
-
-**Issue**: CVE-2021-36471 claims AdminLTE 3.1.0 has a "Directory Traversal vulnerability" that allows remote attackers to view demo pages via `/admin/index2.html` and `/admin/index3.html`.
-
-**Clarification**:
-- The `index2.html` and `index3.html` files are **example/demo pages** intended for developer reference during development
-- This is **not a vulnerability in AdminLTE** - it is a **deployment misconfiguration** by website developers
-- The issue occurs when developers incorrectly deploy:
-  - Their entire `node_modules` folder publicly
-  - Demo/example files in production environments
-  - Without proper web server configuration
-
-**Resolution**:
-- AdminLTE 4.x has restructured the project architecture with clear separation between development demos and production assets
-- Follow the production deployment best practices above
-- Only deploy the compiled production assets from `dist/js/` and `dist/css/`
-- The original CVE researcher acknowledged this should be classified as low/info severity, not critical
-
-**For More Information**:
-- [GitHub Issue #4948](https://github.com/ColorlibHQ/AdminLTE/issues/4948)
-- [CVE Record](https://www.cve.org/CVERecord?id=CVE-2021-36471) (marked as disputed)
-
-## Secure Development
-
-### Content Security Policy (CSP)
-
-When implementing AdminLTE in your application, consider adding appropriate Content Security Policy headers to prevent XSS attacks.
-
-### Authentication & Authorization
-
-AdminLTE is a **UI template only** and does not include authentication or authorization. You must:
-- Implement proper authentication in your backend
-- Secure all API endpoints
-- Use HTTPS in production
-- Implement proper session management
-- Follow OWASP security guidelines
-
-### Dependencies
-
-- Keep AdminLTE and its dependencies up to date
-- Regularly run `npm audit` to check for vulnerabilities
-- Review security advisories for Bootstrap and other dependencies
-
-## Contact
-
-For security concerns, please contact the maintainers through:
-- GitHub Issues (for general questions)
-- GitHub Security Advisories (for sensitive security issues)
-- Project maintainer email (check package.json)