@centreon/ui 26.3.4 → 26.3.6

package/src/RichTextEditor/index.stories.tsx

@@ -1,11 +1,10 @@
+import type { ComponentMeta } from '@storybook/react';
+import type { EditorState } from 'lexical';
 import { useState } from 'react';
 
-import { ComponentMeta } from '@storybook/react';
-import { EditorState } from 'lexical';
-
-import RichTextEditor from './RichTextEditor';
-import type { RichTextEditorProps } from './RichTextEditor';
 import initialEditorState from './initialEditorState.json';
+import type { RichTextEditorProps } from './RichTextEditor';
+import RichTextEditor from './RichTextEditor';
 
 export default {
   argTypes: {

package/src/RichTextEditor/index.ts

@@ -1,2 +1,2 @@
-export { default as RichTextEditor } from './RichTextEditor';
 export type { RichTextEditorProps } from './RichTextEditor';
+export { default as RichTextEditor } from './RichTextEditor';

package/src/RichTextEditor/initialEditorState.json

@@ -90,11 +90,11 @@
             "direction": "ltr",
             "format": "",
             "indent": 0,
-            "type": "link",
-            "version": 1,
             "rel": "noreferrer",
             "target": "_blank",
-            "url": "https://centreon.com"
+            "type": "link",
+            "url": "https://centreon.com",
+            "version": 1
           }
         ],
         "direction": "ltr",

package/src/RichTextEditor/plugins/AutoLinkPlugin/index.tsx

@@ -1,11 +1,10 @@
-import { useEffect, useState } from 'react';
-
 import {
   AutoLinkPlugin,
-  LinkMatcher
+  type LinkMatcher
 } from '@lexical/react/LexicalAutoLinkPlugin';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { BLUR_COMMAND, COMMAND_PRIORITY_LOW, FOCUS_COMMAND } from 'lexical';
