fix(notifications): more visible * 4

Author: tenphi

src/components/overlays/NewNotifications/Dialog/NotificationsDialogContext.tsx

@@ -0,0 +1,27 @@
+import { createContext, ReactNode, useContext } from 'react';
+
+export interface NotificationsDialogContextValue {
+  insideNotificationsDialog: boolean;
+}
+
+export const NotificationsDialogContext =
+  createContext<NotificationsDialogContextValue | null>(null);
+
+export function NotificationsDialogProvider({
+  children,
+}: {
+  children: ReactNode;
+}) {
+  return (
+    <NotificationsDialogContext.Provider
+      value={{ insideNotificationsDialog: true }}
+    >
+      {children}
+    </NotificationsDialogContext.Provider>
+  );
+}
+
+export function useNotificationsDialogContext() {
+  const context = useContext(NotificationsDialogContext);
+  return context?.insideNotificationsDialog ?? false;
+}

src/components/overlays/NewNotifications/Dialog/NotificationsDialogTrigger.tsx

@@ -14,6 +14,8 @@ import {
 import { useNotificationsObserver } from '../hooks';
 import { CubeNotifyApiPropsWithID } from '../types';
 
+import { NotificationsDialogProvider } from './NotificationsDialogContext';
+
 export type NotificationsDialogTriggerProps = Omit<
   CubeDialogTriggerProps,
   'type'
@@ -56,7 +58,9 @@ export function NotificationsDialog(props: NotificationsDialogProps) {
       </VisuallyHidden>
 
       <StyledDialogContent>
-        <ClearSlots>{children}</ClearSlots>
+        <NotificationsDialogProvider>
+          <ClearSlots>{children}</ClearSlots>
+        </NotificationsDialogProvider>
       </StyledDialogContent>
     </StyledDialog>
   );

src/components/overlays/NewNotifications/NotificationView/NotificationView.tsx

@@ -1,11 +1,11 @@
-import { ForwardedRef, forwardRef, useContext } from 'react';
+import { ForwardedRef, forwardRef } from 'react';
 import { useFocusRing, useHover } from 'react-aria';
 
 import { useEvent, useTimer } from '../../../../_internal';
 import { tasty } from '../../../../tasty';
 import { ClearSlots, mergeProps } from '../../../../utils/react';
 import { useId } from '../../../../utils/react/useId';
-import { DialogContext } from '../../Dialog/context';
+import { useNotificationsDialogContext } from '../Dialog/NotificationsDialogContext';
 
 import { NotificationCloseButton } from './NotificationCloseButton';
 import { NotificationDescription } from './NotificationDescription';
@@ -76,11 +76,8 @@ export const NotificationView = forwardRef(function NotificationView(
   const labelID = useId();
   const descriptionID = useId();
 
-  // Detect if we're inside a dialog
-  const dialogContext = useContext(DialogContext);
-  const insideDialog = dialogContext !== null && dialogContext !== undefined;
-
-  console.log('! insideDialog', insideDialog);
+  // Detect if we're inside a NotificationsDialog specifically
+  const insideNotificationsDialog = useNotificationsDialogContext();
 
   const onCloseEvent = useEvent(() => {
     onClose?.();
@@ -117,7 +114,7 @@ export const NotificationView = forwardRef(function NotificationView(
           mods={{
             focused: isFocusVisible,
             'is-dismissible': isDismissible,
-            'inside-dialog': insideDialog,
+            'inside-dialog': insideNotificationsDialog,
           }}
         >
           <NotificationIcon icon={icon} type={type} />