fix: Add popper changes for v6 (#6482)

VKCOM · Jan 29, 2024 · e9b3abb · e9b3abb
1 parent 4ba1b01
commit e9b3abb
Show file tree

Hide file tree

Showing 19 changed files with 246 additions and 28 deletions.
diff --git a/packages/codemods/src/transforms/__testfixtures__/tooltip-container/basic.input.tsx b/packages/codemods/src/transforms/__testfixtures__/tooltip-container/basic.input.tsx
@@ -0,0 +1,10 @@
+import { TooltipContainer } from '@vkontakte/vkui';
+import React from 'react';
+
+const App = () => {
+  return (
+    <React.Fragment>
+      <TooltipContainer>Tooltip</TooltipContainer>
+    </React.Fragment>
+  );
+};
diff --git a/packages/codemods/src/transforms/__testfixtures__/tooltip/basic.input.tsx b/packages/codemods/src/transforms/__testfixtures__/tooltip/basic.input.tsx
@@ -21,6 +21,10 @@ const App = () => {
       <Tooltip alignX="right" alignY="top">target</Tooltip>
 
       <Tooltip alignX="right" alignY="top" placement="auto">target</Tooltip>
+
+      <Tooltip arrow></Tooltip>
+
+      <Tooltip arrow={false}>target</Tooltip>
     </React.Fragment>
   );
 };
diff --git a/packages/codemods/src/transforms/__tests__/__snapshots__/tooltip-container.ts.snap b/packages/codemods/src/transforms/__tests__/__snapshots__/tooltip-container.ts.snap
@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`tooltip-container transforms correctly 1`] = `
+"import { OnboardingTooltipContainer } from '@vkontakte/vkui';
+import React from 'react';
+
+const App = () => {
+  return (
+    <React.Fragment>
+      <OnboardingTooltipContainer>Tooltip</OnboardingTooltipContainer>
+    </React.Fragment>
+  );
+};"
+`;
diff --git a/packages/codemods/src/transforms/__tests__/__snapshots__/tooltip.ts.snap b/packages/codemods/src/transforms/__tests__/__snapshots__/tooltip.ts.snap
@@ -24,6 +24,10 @@ const App = () => {
       <OnboardingTooltip placement="top-end">target</OnboardingTooltip>
 
       <OnboardingTooltip placement="auto">target</OnboardingTooltip>
+
+      <OnboardingTooltip></OnboardingTooltip>
+
+      <OnboardingTooltip disableArrow>target</OnboardingTooltip>
     </React.Fragment>
   );
 };"

diff --git a/packages/codemods/src/transforms/__tests__/tooltip-container.ts b/packages/codemods/src/transforms/__tests__/tooltip-container.ts
@@ -0,0 +1,12 @@
+jest.autoMockOff();
+
+import { defineSnapshotTestFromFixture } from '../../testHelpers/testHelper';
+
+const name = 'tooltip-container';
+const fixtures = ['basic'] as const;
+
+describe(name, () => {
+  fixtures.forEach((test) =>
+    defineSnapshotTestFromFixture(__dirname, name, global.TRANSFORM_OPTIONS, `${name}/${test}`),
+  );
+});
diff --git a/packages/codemods/src/transforms/tooltip-container.ts b/packages/codemods/src/transforms/tooltip-container.ts
@@ -0,0 +1,51 @@
+import type { API, FileInfo } from 'jscodeshift';
+import { getImportInfo } from '../codemod-helpers';
+import type { JSCodeShiftOptions } from '../types';
+
+export const parser = 'tsx';
+
+const componentName = 'TooltipContainer';
+const componentNameTo = 'OnboardingTooltipContainer';
+
+export default function transformer(file: FileInfo, api: API, options: JSCodeShiftOptions) {
+  const { alias } = options;
+  const j = api.jscodeshift;
+  const source = j(file.source);
+  const { localName } = getImportInfo(j, file, componentName, alias);
+  let needRename = true;
+
+  // подменяем импорт
+  source
+    .find(j.ImportDeclaration)
+    .filter((path) => path.node.source.value === alias)
+    .find(j.ImportSpecifier, { imported: { name: componentName } })
+    .forEach((path) => {
+      j(path).replaceWith((path) => {
+        if (path.node.local && path.node.local.name !== path.node.imported.name) {
+          needRename = false;
+        }
+        return j.importSpecifier(
+          j.jsxIdentifier(componentNameTo),
+          needRename ? null : path.node.local,
+        );
+      });
+    });
+
+  source.findJSXElements(localName).forEach((element) => {
+    // меняем название компонента в JSX на переименованный в импорте (если нужно)
+    j(element).replaceWith((path) => {
+      const renamedLocalName = needRename ? componentNameTo : localName;
+      return j.jsxElement(
+        j.jsxOpeningElement(
+          j.jsxIdentifier(renamedLocalName),
+          path.node.openingElement.attributes,
+          path.node.closingElement ? false : true,
+        ),
+        path.node.closingElement ? j.jsxClosingElement(j.jsxIdentifier(renamedLocalName)) : null,
+        path.node.children,
+      );
+    });
+  });
+
+  return source.toSource();
+}
diff --git a/packages/codemods/src/transforms/tooltip.ts b/packages/codemods/src/transforms/tooltip.ts
@@ -3,6 +3,7 @@ import {
   type AttributeManipulator,
   createAttributeManipulator,
   getImportInfo,
+  swapBooleanValue,
 } from '../codemod-helpers';
 import type { JSCodeShiftOptions } from '../types';
 