+import { useEffect, useState } from 'react';
 
 interface LinkAttributes {
   rel?: null | string;
@@ -75,7 +74,7 @@ const AutoCompleteLinkPlugin = ({
         },
         COMMAND_PRIORITY_LOW
       ),
-    []
+    [editor.registerCommand]
   );
 
   useEffect(
@@ -89,7 +88,7 @@ const AutoCompleteLinkPlugin = ({
         },
         COMMAND_PRIORITY_LOW
       ),
-    []
+    [editor.registerCommand]
   );
 
   if (!hasFocus) {

package/src/RichTextEditor/plugins/FloatingLinkEditorPlugin.tsx

@@ -1,4 +1,5 @@
-import { useCallback, useEffect, useState } from 'react';
+import EditIcon from '@mui/icons-material/Edit';
+import { Box, IconButton, Link, Paper, Popper } from '@mui/material';
 
 import { $isLinkNode, TOGGLE_LINK_COMMAND } from '@lexical/link';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
@@ -8,14 +9,12 @@ import {
   $getSelection,
   $isRangeSelection,
   $isTextNode,
-  LexicalEditor
+  type LexicalEditor
 } from 'lexical';
 import { dec, equals, gt, isNil, replace } from 'ramda';
+import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import EditIcon from '@mui/icons-material/Edit';
-import { Box, IconButton, Link, Paper, Popper } from '@mui/material';
-
 import InputField from '../../InputField/Text';
 import { editLinkModeAtom, isInsertingLinkAtom, linkValueAtom } from '../atoms';
 import {
@@ -59,7 +58,7 @@ const FloatingLinkEditor = ({
   const [editedUrl, setEditedUrl] = useState('');
 
   const [editMode, setEditMode] = useAtom(editLinkModeAtom);
-  const [linkUrl, setLinkUrl] = useAtom(linkValueAtom);
+  const [linkUrl, _setLinkUrl] = useAtom(linkValueAtom);
 
   const rangeRect = getDOMRangeRect(nativeSelection, rootElement);
 
@@ -83,13 +82,13 @@ const FloatingLinkEditor = ({
         setEditMode(false);
       }
     },
-    [setEditMode, setLinkUrl]
+    [setEditMode, editor.dispatchCommand, openLinkInNewTab]
   );
 
   const enterInEditMode = useCallback(() => {
     setEditedUrl(linkUrl);
     setEditMode(true);
-  }, [linkUrl]);
+  }, [linkUrl, setEditMode]);
 
   const changeValue = useCallback((event): void => {
     const { value } = event.target;
@@ -120,7 +119,7 @@ const FloatingLinkEditor = ({
     const nodeHeight = rangeRect.height;
 
     setTooltipPosition({ x: nodeX, y: nodeY + nodeHeight });
-  }, [rangeRect?.x, rangeRect?.y]);
+  }, [rangeRect?.x, rangeRect?.y, rangeRect, nativeSelection]);
 
   if (isNil(rangeRect)) {
     return null;
@@ -134,8 +133,8 @@ const FloatingLinkEditor = ({
 
   return (
     <Popper
-      open
       anchorEl={rootElement}
+      open
       placement="top-start"
       sx={{ zIndex: 'tooltip' }}
     >
@@ -151,8 +150,6 @@ const FloatingLinkEditor = ({
             autoFocus
             dataTestId="InputLinkField"
             label={t(labelInputLink)}
-            size="small"
-            value={editedUrl}
             onBlur={(event): void => {
               const { value } = event.target;
 
@@ -165,6 +162,8 @@ const FloatingLinkEditor = ({
             }}
             onChange={changeValue}
             onKeyUp={acceptOrCancelNewLinkValue}
+            size="small"
+            value={editedUrl}
           />
         ) : (
           <Box component="span" sx={{ margin: '10px' }}>
@@ -179,9 +178,9 @@ const FloatingLinkEditor = ({
             </Link>
             <IconButton
               aria-label={labelEditLink}
+              onClick={enterInEditMode}
               size="small"
               sx={{ marginLeft: '5px' }}
-              onClick={enterInEditMode}
             >
               <EditIcon fontSize="small" />
             </IconButton>
@@ -243,7 +242,7 @@ const useFloatingTextFormatToolbar = ({
         setIsText(false);
       }
     });
-  }, [editor, editLinkMode]);
+  }, [editor, editLinkMode, setLinkUrl]);
 
   useEffect(() => {
     document.addEventListener('selectionchange', updatePopup);

package/src/RichTextEditor/plugins/ToolbarPlugin/AlignPicker.tsx

@@ -1,25 +1,23 @@
-import { useCallback, useEffect, useState } from 'react';
+import FormatAlignCenterIcon from '@mui/icons-material/FormatAlignCenter';
+import FormatAlignLeftIcon from '@mui/icons-material/FormatAlignLeft';
+import FormatAlignRightIcon from '@mui/icons-material/FormatAlignRight';
+import type { SvgIconTypeMap } from '@mui/material';
+import type { OverridableComponent } from '@mui/material/OverridableComponent';
 
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import {
   $getSelection,
   $isElementNode,
   $isRangeSelection,
-  ElementFormatType,
+  type ElementFormatType,
   FORMAT_ELEMENT_COMMAND
 } from 'lexical';
 import { equals } from 'ramda';
-
-import FormatAlignCenterIcon from '@mui/icons-material/FormatAlignCenter';
-import FormatAlignLeftIcon from '@mui/icons-material/FormatAlignLeft';
-import FormatAlignRightIcon from '@mui/icons-material/FormatAlignRight';
-import { SvgIconTypeMap } from '@mui/material';
-import { OverridableComponent } from '@mui/material/OverridableComponent';
+import { useCallback, useEffect, useState } from 'react';
 
 import { Menu } from '../../../components';
 import { labelAlignPicker } from '../../translatedLabels';
 import { getSelectedNode } from '../../utils/getSelectedNode';
-
 import { useStyles } from './ToolbarPlugin.styles';
 
 const formatOptions: Array<{
@@ -73,7 +71,7 @@ const AlignPicker = ({ disabled }: Props): JSX.Element => {
       ($isElementNode(node) ? node.getFormatType() : parent?.getFormatType()) ||
         'left'
     );
-  }, [editor]);
+  }, []);
 
   const selectedFormat = formatOptions.find(({ value }) =>
     equals(value, elementFormat)

package/src/RichTextEditor/plugins/ToolbarPlugin/BlockButtons.tsx

@@ -1,10 +1,10 @@
-import { useCallback, useEffect, useState } from 'react';
+import TextSizeIcon from '@mui/icons-material/TextFields';
 
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import {
   $createHeadingNode,
   $isHeadingNode,
-  HeadingTagType
+  type HeadingTagType
 } from '@lexical/rich-text';
 import { $setBlocksType } from '@lexical/selection';
 import { $findMatchingParent, mergeRegister } from '@lexical/utils';
@@ -16,13 +16,11 @@ import {
   COMMAND_PRIORITY_CRITICAL,
   SELECTION_CHANGE_COMMAND
 } from 'lexical';
-import { T, always, cond, equals, isNil } from 'ramda';
+import { always, cond, equals, isNil, T } from 'ramda';
+import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import TextSizeIcon from '@mui/icons-material/TextFields';
-
 import { Menu } from '../../../components';
-
 import { useStyles } from './ToolbarPlugin.styles';
 
 interface Props {

package/src/RichTextEditor/plugins/ToolbarPlugin/FormatButtons.tsx

@@ -1,4 +1,8 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import FormatBoldIcon from '@mui/icons-material/FormatBold';
+import FormatTextIcon from '@mui/icons-material/FormatColorText';
+import FormatItalicIcon from '@mui/icons-material/FormatItalic';
+import FormatUnderlinedIcon from '@mui/icons-material/FormatUnderlined';
+import StrikethroughSIcon from '@mui/icons-material/StrikethroughS';
 
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { mergeRegister } from '@lexical/utils';
@@ -7,17 +11,11 @@ import {
   $isRangeSelection,
   FORMAT_TEXT_COMMAND,
   SELECTION_CHANGE_COMMAND,
-  TextFormatType
+  type TextFormatType
 } from 'lexical';
-
-import FormatBoldIcon from '@mui/icons-material/FormatBold';
-import FormatTextIcon from '@mui/icons-material/FormatColorText';
-import FormatItalicIcon from '@mui/icons-material/FormatItalic';
-import FormatUnderlinedIcon from '@mui/icons-material/FormatUnderlined';
-import StrikethroughSIcon from '@mui/icons-material/StrikethroughS';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { Menu } from '../../../components';
-
 import { useStyles } from './ToolbarPlugin.styles';
 
 const LowPriority = 1;
@@ -45,7 +43,7 @@ const FormatButtons = ({ disabled }: Props): JSX.Element => {
     setIsItalic(selection.hasFormat('italic'));
     setIsUnderline(selection.hasFormat('underline'));
     setIsStrikeThrough(selection.hasFormat('strikethrough'));
-  }, [editor]);
+  }, []);
 
   useEffect(() => {
     return mergeRegister(
@@ -92,7 +90,7 @@ const FormatButtons = ({ disabled }: Props): JSX.Element => {
         type: 'strikethrough'
       }
     ],
-    [isBold, isItalic, isUnderline, isStrikeThrough]
+    [isBold, isItalic, isUnderline, isStrikeThrough, toggleTextFormat]
   );
 
   return (

package/src/RichTextEditor/plugins/ToolbarPlugin/LinkButton.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect } from 'react';
+import LinkIcon from '@mui/icons-material/Link';
 
 import { $isLinkNode, TOGGLE_LINK_COMMAND } from '@lexical/link';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
@@ -8,17 +8,15 @@ import { useAtom } from 'jotai';
 import {
   $getSelection,
   $isRangeSelection,
-  ElementNode,
-  RangeSelection,
+  type ElementNode,
+  type RangeSelection,
   SELECTION_CHANGE_COMMAND,
-  TextNode
+  type TextNode
 } from 'lexical';
-
-import LinkIcon from '@mui/icons-material/Link';
+import { useCallback, useEffect } from 'react';
 
 import { IconButton } from '../../..';
 import { isInsertingLinkAtom } from '../../atoms';
-
 import { useStyles } from './ToolbarPlugin.styles';
 
 const LowPriority = 1;
@@ -63,7 +61,7 @@ const LinkButton = ({ disabled }: Props): JSX.Element => {
     } else {
       setIsLink(false);
     }
-  }, [editor]);
+  }, [setIsLink]);
 
   const insertLink = useCallback(() => {
     if (!isLink) {
@@ -93,10 +91,10 @@ const LinkButton = ({ disabled }: Props): JSX.Element => {
       className={cx(classes.button, { [classes.buttonSelected]: isLink })}
       disabled={disabled}
       key="link"
+      onClick={insertLink}
       size="medium"
       title="link"
       tooltipPlacement="top"
-      onClick={insertLink}
     >
       <LinkIcon />
     </IconButton>

package/src/RichTextEditor/plugins/ToolbarPlugin/ListButton.tsx

@@ -1,4 +1,5 @@
-import { useCallback, useEffect, useState } from 'react';
+import UnorderedListIcon from '@mui/icons-material/FormatListBulleted';
+import OrderedListIcon from '@mui/icons-material/FormatListNumbered';
 
 import {
   $isListNode,
@@ -15,14 +16,11 @@ import {
 } from '@lexical/utils';
 import { $getSelection, $isRootOrShadowRoot } from 'lexical';
 import { equals, isNil } from 'ramda';
+import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import UnorderedListIcon from '@mui/icons-material/FormatListBulleted';
-import OrderedListIcon from '@mui/icons-material/FormatListNumbered';
-
 import { Menu } from '../../../components';
 import { labelOrderedList, labelUnorderedList } from '../../translatedLabels';
-
 import { useStyles } from './ToolbarPlugin.styles';
 
 const options = [

package/src/RichTextEditor/plugins/ToolbarPlugin/MacrosButton.tsx

@@ -1,10 +1,9 @@
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import { LexicalCommand, createCommand } from 'lexical';
-
 import MacrosIcon from '@mui/icons-material/TerminalOutlined';
 
-import { Menu } from '../../../components';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { createCommand, type LexicalCommand } from 'lexical';
 
+import { Menu } from '../../../components';
 import { useStyles } from './ToolbarPlugin.styles';
 
 const LowPriority = 1;

package/src/RichTextEditor/plugins/ToolbarPlugin/ToolbarPlugin.styles.ts

@@ -1,7 +1,7 @@
-import { makeStyles } from 'tss-react/mui';
-
 import { alpha } from '@mui/system';
 
+import { makeStyles } from 'tss-react/mui';
+
 export const useStyles = makeStyles()((theme) => ({
   button: {
     color: theme.palette.text.primary

package/src/RichTextEditor/plugins/ToolbarPlugin/UndoRedoButtons.tsx

@@ -1,4 +1,5 @@
-import { useEffect, useState } from 'react';
+import RedoIcon from '@mui/icons-material/Redo';
+import UndoIcon from '@mui/icons-material/Undo';
 
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { mergeRegister } from '@lexical/utils';
@@ -8,14 +9,11 @@ import {
   REDO_COMMAND,
   UNDO_COMMAND
 } from 'lexical';
+import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import RedoIcon from '@mui/icons-material/Redo';
-import UndoIcon from '@mui/icons-material/Undo';
-
 import { IconButton } from '../../..';
 import { labelRedo, labelUndo } from '../../translatedLabels';
-
 import { useStyles } from './ToolbarPlugin.styles';
 
 const LowPriority = 1;
@@ -55,7 +53,7 @@ const UndoRedoButtons = ({ disabled }: Props): JSX.Element => {
         LowPriority
       )
     );
-  }, []);
+  }, [editor.registerCommand]);
 
   const undo = (): void => {
     editor.dispatchCommand(UNDO_COMMAND, undefined);
@@ -74,9 +72,9 @@ const UndoRedoButtons = ({ disabled }: Props): JSX.Element => {
         ariaLabel={translatedUndo}
         className={classes.button}
         disabled={!canUndo || disabled}
+        onClick={undo}
         title={translatedUndo}
         tooltipPlacement="top"
-        onClick={undo}
       >
         <UndoIcon />
       </IconButton>
@@ -84,9 +82,9 @@ const UndoRedoButtons = ({ disabled }: Props): JSX.Element => {
         ariaLabel={translatedRedo}
         className={classes.button}
         disabled={!canRedo || disabled}
+        onClick={redo}
         title={translatedRedo}
         tooltipPlacement="top"
-        onClick={redo}
       >
         <RedoIcon />
       </IconButton>

package/src/RichTextEditor/plugins/ToolbarPlugin/index.tsx

@@ -1,6 +1,7 @@
 import { Divider } from '@mui/material';
 
 import { ReactElement } from 'react';
+
 import AlignPicker from './AlignPicker';
 import BlockButtons from './BlockButtons';
 import FormatButtons from './FormatButtons';

package/src/RichTextEditor/utils/getSelectedNode.ts

@@ -1,5 +1,5 @@
 import { $isAtNodeEnd } from '@lexical/selection';
-import { ElementNode, RangeSelection, TextNode } from 'lexical';
+import type { ElementNode, RangeSelection, TextNode } from 'lexical';
 
 export const getSelectedNode = (
   selection: RangeSelection

package/src/Snackbar/SnackbarProvider.tsx

@@ -1,8 +1,8 @@
-import { SnackbarProvider as NotistackSnackbarProvider } from 'notistack';
+import type { TransitionProps } from '@mui/material/transitions';
 
-import { TransitionProps } from '@mui/material/transitions';
+import { SnackbarProvider as NotistackSnackbarProvider } from 'notistack';
+import type { JSXElementConstructor, ReactElement } from 'react';
 
-import { JSXElementConstructor, ReactElement } from 'react';
 import Transition from './Transition';
 
 interface Props {
@@ -16,6 +16,8 @@ const SnackbarProvider = ({
 }: Props): JSX.Element => {
   return (
     <NotistackSnackbarProvider
+      anchorOrigin={{ horizontal: 'center', vertical: 'bottom' }}
+      maxSnack={maxSnackbars}
       TransitionComponent={
         Transition as JSXElementConstructor<
           TransitionProps & {
@@ -23,8 +25,6 @@ const SnackbarProvider = ({
           }
         >
       }
-      anchorOrigin={{ horizontal: 'center', vertical: 'bottom' }}
-      maxSnack={maxSnackbars}
     >
       {children}
     </NotistackSnackbarProvider>

package/src/Snackbar/Transition.tsx

@@ -1,10 +1,10 @@
-import {
-  TransitionActions,
-  TransitionProps as _TransitionProps
-} from 'react-transition-group/Transition';
-
 import { Fade } from '@mui/material';
-import { CSSProperties, ReactNode } from 'react';
+
+import type { CSSProperties, ReactNode } from 'react';
+import type {
+  TransitionProps as _TransitionProps,
+  TransitionActions
+} from 'react-transition-group/Transition';
 
 type TransitionHandlerKeys =
   | 'onEnter'

package/src/Snackbar/index.stories.tsx

@@ -1,7 +1,6 @@
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
 import { useEffect } from 'react';
 
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-
 import SnackbarProvider from './SnackbarProvider';
 import useSnackbar from './useSnackbar';
 
@@ -58,7 +57,7 @@ const Story = ({ displayMessages = false }: Props): JSX.Element => {
           Record<string, string>
       );
     });
-  }, [displayMessages]);
+  }, [displayMessages, snackbars.forEach]);
 
   return <div />;
 };

package/src/Snackbar/index.tsx

@@ -1,14 +1,13 @@
+import IconClose from '@mui/icons-material/Close';
+import { Alert, IconButton } from '@mui/material';
+
 import { SnackbarContent, useSnackbar } from 'notistack';
 import { isNil, not } from 'ramda';
+import { forwardRef, useEffect, useRef } from 'react';
 import { makeStyles } from 'tss-react/mui';
 
-import IconClose from '@mui/icons-material/Close';
-import { Alert, IconButton } from '@mui/material';
-
 import { sanitizedHTML } from '../utils';
-
-import { forwardRef, useEffect, useRef } from 'react';
-import Severity from './Severity';
+import type Severity from './Severity';
 
 const useStyles = makeStyles()((theme) => ({
   alertIcon: {
@@ -48,7 +47,7 @@ const Snackbar = forwardRef(
       timeoutId.current = setTimeout(() => {
         closeSnackbar(id);
       }, 6000);
-    }, []);
+    }, [closeSnackbar, id]);
 
     const close = (): void => {
       if (not(isNil(timeoutId.current))) {
@@ -68,8 +67,8 @@ const Snackbar = forwardRef(
             <IconButton
               color="inherit"
               key="close"
-              size="large"
               onClick={close}
+              size="large"
             >
               <IconClose className={classes.closeIcon} />
             </IconButton>

package/src/Snackbar/useSnackbar.tsx

@@ -1,12 +1,10 @@
-import { useSnackbar as useNotistackSnackbar } from 'notistack';
-
 import { Typography } from '@mui/material';
 
-import { sanitizedHTML } from '../utils';
-
-import Severity from './Severity';
+import { useSnackbar as useNotistackSnackbar } from 'notistack';
 
+import { sanitizedHTML } from '../utils';
 import Snackbar from '.';
+import Severity from './Severity';
 
 interface ShowMessageProps {
   message: string | JSX.Element;

package/src/SortableItems/Item.tsx

@@ -1,4 +1,4 @@
-import { ForwardedRef, forwardRef } from 'react';
+import { type ForwardedRef, forwardRef } from 'react';
 
 interface Props extends Record<string, unknown> {
   Content: (props) => JSX.Element;

package/src/SortableItems/SortableItem.tsx

@@ -3,7 +3,6 @@ import { CSS } from '@dnd-kit/utilities';
 import { props } from 'ramda';
 
 import { useMemoComponent } from '../utils';
-
 import Item from './Item';
 
 interface Props extends Record<string, unknown> {

package/src/SortableItems/index.stories.tsx

@@ -1,19 +1,22 @@
-import { DraggableSyntheticListeners, rectIntersection } from '@dnd-kit/core';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
+import { Grid, IconButton, Paper, Typography } from '@mui/material';
+
+import {
+  type DraggableSyntheticListeners,
+  rectIntersection
+} from '@dnd-kit/core';
 import {
-  SortingStrategy,
   horizontalListSortingStrategy,
   rectSortingStrategy,
+  type SortingStrategy,
   verticalListSortingStrategy
 } from '@dnd-kit/sortable';
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
 import { not } from 'ramda';
+import type { RefObject } from 'react';
 import { makeStyles } from 'tss-react/mui';
 
-import MoreVertIcon from '@mui/icons-material/MoreVert';
-import { Grid, IconButton, Paper, Typography } from '@mui/material';
-
-import { RefObject } from 'react';
-import SortableItems, { RootComponentProps } from '.';
+import SortableItems, { type RootComponentProps } from '.';
 
 export default {
   component: SortableItems,
@@ -230,7 +233,7 @@ const ContentWithGrid = ({
   const { classes } = useContentStyles({ isDragging });
 
   return (
-    <Grid item style={style} size={xs} {...listeners} {...attributes}>
+    <Grid item size={xs} style={style} {...listeners} {...attributes}>
       <Paper className={classes.content} ref={itemRef}>
         <Typography>{name as string}</Typography>
       </Paper>
@@ -259,10 +262,10 @@ const StoryWithRootComponent = (): JSX.Element => {
     <div className={classes.verticalContainer}>
       <SortableItems
         Content={ContentWithGrid}
-        RootComponent={RootComponent}
         collisionDetection={rectIntersection}
         itemProps={['name', 'xs']}
         items={items}
+        RootComponent={RootComponent}
         sortingStrategy={rectSortingStrategy}
       />
     </div>
@@ -275,8 +278,8 @@ export const gridWithRootComponent = (): JSX.Element => (
 
 export const gridWithHandlers = (): JSX.Element => (
   <Story
-    handler
     direction="gridContainer"
+    handler
     sortingStrategy={rectSortingStrategy}
   />
 );