Merge pull request #364 from brainstormforce/staging

`v1.7.7`

Author: jaieds

README.md

@@ -14,7 +14,7 @@ Using Force UI as a dependency in package.json -
 
 ```json
 "dependencies": {
-  "@bsf/force-ui": "git+https://github.com/brainstormforce/force-ui#1.7.6"
+  "@bsf/force-ui": "git+https://github.com/brainstormforce/force-ui#1.7.7"
 }
 ```
 
@@ -28,7 +28,7 @@ npm install
 Or you can directly run the following command to install the package -
 
 ```bash
-npm i -S @bsf/force-ui@git+https://github.com/brainstormforce/force-ui.git#1.7.6
+npm i -S @bsf/force-ui@git+https://github.com/brainstormforce/force-ui.git#1.7.7
 ```
 
 <br />

changelog.txt

@@ -1,7 +1,9 @@
+Version 1.7.7 - 29th January, 2026
+- Fix: Organism - Dialog, Drawer: Resolved an issue where the component closed unexpectedly when `exitOnClickOutside` was enabled and a toaster was dismissed.
+
 Version 1.7.6 - 11th September, 2025
 - Improvements: Atom - Select - Improved search logic.
 
-
 Version 1.7.5 - 25th August, 2025
 - New: Template - UAE Dashboard
 - New: Template - UAE Widgets

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@bsf/force-ui",
-    "version": "1.7.6",
+    "version": "1.7.7",
     "description": "Library of components for the BSF project",
     "main": "./dist/force-ui.cjs.js",
     "module": "./dist/force-ui.es.js",

package.json

@@ -119,7 +119,14 @@ const Dialog = ( {
 	const dismiss = useDismiss( context, {
 		enabled: exitOnClickOutside || exitOnEsc,
 		escapeKey: exitOnEsc,
-		outsidePress: exitOnClickOutside,
+		outsidePress: ( event ) => {
+			if ( ! exitOnClickOutside ) {
+				return false;
+			}
+			const target = event?.target as HTMLElement;
+			const isToastElement = target?.closest( 'ul.fui-toast-container' );
+			return ! isToastElement;
+		},
 	} );
 	const role = useRole( context, { role: 'dialog' } );
 

src/components/dialog/dialog.tsx

@@ -10,7 +10,15 @@ import React, {
 	type ReactNode,
 } from 'react';
 import { callAll } from '@/utilities/functions';
-import { useFloating, useInteractions, useClick, useRole, useDismiss, type FloatingContext, type UseFloatingReturn } from '@floating-ui/react';
+import {
+	useFloating,
+	useInteractions,
+	useClick,
+	useRole,
+	useDismiss,
+	type FloatingContext,
+	type UseFloatingReturn,
+} from '@floating-ui/react';
 import DrawerPanel from './drawer-panel';
 import DrawerHeader from './drawer-header';
 import DrawerTitle from './drawer-title';
@@ -56,7 +64,9 @@ export interface DrawerContextDefault {
 	position: DrawerProps['position'];
 	drawerContainerRef: React.RefObject<HTMLDivElement>;
 	transitionDuration: { duration: number };
-	getFloatingProps: ( props?: React.HTMLProps<HTMLElement> ) => Record<string, unknown>;
+	getFloatingProps: (
+		props?: React.HTMLProps<HTMLElement>
+	) => Record<string, unknown>;
 	scrollLock: boolean;
 	context: FloatingContext;
 	className?: string;
@@ -120,18 +130,21 @@ const Drawer = ( {
 	const dismiss = useDismiss( context, {
 		enabled: exitOnEsc || exitOnClickOutside,
 		escapeKey: exitOnEsc,
-		outsidePress: exitOnClickOutside,
+		outsidePress: ( event ) => {
+			if ( ! exitOnClickOutside ) {
+				return false;
+			}
+			const target = event?.target as HTMLElement;
+			const isToastElement = target?.closest( 'ul.fui-toast-container' );
+			return ! isToastElement;
+		},
 	} );
 
 	const role = useRole( context, { role: 'dialog' } );
 
 	const click = useClick( context );
 
-	const { getFloatingProps } = useInteractions( [
-		dismiss,
-		role,
-		click,
-	] );
+	const { getFloatingProps } = useInteractions( [ dismiss, role, click ] );
 
 	const renderTrigger = useCallback( () => {
 		if ( isValidElement( trigger ) ) {

src/components/drawer/drawer.tsx

@@ -66,7 +66,7 @@ export const Toaster = ( {
 	return (
 		<ul
 			className={ cn(
-				'fixed flex flex-col list-none z-20 p-10 pointer-events-none [&>li]:pointer-events-auto gap-3',
+				'fui-toast-container fixed flex flex-col list-none z-20 p-10 pointer-events-none [&>li]:pointer-events-auto gap-3',
 				positionClassNames[ position ] ?? positionClassNames[ 'top-right' ],
 				className
 			) }
@@ -227,7 +227,9 @@ export const Toast = ( {
 									closeIconClassNames[ theme ] ??
 										closeIconClassNames.light
 								) }
-								onClick={ () => {
+								onClick={ ( event ) => {
+									event.preventDefault();
+									event.stopPropagation();
 									if ( typeof removeToast !== 'function' ) {
 										return;
 									}

src/components/toaster/toaster.tsx

@@ -1,3 +1,3 @@
 {
-	"force-ui": "1.7.6"
+	"force-ui": "1.7.7"
 }