@linzjs/step-ag-grid 30.4.4 → 31.2.0

package/src/components/gridHook/useGridCopy.ts

@@ -219,7 +219,17 @@ export const useGridCopy = <TData extends GridBaseRow>({
         void navigator.clipboard.writeText(result).catch((err) => console.error('Failed to copy: ', err));
       }
     },
-    [getCellValue, ranges, copyType],
+    [
+      getCellValue,
+      ranges,
+      copyType,
+      rangeStartRef,
+      hasSelectedMoreThanOneCellRef,
+      rangeEndRef,
+      showToast,
+      getColDef,
+      getSelectedRowIds,
+    ],
   );
 
   const onCopyEvent = useCallback(
@@ -240,7 +250,7 @@ export const useGridCopy = <TData extends GridBaseRow>({
 
       onCopy();
     },
-    [onCopy],
+    [onCopy, rangeStartRef, rangeEndRef, hasSelectedMoreThanOneCellRef],
   );
 
   const { cellContextMenu: rangeSelectContextMenu, contextMenuComponent: rangeSelectContextMenuComponent } =
@@ -255,7 +265,7 @@ export const useGridCopy = <TData extends GridBaseRow>({
         ? rangeSelectContextMenu(event)
         : cellContextMenu(event);
     },
-    [cellContextMenu, rangeSelectContextMenu],
+    [cellContextMenu, rangeSelectContextMenu, rangeStartRef, hasSelectedMoreThanOneCellRef],
   );
 
   return {

package/src/components/gridHook/useGridRangeSelection.ts

@@ -1,7 +1,7 @@
 import { CellMouseDownEvent, CellMouseOverEvent, IRowNode } from 'ag-grid-community';
 import { MutableRefObject, RefObject, useCallback, useEffect, useRef, useState } from 'react';
-import { useInterval } from 'usehooks-ts';
 
+import { useInterval } from '../../utils/useInterval';
 import { GridBaseRow } from '../types';
 
 export interface CellLocation {
@@ -79,7 +79,7 @@ export const useGridRangeSelection = <TData extends GridBaseRow>({
     );
 
     return { selectedColIds, selectedNodes };
-  }, []);
+  }, [gridDivRef, rangeSortedNodesRef, rangeStartRef, rangeEndRef]);
 
   const redrawSelectedRanges = useCallback(() => {
     const gridElement = gridDivRef.current!;
@@ -106,7 +106,7 @@ export const useGridRangeSelection = <TData extends GridBaseRow>({
         }
       });
     });
-  }, []);
+  }, [ranges, gridDivRef]);
 
   const updateRangeSelectionCellClasses = useCallback(
     (justRefresh?: boolean) => {
@@ -158,7 +158,7 @@ export const useGridRangeSelection = <TData extends GridBaseRow>({
 
       redrawSelectedRanges();
     },
-    [ranges, redrawSelectedRanges],
+    [redrawSelectedRanges, rangeStartRef, rangeEndRef, gridDivRef, hasSelectedMoreThanOneCellRef, rangeSortedNodesRef],
   );
 
   // Handle updates after scroll / grid refresh
@@ -178,18 +178,24 @@ export const useGridRangeSelection = <TData extends GridBaseRow>({
     rangeEndRef.current = null;
 
     updateRangeSelectionCellClasses();
-  }, [updateRangeSelectionCellClasses]);
+  }, [updateRangeSelectionCellClasses, hasSelectedMoreThanOneCellRef, rangeStartRef, rangeEndRef]);
 
   const mouseDownRef = useRef<[number, number]>([0, 0]);
-  const trackMouseDown = useCallback((e: MouseEvent) => {
-    mouseDownRef.current = [e.screenX, e.screenY];
-  }, []);
+  const trackMouseDown = useCallback(
+    (e: MouseEvent) => {
+      mouseDownRef.current = [e.screenX, e.screenY];
+    },
+    [mouseDownRef],
+  );
 
