feat: enable middleware configuration

Author: alburkerk

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/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,