feat(Popup)!: migrate to floating-ui (#1952)

gravity-ui · Dec 27, 2024 · 40ae863 · 40ae863
1 parent 3746e44
commit 40ae863
Show file tree

Hide file tree

Showing 39 changed files with 551 additions and 548 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -135,16 +135,15 @@
     },
     "dependencies": {
         "@bem-react/classname": "^1.6.0",
+        "@floating-ui/react": "^0.26.24",
         "@gravity-ui/i18n": "^1.6.0",
         "@gravity-ui/icons": "^2.8.1",
-        "@popperjs/core": "^2.11.8",
         "blueimp-md5": "^2.19.0",
         "focus-trap": "^7.5.4",
         "lodash": "^4.17.21",
         "rc-slider": "^10.6.2",
         "react-beautiful-dnd": "^13.1.1",
         "react-copy-to-clipboard": "^5.1.0",
-        "react-popper": "^2.3.0",
         "react-transition-group": "^4.4.5",
         "react-virtualized-auto-sizer": "^1.0.21",
         "react-window": "^1.8.10",

diff --git a/src/components/ActionTooltip/ActionTooltip.tsx b/src/components/ActionTooltip/ActionTooltip.tsx
@@ -60,7 +60,7 @@ export function ActionTooltip(props: ActionTooltipProps) {
                 style={style}
                 open={tooltipVisible && !disabled}
                 placement={placement}
-                anchorRef={{current: anchorElement}}
+                anchorElement={anchorElement}
                 disableEscapeKeyDown
                 disableOutsideClick
                 disableLayer

diff --git a/src/components/DropdownMenu/DropdownMenuPopup.tsx b/src/components/DropdownMenu/DropdownMenuPopup.tsx
@@ -142,6 +142,7 @@ export const DropdownMenuPopup = <T,>({
             open={open}
             anchorRef={anchorRef}
             onClose={onClose}
+            placement="bottom-start"
             {...popupProps}
             onMouseEnter={handleMouseEnter}
             onMouseLeave={handleMouseLeave}

diff --git a/src/components/FilePreview/__stories__/FilePreview.stories.tsx b/src/components/FilePreview/__stories__/FilePreview.stories.tsx
@@ -100,56 +100,54 @@ const CollageTemplate: StoryFn<FilePreviewProps> = () => {
 
 export const Collage = CollageTemplate.bind({});
 
+const noClickableTemplateActions = [
+    {
+        icon: <Xmark width={14} height={14} />,
+        onClick: () => action('Are you sure you want to delete the file?'),
+        title: 'Close',
+    },
+];
+
 const NoClickableTemplate: StoryFn<Omit<FilePreviewProps, 'actions'>> = (args) => {
     return (
         <Flex gap={4}>
             <FilePreview {...args} file={{name: 'No clickable', type: 'text/docs'} as File} />
             <FilePreview
                 {...args}
                 file={{name: 'No clickable with actions', type: 'text/docs'} as File}
-                actions={[
-                    {
-                        icon: <Xmark width={14} height={14} />,
-                        onClick: () => action('Are you sure you want to delete the file?'),
-                        title: 'Close',
-                    },
-                ]}
+                actions={noClickableTemplateActions}
             />
             <FilePreview
                 {...args}
                 file={{name: 'Clickable with actions', type: 'text/docs'} as File}
                 onClick={() => action('onClick')}
-                actions={[
-                    {
-                        icon: <Xmark width={14} height={14} />,
-                        onClick: () => action('Are you sure you want to delete the file?'),
-                        title: 'Close',
-                    },
-                ]}
+                actions={noClickableTemplateActions}
             />
         </Flex>
     );
 };
 
 export const NoClickable = NoClickableTemplate.bind({});
 
+const withoutActionTooltipTemplateActions = [
+    {
+        icon: <Xmark width={14} height={14} />,
+        onClick: () => action('onClose'),
+        title: 'Close',
+        tooltipExtraProps: {
+            disabled: true,
+        },
+    },
+];
+
 const WithoutActionTooltipTemplate: StoryFn<Omit<FilePreviewProps, 'actions'>> = (args) => {
     return (
         <Flex gap={4}>
             <FilePreview
                 {...args}
                 file={{name: 'Clicable without tooltip', type: 'text/docs'} as File}
                 onClick={() => action('onClick')}
-                actions={[
-                    {
-                        icon: <Xmark width={14} height={14} />,
-                        onClick: () => action('onClose'),
-                        title: 'Close',
-                        tooltipExtraProps: {
-                            disabled: true,
-                        },
-                    },
-                ]}
+                actions={withoutActionTooltipTemplateActions}
             />
         </Flex>
     );

diff --git a/src/components/Popover/Popover.tsx b/src/components/Popover/Popover.tsx
@@ -56,14 +56,15 @@ export const Popover = React.forwardRef<PopoverInstanceProps, PopoverProps & QAP
         onCloseClick,
         onClick,
         anchorRef,
+        anchorElement,
         strategy,
         qa,
         disablePortal = false,
         tooltipId,
         focusTrap,
         autoFocus,
         restoreFocusRef,
-        modifiers,
+        middlewares,
     },
     ref,
 ) {
@@ -116,13 +117,16 @@ export const Popover = React.forwardRef<PopoverInstanceProps, PopoverProps & QAP
 
     const hasTitle = Boolean(title);
 
+    const hasAnchor = Boolean(anchorRef || anchorElement);
+
     const popoverTitleId = `popover-${tooltipId ?? ''}-title-${useUniqId()}`;
 
     const tooltip = (
         <Popup
             id={tooltipId}
             role={openOnHover ? 'tooltip' : 'dialog'}
             strategy={strategy}
+            anchorElement={anchorElement}
             anchorRef={anchorRef || controlRef}
             className={cnPopover(
                 'tooltip',
@@ -139,14 +143,14 @@ export const Popover = React.forwardRef<PopoverInstanceProps, PopoverProps & QAP
             placement={popupPlacement}
             hasArrow={hasArrow}
             offset={tooltipOffset}
-            onClose={anchorRef ? undefined : closeTooltip}
+            onClose={hasAnchor ? undefined : closeTooltip}
             qa={qa ? `${qa}-tooltip` : ''}
             disablePortal={disablePortal}
             focusTrap={focusTrap}
             autoFocus={autoFocus}
             restoreFocus={true}
             restoreFocusRef={restoreFocusRef || controlRef}
-            modifiers={modifiers}
+            middlewares={middlewares}
             aria-labelledby={title ? popoverTitleId : undefined}
         >
             <React.Fragment>
@@ -185,7 +189,7 @@ export const Popover = React.forwardRef<PopoverInstanceProps, PopoverProps & QAP
         </Popup>
     );
 
-    if (anchorRef) {
+    if (hasAnchor) {
         return tooltip;
     }