[BREAKING CHANGE] feat(Popper): mv to stable

packages/vkui/src/components/ActionSheet/ActionSheetDropdownMenu.tsx

@@ -66,7 +66,7 @@ export const ActionSheetDropdownMenu = ({
   return (
     <Popper
       targetRef={targetRef}
-      offsetDistance={popupOffsetDistance}
+      offsetByMainAxis={popupOffsetDistance}
       placement={placement}
       className={classNames(
         styles['ActionSheet'],

packages/vkui/src/components/CustomSelectDropdown/CustomSelectDropdown.tsx

@@ -46,7 +46,7 @@ export const CustomSelectDropdown = ({
   const [isTop, setIsTop] = React.useState(() => calcIsTop(placement));
 
   const onPlacementChange = React.useCallback(
-    ({ placement }: { placement?: Placement }) => {
+    (placement: Placement) => {
       setIsTop(calcIsTop(placement));
       parentOnPlacementChange?.(placement);
     },
@@ -56,7 +56,7 @@ export const CustomSelectDropdown = ({
   return (
     <Popper
       targetRef={targetRef}
-      offsetDistance={offsetDistance}
+      offsetByMainAxis={offsetDistance}
       sameWidth={sameWidth}
       onPlacementChange={onPlacementChange}
       placement={placement}

packages/vkui/src/components/DateInput/DateInput.tsx

@@ -295,7 +295,7 @@ export const DateInput = ({
         )}
       </Text>
       {open && !disableCalendar && (
-        <Popper targetRef={rootRef} offsetDistance={8} placement={calendarPlacement}>
+        <Popper targetRef={rootRef} offsetByMainAxis={8} placement={calendarPlacement}>
           <Calendar
             value={value}
             onChange={onCalendarChange}

packages/vkui/src/components/DateRangeInput/DateRangeInput.tsx

@@ -317,7 +317,7 @@ export const DateRangeInput = ({
         />
       </Text>
       {open && !disableCalendar && (
-        <Popper targetRef={rootRef} offsetDistance={8} placement={calendarPlacement}>
+        <Popper targetRef={rootRef} offsetByMainAxis={8} placement={calendarPlacement}>
           <CalendarRange
             value={value}
             onChange={onCalendarChange}

packages/vkui/src/components/Popper/Popper.stories.tsx

@@ -26,7 +26,7 @@ export const Playground: Story = {
           {shown ? 'Закрыть' : 'Открыть'}
         </Button>
         {shown && (
-          <Popper forcePortal={false} offsetDistance={8} {...args} targetRef={buttonRef}>
+          <Popper forcePortal={false} offsetByMainAxis={8} {...args} targetRef={buttonRef}>
             <Div>Привет</Div>
           </Popper>
         )}

packages/vkui/src/components/Popper/Popper.test.tsx

@@ -1,68 +1,88 @@
 import * as React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import { waitForFloatingPosition } from '../../testing/utils';
-import { Popper } from './Popper';
+import { Popper, type PopperProps } from './Popper';
 
-let isReferenceHidden = false;
-jest.mock('../../lib/floating', function mockFloatingHideMiddleware() {
-  const actual = jest.requireActual('../../lib/floating');
-  return {
-    ...actual,
-    hideMiddleware(...args: any) {
-      return {
-        ...actual.hideMiddleware(...args),
-        fn: () => {
-          return {
-            data: {
-              referenceHidden: isReferenceHidden,
-            },
-          };
-        },
-      };
-    },
-  };
-});
+const TestComponent = ({
+  hideWhenReferenceHidden,
+  ...restProps
+}: Omit<PopperProps, 'targetRef'>) => {
+  const ref = React.useRef<HTMLDivElement>(null);
+  return (
+    <div>
+      <div ref={ref}>Reference element</div>
+      <Popper
+        targetRef={ref}
+        hideWhenReferenceHidden={hideWhenReferenceHidden}
+        data-testid="popper"
+        {...restProps}
+      >
+        The popper content
+      </Popper>
+    </div>
+  );
+};
 
 describe('Popper', () => {
-  describe('hideWhenReferenceHidden', () => {
-    test('hides when referece is hidden', async () => {
-      isReferenceHidden = true;
-      const TestComponent = () => {
-        const ref = React.useRef<HTMLDivElement>(null);
-        return (
-          <div>
-            <div ref={ref}>Reference element</div>
-            <Popper hideWhenReferenceHidden targetRef={ref}>
-              The popper content
-            </Popper>
-          </div>
-        );
-      };
+  it('should use arrow', async () => {
+    const result = render(<TestComponent arrow arrowProps={{ 'data-testid': 'arrow-element' }} />);
+    await waitForFloatingPosition();
+    expect(result.getByTestId('arrow-element')).toBeVisible();
+  });
+
+  it('should call onPlacementChange', async () => {
+    const onPlacementChange = jest.fn();
+    const result = render(
+      <TestComponent placement="bottom" onPlacementChange={onPlacementChange} />,
+    );
+    await waitForFloatingPosition();
+
+    expect(onPlacementChange).not.toHaveBeenCalled();
+
+    result.rerender(<TestComponent placement="auto" onPlacementChange={onPlacementChange} />);
+    await waitForFloatingPosition();
 
-      render(<TestComponent />);
-      await waitForFloatingPosition();
+    expect(onPlacementChange).toHaveBeenCalledWith('bottom');
+  });
+
+  it('should use same width', async () => {
+    const result = render(<TestComponent sameWidth />);
+    await waitForFloatingPosition();
+    expect(result.getByTestId('popper')).not.toHaveStyle('width: max-content');
+    expect(result.getByTestId('popper')).toHaveStyle('width: 0'); // в окружении jest размер не будет высчитан, поэтому 0
+  });
 
-      expect(screen.queryByText('The popper content')).not.toBeVisible();
-    });
+  it('should hides when reference is hidden', async () => {
+    const result = render(<TestComponent hideWhenReferenceHidden={false} />);
+    await waitForFloatingPosition();
 
-    test("doesn't hide when referece is not hidden", async () => {
-      isReferenceHidden = false;
-      const TestComponent = () => {
-        const ref = React.useRef<HTMLDivElement>(null);
-        return (
-          <div>
-            <div ref={ref}>Reference element</div>
-            <Popper hideWhenReferenceHidden targetRef={ref}>
-              The popper content
-            </Popper>
-          </div>
-        );
-      };
+    expect(result.getByTestId('popper')).toBeVisible();
 
-      render(<TestComponent />);
-      await waitForFloatingPosition();
+    result.rerender(<TestComponent hideWhenReferenceHidden={true} />);
+    await waitForFloatingPosition();
+
+    expect(result.getByTestId('popper')).not.toBeVisible();
+  });
 
-      expect(screen.queryByText('The popper content')).toBeVisible();
-    });
+  it('should render with virtual element', async () => {
+    const result = render(
+      <Popper
+        targetRef={{
+          getBoundingClientRect() {
+            return DOMRect.fromRect({
+              x: 10,
+              y: 10,
+              width: 100,
+              height: 100,
+            });
+          },
+        }}
+        data-testid="popper"
+      >
+        Virtual element
+      </Popper>,
+    );
+    await waitForFloatingPosition();
+    expect(result.getByTestId('popper')).toBeVisible();
   });
 });