@dnb/eufemia 9.31.0 → 9.32.1

package/es/components/tag/TagGroup.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ISpacingProps } from '../../shared/interfaces';
+import { SpacingProps } from '../../shared/types';
 import { SkeletonShow } from '../skeleton/Skeleton';
 export interface TagGroupProps {
     /**
@@ -29,5 +29,5 @@ export declare const defaultProps: {
     children: any;
     skeleton: boolean;
 };
-declare const TagGroup: (localProps: TagGroupProps & ISpacingProps) => JSX.Element;
+declare const TagGroup: (localProps: TagGroupProps & SpacingProps) => JSX.Element;
 export default TagGroup;

package/es/components/timeline/Timeline.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ISpacingProps } from '../../shared/interfaces';
+import { SpacingProps } from '../../shared/types';
 import { SkeletonShow } from '../skeleton/Skeleton';
 import TimelineItem, { TimelineItemProps } from './TimelineItem';
 export interface TimelineProps {
@@ -31,7 +31,7 @@ export declare const defaultProps: {
     children: any;
 };
 declare const Timeline: {
-    (localProps: TimelineProps & ISpacingProps): JSX.Element;
+    (localProps: TimelineProps & SpacingProps): JSX.Element;
     Item: (localProps: TimelineItemProps) => JSX.Element;
 };
 export { TimelineItem };

package/es/components/tooltip/Tooltip.js

@@ -10,12 +10,10 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import React from 'react';
 import classnames from 'classnames';
 import Context from '../../shared/Context';
-import { makeUniqueId, validateDOMAttributes, isTrue } from '../../shared/component-helper';
+import { makeUniqueId, validateDOMAttributes } from '../../shared/component-helper';
 import { createSpacingClasses } from '../space/SpacingHelper';
-import TooltipContainer from './TooltipContainer';
 import TooltipWithEvents from './TooltipWithEvents';
-import TooltipPortal from './TooltipPortal';
-import { defaultProps, getPropsFromTooltipProp, injectTooltipSemantic } from './TooltipHelpers';
+import { defaultProps, getPropsFromTooltipProp, getRefElement, getTargetElement, injectTooltipSemantic } from './TooltipHelpers';
 import { convertSnakeCaseProps } from '../../shared/helpers/withSnakeCaseProps';
 
 function Tooltip(localProps) {
@@ -44,8 +42,14 @@ function Tooltip(localProps) {
   } = props,
         params = _objectWithoutProperties(props, _excluded);
 
+  const target = targetElement || targetSelector;
+  const [element, setElement] = React.useState();
   const [internalId] = React.useState(() => props.id || makeUniqueId());
   props.internalId = internalId;
+  React.useEffect(() => {
+    const element = getTargetElement(getRefElement(target));
+    setElement(element);
+  }, [target]);
   const classes = classnames('dnb-tooltip', createSpacingClasses(props), className, size === 'large' && 'dnb-tooltip--large');
 
   const attributes = _objectSpread({
@@ -54,20 +58,14 @@ function Tooltip(localProps) {
 
   validateDOMAttributes(localProps, attributes);
 
-  if (!isTrue(props.active)) {
-    delete props.active;
+  if (target && !element) {
+    return null;
   }
 
-  return React.createElement(React.Fragment, null, skipPortal ? React.createElement(TooltipContainer, _extends({
-    target: targetElement,
+  return React.createElement(TooltipWithEvents, _extends({
+    target: element,
     attributes: attributes
-  }, props), props.children) : targetElement ? React.createElement(TooltipWithEvents, _extends({
-    target: targetElement,
-    attributes: attributes
-  }, props), props.children) : targetSelector && React.createElement(TooltipPortal, _extends({
-    target: targetSelector,
-    attributes: attributes
-  }, props), props.children));
+  }, props), props.children);
 }
 
 export { injectTooltipSemantic };

package/es/components/tooltip/TooltipContainer.js

@@ -7,7 +7,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import React from 'react';
 import { isTrue } from '../../shared/component-helper';
-import { getOffsetLeft } from '../../shared/helpers';
+import { getOffsetLeft, getOffsetTop } from '../../shared/helpers';
 import classnames from 'classnames';
 export default function TooltipContainer(props) {
   const {
@@ -16,11 +16,16 @@ export default function TooltipContainer(props) {
     attributes,
     arrow,
     position,
+    align,
+    group,
+    hideDelay,
     animatePosition,
     fixedPosition,
     noAnimation,
+    skipPortal,
     useHover,
-    children
+    children,
+    targetElement: target
   } = props;
   const [style, setStyle] = React.useState(null);
   const [hover, setHover] = React.useState(false);
@@ -51,7 +56,7 @@ export default function TooltipContainer(props) {
       }
 
       try {
-        resizeObserver.current = new ResizeObserver(entries => {
+        resizeObserver.current = new ResizeObserver(() => {
           clearTimeout(debounceTimeout.current);
           debounceTimeout.current = setTimeout(() => forceRerender(getBodySize()), 100);
         });
@@ -75,21 +80,27 @@ export default function TooltipContainer(props) {
 
     return removePositionObserver;
   }, [isActive]);
+  const offsetLeft = React.useRef(0);
+  const offsetTop = React.useRef(0);
   React.useLayoutEffect(() => {
+    if (!isActive) {
+      if (group && wasActive) {
+        clearTimeout(debounceTimeout.current);
+        debounceTimeout.current = setTimeout(() => setStyle(null), hideDelay);
+      }
+
+      return;
+    }
+
     const element = elementRef === null || elementRef === void 0 ? void 0 : elementRef.current;
-    const {
-      targetElement: target,
-      align,
-      fixedPosition
-    } = props;
 
     if (typeof window === 'undefined' || !element || !(target !== null && target !== void 0 && target.getBoundingClientRect)) {
       return;
     }
 
+    let alignOffset = 0;
     const elementWidth = element.offsetWidth;
     const elementHeight = element.offsetHeight;
-    let alignOffset = 0;
     const rect = target.getBoundingClientRect();
     const targetBodySize = {
       width: target.offsetWidth,
@@ -101,13 +112,18 @@ export default function TooltipContainer(props) {
       targetBodySize.height = rect.height;
     }
 
+    if (skipPortal && (!offsetLeft.current || !offsetTop.current)) {
+      offsetLeft.current = getOffsetLeft(element) - offset.current;
+      offsetTop.current = getOffsetTop(element) - offset.current;
+    }
+
     const scrollY = window.scrollY !== undefined ? window.scrollY : window.pageYOffset;
     const scrollX = window.scrollX !== undefined ? window.scrollX : window.pageXOffset;
-    const top = (isTrue(fixedPosition) ? 0 : scrollY) + rect.top;
+    const top = (isTrue(fixedPosition) ? 0 : scrollY) + rect.top - offsetTop.current;
     const useMouseWhen = targetBodySize.width > 400;
     const mousePos = getOffsetLeft(target) + rect.left / 2 + (element ? element.offsetWidth : 0);
     const widthBased = scrollX + rect.left;
-    const left = useMouseWhen && mousePos < targetBodySize.width ? mousePos : widthBased;
+    const left = (useMouseWhen && mousePos < targetBodySize.width ? mousePos : widthBased) - offsetLeft.current;
 
     const style = _objectSpread({}, props.style);
 
@@ -154,9 +170,7 @@ export default function TooltipContainer(props) {
 
     if (stylesFromPosition[position]) {
       stylesFromPosition[position]();
-    }
-
-    if (stylesFromArrow[arrow]) {
+    } else if (stylesFromArrow[arrow]) {
       stylesFromArrow[arrow]();
     }
 
@@ -174,10 +188,8 @@ export default function TooltipContainer(props) {
       style.top = 0;
     }
 
-    if (isActive) {
-      setStyle(style);
-    }
-  }, [isActive, arrow, position, children, renewStyles]);
+    setStyle(style);
+  }, [active, arrow, position, children, renewStyles]);
 
   const handleMouseEnter = () => {
     if (isTrue(active) && useHover !== false) {
@@ -191,12 +203,17 @@ export default function TooltipContainer(props) {
     }
   };
 
+  const handlePropagation = e => e.stopPropagation();
+
   return React.createElement("span", _extends({
     role: "tooltip",
-    "aria-hidden": true,
+    "aria-hidden": target ? true : undefined,
     ref: elementRef,
     onMouseEnter: handleMouseEnter,
-    onMouseLeave: handleMouseLeave
+    onMouseLeave: handleMouseLeave,
+    onMouseMove: handlePropagation,
+    onMouseDown: handlePropagation,
+    onTouchStart: handlePropagation
   }, attributes, {
     className: classnames(attributes === null || attributes === void 0 ? void 0 : attributes.className, isActive ? 'dnb-tooltip--active' : wasActive && 'dnb-tooltip--hide', isTrue(animatePosition) && 'dnb-tooltip--animate_position', isTrue(noAnimation) && 'dnb-tooltip--no-animation', isTrue(fixedPosition) && 'dnb-tooltip--fixed'),
     style: _objectSpread(_objectSpread({}, style), attributes.style)

package/es/components/tooltip/TooltipHelpers.d.ts

@@ -25,7 +25,7 @@ export declare const defaultProps: {
     tooltip: any;
 };
 export declare function getTargetElement(target: HTMLElement): HTMLElement;
-export declare function useHandleAria(targetElement: React.RefObject<HTMLElement>, internalId: string): void;
+export declare function useHandleAria(targetElement: HTMLElement, internalId: string): void;
 export declare function getPropsFromTooltipProp(localProps: any): any;
 export declare function getRefElement(target: React.RefObject<HTMLElement>): any;
 export declare const isTouch: (type: string) => boolean;

package/es/components/tooltip/TooltipHelpers.js

@@ -34,14 +34,10 @@ export function getTargetElement(target) {
 export function useHandleAria(targetElement, internalId) {
   React.useEffect(() => {
     try {
-      const elem = getTargetElement(getRefElement(targetElement));
-
-      if (!(elem !== null && elem !== void 0 && elem.classList.contains('dnb-tooltip__wrapper'))) {
-        const existing = {
-          'aria-describedby': elem.getAttribute('aria-describedby')
-        };
-        elem.setAttribute('aria-describedby', combineDescribedBy(existing, internalId));
-      }
+      const existing = {
+        'aria-describedby': targetElement.getAttribute('aria-describedby')
+      };
+      targetElement.setAttribute('aria-describedby', combineDescribedBy(existing, internalId));
     } catch (e) {}
   }, [targetElement, internalId]);
 }
@@ -60,7 +56,7 @@ export function getRefElement(target) {
     element = getRefElement(unknownTarget.current._ref);
   }
 
-  if (Object.prototype.hasOwnProperty.call(element, 'current')) {
+  if (element && Object.prototype.hasOwnProperty.call(element, 'current')) {
     element = element.current;
   }
 

package/es/components/tooltip/TooltipPortal.d.ts

@@ -5,7 +5,7 @@
 import React from 'react';
 import { TooltipProps } from './types';
 declare type TooltipPortalProps = {
-    target: HTMLElement;
+    targetElement: HTMLElement;
     active: boolean;
     keepInDOM?: boolean;
     group?: string;

package/es/components/tooltip/TooltipPortal.js

@@ -3,7 +3,6 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { makeUniqueId, warn } from '../../shared/component-helper';
 import TooltipContainer from './TooltipContainer';
-import { getTargetElement } from './TooltipHelpers';
 let tooltipPortal;
 
 if (typeof globalThis !== 'undefined') {
@@ -16,7 +15,7 @@ if (typeof globalThis !== 'undefined') {
 function TooltipPortal(props) {
   const {
     active,
-    target,
+    targetElement,
     hideDelay,
     keepInDOM,
     noAnimation,
@@ -24,40 +23,56 @@ function TooltipPortal(props) {
   } = props;
   const [isMounted, setIsMounted] = React.useState(false);
   const [isActive, setIsActive] = React.useState(active);
-  const [group] = React.useState(() => props.group || makeUniqueId());
+  const [id] = React.useState(() => props.group || makeUniqueId());
   const isInDOM = React.useRef(false);
   const hasGroup = props.group;
 
-  if (tooltipPortal[group]) {
-    tooltipPortal[group].inDOM = isInDOM.current;
-  }
-
   const makePortal = () => {
-    if (!tooltipPortal[group]) {
-      tooltipPortal[group] = {
-        node: hasGroup ? createGroupElement(group) : createRootElement('dnb-tooltip__portal')
+    if (!tooltipPortal[id]) {
+      tooltipPortal[id] = {
+        count: 0,
+        node: hasGroup ? createGroupElement(id) : createRootElement()
       };
     }
   };
 
-  const removeFromDOM = () => {
-    if (!keepInDOM && hasGroup && tooltipPortal[group] && !tooltipPortal[group].inDOM) {
-      ReactDOM.unmountComponentAtNode(tooltipPortal[group].node);
+  const removeFromDOM = hide => {
+    if (isActive && hide) {
+      return;
+    }
+
+    const ref = tooltipPortal[id];
+
+    if (ref !== null && ref !== void 0 && ref.node) {
+      ref.count--;
+
+      if (ref.count <= 0) {
+        if (hasGroup) {
+          ReactDOM.unmountComponentAtNode(ref.node);
+          createRootElement().removeChild(ref.node);
+        }
+
+        delete tooltipPortal[id];
+      }
     }
   };
 
   React.useEffect(() => {
-    var _tooltipPortal$group, _tooltipPortal$group2;
+    var _tooltipPortal$id, _tooltipPortal$id2;
 
     setIsMounted(true);
-    clearTimeout((_tooltipPortal$group = tooltipPortal[group]) === null || _tooltipPortal$group === void 0 ? void 0 : _tooltipPortal$group.delayTimeout);
-    clearTimeout((_tooltipPortal$group2 = tooltipPortal[group]) === null || _tooltipPortal$group2 === void 0 ? void 0 : _tooltipPortal$group2.hiddenTimeout);
+    clearTimeout((_tooltipPortal$id = tooltipPortal[id]) === null || _tooltipPortal$id === void 0 ? void 0 : _tooltipPortal$id.delayTimeout);
+    clearTimeout((_tooltipPortal$id2 = tooltipPortal[id]) === null || _tooltipPortal$id2 === void 0 ? void 0 : _tooltipPortal$id2.hiddenTimeout);
 
     if (active) {
       makePortal();
       setIsActive(true);
       isInDOM.current = true;
 
+      if (!isMounted) {
+        tooltipPortal[id].count++;
+      }
+
       if (hasGroup) {
         renderPortal(true);
       }
@@ -72,19 +87,19 @@ function TooltipPortal(props) {
 
       const delayHidden = () => {
         isInDOM.current = false;
-        removeFromDOM();
+        removeFromDOM(true);
       };
 
       if (noAnimation || globalThis.IS_TEST) {
         delayRender();
         delayHidden();
-      } else if (tooltipPortal[group]) {
+      } else if (tooltipPortal[id]) {
         const delay = parseFloat(String(hideDelay));
-        tooltipPortal[group].delayTimeout = setTimeout(delayRender, delay);
-        tooltipPortal[group].hiddenTimeout = setTimeout(delayHidden, delay + 300);
+        tooltipPortal[id].delayTimeout = setTimeout(delayRender, delay);
+        tooltipPortal[id].hiddenTimeout = setTimeout(delayHidden, delay + 300);
       }
     }
-  }, [children, active, group, hideDelay, noAnimation]);
+  }, [children, active, id, hideDelay, noAnimation]);
   React.useEffect(() => {
     if (keepInDOM) {
       makePortal();
@@ -94,13 +109,13 @@ function TooltipPortal(props) {
   }, []);
 
   const renderPortal = isActive => {
-    var _tooltipPortal$group3;
+    var _tooltipPortal$id3;
 
-    const root = (_tooltipPortal$group3 = tooltipPortal[group]) === null || _tooltipPortal$group3 === void 0 ? void 0 : _tooltipPortal$group3.node;
+    const root = (_tooltipPortal$id3 = tooltipPortal[id]) === null || _tooltipPortal$id3 === void 0 ? void 0 : _tooltipPortal$id3.node;
 
     if (root && hasGroup && isInDOM.current) {
       ReactDOM.render(React.createElement(TooltipContainer, _extends({}, props, {
-        targetElement: getTargetElement(target),
+        targetElement: targetElement,
         active: isActive
       })), root);
     }
@@ -109,13 +124,13 @@ function TooltipPortal(props) {
   };
 
   if (!hasGroup) {
-    var _tooltipPortal$group4;
+    var _tooltipPortal$id4;
 
-    const root = (_tooltipPortal$group4 = tooltipPortal[group]) === null || _tooltipPortal$group4 === void 0 ? void 0 : _tooltipPortal$group4.node;
+    const root = (_tooltipPortal$id4 = tooltipPortal[id]) === null || _tooltipPortal$id4 === void 0 ? void 0 : _tooltipPortal$id4.node;
 
     if (root) {
       return ReactDOM.createPortal(isInDOM.current || keepInDOM ? React.createElement(TooltipContainer, _extends({}, props, {
-        targetElement: getTargetElement(target),
+        targetElement: targetElement,
         active: isActive
       }), children) : null, root);
     }
@@ -131,14 +146,14 @@ const createGroupElement = id => {
     const elem = document.createElement('div');
     elem.classList.add('dnb-tooltip__group');
     elem.setAttribute('id', id);
-    createRootElement('dnb-tooltip__portal').appendChild(elem);
+    createRootElement().appendChild(elem);
     return elem;
   } catch (e) {
     warn(e);
   }
 };
 
-const createRootElement = className => {
+const createRootElement = (className = 'dnb-tooltip__portal') => {
   try {
     const element = document.querySelector(`.${className}`);
 

package/es/components/tooltip/TooltipWithEvents.d.ts

@@ -5,7 +5,7 @@
 import React from 'react';
 import { TooltipProps } from './types';
 declare type TooltipWithEventsProps = {
-    target: React.ReactElement & React.RefObject<HTMLElement>;
+    target: HTMLElement | React.ReactElement;
     active: boolean;
     internalId: string;
 };

package/es/components/tooltip/TooltipWithEvents.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["children", "target"];
+const _excluded = ["children"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
@@ -9,29 +9,36 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import React from 'react';
 import { combineDescribedBy, warn } from '../../shared/component-helper';
+import TooltipContainer from './TooltipContainer';
 import { getRefElement, injectTooltipSemantic, isTouch, useHandleAria } from './TooltipHelpers';
 import TooltipPortal from './TooltipPortal';
 
 function TooltipWithEvents(props) {
   const {
-    children,
-    target
+    children
   } = props,
         restProps = _objectWithoutProperties(props, _excluded);
 
-  const [isActive, setIsActive] = React.useState(false);
+  const {
+    active,
+    target,
+    skipPortal,
+    noAnimation,
+    showDelay,
+    hideDelay,
+    internalId
+  } = restProps;
+  const [isActive, setIsActive] = React.useState(active);
   const [isNotSemanticElement, setIsNotSemanticElement] = React.useState(false);
-  const [isMounted, setIsMounted] = React.useState(false);
+  const [isMounted, setIsMounted] = React.useState(!target);
   const onEnterTimeout = React.useRef();
-  const targetRef = React.useRef();
+  const onLeaveTimeout = React.useRef();
   const cloneRef = React.useRef();
-  React.useEffect(() => {
+  const targetRef = React.useRef();
+  React.useLayoutEffect(() => {
     targetRef.current = getRefElement(cloneRef);
-
-    if (!targetRef.current) {
-      targetRef.current = target.current;
-    }
-
+  }, [target]);
+  React.useLayoutEffect(() => {
     if (targetRef.current) {
       setIsMounted(true);
       addEvents(targetRef.current);
@@ -39,28 +46,17 @@ function TooltipWithEvents(props) {
     }
 
     return () => {
-      clearTimeout(onEnterTimeout.current);
-      const element = targetRef.current;
-
-      if (element) {
-        try {
-          element.removeEventListener('click', onMouseLeave);
-          element.removeEventListener('focus', onFocus);
-          element.removeEventListener('blur', onMouseLeave);
-          element.removeEventListener('mouseenter', onMouseEnter);
-          element.removeEventListener('mouseleave', onMouseLeave);
-          element.removeEventListener('touchstart', onMouseEnter);
-          element.removeEventListener('touchend', onMouseLeave);
-        } catch (e) {
-          warn(e);
-        }
+      clearTimers();
+
+      if (targetRef.current) {
+        removeEvents(targetRef.current);
       }
     };
   }, []);
 
   const handleSemanticElement = () => {
     try {
-      const targetElement = document.querySelector(`*[aria-describedby*="${props.internalId}"]`);
+      const targetElement = document.querySelector(`*[aria-describedby*="${internalId}"]`);
 
       if (targetElement) {
         const role = targetElement.getAttribute('role');
@@ -89,16 +85,29 @@ function TooltipWithEvents(props) {
     }
   };
 
-  const onFocus = e => {
+  const removeEvents = element => {
     try {
-      if (document.documentElement.getAttribute('data-whatintent') === 'keyboard') {
-        return onMouseEnter(e);
-      }
+      element.removeEventListener('click', onMouseLeave);
+      element.removeEventListener('focus', onFocus);
+      element.removeEventListener('blur', onMouseLeave);
+      element.removeEventListener('mouseenter', onMouseEnter);
+      element.removeEventListener('mouseleave', onMouseLeave);
+      element.removeEventListener('touchstart', onMouseEnter);
+      element.removeEventListener('touchend', onMouseLeave);
     } catch (e) {
       warn(e);
     }
   };
 
+  const clearTimers = () => {
+    clearTimeout(onEnterTimeout.current);
+    clearTimeout(onLeaveTimeout.current);
+  };
+
+  const onFocus = e => {
+    return onMouseEnter(e);
+  };
+
   const onMouseEnter = e => {
     try {
       if (isTouch(e.type)) {
@@ -113,15 +122,19 @@ function TooltipWithEvents(props) {
       setIsActive(true);
     };
 
-    if (props.noAnimation || globalThis.IS_TEST) {
+    if (noAnimation || globalThis.IS_TEST) {
       run();
     } else {
-      clearTimeout(onEnterTimeout.current);
-      onEnterTimeout.current = setTimeout(run, parseFloat(String(props.showDelay)) || 1);
+      clearTimers();
+      onEnterTimeout.current = setTimeout(run, parseFloat(String(showDelay)) || 1);
     }
   };
 
   const onMouseLeave = e => {
+    if (active) {
+      return;
+    }
+
     try {
       if (isTouch(e.type)) {
         const elem = e.currentTarget;
@@ -131,8 +144,17 @@ function TooltipWithEvents(props) {
       warn(e);
     }
 
-    clearTimeout(onEnterTimeout.current);
-    setIsActive(false);
+    clearTimers();
+
+    const run = () => {
+      setIsActive(false);
+    };
+
+    if (skipPortal) {
+      onLeaveTimeout.current = setTimeout(run, parseFloat(String(hideDelay)));
+    } else {
+      run();
+    }
   };
 
   const componentWrapper = React.useMemo(() => {
@@ -143,19 +165,23 @@ function TooltipWithEvents(props) {
       return React.cloneElement(target, _objectSpread(_objectSpread({
         ref: cloneRef
       }, params), {}, {
-        'aria-describedby': combineDescribedBy(target.props, props.internalId)
+        'aria-describedby': combineDescribedBy(target.props, internalId)
       }));
+    } else {
+      cloneRef.current = target;
     }
 
     return null;
   }, [target]);
-  useHandleAria(target, props.internalId);
-  return React.createElement(React.Fragment, null, componentWrapper, isMounted && React.createElement(TooltipPortal, _extends({
-    key: "tooltip",
+  useHandleAria(targetRef.current, internalId);
+  return React.createElement(React.Fragment, null, isMounted && (skipPortal ? React.createElement(TooltipContainer, _extends({}, restProps, {
+    active: isActive,
+    targetElement: targetRef.current
+  }), children) : React.createElement(TooltipPortal, _extends({}, restProps, {
     active: isActive,
-    target: targetRef.current,
+    targetElement: targetRef.current,
     keepInDOM: true
-  }, restProps), children));
+  }), children)), componentWrapper);
 }
 
 export default TooltipWithEvents;

package/es/components/tooltip/types.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { IncludeSnakeCase } from '../../shared/helpers/withSnakeCaseProps';
-import { ISpacingProps } from '../../shared/interfaces';
+import { SpacingProps } from '../../shared/types';
 export declare type TooltipPosition = 'top' | 'right' | 'bottom' | 'left';
 export declare type TooltipArrow = null | 'center' | 'top' | 'right' | 'bottom' | 'left';
 export declare type TooltipAlign = null | 'center' | 'right' | 'left';
@@ -24,5 +24,6 @@ export declare type TooltipProps = IncludeSnakeCase<{
     tooltip?: React.ReactNode;
     className?: string;
     children?: React.ReactNode;
+    style?: React.CSSProperties;
 }>;
-export declare type TooltipAllProps = TooltipProps & ISpacingProps & Omit<React.HTMLProps<HTMLElement>, keyof TooltipProps>;
+export declare type TooltipAllProps = TooltipProps & SpacingProps & Omit<React.HTMLProps<HTMLElement>, keyof TooltipProps>;

package/es/components/visually-hidden/VisuallyHidden.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { DynamicElement } from '../../shared/interfaces';
+import { DynamicElement } from '../../shared/types';
 export interface VisuallyHiddenProps {
     /**
      * The content of the visually hidden element, can be a string or a React Element