@hashrytech/quick-components-kit 0.19.14 → 0.19.15

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @hashrytech/quick-components-kit
 
+## 0.19.15
+
+### Patch Changes
+
+- add: click outside function
+
 ## 0.19.14
 
 ### Patch Changes

package/dist/functions/click-outside.d.ts

@@ -0,0 +1,22 @@
+export type ClickOutsideEvent = MouseEvent | TouchEvent | PointerEvent;
+export interface ClickOutsideOptions {
+    /**
+     * Function to call when clicking outside
+     */
+    callback: (event: ClickOutsideEvent) => void;
+    /**
+     * Array of element IDs to ignore
+     */
+    ignoreIds?: string[];
+    /**
+     * Whether the action is enabled
+     */
+    enabled?: boolean;
+}
+/**
+ * Triggers callback when clicking outside the element.
+ */
+export declare function clickOutside(node: HTMLElement, options: ClickOutsideOptions): {
+    update(options: ClickOutsideOptions): void;
+    destroy(): void;
+};

package/dist/functions/click-outside.js

@@ -0,0 +1,38 @@
+/**
+ * Triggers callback when clicking outside the element.
+ */
+export function clickOutside(node, options) {
+    let { callback, ignoreIds = [], enabled = true } = options;
+    const handleClick = (event) => {
+        if (!enabled)
+            return;
+        const target = event.target;
+        if (!target)
+            return;
+        // Click inside the node → ignore
+        if (node.contains(target))
+            return;
+        // Click is on an ignored element or one of its parents → ignore
+        if (ignoreIds.length > 0) {
+            let element = target;
+            while (element) {
+                if (element.id && ignoreIds.includes(element.id)) {
+                    return;
+                }
+                element = element.parentElement;
+            }
+        }
+        // Click is outside and not on ignored element
+        callback(event);
+    };
+    // Attach listener
+    document.addEventListener('click', handleClick, true);
+    return {
+        update(newOptions) {
+            ({ callback, ignoreIds = [], enabled = true } = newOptions);
+        },
+        destroy() {
+            document.removeEventListener('click', handleClick, true);
+        }
+    };
+}

package/dist/index.d.ts

@@ -25,6 +25,7 @@ export * from './modules/crypto.js';
 export * from './modules/problem-details.js';
 export * from './functions/object-to-form-data.js';
 export * from './functions/compare-objects.js';
+export * from './functions/click-outside.js';
 export * from './ui/headers/header-1/index.js';
 export * from './ui/footers/footer-1/index.js';
 export * from './ui/banners/banner-1/index.js';

package/dist/index.js

@@ -1,4 +1,3 @@
-// Reexport your entry components here
 // lib/index.js
 export * from './components/icon/index.js';
 export * from './components/text-input/index.js';
@@ -15,18 +14,23 @@ export * from './components/checkbox/index.js';
 export * from './components/tab-navigation/index.js';
 export * from './components/portal/index.js';
 export * from './components/table/index.js';
+// Actions
 export * from './actions/disable-scroll.js';
 export * from './actions/on-keydown.js';
 export * from './actions/lock-scroll.js';
 export * from './actions/scroll-to.js';
 export * from './actions/stop-interaction.js';
 export * from './actions/portal.js';
+// Modules
 export * from './modules/fetch-client.js';
 export * from './modules/api-proxy.js';
 export * from './modules/crypto.js';
 export * from './modules/problem-details.js';
+// Functions
 export * from './functions/object-to-form-data.js';
 export * from './functions/compare-objects.js';
+export * from './functions/click-outside.js';
+// UI Components
 export * from './ui/headers/header-1/index.js';
 export * from './ui/footers/footer-1/index.js';
 export * from './ui/banners/banner-1/index.js';

package/package.json

@@ -5,7 +5,7 @@
     "type": "git",
     "url": "git+https://github.com/hashrytech/quick-components-kit.git"
   },
-  "version": "0.19.14",
+  "version": "0.19.15",
   "license": "MIT",
   "author": "Hashry Tech",
   "files": [