chore: remove deprecated events props and ChildrenType -> ReactNode

Author: gabrieljablonski

src/App.tsx

@@ -157,7 +157,7 @@ function App() {
           <Tooltip
             anchorSelect="#onClickAnchor"
             content={`This is an on click tooltip (x:${position.x},y:${position.y})`}
-            events={['click']}
+            openOnClick
             position={position}
             positionStrategy="fixed"
           />
@@ -197,7 +197,7 @@ function App() {
 
         <button id="buttonCallbacksClick">With click event</button>
         <Tooltip
-          events={['click']}
+          openOnClick
           place="bottom"
           anchorSelect="#buttonCallbacksClick"
           // eslint-disable-next-line no-console

src/components/Tooltip/Tooltip.tsx

@@ -32,7 +32,6 @@ const Tooltip = ({
   anchorSelect,
   place = 'top',
   offset = 10,
-  events = ['hover'],
   openOnClick = false,
   positionStrategy = 'absolute',
   middlewares,
@@ -43,9 +42,6 @@ const Tooltip = ({
   hidden = false,
   noArrow = false,
   clickable = false,
-  closeOnEsc = false,
-  closeOnScroll = false,
-  closeOnResize = false,
   openEvents,
   closeEvents,
   globalCloseEvents,
@@ -88,12 +84,8 @@ const Tooltip = ({
   const [anchorElements, setAnchorElements] = useState<HTMLElement[]>([])
   const mounted = useRef(false)
 
-  /**
-   * @todo Update when deprecated stuff gets removed.
-   */
-  const shouldOpenOnClick = openOnClick || events.includes('click')
   const hasClickEvent =
-    shouldOpenOnClick || openEvents?.click || openEvents?.dblclick || openEvents?.mousedown
+    openOnClick || openEvents?.click || openEvents?.dblclick || openEvents?.mousedown
   const actualOpenEvents: AnchorOpenEvents = openEvents
     ? { ...openEvents }
     : {
@@ -104,7 +96,7 @@ const Tooltip = ({
         dblclick: false,
         mousedown: false,
       }
-  if (!openEvents && shouldOpenOnClick) {
+  if (!openEvents && openOnClick) {
     Object.assign(actualOpenEvents, {
       mouseenter: false,
       focus: false,
@@ -122,7 +114,7 @@ const Tooltip = ({
         dblclick: false,
         mouseup: false,
       }
-  if (!closeEvents && shouldOpenOnClick) {
+  if (!closeEvents && openOnClick) {
     Object.assign(actualCloseEvents, {
       mouseleave: false,
       blur: false,
@@ -132,9 +124,9 @@ const Tooltip = ({
   const actualGlobalCloseEvents: GlobalCloseEvents = globalCloseEvents
     ? { ...globalCloseEvents }
     : {
-        escape: closeOnEsc || false,
-        scroll: closeOnScroll || false,
-        resize: closeOnResize || false,
+        escape: false,
+        scroll: false,
+        resize: false,
         clickOutsideAnchor: hasClickEvent || false,
       }
 
@@ -618,7 +610,7 @@ const Tooltip = ({
     openEvents,
     closeEvents,
     globalCloseEvents,
-    shouldOpenOnClick,
+    hasClickEvent,
     delayShow,
     delayHide,
   ])

src/components/Tooltip/TooltipTypes.d.ts

@@ -1,4 +1,4 @@
-import type { ElementType, ReactNode, CSSProperties, RefObject } from 'react'
+import type { ElementType, CSSProperties, RefObject, ReactNode } from 'react'
 
 export type PlacesType =
   | 'top'
@@ -18,10 +18,6 @@ export type VariantType = 'dark' | 'light' | 'success' | 'warning' | 'error' | '
 
 export type WrapperType = ElementType | 'div' | 'span'
 
-export type ChildrenType = Element | ElementType | ReactNode
-
-export type EventsType = 'hover' | 'click'
-
 export type PositionStrategy = 'absolute' | 'fixed'
 
 export type DataAttribute =
@@ -30,7 +26,6 @@ export type DataAttribute =
   | 'variant'
   | 'offset'
   | 'wrapper'
-  | 'events'
   | 'position-strategy'
   | 'delay-show'
   | 'delay-hide'
@@ -53,7 +48,7 @@ export interface TooltipImperativeOpenOptions {
   anchorSelect?: string
   position?: IPosition
   place?: PlacesType
-  content?: ChildrenType
+  content?: ReactNode
   /**
    * @description Delay (in ms) before opening the tooltip.
    */
@@ -111,18 +106,14 @@ export interface ITooltip {
   forwardRef?: React.ForwardedRef<TooltipRefProps>
   className?: string
   classNameArrow?: string
-  content?: ChildrenType
+  content?: ReactNode
   contentWrapperRef?: RefObject<HTMLDivElement>
   place?: PlacesType
   offset?: number
   id?: string
   variant?: VariantType
   anchorSelect?: string
   wrapper: WrapperType
-  /**
-   * @deprecated Use `openOnClick` instead.
-   */
-  events?: EventsType[]
   openOnClick?: boolean
   positionStrategy?: PositionStrategy
   middlewares?: Middleware[]
@@ -132,9 +123,6 @@ export interface ITooltip {
   hidden?: boolean
   noArrow?: boolean
   clickable?: boolean
-  closeOnEsc?: boolean
-  closeOnScroll?: boolean
-  closeOnResize?: boolean
   openEvents?: AnchorOpenEvents
   closeEvents?: AnchorCloseEvents
   globalCloseEvents?: GlobalCloseEvents

src/components/TooltipController/TooltipController.tsx

@@ -1,14 +1,12 @@
 import React, { useEffect, useRef, useState } from 'react'
 import { Tooltip } from 'components/Tooltip'
 import type {
-  EventsType,
   PositionStrategy,
   PlacesType,
   VariantType,
   WrapperType,
   DataAttribute,
   ITooltip,
-  ChildrenType,
   TooltipRefProps,
 } from 'components/Tooltip/TooltipTypes'
 import { cssSupports } from 'utils'
@@ -29,7 +27,6 @@ const TooltipController = React.forwardRef<TooltipRefProps, ITooltipController>(
       offset = 10,
       wrapper = 'div',
       children = null,
-      events = ['hover'],
       openOnClick = false,
       positionStrategy = 'absolute',
       middlewares,
@@ -39,9 +36,6 @@ const TooltipController = React.forwardRef<TooltipRefProps, ITooltipController>(
       hidden = false,
       noArrow = false,
       clickable = false,
-      closeOnEsc = false,
-      closeOnScroll = false,
-      closeOnResize = false,
       openEvents,
       closeEvents,
       globalCloseEvents,
@@ -70,7 +64,6 @@ const TooltipController = React.forwardRef<TooltipRefProps, ITooltipController>(
     const [tooltipFloat, setTooltipFloat] = useState(float)
     const [tooltipHidden, setTooltipHidden] = useState(hidden)
     const [tooltipWrapper, setTooltipWrapper] = useState<WrapperType>(wrapper)
-    const [tooltipEvents, setTooltipEvents] = useState(events)
     const [tooltipPositionStrategy, setTooltipPositionStrategy] = useState(positionStrategy)
     const [tooltipClassName, setTooltipClassName] = useState<string | null>(null)
     const [activeAnchor, setActiveAnchor] = useState<HTMLElement | null>(null)
@@ -107,10 +100,6 @@ const TooltipController = React.forwardRef<TooltipRefProps, ITooltipController>(
         wrapper: (value) => {
           setTooltipWrapper((value as WrapperType) ?? wrapper)
         },
-        events: (value) => {
-          const parsed = value?.split(' ') as EventsType[]
-          setTooltipEvents(parsed ?? events)
-        },
         'position-strategy': (value) => {
           setTooltipPositionStrategy((value as PositionStrategy) ?? positionStrategy)
         },
@@ -263,7 +252,7 @@ const TooltipController = React.forwardRef<TooltipRefProps, ITooltipController>(
      * content priority: children < render or content < html
      * children should be lower priority so that it can be used as the "default" content
      */
-    let renderedContent: ChildrenType = children
+    let renderedContent = children
     const contentWrapperRef = useRef<HTMLDivElement>(null)
     if (render) {
       const actualContent =
@@ -290,7 +279,6 @@ const TooltipController = React.forwardRef<TooltipRefProps, ITooltipController>(
       variant: tooltipVariant,
       offset: tooltipOffset,
       wrapper: tooltipWrapper,
-      events: tooltipEvents,
       openOnClick,
       positionStrategy: tooltipPositionStrategy,
       middlewares,
@@ -300,9 +288,6 @@ const TooltipController = React.forwardRef<TooltipRefProps, ITooltipController>(
       hidden: tooltipHidden,
       noArrow,
       clickable,
-      closeOnEsc,
-      closeOnScroll,
-      closeOnResize,
       openEvents,
       closeEvents,
       globalCloseEvents,

src/components/TooltipController/TooltipControllerTypes.d.ts

@@ -1,11 +1,9 @@
-import type { CSSProperties } from 'react'
+import type { CSSProperties, ReactNode } from 'react'
 
 import type {
   PlacesType,
   VariantType,
   WrapperType,
-  ChildrenType,
-  EventsType,
   PositionStrategy,
   IPosition,
   Middleware,
@@ -18,18 +16,14 @@ export interface ITooltipController {
   className?: string
   classNameArrow?: string
   content?: string
-  render?: (render: { content: string | null; activeAnchor: HTMLElement | null }) => ChildrenType
+  render?: (render: { content: string | null; activeAnchor: HTMLElement | null }) => ReactNode
   place?: PlacesType
   offset?: number
   id?: string
   variant?: VariantType
   anchorSelect?: string
   wrapper?: WrapperType
-  children?: ChildrenType
-  /**
-   * @deprecated Use `openOnClick` or `openEvents`/`closeEvents` instead.
-   */
-  events?: EventsType[]
+  children?: ReactNode
   openOnClick?: boolean
   positionStrategy?: PositionStrategy
   middlewares?: Middleware[]
@@ -39,18 +33,6 @@ export interface ITooltipController {
   hidden?: boolean
   noArrow?: boolean
   clickable?: boolean
-  /**
-   * @deprecated Use `globalCloseEvents={{ escape: true }}` instead.
-   */
-  closeOnEsc?: boolean
-  /**
-   * @deprecated Use `globalCloseEvents={{ scroll: true }}` instead.
-   */
-  closeOnScroll?: boolean
-  /**
-   * @deprecated Use `globalCloseEvents={{ resize: true }}` instead.
-   */
-  closeOnResize?: boolean
   /**
    * @description The events to be listened on anchor elements to open the tooltip.
    */
@@ -97,10 +79,6 @@ declare module 'react' {
     'data-tooltip-variant'?: VariantType
     'data-tooltip-offset'?: number
     'data-tooltip-wrapper'?: WrapperType
-    /**
-     * @deprecated Use `openOnClick` tooltip prop instead.
-     */
-    'data-tooltip-events'?: EventsType[]
     'data-tooltip-position-strategy'?: PositionStrategy
     'data-tooltip-delay-show'?: number
     'data-tooltip-delay-hide'?: number

src/index.tsx

@@ -3,9 +3,7 @@ import './tokens.css'
 import { injectStyle } from 'utils/handle-style'
 
 import type {
-  ChildrenType,
   DataAttribute,
-  EventsType,
   PlacesType,
   PositionStrategy,
   VariantType,
@@ -35,9 +33,7 @@ if (typeof window !== 'undefined') {
 
 export { TooltipController as Tooltip } from './components/TooltipController'
 export type {
-  ChildrenType,
   DataAttribute,
-  EventsType,
   PlacesType,
   PositionStrategy,
   VariantType,