chore: release v2.4.1

Author: PruthviPraj00

CHANGELOG.md

@@ -2,6 +2,25 @@
 
 All notable changes to this project will be documented in this file.
 
+
+## [2.4.1] - [26-September-2025]
+
+## Added
+
+* **Dropdown**: `--mega-menu:{boolean}` ensures the Mega Menu remains fully visible on small screens without getting clipped.
+* **Advanced Select**: Added support for [Option disabled state](https://flyonui.com/docs/advanced-forms/advanced-select/#option-disabled) [FeatureReq #117].
+* **Tooltip**: Reintroduced `--interaction` for [Popover interaction](https://flyonui.com/docs/overlays/popover/#interaction) [Issue #117].
+
+## Fixes and Improvements
+
+* **Dropdown**:
+  * Fixed issue where the input element in the dropdown couldn't receive focus or allow typing. [Issue #118]
+  * Resolved placement issue. [Issue #114]
+  * Fixed non-functioning `OnEnter` behavior.
+* **Overlay**: Fixed issue with `data-overlay-keyboard="false"`. [Issue #116]
+* **Combo Box**: Fixed keyboard interaction for `Arrow`, `Home`, and `End` keys.
+
+
 ## [2.4.0] - [06-August-2025]
 
 ## Added

README.md

@@ -36,6 +36,7 @@ Created by [ThemeSelection](https://themeselection.com), with a commitment to em
 - [Getting Started 🏁](#getting-started-)
   - [Installation via NPM](#installation-via-npm)
   - [RTL (Right-to-Left) Language Support](#rtl-right-to-left-language-support)
+- [Star History 🌟](#star-history-)
 - [Available Components 🧩](#available-components-)
   - [Component Examples](#component-examples)
 - [Community 🤝](#community-)
@@ -224,7 +225,7 @@ To use FlyonUI, ensure that you have [Node.js](https://nodejs.org/en/) and [Tail
    @source "./node_modules/flyonui/dist/accordion.js";
    ```
 
-3. For enabling interactive components such as accordion, dropdown,    modal etc... , include FlyonUI's JavaScript in your HTML file, just before the closing `</body>` tag:
+3. For enabling interactive components such as accordion, dropdown, modal etc... , include FlyonUI's JavaScript in your HTML file, just before the closing `</body>` tag:
 
    ```html
    <script src="../node_modules/flyonui/flyonui.js"></script>

flyonui.d.ts

@@ -383,7 +383,6 @@ export declare class HSComboBox extends HSBasePlugin<IComboBoxOptions> implement
 	private appendItemsToWrapper;
 	private resultItems;
 	private destroyOutputPlaceholder;
-	private getPreparedItems;
 	private setHighlighted;
 	private setupAccessibility;
 	private onEnter;
@@ -1221,6 +1220,7 @@ export declare class HSTooltip extends HSBasePlugin<{}> implements ITooltip {
 	readonly eventMode: string;
 	private readonly preventFloatingUI;
 	private readonly placement;
+	private readonly interaction;
 	private readonly strategy;
 	private readonly scope;
 	cleanupAutoUpdate: (() => void) | null;

flyonui.js

@@ -1,6 +1,6 @@
 {
   "name": "flyonui",
-  "version": "2.4.0",
+  "version": "2.4.1",
   "type": "module",
   "description": "The easiest, free and open-source Tailwind CSS component library with semantic classes.",
   "author": "ThemeSelection",
@@ -131,4 +131,4 @@
   "dependencies": {
     "@floating-ui/dom": "^1.7.1"
   }
-}
+}

package.json

@@ -1,5 +1,5 @@
 /*
- * @version: 3.2.2
+ * @version: 3.2.3
  * @author: Preline Labs Ltd.
  * @license: Licensed under MIT and Preline UI Fair Use License (https://preline.co/docs/license.html)
  * Copyright 2024 Preline Labs Ltd.

src/js/helpers/apexcharts/index.ts

@@ -1,5 +1,5 @@
 /*
- * @version: 3.2.2
+ * @version: 3.2.3
  * @author: Preline Labs Ltd.
  * @license: Licensed under MIT and Preline UI Fair Use License (https://preline.co/docs/license.html)
  * Copyright 2024 Preline Labs Ltd.

src/js/helpers/clipboard/index.ts

@@ -1,5 +1,5 @@
 /*
- * @version: 3.2.2
+ * @version: 3.2.3
  * @author: Preline Labs Ltd.
  * @license: Licensed under MIT and Preline UI Fair Use License (https://preline.co/docs/license.html)
  * Copyright 2024 Preline Labs Ltd.

src/js/index.ts

@@ -5,6 +5,20 @@ class HSAccessibilityObserver {
   private currentlyOpenedComponents: IAccessibilityComponent[] = []
   private activeComponent: IAccessibilityComponent | null = null
 
+  private readonly allowedKeybindings = new Set([
+    'Escape',
+    'Enter',
+    ' ',
+    'Space',
+    'ArrowDown',
+    'ArrowUp',
+    'ArrowLeft',
+    'ArrowRight',
+    'Tab',
+    'Home',
+    'End'
+  ])
+
   constructor() {
     this.initGlobalListeners()
   }
@@ -15,6 +29,25 @@ class HSAccessibilityObserver {
     document.addEventListener('focusin', evt => this.handleGlobalFocusin(evt))
   }
 
+  private isAllowedKeybinding(evt: KeyboardEvent): boolean {
+    if (this.allowedKeybindings.has(evt.key)) {
+      return true
+    }
+
+    if (
+      evt.key.length === 1 &&
+      /^[a-zA-Z]$/.test(evt.key) &&
+      !evt.metaKey &&
+      !evt.ctrlKey &&
+      !evt.altKey &&
+      !evt.shiftKey
+    ) {
+      return true
+    }
+
+    return false
+  }
+
   private getActiveComponent(el: HTMLElement) {
     if (!el) return null
 
@@ -57,6 +90,10 @@ class HSAccessibilityObserver {
 
     if (!this.activeComponent) return
 
+    if (!this.isAllowedKeybinding(evt)) {
+      return
+    }
+
     switch (evt.key) {
       case 'Escape':
         if (!this.activeComponent.isOpened) {
@@ -106,14 +143,12 @@ class HSAccessibilityObserver {
           evt.stopPropagation()
         }
         break
-      case 'Tab':
+      case 'Tab': {
         if (!this.activeComponent.handlers.onTab) break
-
         const handler = evt.shiftKey ? this.activeComponent.handlers.onShiftTab : this.activeComponent.handlers.onTab
-
         if (handler) handler()
-
         break
+      }
       case 'Home':
         if (this.activeComponent.handlers.onHome) {
           this.activeComponent.handlers.onHome()
@@ -129,6 +164,9 @@ class HSAccessibilityObserver {
         }
         break
       default:
+        if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable) {
+          return
+        }
         if (this.activeComponent.handlers.onFirstLetter && evt.key.length === 1 && /^[a-zA-Z]$/.test(evt.key)) {
           this.activeComponent.handlers.onFirstLetter(evt.key)
           evt.preventDefault()
@@ -194,6 +232,18 @@ class HSAccessibilityObserver {
     this.components = this.components.filter(comp => comp !== component)
     this.currentlyOpenedComponents = this.currentlyOpenedComponents.filter(comp => comp !== component)
   }
+
+  public addAllowedKeybinding(key: string): void {
+    this.allowedKeybindings.add(key)
+  }
+
+  public removeAllowedKeybinding(key: string): void {
+    this.allowedKeybindings.delete(key)
+  }
+
+  public getAllowedKeybindings(): string[] {
+    return Array.from(this.allowedKeybindings)
+  }
 }
 
 export default HSAccessibilityObserver

src/js/plugins/accessibility-manager/index.ts

@@ -30,4 +30,7 @@ export interface HSAccessibilityObserver {
     selector?: string,
     context?: HTMLElement
   ): IAccessibilityComponent
+  addAllowedKeybinding(key: string): void
+  removeAllowedKeybinding(key: string): void
+  getAllowedKeybindings(): string[]
 }