[@mantine/core] Popover: Add inline middleware support (#2500)

docs/src/docs/changelog/5-5-0.mdx

@@ -13,6 +13,7 @@ import {
   CheckboxDemos,
   ModalDemos,
   TooltipDemos,
+  PopoverDemos,
 } from '@mantine/demos';
 
 ## Global styles on theme
@@ -74,13 +75,14 @@ components now support `error`, `description` and `labelPosition` props:
 
 <Demo data={SliderDemos.inverted} />
 
-## Inline tooltips
+## Inline Tooltip and Popover
 
-[Tooltip](https://mantine.dev/core/tooltip/) component now supports `inline` prop that makes is possible
-to position tooltip correctly when inline element is a target:
+[Tooltip](https://mantine.dev/core/tooltip/) and [Popover](https://mantine.dev/core/popover/) components now can be used with inline elements:
 
 <Demo data={TooltipDemos.inline} />
 
+<Demo data={PopoverDemos.inline} />
+
 ## Autosize Modal
 
 [Modal](https://mantine.dev/core/modal/) component now supports `size="auto"`:

docs/src/docs/core/Popover.mdx

@@ -52,10 +52,16 @@ Controlled example with focus events:
 
 ## Focus trap
 
-If you need to use any interactive elements within Popover, set `trapFocus` prop:
+If you need to use any interactive elements within `Popover`, set `trapFocus` prop:
 
 <Demo data={PopoverDemos.form} />
 
+## Inline elements
+
+Enable `inline` middleware to use `Popover` with inline elements:
+
+<Demo data={PopoverDemos.inline} />
+
 ## Same width
 
 Set `width="target"` prop to make Popover dropdown take the same width as target element:

src/mantine-core/src/Popover/Popover.story.tsx

@@ -152,3 +152,20 @@ export function WithMultiSelect() {
     </div>
   );
 }
+
+export function Inline() {
+  return (
+    <div style={{ padding: 40, maxWidth: 400 }}>
+      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vitae ipsam in quos aperiam magni
+      quas neque{' '}
+      <Popover middlewares={{ shift: true, flip: true, inline: true }} position="top">
+        <Popover.Target>
+          <span style={{ background: 'pink' }}>aliquid laboriosam dolorum</span>
+        </Popover.Target>
+        <Popover.Dropdown>Inline popover</Popover.Dropdown>
+      </Popover>
+      , eum voluptate, perferendis placeat repudiandae nesciunt explicabo quibusdam deserunt, animi
+      dicta.
+    </div>
+  );
+}

src/mantine-core/src/Popover/Popover.tsx

@@ -127,7 +127,7 @@ const defaultProps: Partial<PopoverProps> = {
   positionDependencies: [],
   transition: 'fade',
   transitionDuration: 150,
-  middlewares: { flip: true, shift: true },
+  middlewares: { flip: true, shift: true, inline: false },
   arrowSize: 7,
   arrowOffset: 5,
   closeOnClickOutside: true,

src/mantine-core/src/Popover/Popover.types.ts

@@ -10,4 +10,5 @@ export type PopoverWidth = 'target' | React.CSSProperties['width'];
 export interface PopoverMiddlewares {
   shift: boolean;
   flip: boolean;
+  inline?: boolean;
 }

src/mantine-core/src/Popover/use-popover.ts

@@ -7,6 +7,7 @@ import {
   offset,
   size,
   Middleware,
+  inline,
 } from '@floating-ui/react-dom-interactions';
 import { FloatingPosition, useFloatingAutoUpdate } from '../Floating';
 import { PopoverWidth, PopoverMiddlewares } from './Popover.types';
@@ -37,6 +38,10 @@ function getPopoverMiddlewares(options: UsePopoverOptions) {
     middlewares.push(flip());
   }
 
+  if (options.middlewares.inline) {
+    middlewares.push(inline());
+  }
+
   middlewares.push(arrow({ element: options.arrowRef }));
 
   return middlewares;

src/mantine-demos/src/demos/core/Popover/Popover.demo.inline.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { MantineDemo } from '@mantine/ds';
+import { Popover, Mark, Text } from '@mantine/core';
+
+const code = `
+import { Popover, Mark, Text } from '@mantine/core';
+
+function Demo() {
+  return (
+    <Text>
+      Stantler’s magnificent antlers were traded at high prices as works of art. As a result, this
+      Pokémon was hunted close to extinction by those who were after the priceless antlers.{' '}
+      <Popover middlewares={{ flip: true, shift: true, inline: true }} position="top">
+        <Popover.Target>
+          <Mark>When visiting a junkyard</Mark>
+        </Popover.Target>
+        <Popover.Dropdown>Inline dropdown</Popover.Dropdown>
+      </Popover>
+      , you may catch sight of it having an intense fight with Murkrow over shiny objects.Ho-Oh’s
+      feathers glow in seven colors depending on the angle at which they are struck by light. These
+      feathers are said to bring happiness to the bearers. This Pokémon is said to live at the foot
+      of a rainbow.
+    </Text>
+  );
+}
+`;
+
+function Demo() {
+  return (
+    <Text>
+      Stantler’s magnificent antlers were traded at high prices as works of art. As a result, this
+      Pokémon was hunted close to extinction by those who were after the priceless antlers.{' '}
+      <Popover middlewares={{ flip: true, shift: true, inline: true }} position="top">
+        <Popover.Target>
+          <Mark>When visiting a junkyard</Mark>
+        </Popover.Target>
+        <Popover.Dropdown>Inline dropdown</Popover.Dropdown>
+      </Popover>
+      , you may catch sight of it having an intense fight with Murkrow over shiny objects.Ho-Oh’s
+      feathers glow in seven colors depending on the angle at which they are struck by light. These
+      feathers are said to bring happiness to the bearers. This Pokémon is said to live at the foot
+      of a rainbow.
+    </Text>
+  );
+}
+
+export const inline: MantineDemo = {
+  type: 'demo',
+  component: Demo,
+  code,
+};

src/mantine-demos/src/demos/core/Popover/index.ts

@@ -3,3 +3,4 @@ export { form } from './Popover.demo.form';
 export { hover } from './Popover.demo.hover';
 export { sameWidth } from './Popover.demo.sameWidth';
 export { arrow } from './Popover.demo.arrow';
+export { inline } from './Popover.demo.inline';