chore: update dependencies (#615)

* fix grid

* update stuff

* Prettified Code!

* fix

* aaaaah

* Prettified Code!

* update filter

---------

Co-authored-by: Gustav-Eikaas <[email protected]>

Author: Gustav-Eikaas

packages/filter/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/workspace-filter",
-  "version": "4.0.2",
+  "version": "4.0.3",
   "type": "module",
   "sideEffects": false,
   "license": "MIT",

packages/filter/src/lib/components/toggleHideFilterPopover/ToggleHideFilterPopover.tsx

@@ -3,6 +3,7 @@ import { tokens } from '@equinor/eds-tokens';
 import { useState, useRef } from 'react';
 import { ReactSortable } from 'react-sortablejs';
 import { StyledButton, StyledItemWrapper, StyledPopoverList } from './toggleHideFilterPopover.styles';
+import styled from 'styled-components';
 
 interface ShowHideFilterButtonProps {
   allFilters: FilterType[];
@@ -61,7 +62,7 @@ export const ToggleHideFilterPopover = ({ allFilters, setFilterOrder }: ShowHide
           <Popover.Header>
             <Popover.Title>Filter types</Popover.Title>
           </Popover.Header>
-          <Popover.Content style={{ maxHeight: '60vh', overflowY: 'auto', overflowX: 'hidden' }}>
+          <R style={{ maxHeight: '60vh', overflowY: 'auto', overflowX: 'hidden' }}>
             <StyledPopoverList>
               <ReactSortable
                 animation={200}
@@ -87,9 +88,17 @@ export const ToggleHideFilterPopover = ({ allFilters, setFilterOrder }: ShowHide
                 ))}
               </ReactSortable>
             </StyledPopoverList>
-          </Popover.Content>
+          </R>
         </Popover>
       )}
     </>
   );
 };
+
+const R = styled(Popover.Content)`
+  & *:first-child {
+    padding-top: 0px;
+    padding-bottom: 0px;
+  }
+  padding: 0px;
+`;

packages/filter/src/lib/components/toggleHideFilterPopover/toggleHideFilterPopover.styles.ts

@@ -11,7 +11,7 @@ export const StyledItemWrapper = styled.div`
   display: grid;
   grid-template-columns: auto 1fr auto;
 
-  align-items: center;
+  align-items: normal;
   width: 100%;
   height: 32px;
   min-width: 200px;

packages/workspace-fusion/package.json

@@ -115,15 +115,13 @@
     "@equinor/workspace-react": "workspace:^",
     "@tanstack/react-query": "^5.32.0",
     "re-resizable": "^6.9.16",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
     "react-error-boundary": "^4.0.13",
-    "vite-plugin-environment": "^1.1.3"
+    "vite-plugin-environment": "^1.1.3",
+    "react": ">= 18",
+    "react-dom": ">= 18"
   },
   "peerDependencies": {
-    "react-dom": ">= 16.8.0",
-    "react-is": ">= 16.8.0",
-    "styled-components": "^5.3.6"
+    "styled-components": ">= 5"
   },
   "devDependencies": {
     "@types/jest": "29.5.12",

packages/workspace-fusion/src/modules/grid/components/GridOptionsPopover.tsx

@@ -55,7 +55,7 @@ export const GridOptionPopover = ({ anchor, excelExport, filterState }: GridOpti
             </StyledPopoverHeaderLine>
           </Popover.Header>
           <Popover.Content style={{ overflow: 'hidden' }}>
-            <ButtContainer>
+            <ButtonContainer>
               {isError && (
                 <DumpsterFireDialog
                   text={
@@ -65,14 +65,14 @@ export const GridOptionPopover = ({ anchor, excelExport, filterState }: GridOpti
                   }
                 />
               )}
-              <Button
+              <ButtonButton
                 disabled={excelExport == undefined}
-                style={{ width: '130px' }}
+                style={{ width: '130px', padding: '0px' }}
                 onClick={!isPending ? handleExportToExcel : undefined}
               >
                 {isPending ? <Progress.Dots color={'neutral'} /> : 'Export to Excel'}
-              </Button>
-            </ButtContainer>
+              </ButtonButton>
+            </ButtonContainer>
           </Popover.Content>
         </Popover>,
         anchor
@@ -88,7 +88,14 @@ const StyledPopoverHeaderLine = styled.div`
   align-items: center;
 `;
 
-const ButtContainer = styled.div`
+const ButtonButton = styled(Button)`
+  & *:first-child {
+    padding-top: 0px;
+    padding-bottom: 0px;
+  }
+  padding: 0px;
+`;
+const ButtonContainer = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;

packages/workspace-fusion/src/modules/grid/components/GridWrapper.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { GridApi, GridOptions, ServerGrid } from '@equinor/workspace-ag-grid';
 import { useFilterContext } from '@equinor/workspace-filter';
 import { tokens } from '@equinor/eds-tokens';
@@ -28,6 +28,7 @@ export const GridWrapper = <
   getIdentifier,
 }: GridWrapperProps<TData, TContext, TFilter>) => {
   const ref = useRef(null);
+  const [gridApi, setGridApi] = useState<GridApi | null>(null);
 
   const { selectItem, selection } = useWorkspace();
   const { filterState } = useFilterContext();
@@ -43,7 +44,7 @@ export const GridWrapper = <
      *  There is no real consequence to doing it this way
      */
     filterStateCopy.current = filterState;
-    config.gridOptions && config.gridOptions.api?.onFilterChanged();
+    gridApi?.onFilterChanged();
   }, [filterState]);
 
   const [_, height] = useResizeObserver(ref);
@@ -75,6 +76,9 @@ export const GridWrapper = <
       ref={ref}
     >
       <ServerGrid<TData>
+        onGridReady={(event) => {
+          setGridApi(event.api);
+        }}
         getRows={async (params) => {
           await config.getRows(params, filterStateCopy.current as TFilter);
           handleSelectionEvent(selection, params.api);