-  const trackMouseUp = useCallback((e: MouseEvent) => {
-    if (rangeEndRef.current) {
-      rangeEndRef.current.clickLocation = [e.screenX, e.screenY];
-    }
-  }, []);
+  const trackMouseUp = useCallback(
+    (e: MouseEvent) => {
+      if (rangeEndRef.current) {
+        rangeEndRef.current.clickLocation = [e.screenX, e.screenY];
+      }
+    },
+    [rangeEndRef],
+  );
 
   useEffect(() => {
     document.addEventListener('mousedown', trackMouseDown, { capture: true });
@@ -198,7 +204,7 @@ export const useGridRangeSelection = <TData extends GridBaseRow>({
       document.removeEventListener('mousemove', trackMouseDown, { capture: true });
       document.removeEventListener('mouseup', trackMouseUp, { capture: true });
     };
-  }, []);
+  }, [trackMouseDown, trackMouseUp]);
 
   const onCellMouseOver = useCallback(
     (e: CellMouseOverEvent, mouseDown?: boolean) => {
@@ -238,7 +244,14 @@ export const useGridRangeSelection = <TData extends GridBaseRow>({
 
       updateRangeSelectionCellClasses();
     },
-    [enableRangeSelection, updateRangeSelectionCellClasses],
+    [
+      enableRangeSelection,
+      updateRangeSelectionCellClasses,
+      hasSelectedMoreThanOneCellRef,
+      rangeEndRef,
+      rangeSortedNodesRef,
+      rangeStartRef,
+    ],
   );
 
   const onCellMouseDown = useCallback(
@@ -249,7 +262,7 @@ export const useGridRangeSelection = <TData extends GridBaseRow>({
       }
       onCellMouseOver(e as unknown as CellMouseOverEvent, true);
     },
-    [onCellMouseOver],
+    [onCellMouseOver, clearRangeSelection],
   );
 
   return { clearRangeSelection, ranges, onCellMouseDown, onCellMouseOver };

package/src/components/index.ts

@@ -4,6 +4,7 @@ export * from './GridCell';
 export * from './GridCellFiller';
 export * from './GridCellMultiEditor';
 export * from './GridCellMultiSelectClassRules';
+export * from './gridDragUtil';
 export * from './gridFilter';
 export * from './gridForm';
 export * from './gridHook';

package/src/components/types.ts

@@ -8,8 +8,12 @@ export interface GridBaseRow {
 }
 
 export interface GridOnRowDragEndProps<TData extends GridBaseRow> {
+  /** The row the user physically grabbed by its drag handle. */
   movedRow: TData;
+  /** All rows being moved, ordered by display index. Single-element array when dragging an unselected row. */
+  movedRows: TData[];
   targetRow: TData;
+  /** -1 = dropped above target, 1 = dropped below target. */
   direction: -1 | 1;
 }
 

package/src/contexts/GridContextProvider.tsx

@@ -122,7 +122,7 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
         // this is the only way to get out of the loop
         throw 'expected exception - exit_loop';
       });
-    } catch (ex) {
+    } catch {
       // ignore
     }
     return id;
@@ -312,7 +312,7 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
               const colId = col.colId;
               // We need to make sure we aren't currently editing a cell otherwise tests will fail
               // as they will start to edit the cell before this stuff has a chance to run
-              colId &&
+              if (colId) {
                 delay(() => {
                   if (
                     !gridApi.isDestroyed() &&
@@ -326,6 +326,7 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
                     gridApi.setFocusedCell(rowIndex, agGridSelectRowColId);
                   }
                 }, 100);
+              }
             }
           }
         }
