Fix/cli/dev portal/context selector/clear external (#2360)

* fix(cli): adds contextClearEvent when clearing context outside ctx-selector

* docs: changeset

Author: eikeland

.changeset/small-fishes-destroy.md

@@ -0,0 +1,8 @@
+---
+"@equinor/fusion-framework-cli": patch
+---
+
+Enhanced ContextSelector component in the CLI package:
+- Implemented responsive context clearing mechanism
+- Improved handling of context selection and clearing events
+- Optimized component rendering with useMemo and useCallback hooks

packages/cli/package.json

@@ -76,7 +76,7 @@
         "@equinor/fusion-framework-react-components-bookmark": "workspace:^",
         "@equinor/fusion-framework-react-module-bookmark": "workspace:^",
         "@equinor/fusion-query": "workspace:^",
-        "@equinor/fusion-react-context-selector": "^0.6.3",
+        "@equinor/fusion-react-context-selector": "^0.6.6",
         "@equinor/fusion-react-progress-indicator": "^0.3.0",
         "@equinor/fusion-react-side-sheet": "1.3.3",
         "@equinor/fusion-react-styles": "^0.6.0",

packages/cli/src/bin/dev-portal/ContextSelector/ContextSelector.tsx

@@ -1,9 +1,10 @@
-import { useCallback } from 'react';
+import { useCallback, useEffect, useMemo } from 'react';
 import {
     ContextProvider,
     ContextSearch,
     ContextSearchProps,
     ContextSelectEvent,
+    ContextClearEvent,
 } from '@equinor/fusion-react-context-selector';
 import { useContextResolver } from './useContextResolver';
 
@@ -38,6 +39,16 @@ export const ContextSelector = (props: ContextSearchProps): JSX.Element | null =
         [provider],
     );
 
+    /**
+     * Clears context when ctx has been cleared outside the selector.
+     */
+    const clearEvent = useMemo(() => new ContextClearEvent({ date: Date.now() }), []);
+    useEffect(() => {
+        if (!selectedContextItem) {
+            document.dispatchEvent(clearEvent);
+        }
+    }, [clearEvent, selectedContextItem]);
+
     if (!resolver) return null;
 
     return (