Add core and integrate it into filters

Author: EdwardBrunton

packages/filter/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/workspace-filter",
-  "version": "4.0.5",
+  "version": "4.0.6",
   "type": "module",
   "sideEffects": false,
   "license": "MIT",
@@ -30,6 +30,7 @@
     "@equinor/eds-icons": "^0.18.0",
     "@equinor/eds-tokens": "^0.9.0",
     "@tanstack/react-query": "^5.32.0",
+    "@equinor/workspace-core": "workspace:^",
     "react-error-boundary": "^4.0.13",
     "react-sortablejs": "^6.1.4",
     "react-virtual": "^2.10.4",

packages/filter/src/lib/components/expandedFilterGroup/ExpandedFilterGroup.tsx

@@ -1,8 +1,8 @@
 import { Button, Icon, Search } from '@equinor/eds-core-react';
-import { useMemo, useState } from 'react';
+import { useMemo, useRef, useState } from 'react';
 import { FilterClearIcon } from '../../icons';
 import { FilterGroup, FilterValueType } from '../../types';
-
+import { useClickOutside } from '@equinor/workspace-core';
 import { Case, Switch } from '../../utils/Switch';
 import { StyledSearchButton, StyledFilterHeaderGroup, StyledTitle, StyledWrapper } from './expandedFilterGroup.styles';
 import { VirtualContainer } from '../virtualContainer/VirtualContainer';
@@ -21,6 +21,12 @@ export const ExpandedFilterGroup = ({ filterGroup, isFetching }: FilterGroupeCom
   const [filterSearchValue, setFilterSearchValue] = useState('');
   const [searchActive, setSearchActive] = useState(false);
 
+  const ref = useRef<HTMLDivElement>(null);
+  useClickOutside(ref, () => {
+    setSearchActive(false);
+    setFilterSearchValue('');
+  });
+
   function handleOnChange(event: React.ChangeEvent<HTMLInputElement>) {
     const { value } = event.target;
     setFilterSearchValue(value);
@@ -50,16 +56,12 @@ export const ExpandedFilterGroup = ({ filterGroup, isFetching }: FilterGroupeCom
   }
 
   return (
-    <StyledWrapper>
+    <StyledWrapper ref={ref}>
       <StyledFilterHeaderGroup isActive={hasAnyActiveFilters}>
         <Switch>
           <Case when={searchActive}>
             <Search
               autoFocus={searchActive}
-              onBlur={() => {
-                setSearchActive(false);
-                setFilterSearchValue('');
-              }}
               aria-label="in filter group"
               id="search-normal"
               placeholder="Search"

packages/power-bi/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/workspace-powerbi",
-  "version": "3.0.8",
+  "version": "3.0.9",
   "type": "module",
   "sideEffects": false,
   "license": "MIT",

packages/power-bi/src/lib/components/Header/Header.tsx

@@ -1,7 +1,7 @@
 import { Button, Icon, Search } from '@equinor/eds-core-react';
 import { useState } from 'react';
 import styled from 'styled-components';
-import useClickOutside from '@equinor/workspace-core';
+import { useClickOutside } from '@equinor/workspace-core';
 import { FilterClearIcon } from '../../icons';
 import { FilterController } from '../Filter/Filter';
 import { Case, Switch } from '../switch/Switch';

packages/power-bi/src/lib/hooks/useClickOutside.ts

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/workspace-fusion",
-  "version": "9.0.18",
+  "version": "9.0.19",
   "type": "module",
   "sideEffects": false,
   "license": "MIT",