Add clickoutside action

packages/components/back-to-top/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @288-toolkit/back-to-top
 
+## 3.0.3
+
+### Patch Changes
+
+- Updated dependencies
+- Updated dependencies
+  - @288-toolkit/ui@5.2.0
+
 ## 3.0.2
 
 ### Patch Changes

packages/components/back-to-top/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@288-toolkit/back-to-top",
-	"version": "3.0.2",
+	"version": "3.0.3",
 	"author": "DeuxHuitHuit",
 	"license": "MIT",
 	"type": "module",

packages/components/pagination/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @288-toolkit/pagination
 
+## 3.0.13
+
+### Patch Changes
+
+- Updated dependencies
+- Updated dependencies
+  - @288-toolkit/ui@5.2.0
+  - @288-toolkit/forms@4.1.1
+
 ## 3.0.12
 
 ### Patch Changes

packages/components/pagination/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@288-toolkit/pagination",
-	"version": "3.0.12",
+	"version": "3.0.13",
 	"author": "DeuxHuitHuit",
 	"license": "MIT",
 	"type": "module",

packages/forms/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @288-toolkit/forms
 
+## 4.1.1
+
+### Patch Changes
+
+- Add clickoutside action
+
 ## 4.1.0
 
 ### Minor Changes

packages/forms/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@288-toolkit/forms",
-	"version": "4.1.0",
+	"version": "4.1.1",
 	"author": "DeuxHuitHuit",
 	"license": "MIT",
 	"type": "module",

packages/ui/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @288-toolkit/ui
 
+## 5.2.0
+
+### Minor Changes
+
+- Add clickOutside action
+- Add clickoutside action
+
 ## 5.1.0
 
 ### Minor Changes

packages/ui/README.md

@@ -110,13 +110,25 @@ const fontSizeFromInitials: (initials: string, fontSizes: readonly string[]) =>
 
 ## `portal`
 
-Renders an element in a different part of the DOM. Accepts a css selector or an `HTMLElement` as the
-target.
+Renders the element in a different part of the DOM. Accepts a css selector or an `HTMLElement` as
+the target.
 
 Based on https://github.com/romkor/svelte-portal/tree/master
 
 ```svelte
- <div use:portal={'css selector'}>
+<div use:portal={'css selector'}></div>
+```
+
+## `clickOutside`
+
+Run a callback when a click outside of the element occurs.
+
+```svelte
+<div
+	use:clickOutside={() => {
+		console.log('clicked outside!');
+	}}
+></div>
 ```
 
 ## `scrollIntoView`

packages/ui/dist/clickOutside.d.ts

@@ -0,0 +1,3 @@
+export declare const clickOutside: (node: HTMLElement, callback: (event: PointerEvent) => void) => {
+    destroy: any;
+};

packages/ui/dist/clickOutside.js

@@ -0,0 +1,13 @@
+import { clickUseCapture } from '@288-toolkit/device/window';
+export const clickOutside = (node, callback) => {
+    const handleClick = (event) => {
+        if (node.contains(event.target)) {
+            return;
+        }
+        callback(event);
+    };
+    const destroy = clickUseCapture.subscribe(handleClick);
+    return {
+        destroy
+    };
+};

packages/ui/dist/index.d.ts

@@ -1,6 +1,7 @@
 export * from './autofocus.js';
 export * from './autofocusAfterTick.js';
 export * from './autofocusWithDelay.js';
+export * from './clickOutside.js';
 export * from './focalPointToObjectPosition.js';
 export * from './focusableSelector.js';
 export * from './imageSizes.js';

packages/ui/dist/index.js

@@ -1,6 +1,7 @@
 export * from './autofocus.js';
 export * from './autofocusAfterTick.js';
 export * from './autofocusWithDelay.js';
+export * from './clickOutside.js';
 export * from './focalPointToObjectPosition.js';
 export * from './focusableSelector.js';
 export * from './imageSizes.js';

packages/ui/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@288-toolkit/ui",
-	"version": "5.1.0",
+	"version": "5.2.0",
 	"author": "DeuxHuitHuit",
 	"license": "MIT",
 	"type": "module",

packages/ui/src/clickOutside.ts

@@ -0,0 +1,16 @@
+import { clickUseCapture } from '@288-toolkit/device/window';
+
+export const clickOutside = (node: HTMLElement, callback: (event: PointerEvent) => void) => {
+	const handleClick = (event: PointerEvent) => {
+		if (node.contains(event.target as HTMLElement)) {
+			return;
+		}
+		callback(event);
+	};
+
+	const destroy = clickUseCapture.subscribe(handleClick);
+
+	return {
+		destroy
+	};
+};

packages/ui/src/index.ts

@@ -1,6 +1,7 @@
 export * from './autofocus.js';
 export * from './autofocusAfterTick.js';
 export * from './autofocusWithDelay.js';
+export * from './clickOutside.js';
 export * from './focalPointToObjectPosition.js';
 export * from './focusableSelector.js';
 export * from './imageSizes.js';