@@ -66,6 +67,8 @@ export default function transformer(file: FileInfo, api: API, options: JSCodeShi
   const attributeReplacer = createAttributeManipulator(ATTRIBUTE_REPLACER, api);
   let needRename = true;
 
+  swapBooleanValue(api, source, localName, 'arrow', 'disableArrow');
+
   // подменяем импорт
   source
     .find(j.ImportDeclaration)

diff --git a/packages/vkui/src/components/OnboardingTooltip/OnboardingTooltip.test.tsx b/packages/vkui/src/components/OnboardingTooltip/OnboardingTooltip.test.tsx
@@ -3,7 +3,7 @@ import { Fragment, HtmlHTMLAttributes, ReactElement } from 'react';
 import { render, screen } from '@testing-library/react';
 import { baselineComponent, waitForFloatingPosition } from '../../testing/utils';
 import { HasRootRef } from '../../types';
-import { OnboardingTooltip } from './OnboardingTooltip';
+import { OnboardingTooltip, OnboardingTooltipProps } from './OnboardingTooltip';
 import { OnboardingTooltipContainer } from './OnboardingTooltipContainer';
 
 const renderTooltip = async (jsx: ReactElement) => {
@@ -103,4 +103,26 @@ describe(OnboardingTooltip, () => {
       expect(ref).toHaveBeenCalledWith(screen.getByTestId('xxx'));
     });
   });
+
+  it('should call onPlacementChange', async () => {
+    const onPlacementChange = jest.fn();
+
+    const Fixture = (props: OnboardingTooltipProps) => (
+      <OnboardingTooltipContainer data-testid="container">
+        <OnboardingTooltip shown text="text" {...props}>
+          <div data-testid="xxx" />
+        </OnboardingTooltip>
+      </OnboardingTooltipContainer>
+    );
+
+    const result = render(<Fixture placement="bottom" onPlacementChange={onPlacementChange} />);
+    await waitForFloatingPosition();
+
+    expect(onPlacementChange).not.toHaveBeenCalled();
+
+    result.rerender(<Fixture placement="auto" onPlacementChange={onPlacementChange} />);
+    await waitForFloatingPosition();
+
+    expect(onPlacementChange).toHaveBeenCalledWith('top');
+  });
 });
diff --git a/packages/vkui/src/components/OnboardingTooltip/OnboardingTooltip.tsx b/packages/vkui/src/components/OnboardingTooltip/OnboardingTooltip.tsx
@@ -9,6 +9,7 @@ import {
   type FloatingComponentProps,
   useFloating,
   useFloatingMiddlewaresBootstrap,
+  usePlacementChangeCallback,
 } from '../../lib/floating';
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
 import { warnOnce } from '../../lib/warnOnce';
@@ -31,6 +32,7 @@ type AllowedFloatingComponentProps = Pick<
   | 'offsetByCrossAxis'
   | 'shown'
   | 'children'
+  | 'onPlacementChange'
 >;
 
 type AllowedTooltipBaseProps = Omit<TooltipBaseProps, 'arrowProps'>;
