From c55a76cd0991e83c9203dc03b76e9808fd61328f Mon Sep 17 00:00:00 2001 From: Vitaly Rtishchev Date: Sun, 2 Oct 2022 11:56:24 +0400 Subject: [PATCH] [@mantine/core] Popover: Add inline middleware support (#2500) --- docs/src/docs/changelog/5-5-0.mdx | 8 +-- docs/src/docs/core/Popover.mdx | 8 ++- .../src/Popover/Popover.story.tsx | 17 +++++++ src/mantine-core/src/Popover/Popover.tsx | 2 +- src/mantine-core/src/Popover/Popover.types.ts | 1 + src/mantine-core/src/Popover/use-popover.ts | 5 ++ .../core/Popover/Popover.demo.inline.tsx | 51 +++++++++++++++++++ .../src/demos/core/Popover/index.ts | 1 + 8 files changed, 88 insertions(+), 5 deletions(-) create mode 100644 src/mantine-demos/src/demos/core/Popover/Popover.demo.inline.tsx diff --git a/docs/src/docs/changelog/5-5-0.mdx b/docs/src/docs/changelog/5-5-0.mdx index 78ea148c641..b9e36543036 100644 --- a/docs/src/docs/changelog/5-5-0.mdx +++ b/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: -## 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: + + ## Autosize Modal [Modal](https://mantine.dev/core/modal/) component now supports `size="auto"`: diff --git a/docs/src/docs/core/Popover.mdx b/docs/src/docs/core/Popover.mdx index e7252e0191e..50172997c41 100644 --- a/docs/src/docs/core/Popover.mdx +++ b/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: +## Inline elements + +Enable `inline` middleware to use `Popover` with inline elements: + + + ## Same width Set `width="target"` prop to make Popover dropdown take the same width as target element: diff --git a/src/mantine-core/src/Popover/Popover.story.tsx b/src/mantine-core/src/Popover/Popover.story.tsx index 746502c47fd..e3b902307e8 100644 --- a/src/mantine-core/src/Popover/Popover.story.tsx +++ b/src/mantine-core/src/Popover/Popover.story.tsx @@ -152,3 +152,20 @@ export function WithMultiSelect() { ); } + +export function Inline() { + return ( +
+ Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vitae ipsam in quos aperiam magni + quas neque{' '} + + + aliquid laboriosam dolorum + + Inline popover + + , eum voluptate, perferendis placeat repudiandae nesciunt explicabo quibusdam deserunt, animi + dicta. +
+ ); +} diff --git a/src/mantine-core/src/Popover/Popover.tsx b/src/mantine-core/src/Popover/Popover.tsx index 990c1d4bf49..ef4a5cf2947 100644 --- a/src/mantine-core/src/Popover/Popover.tsx +++ b/src/mantine-core/src/Popover/Popover.tsx @@ -127,7 +127,7 @@ const defaultProps: Partial = { positionDependencies: [], transition: 'fade', transitionDuration: 150, - middlewares: { flip: true, shift: true }, + middlewares: { flip: true, shift: true, inline: false }, arrowSize: 7, arrowOffset: 5, closeOnClickOutside: true, diff --git a/src/mantine-core/src/Popover/Popover.types.ts b/src/mantine-core/src/Popover/Popover.types.ts index 18afdcab06a..1d3049a1797 100644 --- a/src/mantine-core/src/Popover/Popover.types.ts +++ b/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; } diff --git a/src/mantine-core/src/Popover/use-popover.ts b/src/mantine-core/src/Popover/use-popover.ts index 684656c5964..478c6e28d46 100644 --- a/src/mantine-core/src/Popover/use-popover.ts +++ b/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; diff --git a/src/mantine-demos/src/demos/core/Popover/Popover.demo.inline.tsx b/src/mantine-demos/src/demos/core/Popover/Popover.demo.inline.tsx new file mode 100644 index 00000000000..f6a180dfee4 --- /dev/null +++ b/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 ( + + 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.{' '} + + + When visiting a junkyard + + Inline dropdown + + , 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. + + ); +} +`; + +function Demo() { + return ( + + 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.{' '} + + + When visiting a junkyard + + Inline dropdown + + , 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. + + ); +} + +export const inline: MantineDemo = { + type: 'demo', + component: Demo, + code, +}; diff --git a/src/mantine-demos/src/demos/core/Popover/index.ts b/src/mantine-demos/src/demos/core/Popover/index.ts index 30af08e1cb8..b66d88f3a51 100644 --- a/src/mantine-demos/src/demos/core/Popover/index.ts +++ b/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';