fix(Tooltip): rewrite to functional components with React Hooks

packages/dnb-eufemia/.eslintrc

@@ -132,6 +132,7 @@
           "error",
           { "args": "none", "ignoreRestSiblings": true }
         ],
+        "react/prop-types": "off",
         "react/require-default-props": "off"
       }
     }

packages/dnb-eufemia/src/components/dialog/__tests__/__snapshots__/Dialog.test.tsx.snap

@@ -484,7 +484,7 @@ exports[`Dialog component snapshot should match component snapshot 1`] = `
               group="dialog_id-tooltip"
               hide_delay={500}
               id="dialog_id-tooltip"
-              internal_id="dialog_id-tooltip"
+              internalId="dialog_id-tooltip"
               no_animation={false}
               position="top"
               show_delay={300}
@@ -587,12 +587,11 @@ exports[`Dialog component snapshot should match component snapshot 1`] = `
                   }
                 }
                 className={null}
-                clientX={null}
                 fixed_position={false}
                 group="dialog_id-tooltip"
                 hide_delay={500}
                 id="dialog_id-tooltip"
-                internal_id="dialog_id-tooltip"
+                internalId="dialog_id-tooltip"
                 key="tooltip"
                 no_animation={false}
                 position="top"

packages/dnb-eufemia/src/components/drawer/__tests__/__snapshots__/Drawer.test.tsx.snap

@@ -482,7 +482,7 @@ exports[`Drawer component snapshot should match component snapshot 1`] = `
               group="drawer_id-tooltip"
               hide_delay={500}
               id="drawer_id-tooltip"
-              internal_id="drawer_id-tooltip"
+              internalId="drawer_id-tooltip"
               no_animation={false}
               position="top"
               show_delay={300}
@@ -585,12 +585,11 @@ exports[`Drawer component snapshot should match component snapshot 1`] = `
                   }
                 }
                 className={null}
-                clientX={null}
                 fixed_position={false}
                 group="drawer_id-tooltip"
                 hide_delay={500}
                 id="drawer_id-tooltip"
-                internal_id="drawer_id-tooltip"
+                internalId="drawer_id-tooltip"
                 key="tooltip"
                 no_animation={false}
                 position="top"

packages/dnb-eufemia/src/components/modal/__tests__/__snapshots__/Modal.test.tsx.snap

@@ -473,7 +473,7 @@ exports[`Modal component have to match snapshot 1`] = `
             group="modal_id-tooltip"
             hide_delay={500}
             id="modal_id-tooltip"
-            internal_id="modal_id-tooltip"
+            internalId="modal_id-tooltip"
             no_animation={false}
             position="top"
             show_delay={300}
@@ -576,12 +576,11 @@ exports[`Modal component have to match snapshot 1`] = `
                 }
               }
               className={null}
-              clientX={null}
               fixed_position={false}
               group="modal_id-tooltip"
               hide_delay={500}
               id="modal_id-tooltip"
-              internal_id="modal_id-tooltip"
+              internalId="modal_id-tooltip"
               key="tooltip"
               no_animation={false}
               position="top"

packages/dnb-eufemia/src/components/tooltip/Tooltip.tsx

@@ -8,140 +8,113 @@ import classnames from 'classnames'
 import Context from '../../shared/Context'
 import {
   makeUniqueId,
-  registerElement,
   validateDOMAttributes,
-  processChildren,
   isTrue,
 } from '../../shared/component-helper'
 import { createSpacingClasses } from '../space/SpacingHelper'
 import TooltipContainer from './TooltipContainer'
 import TooltipWithEvents from './TooltipWithEvents'
 import TooltipPortal from './TooltipPortal'
-import { defaultProps, injectTooltipSemantic } from './TooltipHelpers'
+import {
+  defaultProps,
+  getPropsFromTooltipProp,
+  injectTooltipSemantic,
+} from './TooltipHelpers'
 import { ISpacingProps } from '../../shared/interfaces'
 import { TooltipProps } from './types'
 import { includeValidProps } from '../form-row/FormRowHelpers'
 
