@linzjs/step-ag-grid 30.1.0 → 30.2.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "30.1.0",
+  "version": "30.2.0",
   "keywords": [
     "aggrid",
     "ag-grid",

package/src/components/gridPopoverEdit/{GridPopoverEditDropDown.ts → GridPopoverEditDropDown.tsx}

@@ -2,14 +2,21 @@ import clsx from 'clsx';
 
 import { GenericCellEditorProps, GridCell } from '../GridCell';
 import { GridFormDropDown, GridFormDropDownProps } from '../gridForm/GridFormDropDown';
+import { GridIcon } from '../GridIcon';
 import { GenericCellColDef } from '../gridRender/GridRenderGenericCell';
 import { ColDefT, GridBaseRow } from '../types';
 
 export const GridPopoverEditDropDown = <TData extends GridBaseRow, TValue = any, TOptionValue = any>(
   colDef: GenericCellColDef<TData, TValue>,
   props: GenericCellEditorProps<GridFormDropDownProps<TData, TOptionValue>>,
-): ColDefT<TData, TValue> =>
-  GridCell<TData, TValue, GridFormDropDownProps<TData, TOptionValue>>(colDef, {
+): ColDefT<TData, TValue> => {
+  colDef.cellRendererParams = {
+    rightHoverElement: (
+      <GridIcon icon={'ic_arrow_drop_down'} title={''} className={'GridCell-editableIcon GridCell-dropDownIcon'} />
+    ),
+    ...colDef.cellRendererParams,
+  };
+  return GridCell<TData, TValue, GridFormDropDownProps<TData, TOptionValue>>(colDef, {
     editor: GridFormDropDown,
     ...props,
     editorParams: {
@@ -24,3 +31,4 @@ export const GridPopoverEditDropDown = <TData extends GridBaseRow, TValue = any,
       ),
     },
   });
+};

package/src/contexts/GridContextProvider.tsx

@@ -41,9 +41,20 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
   const enableMultilineBulkEditRef = useRef(false);
   const idsBeforeUpdate = useRef<TData['id'][]>([]);
   const prePopupFocusedCell = useRef<CellPosition>();
-  const [externallySelectedItemsAreInSync, setExternallySelectedItemsAreInSync] = useState(false);
+  const [externallySelectedItemsAreInSync, _setExternallySelectedItemsAreInSync] = useState(false);
   const externalFilters = useRef<GridFilterExternal<TData>[]>([]);
 
+  // waitForExternallySelectedItemsToBeInSync can't use the state as it won't be updated during function execution
+  const externallySelectedItemsAreInSyncRef = useRef(false);
+
+  const setExternallySelectedItemsAreInSync = useCallback(
+    (cond: boolean) => {
+      _setExternallySelectedItemsAreInSync(cond);
+      externallySelectedItemsAreInSyncRef.current = cond;
+    },
+    [_setExternallySelectedItemsAreInSync],
+  );
+
   const setQuickFilter = useCallback(
     (filter: string) => {
       // If we don't clear the focused cell focus switches back to grid when typing in the quick filter input
@@ -539,12 +550,6 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
     }
   }, [gridApi]);
 
-  // waitForExternallySelectedItemsToBeInSync can't use the state as it won't be updated during function execution
-  const externallySelectedItemsAreInSyncRef = useRef(false);
-  useEffect(() => {
-    externallySelectedItemsAreInSyncRef.current = externallySelectedItemsAreInSync;
-  }, [externallySelectedItemsAreInSync]);
-
   const waitForExternallySelectedItemsToBeInSync = useCallback(async () => {
     if (!hasExternallySelectedItemsRef.current) {
       externallySelectedItemsAreInSyncRef.current = true;
@@ -613,7 +618,7 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
         startCellEditingInProgressRef.current = false;
       }
     },
-    [anyUpdating, gridApi, prePopupOps, waitForExternallySelectedItemsToBeInSync],
+    [anyUpdating, gridApi, prePopupOps, setExternallySelectedItemsAreInSync, waitForExternallySelectedItemsToBeInSync],
   );
 
   const bulkEditingCompleteCallbackRef = useRef<() => Promise<void> | void>();

package/src/styles/GridTheme.scss

@@ -190,6 +190,18 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
     align-items: center;
   }
 
+  .ag-cell span.GridCell-dropDownIcon {
+    fill: lui.$charcoal;
+    max-width: 26px;
+    width: 26px;
+    visibility: hidden;
+  }
+
+  .ag-cell.ag-cell-inline-editing span.GridCell-dropDownIcon {
+    max-width: 24px;
+    width: 24px;
+  }
+
   .ag-cell .GridCell-editableIcon {
     fill: lui.$silver;
     visibility: hidden;