npm - @linzjs/step-ag-grid - Versions diffs - 23.0.0 → 24.0.0 - Mend

@linzjs/step-ag-grid 23.0.0 → 24.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (274) hide show

package/src/react-menu3/types.ts CHANGED Viewed

@@ -1,29 +1,29 @@
 //
 // base types
 // ----------------------------------------------------------------------
-import { ForwardedRef, MutableRefObject } from "react";
+import { ForwardedRef, MutableRefObject } from 'react';
-export type MenuState = "opening" | "open" | "closing" | "closed";
-export type MenuAlign = "start" | "center" | "end";
-export type MenuDirection = "left" | "right" | "top" | "bottom";
-export type MenuPosition = "auto" | "anchor" | "initial";
-export type MenuOverflow = "auto" | "visible" | "hidden";
-export type MenuReposition = "auto" | "initial";
-export type MenuViewScroll = "auto" | "close" | "initial";
-export type MenuItemTypeProp = "checkbox" | "radio";
-export type CloseReason = "click" | "cancel" | "blur" | "scroll";
+export type MenuState = 'opening' | 'open' | 'closing' | 'closed';
+export type MenuAlign = 'start' | 'center' | 'end';
+export type MenuDirection = 'left' | 'right' | 'top' | 'bottom';
+export type MenuPosition = 'auto' | 'anchor' | 'initial';
+export type MenuOverflow = 'auto' | 'visible' | 'hidden';
+export type MenuReposition = 'auto' | 'initial';
+export type MenuViewScroll = 'auto' | 'close' | 'initial';
+export type MenuItemTypeProp = 'checkbox' | 'radio';
+export type CloseReason = 'click' | 'cancel' | 'blur' | 'scroll';
 /**
  * - `'first'` focus the first item in the menu.
  * - `'last'` focus the last item in the menu.
  * - `number` focus item at the specific position (zero-based).
  */
-export type FocusPosition = "first" | "last" | number;
+export type FocusPosition = 'first' | 'last' | number;
 export type ClassNameProp<M = undefined> = string | ((modifiers: M) => string);
 export type RenderProp<M, R = React.ReactNode> = R | ((modifiers: M) => R);