@@ -342,7 +343,9 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
         if (flash) {
           delay(() => {
             try {
-              !gridApi.isDestroyed() && gridApi.flashCells({ rowNodes });
+              if (!gridApi.isDestroyed()) {
+                gridApi.flashCells({ rowNodes });
+              }
             } catch {
               // ignore, flash cells sometimes throws errors as nodes have gone out of scope
             }
@@ -749,7 +752,9 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
             // }
 
             // This is needed to trigger postSortRowsHook
-            !gridApi.isDestroyed && gridApi.refreshClientSideRowModel();
+            if (!gridApi.isDestroyed) {
+              gridApi.refreshClientSideRowModel();
+            }
           }
 
           void (async () => {
@@ -782,7 +787,9 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
     () =>
       debounce((rowNodes?: IRowNode[]) => {
         try {
-          gridApi && gridApi.redrawRows(rowNodes ? { rowNodes } : undefined);
+          if (gridApi) {
+            gridApi.redrawRows(rowNodes ? { rowNodes } : undefined);
+          }
         } catch (ex) {
           console.error(ex);
         }
@@ -812,7 +819,9 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
           const postHash = hasFocusedCell && getDisplayedRowsHash();
           // Ag-grid has a bug where if a focused cell comes into view after a filter the filter loses focus
           // So the focus is cleared to prevent this
-          preHash !== postHash && gridApi.clearFocusedCell();
+          if (preHash !== postHash) {
+            gridApi.clearFocusedCell();
+          }
         }
       }, 200),
     [gridApi],
@@ -864,7 +873,9 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
     const visibleColumnsContainsAFlex = newVisibleColumns.some(isFlexColumn);
     if (!visibleColumnsContainsAFlex) {
       const fillerColumn = getColumns(isGridCellFiller)[0];
-      fillerColumn && newVisibleColumns.push(fillerColumn);
+      if (fillerColumn) {
+        newVisibleColumns.push(fillerColumn);
+      }
     }
     gridApi.setColumnsVisible(compact(newVisibleColumns.map(getColId)), true);
 

package/src/lui/ActionButton.scss

@@ -1,4 +1,4 @@
-@use "../../node_modules/@linzjs/lui/dist/scss/Core" as lui;
+@use '../../node_modules/@linzjs/lui/dist/scss/Core' as lui;
 
 .ActionButton {
   display: flex;

package/src/lui/ActionButton.tsx

@@ -50,7 +50,11 @@ export const ActionButton = ({
 
   useEffect(() => {
     if (inProgress == lastInProgress) return;
-    inProgress ? setLocalInProgress(true) : setLocalInProgressDeferred(false, minimumInProgressTimeMs);
+    if (inProgress) {
+      setLocalInProgress(true);
+    } else {
+      setLocalInProgressDeferred(false, minimumInProgressTimeMs);
+    }
   }, [inProgress, lastInProgress, setLocalInProgress, setLocalInProgressDeferred]);
 
   const buttonText = (

package/src/lui/FormError.scss

@@ -1,4 +1,4 @@
-@use "../../node_modules/@linzjs/lui/dist/scss/Core" as lui;
+@use '../../node_modules/@linzjs/lui/dist/scss/Core' as lui;
 
 .FormError {
   display: flex;

package/src/lui/TextAreaInput.tsx

@@ -45,7 +45,7 @@ export const TextAreaInput = (props: LuiTextAreaInputProps) => {
                 e.currentTarget.focus();
                 e.currentTarget.selectionStart = e.currentTarget.value.length;
               }
-              props.onMouseEnter && props.onMouseEnter(e);
+              props.onMouseEnter?.(e);
             }}
             data-allowtabtosave={props.allowTabToSave}
           >

package/src/lui/TextInputFormatted.scss

@@ -1,13 +1,13 @@
-@use "../../node_modules/@linzjs/lui/dist/scss/Core" as lui;
-
-.LuiTextInput.GridLuiTextInput {
-  margin-bottom: 0;
-}
-
-.LuiTextInput-formatted {
-  position: absolute;
-  right: 14px;
-  top: 0;
-  line-height: 48px;
-  color: lui.$fuscous;
-}
+@use '../../node_modules/@linzjs/lui/dist/scss/Core' as lui;
+
+.LuiTextInput.GridLuiTextInput {
+  margin-bottom: 0;
+}
+
+.LuiTextInput-formatted {
+  position: absolute;
+  right: 14px;
+  top: 0;
+  line-height: 48px;
+  color: lui.$fuscous;
+}

package/src/lui/TextInputFormatted.tsx

@@ -36,7 +36,7 @@ export const TextInputFormatted = (props: LuiTextInputProps): ReactElement => {
           className={'LuiTextInput-input'}
           onMouseEnter={(e) => {
             e.currentTarget.focus();
-            props.onMouseEnter && props.onMouseEnter(e);
+            props.onMouseEnter?.(e);
           }}
           data-allowtabtosave={props.allowTabToSave}
         />

package/src/react-menu3/README.md

@@ -1,67 +1,66 @@
-# React-Menu
-
-> This is a fork of @szhsin/react-menu. v3.2.0
-
-> An accessible and keyboard-friendly React menu library.
-
-**[Live examples and docs](https://szhsin.github.io/react-menu/)**
-
-## Features
-
-- React menu components for easy and fast web development.
-- Unlimited levels of submenu.
-- Supports dropdown or context menu.
-- Supports radio and checkbox menu items.
-- Flexible menu positioning.
-- Comprehensive keyboard interactions.
-- Unstyled components and easy [customisation](https://szhsin.github.io/react-menu/#styling).
-- [Optimal level support](https://github.com/reactwg/react-18/discussions/70) (level 3) of **React 18** concurrent rendering.
-- Works in major browsers without polyfills.
-- [WAI-ARIA Authoring Practices](https://www.w3.org/WAI/ARIA/apg/patterns/menu/) compliant.
-
-## Install
-
-with npm
-
-```bash
-npm install @szhsin/react-menu
-```
-
-or with Yarn
-
-```bash
-yarn add @szhsin/react-menu
-```
-
-## Usage
-
-```jsx
-import { Menu, MenuItem, MenuButton, SubMenu } from "@szhsin/react-menu";
-
-export default function App() {
-  return (
-    <Menu menuButton={<MenuButton>Open menu</MenuButton>}>
-      <MenuItem>New File</MenuItem>
-      <MenuItem>Save</MenuItem>
-      <SubMenu label="Edit">
-        <MenuItem>Cut</MenuItem>
-        <MenuItem>Copy</MenuItem>
-        <MenuItem>Paste</MenuItem>
-      </SubMenu>
-      <MenuItem>Print...</MenuItem>
-    </Menu>
-  );
-}
-```
-
-**[Edit on CodeSandbox](https://codesandbox.io/s/react-menu-starter-3ez3c)**<br>  
-**[Visit more examples and docs](https://szhsin.github.io/react-menu/)**<br><br>
-[Migration from v2 to v3](https://github.com/szhsin/react-menu/wiki/Migration-from-v2-to-v3)<br>
-[Migration from v1 to v2](https://github.com/szhsin/react-menu/wiki/Migration-from-v1-to-v2)
-
-_Please note that React-Menu v3 requires React 16.14.0 or higher. If you are not able to upgrade React, you could install v2/v1 which requires React 16.8.0._
-
-## License
-
-[MIT](https://github.com/szhsin/react-menu/blob/master/LICENSE) Licensed.
-
+# React-Menu
+
+> This is a fork of @szhsin/react-menu. v3.2.0
+
+> An accessible and keyboard-friendly React menu library.
+
+**[Live examples and docs](https://szhsin.github.io/react-menu/)**
+
+## Features
+
+- React menu components for easy and fast web development.
+- Unlimited levels of submenu.
+- Supports dropdown or context menu.
+- Supports radio and checkbox menu items.
+- Flexible menu positioning.
+- Comprehensive keyboard interactions.
+- Unstyled components and easy [customisation](https://szhsin.github.io/react-menu/#styling).
+- [Optimal level support](https://github.com/reactwg/react-18/discussions/70) (level 3) of **React 18** concurrent rendering.
+- Works in major browsers without polyfills.
+- [WAI-ARIA Authoring Practices](https://www.w3.org/WAI/ARIA/apg/patterns/menu/) compliant.
+
+## Install
+
+with npm
+
+```bash
+npm install @szhsin/react-menu
+```
+
+or with Yarn
+
+```bash
+yarn add @szhsin/react-menu
+```
+
+## Usage
+
+```jsx
+import { Menu, MenuItem, MenuButton, SubMenu } from '@szhsin/react-menu';
+
+export default function App() {
+  return (
+    <Menu menuButton={<MenuButton>Open menu</MenuButton>}>
+      <MenuItem>New File</MenuItem>
+      <MenuItem>Save</MenuItem>
+      <SubMenu label="Edit">
+        <MenuItem>Cut</MenuItem>
+        <MenuItem>Copy</MenuItem>
+        <MenuItem>Paste</MenuItem>
+      </SubMenu>
+      <MenuItem>Print...</MenuItem>
+    </Menu>
+  );
+}
+```
+
+**[Edit on CodeSandbox](https://codesandbox.io/s/react-menu-starter-3ez3c)**<br>  
+**[Visit more examples and docs](https://szhsin.github.io/react-menu/)**<br><br>
+[Migration from v2 to v3](https://github.com/szhsin/react-menu/wiki/Migration-from-v2-to-v3)<br>
+[Migration from v1 to v2](https://github.com/szhsin/react-menu/wiki/Migration-from-v1-to-v2)
+
+_Please note that React-Menu v3 requires React 16.14.0 or higher. If you are not able to upgrade React, you could install v2/v1 which requires React 16.8.0._
+
+## License
+
+[MIT](https://github.com/szhsin/react-menu/blob/master/LICENSE) Licensed.

package/src/react-menu3/components/ControlledMenu.tsx

@@ -173,7 +173,7 @@ export const ControlledMenuFr = (
           if (isDown) {
             lastTabDownEl.current = activeElement;
           } else {
-            lastTabDownEl.current == activeElement && invokeSave(tabDirection);
+            if (lastTabDownEl.current == activeElement) invokeSave(tabDirection);
           }
         }
       }
@@ -191,7 +191,7 @@ export const ControlledMenuFr = (
               if (isDown) {
                 lastEnterDownEl.current = activeElement;
               } else {
-                lastEnterDownEl.current == activeElement && invokeSave(CloseReason.CLICK);
+                if (lastEnterDownEl.current == activeElement) invokeSave(CloseReason.CLICK);
               }
             }
           }

package/src/react-menu3/components/Menu.tsx

@@ -42,7 +42,7 @@ export function MenuFr(
   const handleClose = useCallback(
     (e: MenuCloseEvent) => {
       toggleMenu(false);
-      if (e.key) buttonRef.current && buttonRef.current.focus();
+      if (e.key) buttonRef?.current?.focus();
     },
     [toggleMenu],
   );

package/src/react-menu3/components/MenuItem.tsx

@@ -141,7 +141,7 @@ const MenuItemFr = ({
         e.preventDefault();
         e.stopPropagation();
         if (isAnchor) {
-          menuItemRef?.current && menuItemRef.current.click();
+          menuItemRef?.current.click();
         } else {
           handleClick(e);
         }

package/src/react-menu3/components/MenuList.tsx

@@ -175,7 +175,9 @@ export const MenuList = ({
       setOverflowData(undefined); // reset overflowData after closing
     }
 
-    endTransition && safeCall(endTransition);
+    if (endTransition) {
+      safeCall(endTransition);
+    }
   };
 
   const handlePosition = useCallback(
@@ -455,7 +457,11 @@ export const MenuList = ({
   let maxHeight: number | undefined;
   let overflowAmt: number | undefined;
   if (overflowData) {
-    setDownOverflow ? (overflowAmt = overflowData.overflowAmt) : (maxHeight = overflowData.height);
+    if (setDownOverflow) {
+      overflowAmt = overflowData.overflowAmt;
+    } else {
+      maxHeight = overflowData.height;
+    }
   }
 
   const listContext = useMemo(

package/src/react-menu3/components/SubMenu.tsx

@@ -194,7 +194,7 @@ export const SubMenuFr = ({
   const openMenu = (...args: any[]) => {
     stopTimer();
     setHover();
-    !isDisabled && _openMenu(...args);
+    if (!isDisabled) _openMenu(...args);
   };
 
   const setHover = () => !isHovering && !isDisabled && dispatch(HoverActionTypes.SET, menuItemRef?.current, 0);
@@ -226,7 +226,7 @@ export const SubMenuFr = ({
       // LEFT key is bubbled up from submenu items
       case Keys.LEFT:
         if (isOpen) {
-          menuItemRef?.current && menuItemRef.current.focus();
+          menuItemRef?.current.focus();
           toggleMenu(false);
           handled = true;
         }
@@ -251,7 +251,7 @@ export const SubMenuFr = ({
       case Keys.ENTER:
       case Keys.SPACE:
       case Keys.RIGHT:
-        openTrigger !== 'none' && openMenu(FocusPositions.FIRST);
+        if (openTrigger !== 'none') openMenu(FocusPositions.FIRST);
         break;
     }
   };
@@ -264,7 +264,7 @@ export const SubMenuFr = ({
     // Don't set focus when parent menu is closed, otherwise focus will be lost
     // and onBlur event will be fired with relatedTarget setting as null.
     if (isHovering && isParentOpen) {
-      menuItemRef?.current && menuItemRef.current.focus();
+      menuItemRef?.current?.focus();
     } else {
       toggleMenu(false);
     }
@@ -276,11 +276,11 @@ export const SubMenuFr = ({
 
   useImperativeHandle(instanceRef, () => ({
     openMenu: (...args) => {
-      isParentOpen && openMenu(...args);
+      if (isParentOpen) openMenu(...args);
     },
     closeMenu: () => {
       if (isOpen) {
-        menuItemRef?.current && menuItemRef.current.focus();
+        menuItemRef?.current?.focus();
         toggleMenu(false);
       }
     },

package/src/react-menu3/hooks/useBEM.ts

@@ -18,11 +18,12 @@ export const useBEM = ({ block, element, modifiers, className }: useBemProps) =>
     const blockElement = element ? `${block}__${element}` : block;
 
     let classString = blockElement;
-    modifiers &&
+    if (modifiers) {
       Object.keys(modifiers).forEach((name) => {
         const value = modifiers[name];
         if (value) classString += ` ${blockElement}--${value === true ? name : `${name}-${value}`}`;
       });
+    }
 
     let expandedClassName = typeof className === 'function' ? className(modifiers) : className;
     if (typeof expandedClassName === 'string') {

package/src/react-menu3/hooks/useItemState.ts

@@ -17,11 +17,11 @@ export const useItemState = (
   const timeoutId = useRef<ReturnType<typeof setTimeout>>(undefined);
 
   const setHover = () => {
-    !isHovering && !isDisabled && dispatch(HoverActionTypes.SET, menuItemRef?.current, 0);
+    if (!isHovering && !isDisabled) dispatch(HoverActionTypes.SET, menuItemRef?.current, 0);
   };
 
   const unsetHover = () => {
-    !isDisabled && dispatch(HoverActionTypes.UNSET, menuItemRef?.current, 0);
+    if (!isDisabled) dispatch(HoverActionTypes.UNSET, menuItemRef?.current, 0);
   };
 
   const onBlur = (e: FocusEvent) => {
@@ -48,7 +48,9 @@ export const useItemState = (
       timeoutId.current = undefined;
     }
 
-    !keepHover && unsetHover();
+    if (!keepHover) {
+      unsetHover();
+    }
   };
 
   useItemEffect(isDisabled, menuItemRef, updateItems);
@@ -57,7 +59,9 @@ export const useItemState = (
     // Don't set focus when parent menu is closed, otherwise focus will be lost
     // and onBlur event will be fired with relatedTarget setting as null.
     if (isHovering && isParentOpen) {
-      focusRef?.current && focusRef.current.focus();
+      if (focusRef?.current) {
+        focusRef.current.focus();
+      }
     }
   }, [focusRef, isHovering, isParentOpen]);
 

package/src/react-menu3/styles/_var.scss

@@ -1,4 +1,4 @@
-@use "sass:math";
+@use 'sass:math';
 
 $color: #212529;
 $color-dark: #cad1d8;

package/src/react-menu3/styles/core.scss

@@ -1,9 +1,9 @@
-@use "var";
-@use "mixins";
+@use 'var';
+@use 'mixins';
 
 .szh-menu {
-  @include mixins.reset-list ();
-  @include mixins.remove-focus ();
+  @include mixins.reset-list();
+  @include mixins.remove-focus();
   box-sizing: border-box;
   width: max-content;
   z-index: 100;
@@ -42,7 +42,7 @@
   }
 
   &__item {
-    @include mixins.remove-focus ();
+    @include mixins.remove-focus();
     cursor: pointer;
 
     &--hover {
@@ -65,7 +65,7 @@
   }
 
   &__radio-group {
-    @include mixins.reset-list ();
+    @include mixins.reset-list();
   }
 
   &__divider {