-export { injectTooltipSemantic }
-
-export default class Tooltip extends React.PureComponent<
-  TooltipProps & ISpacingProps
-> {
-  _id: string
+function Tooltip(localProps: TooltipProps & ISpacingProps) {
+  const context = React.useContext(Context)
 
-  static tagName = 'dnb-tooltip'
-  static contextType = Context
+  const inherited = getPropsFromTooltipProp(localProps)
 
-  static enableWebComponent() {
-    registerElement(Tooltip?.tagName, Tooltip, defaultProps)
+  // use only the props from context, who are available here anyway
+  const props = {
+    ...defaultProps,
+    ...localProps,
+    ...inherited,
+    ...context.getTranslation(localProps).Tooltip,
+    ...includeValidProps(context.FormRow),
+    ...context.Tooltip,
   }
 
-  static getContent(props) {
-    return processChildren(props)
+  const {
+    target_element,
+    target_selector,
+    className,
+    id, // eslint-disable-line
+    tooltip, // eslint-disable-line
+    group,
+    size,
+    animate_position, // eslint-disable-line
+    fixed_position, // eslint-disable-line
+    skip_portal,
+    no_animation, // eslint-disable-line
+    show_delay, // eslint-disable-line
+    hide_delay, // eslint-disable-line
+    active, // eslint-disable-line
+    position, // eslint-disable-line
+    arrow, // eslint-disable-line
+    align, // eslint-disable-line
+    ...params
+  } = props
+
+  const [internalId] = React.useState(() => props.id || makeUniqueId()) // cause we need an id anyway
+  props.internalId = internalId
+  props.group = group || localProps.id || 'main-' + props.internalId
+
+  const classes = classnames(
+    'dnb-tooltip',
+    size === 'large' && 'dnb-tooltip--large',
+    createSpacingClasses(props),
+    className
+  )
+
+  const attributes = {
+    className: classes,
+    ...params,
   }
 
-  getPropsFromTooltipProp() {
-    return this.props.tooltip
-      ? React.isValidElement(this.props.tooltip) &&
-        this.props.tooltip.props
-        ? this.props.tooltip.props
-        : { children: this.props.tooltip }
-      : null
-  }
+  // also used for code markup simulation
+  validateDOMAttributes(localProps, attributes)
 
-  constructor(props) {
-    super(props)
-    this._id = props.id || makeUniqueId() // cause we need an id anyway
+  if (!isTrue(props.active)) {
+    delete props.active
   }
 
-  render() {
-    const inherited = this.getPropsFromTooltipProp()
-
-    // use only the props from context, who are available here anyway
-    const props = {
-      ...defaultProps,
-      ...this.props,
-      ...inherited,
-      ...this.context.getTranslation(this.props).Tooltip,
-      ...includeValidProps(this.context.FormRow),
-      ...this.context.Tooltip,
-    }
-
-    const {
-      target_element,
-      target_selector,
-      className,
-      id, // eslint-disable-line
-      tooltip, // eslint-disable-line
-      group,
-      size,
-      animate_position, // eslint-disable-line
-      fixed_position, // eslint-disable-line
-      skip_portal,
-      no_animation, // eslint-disable-line
-      show_delay, // eslint-disable-line
-      hide_delay, // eslint-disable-line
-      active, // eslint-disable-line
-      position, // eslint-disable-line
-      arrow, // eslint-disable-line
-      align, // eslint-disable-line
-      ...params
-    } = props
-
-    props.internal_id = this._id
-    props.group = this.props.id || group || 'main-' + this._id
-
-    const content = Tooltip.getContent(props)
-
-    const classes = classnames(
-      'dnb-tooltip',
-      size === 'large' && 'dnb-tooltip--large',
-      createSpacingClasses(props),
-      className
-    )
-
-    const attributes = {
-      className: classes,
-      ...params,
-    }
-
-    // also used for code markup simulation
-    validateDOMAttributes(this.props, attributes)
-
-    if (!isTrue(props.active)) {
-      delete props.active
-    }
-
-    return (
-      <>
-        {skip_portal ? (
-          <TooltipContainer
-            target={target_element}
+  return (
+    <>
+      {skip_portal ? (
+        <TooltipContainer
+          target={target_element}
+          attributes={attributes}
+          {...props}
+        >
+          {props.children}
+        </TooltipContainer>
+      ) : target_element ? (
+        <TooltipWithEvents
+          target={target_element}
+          attributes={attributes}
+          {...props}
+        >
+          {props.children}
+        </TooltipWithEvents>
+      ) : (
+        target_selector && (
+          <TooltipPortal
+            target={target_selector}
             attributes={attributes}
             {...props}
           >
-            {content}
-          </TooltipContainer>
-        ) : target_element ? (
-          <TooltipWithEvents
-            target={target_element}
-            attributes={attributes}
-            {...props}
-          >
-            {content}
-          </TooltipWithEvents>
-        ) : (
-          target_selector && (
-            <TooltipPortal
-              target={target_selector}
-              attributes={attributes}
-              {...props}
-            >
-              {content}
-            </TooltipPortal>
-          )
-        )}
-      </>
-    )
-  }
+            {props.children}
+          </TooltipPortal>
+        )
+      )}
+    </>
+  )
 }
+
+export { injectTooltipSemantic }
+export default Tooltip