Adding middlewares

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
 

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"
         />
       </div>
+
+      <div
+        style={{
+          width: 700,
+          position: 'relative',
+          overflow: 'hidden',
+          marginTop: '1rem',
+
+          boxSizing: 'border-box',
+        }}
+      >
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+          <span id="withoutCustomMiddleware" style={{ color: 'blue', fontWeight: 'bold' }}>
+            labore et dolore magna aliqua
+          </span>
+          . 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.
+        </p>
+
+        <Tooltip
+          place="top"
+          anchorId="withoutCustomMiddleware"
+          content="Showing tooltip with default middlewares"
+          positionStrategy="fixed"
+        />
+      </div>
+
+      <div
+        style={{
+          width: 700,
+          position: 'relative',
+          overflow: 'hidden',
+          marginTop: '1rem',
+
+          boxSizing: 'border-box',
+        }}
+      >
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+          <span id="withCustomMiddleware" style={{ color: 'blue', fontWeight: 'bold' }}>
+            labore et dolore magna aliqua
+          </span>
+          . 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.
+        </p>
+
+        <Tooltip
+          place="top"
+          anchorId="withCustomMiddleware"
+          content="Showing tooltip with custom inline middleware"
+          positionStrategy="fixed"
+          middlewares={[inline(), offset(10)]}
+        />
+      </div>
     </main>
   )
 }

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

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

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,

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

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 {

src/utils/compute-positions-types.d.ts

@@ -1,8 +1,11 @@
+import type { Middleware } from '../components/Tooltip/TooltipTypes'
+
 export interface IComputePositions {
   elementReference?: Element | HTMLElement | null
   tooltipReference?: Element | HTMLElement | null
   tooltipArrowReference?: Element | HTMLElement | null
   place?: 'top' | 'right' | 'bottom' | 'left'
   offset?: number
   strategy?: 'absolute' | 'fixed'
+  middlewares?: Middleware[]
 }

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,