From 64f80869b9f2247ef702b04dd1a7e17d9daa6af0 Mon Sep 17 00:00:00 2001 From: alburkerk <20537949+alburkerk@users.noreply.github.com> Date: Thu, 19 Jan 2023 12:30:54 +0100 Subject: [PATCH 1/4] feat: enable middleware configuration --- src/components/Tooltip/Tooltip.tsx | 3 +++ src/components/Tooltip/TooltipTypes.d.ts | 4 ++++ src/components/TooltipController/TooltipController.tsx | 2 ++ .../TooltipController/TooltipControllerTypes.d.ts | 2 ++ src/utils/compute-positions-types.d.ts | 3 +++ src/utils/compute-positions.ts | 6 ++++-- 6 files changed, 18 insertions(+), 2 deletions(-) diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx index 9cc8624ef..b278f7210 100644 --- a/src/components/Tooltip/Tooltip.tsx +++ b/src/components/Tooltip/Tooltip.tsx @@ -18,6 +18,7 @@ const Tooltip = ({ offset = 10, events = ['hover'], positionStrategy = 'absolute', + middlewares, wrapper: WrapperElement = 'div', children = null, delayShow = 0, @@ -150,6 +151,7 @@ const Tooltip = ({ tooltipReference: tooltipRef.current, tooltipArrowReference: tooltipArrowRef.current, strategy: positionStrategy, + middlewares, }).then((computedStylesData) => { setCalculatingPosition(false) if (Object.keys(computedStylesData.tooltipStyles).length) { @@ -299,6 +301,7 @@ const Tooltip = ({ tooltipReference: tooltipRef.current, tooltipArrowReference: tooltipArrowRef.current, strategy: positionStrategy, + middlewares, }).then((computedStylesData) => { if (!mounted) { // invalidate computed positions after remount diff --git a/src/components/Tooltip/TooltipTypes.d.ts b/src/components/Tooltip/TooltipTypes.d.ts index a993b0cdc..1e03cca2f 100644 --- a/src/components/Tooltip/TooltipTypes.d.ts +++ b/src/components/Tooltip/TooltipTypes.d.ts @@ -1,4 +1,5 @@ import type { ElementType, ReactNode, CSSProperties } from 'react' +import type { Middleware } from '@floating-ui/dom' export type PlacesType = 'top' | 'right' | 'bottom' | 'left' @@ -12,6 +13,8 @@ export type EventsType = 'hover' | 'click' export type PositionStrategy = 'absolute' | 'fixed' +export type Middleware = Middleware + export type DataAttribute = | 'place' | 'content' @@ -44,6 +47,7 @@ export interface ITooltip { children?: ChildrenType events?: EventsType[] positionStrategy?: PositionStrategy + middlewares?: Middleware[] delayShow?: number delayHide?: number float?: boolean diff --git a/src/components/TooltipController/TooltipController.tsx b/src/components/TooltipController/TooltipController.tsx index c14c292f3..6751eeb06 100644 --- a/src/components/TooltipController/TooltipController.tsx +++ b/src/components/TooltipController/TooltipController.tsx @@ -26,6 +26,7 @@ const TooltipController = ({ children = null, events = ['hover'], positionStrategy = 'absolute', + middlewares, delayShow = 0, delayHide = 0, float = false, @@ -180,6 +181,7 @@ const TooltipController = ({ wrapper: tooltipWrapper, events: tooltipEvents, positionStrategy: tooltipPositionStrategy, + middlewares, delayShow: tooltipDelayShow, delayHide: tooltipDelayHide, float: tooltipFloat, diff --git a/src/components/TooltipController/TooltipControllerTypes.d.ts b/src/components/TooltipController/TooltipControllerTypes.d.ts index fe977bc9b..27ad5c8d0 100644 --- a/src/components/TooltipController/TooltipControllerTypes.d.ts +++ b/src/components/TooltipController/TooltipControllerTypes.d.ts @@ -8,6 +8,7 @@ import type { EventsType, PositionStrategy, IPosition, + Middleware, } from 'components/Tooltip/TooltipTypes' export interface ITooltipController { @@ -24,6 +25,7 @@ export interface ITooltipController { children?: ChildrenType events?: EventsType[] positionStrategy?: PositionStrategy + middlewares?: Middleware[] delayShow?: number delayHide?: number float?: boolean diff --git a/src/utils/compute-positions-types.d.ts b/src/utils/compute-positions-types.d.ts index 79cfc3d65..baa0596c9 100644 --- a/src/utils/compute-positions-types.d.ts +++ b/src/utils/compute-positions-types.d.ts @@ -1,3 +1,5 @@ +import type { Middleware } from '../components/Tooltip/TooltipTypes' + export interface IComputePositions { elementReference?: Element | HTMLElement | null tooltipReference?: Element | HTMLElement | null @@ -5,4 +7,5 @@ export interface IComputePositions { place?: 'top' | 'right' | 'bottom' | 'left' offset?: number strategy?: 'absolute' | 'fixed' + middlewares?: Middleware[] } diff --git a/src/utils/compute-positions.ts b/src/utils/compute-positions.ts index 435ad45a9..c978b2807 100644 --- a/src/utils/compute-positions.ts +++ b/src/utils/compute-positions.ts @@ -1,4 +1,4 @@ -import { computePosition, offset, flip, shift, arrow } from '@floating-ui/dom' +import { computePosition, offset, shift, arrow, flip } from '@floating-ui/dom' import type { IComputePositions } from './compute-positions-types' export const computeTooltipPosition = async ({ @@ -8,6 +8,7 @@ export const computeTooltipPosition = async ({ place = 'top', offset: offsetValue = 10, strategy = 'absolute', + middlewares = [offset(Number(offsetValue)), flip(), shift({ padding: 5 })], }: IComputePositions) => { if (!elementReference) { // elementReference can be null or undefined and we will not compute the position @@ -20,10 +21,11 @@ export const computeTooltipPosition = async ({ return { tooltipStyles: {}, tooltipArrowStyles: {} } } - const middleware = [offset(Number(offsetValue)), flip(), shift({ padding: 5 })] + const middleware = middlewares if (tooltipArrowReference) { middleware.push(arrow({ element: tooltipArrowReference as HTMLElement, padding: 5 })) + return computePosition(elementReference as HTMLElement, tooltipReference as HTMLElement, { placement: place, strategy, From 2d22608874c1e3f84c162f38c9a083f10085e27c Mon Sep 17 00:00:00 2001 From: alburkerk <20537949+alburkerk@users.noreply.github.com> Date: Thu, 19 Jan 2023 12:31:20 +0100 Subject: [PATCH 2/4] feat: export relevant middlewares from barrel file --- src/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/index.tsx b/src/index.tsx index 32b260291..ef2692563 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -12,6 +12,7 @@ import type { import type { ITooltipController } from './components/TooltipController/TooltipControllerTypes' import type { ITooltipWrapper } from './components/TooltipProvider/TooltipProviderTypes' +export { offset, inline, shift, flip, autoPlacement, size } from '@floating-ui/dom' export { TooltipController as Tooltip } from './components/TooltipController' export { TooltipProvider, TooltipWrapper } from './components/TooltipProvider' export type { From 50cc34593ef9995fa3f3fe4d77808df9da7cf21e Mon Sep 17 00:00:00 2001 From: alburkerk <20537949+alburkerk@users.noreply.github.com> Date: Thu, 19 Jan 2023 12:31:38 +0100 Subject: [PATCH 3/4] feat: add exemple in App.tsx --- src/App.tsx | 60 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 60 insertions(+) diff --git a/src/App.tsx b/src/App.tsx index 3e90a1934..8dd198ada 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -5,6 +5,7 @@ import { TooltipProvider, TooltipWrapper } from 'components/TooltipProvider' import { IPosition } from 'components/Tooltip/TooltipTypes.d' import { useState } from 'react' import styles from './styles.module.css' +import { inline, offset } from './index' function WithProviderMinimal() { return ( @@ -202,6 +203,65 @@ function App() { content="Showing tooltip and calling afterShow method" /> + +
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt + + labore et dolore magna aliqua + + . Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum + dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in + culpa qui officia deserunt mollit anim id est laborum. +

+ + +
+ +
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt + + labore et dolore magna aliqua + + . Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum + dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in + culpa qui officia deserunt mollit anim id est laborum. +

+ + +
) } From 5719472a27327f18ac2fe5342634fd18e44570c7 Mon Sep 17 00:00:00 2001 From: Gabriel Jablonski Date: Mon, 23 Jan 2023 09:51:41 -0300 Subject: [PATCH 4/4] docs: add `middlewares` prop to options list --- docs/docs/options.mdx | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/docs/options.mdx b/docs/docs/options.mdx index 65e163e6d..28644cda3 100644 --- a/docs/docs/options.mdx +++ b/docs/docs/options.mdx @@ -75,6 +75,7 @@ import 'react-tooltip/dist/react-tooltip.css' | setIsOpen | function | false | | | the tooltip can be controlled or uncontrolled, this attribute can be used to handle show and hide tooltip outside tooltip | | afterShow | function | false | | | a function to be called after the tooltip is shown | | afterHide | function | false | | | a function to be called after the tooltip is hidden | +| middlewares | array | false | | array of valid `floating-ui` middlewares | allows for advanced customization. check the [`floating-ui` docs](https://floating-ui.com/docs/middleware) for more information | ### Data attributes