@dnb/eufemia 9.32.0 → 9.32.1

package/es/components/slider/SliderThumb.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
-import { combineDescribedBy, combineLabelledBy, validateDOMAttributes } from '../../shared/component-helper';
+import { combineDescribedBy, combineLabelledBy, validateDOMAttributes, warn } from '../../shared/component-helper';
 import Button from '../button/Button';
 import Tooltip from '../tooltip/Tooltip';
 import { useSliderEvents } from './hooks/useSliderEvents';
@@ -68,6 +68,12 @@ function Thumb({
 
   const onMouseLeaveHandler = () => {
     setShowTooltip(false);
+
+    try {
+      elemRef.current.dispatchEvent(new Event('mouseleave'));
+    } catch (e) {
+      warn(e);
+    }
   };
 
   const {
@@ -98,6 +104,12 @@ function Thumb({
     helperParams.onFocus = event => {
       onHelperFocusHandler(event);
       onMouseEnterHandler();
+
+      try {
+        elemRef.current.dispatchEvent(new Event('mouseenter'));
+      } catch (e) {
+        warn(e);
+      }
     };
   }
 
@@ -105,8 +117,7 @@ function Thumb({
   const elemRef = React.useRef();
   return React.createElement(React.Fragment, null, React.createElement("span", {
     className: "dnb-slider__thumb",
-    style: style,
-    ref: elemRef
+    style: style
   }, React.createElement("input", _extends({
     type: "range",
     className: "dnb-slider__button-helper",
@@ -130,12 +141,14 @@ function Thumb({
     type: "",
     variant: "secondary",
     disabled: disabled,
-    skeleton: skeleton
+    skeleton: skeleton,
+    innerRef: elemRef
   }, thumbParams)), tooltip && React.createElement(Tooltip, {
     key: `group-${currentIndex}`,
     targetElement: elemRef,
     animatePosition: shouldAnimate,
-    active: showTooltip || alwaysShowTooltip,
+    active: Boolean(showTooltip || alwaysShowTooltip),
+    showDelay: 1,
     hideDelay: 300
   }, number || value, shouldAnimate)));
 }

package/es/components/slider/SliderTrack.js

@@ -23,8 +23,7 @@ export function SliderMainTrack({
     onInit
   } = allProps;
   const {
-    onTrackMouseUpHandler,
-    onThumbMouseDownHandler,
+    onTrackMouseDownHandler,
     removeEvents
   } = useSliderEvents();
   React.useEffect(() => {
@@ -47,10 +46,8 @@ export function SliderMainTrack({
     };
   }, []);
   const trackParams = {
-    onTouchStart: onTrackMouseUpHandler,
-    onTouchStartCapture: onThumbMouseDownHandler,
-    onMouseDown: onTrackMouseUpHandler,
-    onMouseDownCapture: onThumbMouseDownHandler
+    onTouchStart: onTrackMouseDownHandler,
+    onMouseDown: onTrackMouseDownHandler
   };
   return React.createElement("span", _extends({
     id: id,

package/es/components/slider/hooks/useSliderEvents.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 export declare function useSliderEvents(): {
-    onThumbMouseDownHandler: (event: React.SyntheticEvent) => void;
+    onThumbMouseDownHandler: (event: MouseEvent | TouchEvent | React.SyntheticEvent) => void;
     onThumbMouseUpHandler: () => void;
-    onTrackMouseUpHandler: (event: MouseEvent | TouchEvent) => void;
+    onTrackMouseDownHandler: (event: MouseEvent | TouchEvent) => void;
     onHelperChangeHandler: (event: React.FormEvent<HTMLInputElement>) => void;
     onHelperFocusHandler: (event: React.FormEvent<HTMLInputElement>) => void;
     removeEvents: () => void;

package/es/components/slider/hooks/useSliderEvents.js

@@ -20,7 +20,8 @@ export function useSliderEvents() {
     onDragEnd
   } = allProps;
 
-  const onTrackMouseUpHandler = event => {
+  const onTrackMouseDownHandler = event => {
+    onThumbMouseDownHandler(event);
     const percent = calculatePercent(trackRef.current, event, isVertical);
     emitChange(event, percentToValue(percent, min, max, isReverse));
     setShouldAnimate(true);
@@ -108,7 +109,7 @@ export function useSliderEvents() {
   return {
     onThumbMouseDownHandler,
     onThumbMouseUpHandler,
-    onTrackMouseUpHandler,
+    onTrackMouseDownHandler,
     onHelperChangeHandler,
     onHelperFocusHandler,
     removeEvents

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;
 };