@@ -50,6 +52,10 @@ export interface OnboardingTooltipProps
   extends AllowedFloatingComponentProps,
     AllowedTooltipBaseProps,
     AllowedFloatingArrowProps {
+  /**
+   * Скрывает стрелку, указывающую на якорный элемент.
+   */
+  disableArrow?: boolean;
   /**
    * Callback, который вызывается при клике по любому месту в пределах экрана.
    */
@@ -74,6 +80,8 @@ export const OnboardingTooltip = ({
   maxWidth = TOOLTIP_MAX_WIDTH,
   style: styleProp,
   getRootRef,
+  disableArrow = false,
+  onPlacementChange,
   ...restProps
 }: OnboardingTooltipProps) => {
   const generatedId = React.useId();
@@ -90,7 +98,7 @@ export const OnboardingTooltip = ({
     offsetByMainAxis,
     offsetByCrossAxis,
     arrowRef,
-    arrow: true,
+    arrow: !disableArrow,
     arrowHeight,
     arrowPadding,
   });
@@ -111,6 +119,8 @@ export const OnboardingTooltip = ({
     'aria-describedby': shown ? tooltipId : undefined,
   });
 
+  usePlacementChangeCallback(resolvedPlacement, onPlacementChange);
+
   let tooltip: React.ReactPortal | null = null;
   if (shown) {
     const floatingStyle = convertFloatingDataToReactCSSProperties(
@@ -131,13 +141,17 @@ export const OnboardingTooltip = ({
           getRootRef={tooltipRef}
           style={floatingStyle}
           maxWidth={maxWidth}
-          arrowProps={{
-            offset: arrowOffset,
-            isStaticOffset: isStaticArrowOffset,
-            coords: arrowCoords,
-            placement: resolvedPlacement,
-            getRootRef: setArrowRef,
-          }}
+          arrowProps={
+            disableArrow
+              ? undefined
+              : {
+                  offset: arrowOffset,
+                  isStaticOffset: isStaticArrowOffset,
+                  coords: arrowCoords,
+                  placement: resolvedPlacement,
+                  getRootRef: setArrowRef,
+                }
+          }
         />
         <div className={styles['OnboardingTooltip__overlay']} onClickCapture={onClose} />
       </>,

diff --git a/packages/vkui/src/components/Popover/Popover.test.tsx b/packages/vkui/src/components/Popover/Popover.test.tsx
@@ -48,4 +48,24 @@ describe(Popover, () => {
     await waitForFloatingPosition();
     expect(result.getByTestId('target')).toHaveAttribute('aria-expanded', 'false');
   });
+
+  it('should call onPlacementChange', async () => {
+    const onPlacementChange = jest.fn();
+
+    const Fixture = (props: PopoverProps) => (
+      <Popover defaultShown {...props}>
+        <div>Target</div>
+      </Popover>
+    );
+
+    const result = render(<Fixture placement="bottom" onPlacementChange={onPlacementChange} />);
+    await waitForFloatingPosition();
+
+    expect(onPlacementChange).not.toHaveBeenCalled();
+
+    result.rerender(<Fixture placement="auto" onPlacementChange={onPlacementChange} />);
+    await waitForFloatingPosition();
+
+    expect(onPlacementChange).toHaveBeenCalledWith('top');
+  });
 });
diff --git a/packages/vkui/src/components/Popover/Popover.tsx b/packages/vkui/src/components/Popover/Popover.tsx
@@ -9,6 +9,7 @@ import {
   type OnShownChange,
   useFloatingMiddlewaresBootstrap,
   useFloatingWithInteractions,
+  usePlacementChangeCallback,
 } from '../../lib/floating';
 import type { HTMLAttributesWithRootRef } from '../../types';
 import { AppRootPortal } from '../AppRoot/AppRootPortal';
@@ -30,6 +31,7 @@ export type PopoverContentRenderProp = FloatingContentRenderProp;
 type AllowedFloatingComponentProps = Pick<
   FloatingComponentProps,
   | 'placement'
+  | 'onPlacementChange'
   | 'trigger'
   | 'content'
   | 'hoverDelay'
@@ -75,6 +77,7 @@ export interface PopoverProps
 export const Popover = ({
   // UsePopoverProps
   placement: expectedPlacement = 'bottom-start',
+  onPlacementChange,
   trigger = 'click',
   content,
   hoverDelay = 150,
@@ -139,6 +142,8 @@ export const Popover = ({
     onShownChange,
   });
 
+  usePlacementChangeCallback(placement, onPlacementChange);
+
   const [, child] = usePatchChildren<HTMLDivElement>(
     children,
     injectAriaExpandedPropByRole(referenceProps, shown, role),

diff --git a/packages/vkui/src/components/Popper/Popper.tsx b/packages/vkui/src/components/Popper/Popper.tsx
@@ -1,13 +1,12 @@
 import * as React from 'react';
 import { useExternRef } from '../../hooks/useExternRef';
-import { usePrevious } from '../../hooks/usePrevious';
 import {
   autoUpdateFloatingElement,
   convertFloatingDataToReactCSSProperties,
   type FloatingComponentProps,
-  type Placement,
   useFloating,
   useFloatingMiddlewaresBootstrap,
+  usePlacementChangeCallback,
   type VirtualElement,
 } from '../../lib/floating';
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
@@ -48,6 +47,7 @@ type AllowedFloatingComponentProps = Pick<
   | 'zIndex'
   | 'usePortal'
   | 'customMiddlewares'
+  | 'onPlacementChange'
 >;
 
 export interface PopperCommonProps
@@ -75,11 +75,6 @@ export interface PopperCommonProps
    * Подписывается на изменение геометрии `targetRef`, чтобы пересчитать свою позицию.
    */
   autoUpdateOnTargetResize?: boolean;
-  /**
-   * В зависимости от области видимости, позиция может смениться на более оптимальную,
-   * чтобы Popper вместился в эту область видимости.
-   */
-  onPlacementChange?(placement: Placement): void;
 }
 
 export interface PopperProps extends PopperCommonProps {
@@ -149,6 +144,9 @@ export const Popper = ({
       });
     },
   });
+
+  usePlacementChangeCallback(resolvedPlacement, onPlacementChange);
+
   const { arrow: arrowCoords } = middlewareData;
 
   const handleRootRef = useExternRef<HTMLDivElement>(refs.setFloating, getRootRef);
@@ -157,16 +155,6 @@ export const Popper = ({
     refs.setReference('current' in targetRef ? targetRef.current : targetRef);
   }, [refs.setReference, targetRef]);
 
-  const prevResolvedPlacement = usePrevious(resolvedPlacement);
-  useIsomorphicLayoutEffect(() => {
-    if (prevResolvedPlacement === undefined || !onPlacementChange) {
-      return;
-    }
-    if (prevResolvedPlacement !== resolvedPlacement) {
-      onPlacementChange(resolvedPlacement);
-    }
-  }, [prevResolvedPlacement, resolvedPlacement, onPlacementChange]);
-
   const dropdown = (
     <RootComponent
       {...restProps}

diff --git a/packages/vkui/src/components/Tooltip/Tooltip.test.tsx b/packages/vkui/src/components/Tooltip/Tooltip.test.tsx
@@ -1,11 +1,32 @@
 import * as React from 'react';
-import { baselineComponent } from '../../testing/utils';
-import { Tooltip } from './Tooltip';
+import { render } from '@testing-library/react';
+import { baselineComponent, waitForFloatingPosition } from '../../testing/utils';
+import { Tooltip, TooltipProps } from './Tooltip';
 
 describe(Tooltip, () => {
   baselineComponent((props) => (
     <Tooltip shown text="test" {...props}>
       <div>Target</div>
     </Tooltip>
   ));
+
+  it('should call onPlacementChange', async () => {
+    const onPlacementChange = jest.fn();
+
+    const Fixture = (props: TooltipProps) => (
+      <Tooltip defaultShown {...props}>
+        <div>Target</div>
+      </Tooltip>
+    );
+
+    const result = render(<Fixture placement="bottom" onPlacementChange={onPlacementChange} />);
+    await waitForFloatingPosition();
+
+    expect(onPlacementChange).not.toHaveBeenCalled();
+
+    result.rerender(<Fixture placement="auto" onPlacementChange={onPlacementChange} />);
+    await waitForFloatingPosition();
+
+    expect(onPlacementChange).toHaveBeenCalledWith('top');
+  });
 });