-export interface BaseProps<M = undefined> extends Omit<React.HTMLAttributes<HTMLElement>, "className" | "children"> {
+export interface BaseProps<M = undefined> extends Omit<React.HTMLAttributes<HTMLElement>, 'className' | 'children'> {
   ref?: React.Ref<any>;
   /**
    * Can be a string or a function which receives a modifier object and returns a CSS `class` string.
@@ -31,7 +31,7 @@ export interface BaseProps<M = undefined> extends Omit<React.HTMLAttributes<HTML
   className?: ClassNameProp<M>;
 }
-export interface BasePropsWithChildren<M = undefined> extends Omit<React.HTMLAttributes<HTMLElement>, "className"> {
+export interface BasePropsWithChildren<M = undefined> extends Omit<React.HTMLAttributes<HTMLElement>, 'className'> {
   ref?: React.Ref<any>;
   /**
    * Can be a string or a function which receives a modifier object and returns a CSS `class` string.
@@ -157,7 +157,7 @@ export interface Hoverable {
 /**
  * Common props for `Menu`, `SubMenu` and `ControlledMenu`
  */
-interface BaseMenuProps extends Omit<BaseProps, "style"> {
+interface BaseMenuProps extends Omit<BaseProps, 'style'> {
   /**
    * Can be a string or a function which receives a modifier object and returns a CSS `class` string.
    */
@@ -310,7 +310,7 @@ export interface RootMenuProps extends BaseMenuProps, MenuStateOptions {
   /**
    * Properties of this object are spread to the root DOM element containing the menu.
    */
-  containerProps?: Omit<React.HTMLAttributes<HTMLElement>, "className">;
+  containerProps?: Omit<React.HTMLAttributes<HTMLElement>, 'className'>;
   /**
    * A ref object attached to a DOM element within which menu will be positioned.
    * If not provided, the nearest ancestor which has CSS `overflow` set to a value

package/src/react-menu3/utils/constants.ts CHANGED Viewed

@@ -1,15 +1,15 @@
-import { MenuState } from "../types";
+import { MenuState } from '../types';
-export const menuContainerClass = "szh-menu-container";
-export const menuClass = "szh-menu";
-export const menuButtonClass = "szh-menu-button";
-export const menuArrowClass = "arrow";
-export const menuItemClass = "item";
-export const menuDividerClass = "divider";
-export const menuHeaderClass = "header";
-export const menuGroupClass = "group";
-export const subMenuClass = "submenu";
-export const radioGroupClass = "radio-group";
+export const menuContainerClass = 'szh-menu-container';
+export const menuClass = 'szh-menu';
+export const menuButtonClass = 'szh-menu-button';
+export const menuArrowClass = 'arrow';
+export const menuItemClass = 'item';
+export const menuDividerClass = 'divider';
+export const menuHeaderClass = 'header';
+export const menuGroupClass = 'group';
+export const subMenuClass = 'submenu';
+export const radioGroupClass = 'radio-group';
 export interface RMEvent {
   value: any;
@@ -21,16 +21,16 @@ export interface RMEvent {
 }
 export const Keys = Object.freeze({
-  ENTER: "Enter",
-  TAB: "Tab",
-  ESC: "Escape",
-  SPACE: " ",
-  HOME: "Home",
-  END: "End",
-  LEFT: "ArrowLeft",
-  RIGHT: "ArrowRight",
-  UP: "ArrowUp",
-  DOWN: "ArrowDown",
+  ENTER: 'Enter',
+  TAB: 'Tab',
+  ESC: 'Escape',
+  SPACE: ' ',
+  HOME: 'Home',
+  END: 'End',
+  LEFT: 'ArrowLeft',
+  RIGHT: 'ArrowRight',
+  UP: 'ArrowUp',
+  DOWN: 'ArrowDown',
 });
 export const HoverActionTypes = Object.freeze({
@@ -45,22 +45,22 @@ export const HoverActionTypes = Object.freeze({
 });
 export const CloseReason = Object.freeze({
-  CLICK: "click",
-  CANCEL: "cancel",
-  BLUR: "blur",
-  SCROLL: "scroll",
-  TAB_FORWARD: "tab_forward",
-  TAB_BACKWARD: "tab_backward",
+  CLICK: 'click',
+  CANCEL: 'cancel',
+  BLUR: 'blur',
+  SCROLL: 'scroll',
+  TAB_FORWARD: 'tab_forward',
+  TAB_BACKWARD: 'tab_backward',
 });
 export const FocusPositions = Object.freeze({
-  FIRST: "first",
-  LAST: "last",
+  FIRST: 'first',
+  LAST: 'last',
 });
 export const MenuStateMap: Record<string, MenuState> = Object.freeze({
-  entering: "opening",
-  entered: "open",
-  exiting: "closing",
-  exited: "closed",
+  entering: 'opening',
+  entered: 'open',
+  exiting: 'closing',
+  exited: 'closed',
 });

package/src/react-menu3/utils/index.ts CHANGED Viewed

@@ -1,4 +1,3 @@
-export * from "./constants";
-export * from "./utils";
-export { withHovering } from "./withHovering";
+export * from './constants';
+export * from './utils';
+export { withHovering } from './withHovering';

package/src/react-menu3/utils/propTypes2.ts CHANGED Viewed

@@ -1,26 +1,26 @@
-import { bool, exact, func, number, object, oneOf, oneOfType, string } from "prop-types";
+import { bool, exact, func, number, object, oneOf, oneOfType, string } from 'prop-types';
 export const stylePropTypes = (name?: string) => ({
-  [name ? `${name}ClassName` : "className"]: oneOfType([string, func]),
+  [name ? `${name}ClassName` : 'className']: oneOfType([string, func]),
 });
-export const Direction = oneOf(["left", "right", "top", "bottom"]);
+export const Direction = oneOf(['left', 'right', 'top', 'bottom']);
 // Menu, SubMenu and ControlledMenu
 export const menuPropTypes = {
   className: string,
-  ...stylePropTypes("menu"),
-  ...stylePropTypes("arrow"),
+  ...stylePropTypes('menu'),
+  ...stylePropTypes('arrow'),
   menuStyle: object,
   arrowStyle: object,
   arrow: bool,
   setDownOverflow: bool,
   offsetX: number,
   offsetY: number,
-  align: oneOf(["start", "center", "end"]),
+  align: oneOf(['start', 'center', 'end']),
   direction: Direction,
-  position: oneOf(["auto", "anchor", "initial"]),
-  overflow: oneOf(["auto", "visible", "hidden"]),
+  position: oneOf(['auto', 'anchor', 'initial']),
+  overflow: oneOf(['auto', 'visible', 'hidden']),
 };
 // Menu and ControlledMenu
@@ -40,9 +40,9 @@ export const rootMenuPropTypes = {
   transitionTimeout: number,
   boundingBoxRef: object,
   boundingBoxPadding: string,
-  reposition: oneOf(["auto", "initial"]),
+  reposition: oneOf(['auto', 'initial']),
   repositionFlag: oneOfType([string, number]),
-  viewScroll: oneOf(["auto", "close", "initial"]),
+  viewScroll: oneOf(['auto', 'close', 'initial']),
   submenuOpenDelay: number,
   submenuCloseDelay: number,
   portal: oneOfType([

package/src/react-menu3/utils/utils.ts CHANGED Viewed

@@ -1,10 +1,10 @@
-import { findIndex } from "lodash-es";
-import { unstable_batchedUpdates } from "react-dom";
+import { findIndex } from 'lodash-es';
+import { unstable_batchedUpdates } from 'react-dom';
-import { MenuButtonProps } from "../components/MenuButton";
-import { MenuState, MenuStateOptions } from "../types";
+import { MenuButtonProps } from '../components/MenuButton';
+import { MenuState, MenuStateOptions } from '../types';
-export const isMenuOpen = (state?: MenuState) => !!state && state[0] === "o";
+export const isMenuOpen = (state?: MenuState) => !!state && state[0] === 'o';
 export const batchedUpdates = unstable_batchedUpdates || ((callback: () => any) => callback());
 export const values = Object.values || ((obj: { [x: string]: any }) => Object.keys(obj).map((key) => obj[key]));
 export const floatEqual = (a: number, b: number, diff = 0.0001) => Math.abs(a - b) < diff;
@@ -14,17 +14,17 @@ export type TransitionMap = {
   close?: boolean;
   item?: boolean;
 };
-export const getTransition = (transition: MenuStateOptions["transition"], name: keyof TransitionMap) =>
+export const getTransition = (transition: MenuStateOptions['transition'], name: keyof TransitionMap) =>
   transition === true || !!(transition && transition[name]);
 export function safeCall<T, R>(fn: (arg?: T) => R, arg?: T): R;
 export function safeCall<T, R>(fn: T, arg: R): T;
 export function safeCall<T, R>(fn: (arg?: T) => R, arg?: T): T | R {
-  return typeof fn === "function" ? fn(arg) : fn;
+  return typeof fn === 'function' ? fn(arg) : fn;
 }
-const internalKey = "_szhsinMenu";
-export const getName = (component: Record<string, any | undefined>) => component[internalKey];
+const internalKey = '_szhsinMenu';
+export const getName = (component: Record<string, any>) => component[internalKey];
 //export const defineName = <T extends any[]>(name: string, component: (...args: T) => ReactElement) =>
 //  Object.defineProperty(component, internalKey, { value: name });
@@ -38,7 +38,7 @@ export const mergeProps = (target: any, source: any) => {
     Object.keys(source).forEach((key) => {
       const targetProp = target[key];
       const sourceProp = source[key];
-      if (typeof sourceProp === "function" && targetProp) {
+      if (typeof sourceProp === 'function' && targetProp) {
         target[key] = (...arg: any[]) => {
           sourceProp(...arg);
           targetProp(...arg);
@@ -81,7 +81,7 @@ export const getScrollAncestor = (node: Node | null): Element | null => {
 export function commonProps(isDisabled?: boolean, isHovering?: boolean) {
   return {
-    "aria-disabled": isDisabled || undefined,
+    'aria-disabled': isDisabled || undefined,
     tabIndex: isHovering ? 0 : -1,
   };
 }
@@ -90,15 +90,15 @@ export const indexOfNode = (nodeList: NodeListOf<Node>, node: Node) => findIndex
 export const focusFirstInput = (container: any) => {
   // We can't use instanceof Element in portals, so I use querySelectorAll as a proxy here
-  if (!container || !("querySelectorAll" in container)) return false;
+  if (!container || !('querySelectorAll' in container)) return false;
   const inputs = container.querySelectorAll("input[type='text'],input:not([type]),textarea");
   const input = inputs[0];
   // Using focus as proxy for HTMLElement
-  if (!input || !("focus" in input)) return false;
+  if (!input || !('focus' in input)) return false;
   input.focus();
   // Text areas should start at end
   // this is a proxy for instanceof HTMLTextAreaElement
-  if (["textarea", "text"].includes(input.type)) {
+  if (['textarea', 'text'].includes(input.type)) {
     input.setSelectionRange(0, input.value.length);
   }
   return true;

package/src/react-menu3/utils/withHovering.tsx CHANGED Viewed

@@ -1,6 +1,6 @@
-import { MutableRefObject, PropsWithRef, ReactElement, forwardRef, memo, useContext, useRef } from "react";
+import { forwardRef, memo, MutableRefObject, PropsWithRef, ReactElement, useContext, useRef } from 'react';
-import { HoverItemContext } from "../contexts/HoverItemContext";
+import { HoverItemContext } from '../contexts/HoverItemContext';
 export interface withHoveringResultProps {
   isHovering?: boolean;
@@ -18,7 +18,7 @@ export const withHovering = <X extends Record<string, any>, T extends PropsWithR
     return (
       <>
-        {/* @ts-ignore Can't work out what the ref issue is here */}
+        {/* @ts-expect-error Can't work out what the ref issue is here */}
         <Component
           {...props}
           menuItemRef={menuItemRef}

package/src/stories/components/ActionButton.stories.tsx CHANGED Viewed

@@ -1,15 +1,14 @@
-import "@linzjs/lui/dist/scss/base.scss";
+import '@linzjs/lui/dist/scss/base.scss';
+import '@linzjs/lui/dist/fonts';
-import { Meta, StoryFn } from "@storybook/react";
-import { useCallback } from "react";
+import { Meta, StoryFn } from '@storybook/react';
+import { useCallback } from 'react';
-import "@linzjs/lui/dist/fonts";
-import { ActionButton } from "../../lui/ActionButton";
-import { wait } from "../../utils/util";
+import { ActionButton } from '../../lui/ActionButton';
+import { wait } from '../../utils/util';
 export default {
-  title: "Components / ActionButton",
+  title: 'Components / ActionButton',
   component: ActionButton,
   args: {},
 } as Meta<typeof ActionButton>;
@@ -20,35 +19,35 @@ const ActionButtonTemplate: StoryFn<typeof ActionButton> = () => {
   }, []);
   return (
     <>
-      <ActionButton icon={"ic_add"} name={"Add new row"} inProgressName={"Adding..."} onClick={performAction} />
+      <ActionButton icon={'ic_add'} name={'Add new row'} inProgressName={'Adding...'} onClick={performAction} />
       <br />
-      <ActionButton icon={"ic_add"} aria-label={"Add new row"} onClick={performAction} level={"primary"} />
+      <ActionButton icon={'ic_add'} aria-label={'Add new row'} onClick={performAction} level={'primary'} />
       <br />
       <ActionButton
-        icon={"ic_add"}
-        aria-label={"Add new row"}
+        icon={'ic_add'}
+        aria-label={'Add new row'}
         onClick={performAction}
-        level={"primary"}
-        className={"ActionButton-tight"}
+        level={'primary'}
+        className={'ActionButton-tight'}
       />
       <br />
       <ActionButton
-        icon={"ic_arrow_forward_right"}
-        name={"Continue"}
+        icon={'ic_arrow_forward_right'}
+        name={'Continue'}
         onClick={performAction}
-        iconPosition={"right"}
-        level={"secondary"}
-        className={"ActionButton-fill"}
+        iconPosition={'right'}
+        level={'secondary'}
+        className={'ActionButton-fill'}
         style={{ maxWidth: 160 }}
       />
       <br />
       <ActionButton
-        icon={"ic_arrow_forward_right"}
-        name={"Disabled"}
+        icon={'ic_arrow_forward_right'}
+        name={'Disabled'}
         onClick={performAction}
-        iconPosition={"right"}
-        level={"secondary"}
-        className={"ActionButton-fill"}
+        iconPosition={'right'}
+        level={'secondary'}
+        className={'ActionButton-fill'}
         style={{ maxWidth: 160 }}
         disabled={true}
       />

package/src/stories/grid/FormTest.tsx CHANGED Viewed

@@ -1,10 +1,9 @@
-import "./FormTest.scss";
+import './FormTest.scss';
-import { ReactElement, useCallback, useState } from "react";
+import { LuiAlertModal, LuiAlertModalButtons, LuiButton, LuiTextInput } from '@linzjs/lui';
+import { ReactElement, useCallback, useState } from 'react';
-import { LuiAlertModal, LuiAlertModalButtons, LuiButton, LuiTextInput } from "@linzjs/lui";
-import { CellEditorCommon, FormError, useGridPopoverContext, useGridPopoverHook, wait } from "../..";
+import { CellEditorCommon, FormError, useGridPopoverContext, useGridPopoverHook, wait } from '../..';
 export interface IFormTestRow {
   id: number;
@@ -18,17 +17,17 @@ export interface IFormTestRow {
 export const FormTest = (props: CellEditorCommon): ReactElement => {
   const { value } = useGridPopoverContext<IFormTestRow>();
-  const [v1, ...v2] = value.split(" ");
+  const [v1, ...v2] = value.split(' ');
   const [nameType, setNameType] = useState(v1);
-  const [numba, setNumba] = useState(v2.join(" "));
+  const [numba, setNumba] = useState(v2.join(' '));
   const save = useCallback(
     async (selectedRows: IFormTestRow[]): Promise<boolean> => {
       // eslint-disable-next-line no-console
-      console.log("onSave", selectedRows, nameType, numba);
+      console.log('onSave', selectedRows, nameType, numba);
-      selectedRows.forEach((row) => (row.name = [nameType, numba].join(" ")));
+      selectedRows.forEach((row) => (row.name = [nameType, numba].join(' ')));
       await wait(1000);
       // Close form
@@ -38,7 +37,7 @@ export const FormTest = (props: CellEditorCommon): ReactElement => {
   );
   const invalid = useCallback(() => {
-    if (numba.length < 3) return "Number should be at least 3 characters";
+    if (numba.length < 3) return 'Number should be at least 3 characters';
     return null;
   }, [numba.length]);
@@ -79,7 +78,7 @@ export const FormTest = (props: CellEditorCommon): ReactElement => {
               level="primary"
               onClick={() => {
                 setShowModal(false);
-                triggerSave().then();
+                void triggerSave();
               }}
               data-testid="WarningAlertWithButtons-ok"
             >
@@ -88,13 +87,13 @@ export const FormTest = (props: CellEditorCommon): ReactElement => {
           </LuiAlertModalButtons>
         </LuiAlertModal>
       )}
-      <div className={"Grid-popoverContainer"}>
+      <div className={'Grid-popoverContainer'}>
         <div className="FormTest">
-          <div className={"FormTest-textInput"}>
-            <LuiTextInput label={"Name type"} value={nameType} onChange={(e) => setNameType(e.target.value)} />
+          <div className={'FormTest-textInput'}>
+            <LuiTextInput label={'Name type'} value={nameType} onChange={(e) => setNameType(e.target.value)} />
           </div>
-          <div className={"FormTest-textInput"}>
-            <LuiTextInput label={"Number"} value={numba} onChange={(e) => setNumba(e.target.value)} />
+          <div className={'FormTest-textInput'}>
+            <LuiTextInput label={'Number'} value={numba} onChange={(e) => setNumba(e.target.value)} />
           </div>
           <div style={{ marginTop: 25 }}>
             <input

package/src/stories/grid/GridDragRow.stories.tsx CHANGED Viewed

@@ -1,11 +1,10 @@
-import "../../styles/GridTheme.scss";
-import "../../styles/index.scss";
-import "@linzjs/lui/dist/scss/base.scss";
+import '../../styles/GridTheme.scss';
+import '../../styles/index.scss';
+import '@linzjs/lui/dist/scss/base.scss';
+import '@linzjs/lui/dist/fonts';
-import { Meta, StoryFn } from "@storybook/react";
-import { useMemo, useState } from "react";
-import "@linzjs/lui/dist/fonts";
+import { Meta, StoryFn } from '@storybook/react';
+import { useMemo, useState } from 'react';
 import {
   ColDefT,
@@ -15,30 +14,30 @@ import {
   GridProps,
   GridUpdatingContextProvider,
   GridWrapper,
-} from "../..";
-import { waitForGridReady } from "../../utils/storybookTestUtil";
+} from '../..';
+import { waitForGridReady } from '../../utils/storybookTestUtil';
 export default {
-  title: "Components / Grids",
+  title: 'Components / Grids',
   component: Grid,
   args: {
     quickFilter: true,
-    quickFilterValue: "",
-    quickFilterPlaceholder: "Quick filter...",
+    quickFilterValue: '',
+    quickFilterPlaceholder: 'Quick filter...',
     selectable: false,
-    rowSelection: "single",
+    rowSelection: 'single',
   },
   // Storybook hangs otherwise
   parameters: {
     docs: {
       source: {
-        type: "code",
+        type: 'code',
       },
     },
   },
   decorators: [
     (Story) => (
-      <div style={{ maxWidth: 1024, height: 400, display: "flex", flexDirection: "column" }}>
+      <div style={{ maxWidth: 1024, height: 400, display: 'flex', flexDirection: 'column' }}>
         <GridUpdatingContextProvider>
           <GridContextProvider>
             <Story />
@@ -62,29 +61,29 @@ const GridDragRowTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
   const columnDefs: ColDefT<ITestRow>[] = useMemo(
     () => [
       GridCell({
-        field: "id",
-        headerName: "Id",
+        field: 'id',
+        headerName: 'Id',
         lockVisible: true,
       }),
-      GridCell<ITestRow, ITestRow["position"]>({
-        field: "position",
-        headerName: "Position",
+      GridCell<ITestRow, ITestRow['position']>({
+        field: 'position',
+        headerName: 'Position',
         cellRendererParams: {
-          warning: ({ value }) => value === "Tester" && "Testers are testing",
-          info: ({ value }) => value === "Developer" && "Developers are awesome",
+          warning: ({ value }) => value === 'Tester' && 'Testers are testing',
+          info: ({ value }) => value === 'Developer' && 'Developers are awesome',
         },
       }),
       GridCell({
-        field: "age",
-        headerName: "Age",
+        field: 'age',
+        headerName: 'Age',
       }),
       GridCell({
-        field: "height",
-        headerName: "Height",
+        field: 'height',
+        headerName: 'Height',
       }),
       GridCell({
-        field: "desc",
-        headerName: "Description",
+        field: 'desc',
+        headerName: 'Description',
         flex: 1,
       }),
     ],
@@ -92,16 +91,16 @@ const GridDragRowTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
   );
   const [rowData, setRowData] = useState([
-    { id: 1000, position: "Tester", age: 30, height: `6'4"`, desc: "Tests application", dd: "1" },
-    { id: 1001, position: "Developer", age: 12, height: `5'3"`, desc: "Develops application", dd: "2" },
-    { id: 1002, position: "Manager", age: 65, height: `5'9"`, desc: "Manages", dd: "3" },
-    { id: 1003, position: "BA", age: 42, height: `5'7"`, desc: "BAs", dd: "4" },
+    { id: 1000, position: 'Tester', age: 30, height: `6'4"`, desc: 'Tests application', dd: '1' },
+    { id: 1001, position: 'Developer', age: 12, height: `5'3"`, desc: 'Develops application', dd: '2' },
+    { id: 1002, position: 'Manager', age: 65, height: `5'9"`, desc: 'Manages', dd: '3' },
+    { id: 1003, position: 'BA', age: 42, height: `5'7"`, desc: 'BAs', dd: '4' },
   ]);
   return (
     <GridWrapper maxHeight={300}>
       <Grid
-        data-testid={"readonly"}
+        data-testid={'readonly'}
         {...props}
         selectable={true}
         rowSelection="multiple"
@@ -109,7 +108,7 @@ const GridDragRowTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
         columnDefs={columnDefs}
         defaultColDef={{ sortable: false }}
         rowData={rowData}
-        onRowDragEnd={async (movedRow, targetRow, _targetIndex) => {
+        onRowDragEnd={(movedRow, targetRow, _targetIndex) => {
           setRowData(
             rowData.map((r) => {
               if (r.id === movedRow.id) return targetRow;