@dnb/eufemia 9.32.0 → 9.32.1

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to @dnb/eufemia will be documented in this file. See
 [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [9.32.1](https://github.com/dnbexperience/eufemia/compare/v9.32.0...v9.32.1) (2022-10-09)
+
+
+### Bug Fixes
+
+* **Tooltip:** make skipPortal properly inline and accessible to screen readers ([#1613](https://github.com/dnbexperience/eufemia/issues/1613)) ([0d32910](https://github.com/dnbexperience/eufemia/commit/0d32910fe64a541b6b6b99bc04f01bacdf558b0f))
+* **Tooltip:** remove left over DOM elements when component unmounts ([#1612](https://github.com/dnbexperience/eufemia/issues/1612)) ([ddd26ed](https://github.com/dnbexperience/eufemia/commit/ddd26ed9dd5ab3c858c843def8598a486d3212ea))
+
 # [9.32.0](https://github.com/dnbexperience/eufemia/compare/v9.31.0...v9.32.0) (2022-10-06)
 
 

package/cjs/components/slider/SliderThumb.js

@@ -126,6 +126,12 @@ function Thumb(_ref) {
 
   var onMouseLeaveHandler = function onMouseLeaveHandler() {
     setShowTooltip(false);
+
+    try {
+      elemRef.current.dispatchEvent(new Event('mouseleave'));
+    } catch (e) {
+      (0, _componentHelper.warn)(e);
+    }
   };
 
   var _useSliderEvents = (0, _useSliderEvents2.useSliderEvents)(),
@@ -156,6 +162,12 @@ function Thumb(_ref) {
     helperParams.onFocus = function (event) {
       onHelperFocusHandler(event);
       onMouseEnterHandler();
+
+      try {
+        elemRef.current.dispatchEvent(new Event('mouseenter'));
+      } catch (e) {
+        (0, _componentHelper.warn)(e);
+      }
     };
   }
 
@@ -165,8 +177,7 @@ function Thumb(_ref) {
 
   return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement("span", {
     className: "dnb-slider__thumb",
-    style: style,
-    ref: elemRef
+    style: style
   }, _react.default.createElement("input", _extends({
     type: "range",
     className: "dnb-slider__button-helper",
@@ -190,12 +201,14 @@ function Thumb(_ref) {
     type: "",
     variant: "secondary",
     disabled: disabled,
-    skeleton: skeleton
+    skeleton: skeleton,
+    innerRef: elemRef
   }, thumbParams)), tooltip && _react.default.createElement(_Tooltip.default, {
     key: "group-".concat(currentIndex),
     targetElement: elemRef,
     animatePosition: shouldAnimate,
-    active: showTooltip || alwaysShowTooltip,
+    active: Boolean(showTooltip || alwaysShowTooltip),
+    showDelay: 1,
     hideDelay: 300
   }, number || value, shouldAnimate)));
 }

package/cjs/components/slider/SliderTrack.js

@@ -50,8 +50,7 @@ function SliderMainTrack(_ref) {
       onInit = allProps.onInit;
 
   var _useSliderEvents = (0, _useSliderEvents2.useSliderEvents)(),
-      onTrackMouseUpHandler = _useSliderEvents.onTrackMouseUpHandler,
-      onThumbMouseDownHandler = _useSliderEvents.onThumbMouseDownHandler,
+      onTrackMouseDownHandler = _useSliderEvents.onTrackMouseDownHandler,
       removeEvents = _useSliderEvents.removeEvents;
 
   _react.default.useEffect(function () {
@@ -75,10 +74,8 @@ function SliderMainTrack(_ref) {
   }, []);
 
   var trackParams = {
-    onTouchStart: onTrackMouseUpHandler,
-    onTouchStartCapture: onThumbMouseDownHandler,
-    onMouseDown: onTrackMouseUpHandler,
-    onMouseDownCapture: onThumbMouseDownHandler
+    onTouchStart: onTrackMouseDownHandler,
+    onMouseDown: onTrackMouseDownHandler
   };
   return _react.default.createElement("span", _extends({
     id: id,

package/cjs/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/cjs/components/slider/hooks/useSliderEvents.js

@@ -33,7 +33,8 @@ function useSliderEvents() {
       onDragStart = allProps.onDragStart,
       onDragEnd = allProps.onDragEnd;
 
-  var onTrackMouseUpHandler = function onTrackMouseUpHandler(event) {
+  var onTrackMouseDownHandler = function onTrackMouseDownHandler(event) {
+    onThumbMouseDownHandler(event);
     var percent = (0, _SliderHelpers.calculatePercent)(trackRef.current, event, isVertical);
     emitChange(event, (0, _SliderHelpers.percentToValue)(percent, min, max, isReverse));
     setShouldAnimate(true);
@@ -121,7 +122,7 @@ function useSliderEvents() {
   return {
     onThumbMouseDownHandler: onThumbMouseDownHandler,
     onThumbMouseUpHandler: onThumbMouseUpHandler,
-    onTrackMouseUpHandler: onTrackMouseUpHandler,
+    onTrackMouseDownHandler: onTrackMouseDownHandler,
     onHelperChangeHandler: onHelperChangeHandler,
     onHelperFocusHandler: onHelperFocusHandler,
     removeEvents: removeEvents

package/cjs/components/tooltip/Tooltip.js

@@ -57,12 +57,8 @@ var _componentHelper = require("../../shared/component-helper");
 
 var _SpacingHelper = require("../space/SpacingHelper");
 
-var _TooltipContainer = _interopRequireDefault(require("./TooltipContainer"));
-
 var _TooltipWithEvents = _interopRequireDefault(require("./TooltipWithEvents"));
 
-var _TooltipPortal = _interopRequireDefault(require("./TooltipPortal"));
-
 var _TooltipHelpers = require("./TooltipHelpers");
 
 var _withSnakeCaseProps = require("../../shared/helpers/withSnakeCaseProps");
@@ -120,13 +116,26 @@ function Tooltip(localProps) {
       align = props.align,
       params = _objectWithoutProperties(props, _excluded);
 
-  var _React$useState = _react.default.useState(function () {
+  var target = targetElement || targetSelector;
+
+  var _React$useState = _react.default.useState(),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      element = _React$useState2[0],
+      setElement = _React$useState2[1];
+
+  var _React$useState3 = _react.default.useState(function () {
     return props.id || (0, _componentHelper.makeUniqueId)();
   }),
-      _React$useState2 = _slicedToArray(_React$useState, 1),
-      internalId = _React$useState2[0];
+      _React$useState4 = _slicedToArray(_React$useState3, 1),
+      internalId = _React$useState4[0];
 
   props.internalId = internalId;
+
+  _react.default.useEffect(function () {
+    var element = (0, _TooltipHelpers.getTargetElement)((0, _TooltipHelpers.getRefElement)(target));
+    setElement(element);
+  }, [target]);
+
   var classes = (0, _classnames.default)('dnb-tooltip', (0, _SpacingHelper.createSpacingClasses)(props), className, size === 'large' && 'dnb-tooltip--large');
 
   var attributes = _objectSpread({
@@ -135,20 +144,14 @@ function Tooltip(localProps) {
 
   (0, _componentHelper.validateDOMAttributes)(localProps, attributes);
 
-  if (!(0, _componentHelper.isTrue)(props.active)) {
-    delete props.active;
+  if (target && !element) {
+    return null;
   }
 
-  return _react.default.createElement(_react.default.Fragment, null, skipPortal ? _react.default.createElement(_TooltipContainer.default, _extends({
-    target: targetElement,
-    attributes: attributes
-  }, props), props.children) : targetElement ? _react.default.createElement(_TooltipWithEvents.default, _extends({
-    target: targetElement,
-    attributes: attributes
-  }, props), props.children) : targetSelector && _react.default.createElement(_TooltipPortal.default, _extends({
-    target: targetSelector,
+  return _react.default.createElement(_TooltipWithEvents.default, _extends({
+    target: element,
     attributes: attributes
-  }, props), props.children));
+  }, props), props.children);
 }
 
 var _default = Tooltip;

package/cjs/components/tooltip/TooltipContainer.js

@@ -79,11 +79,16 @@ function TooltipContainer(props) {
       attributes = props.attributes,
       arrow = props.arrow,
       position = props.position,
+      align = props.align,
+      group = props.group,
+      hideDelay = props.hideDelay,
       animatePosition = props.animatePosition,
       fixedPosition = props.fixedPosition,
       noAnimation = props.noAnimation,
+      skipPortal = props.skipPortal,
       useHover = props.useHover,
-      children = props.children;
+      children = props.children,
+      target = props.targetElement;
 
   var _React$useState = _react.default.useState(null),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -134,7 +139,7 @@ function TooltipContainer(props) {
       }
 
       try {
-        resizeObserver.current = new ResizeObserver(function (entries) {
+        resizeObserver.current = new ResizeObserver(function () {
           clearTimeout(debounceTimeout.current);
           debounceTimeout.current = setTimeout(function () {
             return forceRerender(getBodySize());
@@ -161,19 +166,31 @@ function TooltipContainer(props) {
     return removePositionObserver;
   }, [isActive]);
 
+  var offsetLeft = _react.default.useRef(0);
+
+  var offsetTop = _react.default.useRef(0);
+
   _react.default.useLayoutEffect(function () {
+    if (!isActive) {
+      if (group && wasActive) {
+        clearTimeout(debounceTimeout.current);
+        debounceTimeout.current = setTimeout(function () {
+          return setStyle(null);
+        }, hideDelay);
+      }
+
+      return;
+    }
+
     var element = elementRef === null || elementRef === void 0 ? void 0 : elementRef.current;
-    var target = props.targetElement,
-        align = props.align,
-        fixedPosition = props.fixedPosition;
 
     if (typeof window === 'undefined' || !element || !(target !== null && target !== void 0 && target.getBoundingClientRect)) {
       return;
     }
 
+    var alignOffset = 0;
     var elementWidth = element.offsetWidth;
     var elementHeight = element.offsetHeight;
-    var alignOffset = 0;
     var rect = target.getBoundingClientRect();
     var targetBodySize = {
       width: target.offsetWidth,
@@ -185,16 +202,21 @@ function TooltipContainer(props) {
       targetBodySize.height = rect.height;
     }
 
+    if (skipPortal && (!offsetLeft.current || !offsetTop.current)) {
+      offsetLeft.current = (0, _helpers.getOffsetLeft)(element) - offset.current;
+      offsetTop.current = (0, _helpers.getOffsetTop)(element) - offset.current;
+    }
+
     var scrollY = window.scrollY !== undefined ? window.scrollY : window.pageYOffset;
     var scrollX = window.scrollX !== undefined ? window.scrollX : window.pageXOffset;
 
-    var _top = ((0, _componentHelper.isTrue)(fixedPosition) ? 0 : scrollY) + rect.top;
+    var _top = ((0, _componentHelper.isTrue)(fixedPosition) ? 0 : scrollY) + rect.top - offsetTop.current;
 
     var useMouseWhen = targetBodySize.width > 400;
     var mousePos = (0, _helpers.getOffsetLeft)(target) + rect.left / 2 + (element ? element.offsetWidth : 0);
     var widthBased = scrollX + rect.left;
 
-    var _left = useMouseWhen && mousePos < targetBodySize.width ? mousePos : widthBased;
+    var _left = (useMouseWhen && mousePos < targetBodySize.width ? mousePos : widthBased) - offsetLeft.current;
 
     var style = _objectSpread({}, props.style);
 
@@ -241,9 +263,7 @@ function TooltipContainer(props) {
 
     if (stylesFromPosition[position]) {
       stylesFromPosition[position]();
-    }
-
-    if (stylesFromArrow[arrow]) {
+    } else if (stylesFromArrow[arrow]) {
       stylesFromArrow[arrow]();
     }
 
@@ -261,10 +281,8 @@ function TooltipContainer(props) {
       style.top = 0;
     }
 
-    if (isActive) {
-      setStyle(style);
-    }
-  }, [isActive, arrow, position, children, renewStyles]);
+    setStyle(style);
+  }, [active, arrow, position, children, renewStyles]);
 
   var handleMouseEnter = function handleMouseEnter() {
     if ((0, _componentHelper.isTrue)(active) && useHover !== false) {
@@ -278,12 +296,19 @@ function TooltipContainer(props) {
     }
   };
 
+  var handlePropagation = function handlePropagation(e) {
+    return e.stopPropagation();
+  };
+
   return _react.default.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: (0, _classnames.default)(attributes === null || attributes === void 0 ? void 0 : attributes.className, isActive ? 'dnb-tooltip--active' : wasActive && 'dnb-tooltip--hide', (0, _componentHelper.isTrue)(animatePosition) && 'dnb-tooltip--animate_position', (0, _componentHelper.isTrue)(noAnimation) && 'dnb-tooltip--no-animation', (0, _componentHelper.isTrue)(fixedPosition) && 'dnb-tooltip--fixed'),
     style: _objectSpread(_objectSpread({}, style), attributes.style)

package/cjs/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/cjs/components/tooltip/TooltipHelpers.js

@@ -58,14 +58,10 @@ function getTargetElement(target) {
 function useHandleAria(targetElement, internalId) {
   _react.default.useEffect(function () {
     try {
-      var elem = getTargetElement(getRefElement(targetElement));
-
-      if (!(elem !== null && elem !== void 0 && elem.classList.contains('dnb-tooltip__wrapper'))) {
-        var existing = {
-          'aria-describedby': elem.getAttribute('aria-describedby')
-        };
-        elem.setAttribute('aria-describedby', (0, _componentHelper.combineDescribedBy)(existing, internalId));
-      }
+      var existing = {
+        'aria-describedby': targetElement.getAttribute('aria-describedby')
+      };
+      targetElement.setAttribute('aria-describedby', (0, _componentHelper.combineDescribedBy)(existing, internalId));
     } catch (e) {}
   }, [targetElement, internalId]);
 }
@@ -86,7 +82,7 @@ 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/cjs/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/cjs/components/tooltip/TooltipPortal.js

@@ -41,8 +41,6 @@ var _componentHelper = require("../../shared/component-helper");
 
 var _TooltipContainer = _interopRequireDefault(require("./TooltipContainer"));
 
-var _TooltipHelpers = require("./TooltipHelpers");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -70,7 +68,7 @@ if (typeof globalThis !== 'undefined') {
 
 function TooltipPortal(props) {
   var active = props.active,
-      target = props.target,
+      targetElement = props.targetElement,
       hideDelay = props.hideDelay,
       keepInDOM = props.keepInDOM,
       noAnimation = props.noAnimation,
@@ -90,42 +88,59 @@ function TooltipPortal(props) {
     return props.group || (0, _componentHelper.makeUniqueId)();
   }),
       _React$useState6 = _slicedToArray(_React$useState5, 1),
-      group = _React$useState6[0];
+      id = _React$useState6[0];
 
   var isInDOM = _react.default.useRef(false);
 
   var hasGroup = props.group;
 
-  if (tooltipPortal[group]) {
-    tooltipPortal[group].inDOM = isInDOM.current;
-  }
-
   var makePortal = function 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()
       };
     }
   };
 
-  var removeFromDOM = function removeFromDOM() {
-    if (!keepInDOM && hasGroup && tooltipPortal[group] && !tooltipPortal[group].inDOM) {
-      _reactDom.default.unmountComponentAtNode(tooltipPortal[group].node);
+  var removeFromDOM = function removeFromDOM(hide) {
+    if (isActive && hide) {
+      return;
+    }
+
+    var ref = tooltipPortal[id];
+
+    if (ref !== null && ref !== void 0 && ref.node) {
+      ref.count--;
+
+      if (ref.count <= 0) {
+        if (hasGroup) {
+          _reactDom.default.unmountComponentAtNode(ref.node);
+
+          createRootElement().removeChild(ref.node);
+        }
+
+        delete tooltipPortal[id];
+      }
     }
   };
 
   _react.default.useEffect(function () {
-    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);
       }
@@ -140,19 +155,19 @@ function TooltipPortal(props) {
 
       var delayHidden = function delayHidden() {
         isInDOM.current = false;
-        removeFromDOM();
+        removeFromDOM(true);
       };
 
       if (noAnimation || globalThis.IS_TEST) {
         delayRender();
         delayHidden();
-      } else if (tooltipPortal[group]) {
+      } else if (tooltipPortal[id]) {
         var 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.default.useEffect(function () {
     if (keepInDOM) {
@@ -163,13 +178,13 @@ function TooltipPortal(props) {
   }, []);
 
   var renderPortal = function renderPortal(isActive) {
-    var _tooltipPortal$group3;
+    var _tooltipPortal$id3;
 
-    var root = (_tooltipPortal$group3 = tooltipPortal[group]) === null || _tooltipPortal$group3 === void 0 ? void 0 : _tooltipPortal$group3.node;
+    var root = (_tooltipPortal$id3 = tooltipPortal[id]) === null || _tooltipPortal$id3 === void 0 ? void 0 : _tooltipPortal$id3.node;
 
     if (root && hasGroup && isInDOM.current) {
       _reactDom.default.render(_react.default.createElement(_TooltipContainer.default, _extends({}, props, {
-        targetElement: (0, _TooltipHelpers.getTargetElement)(target),
+        targetElement: targetElement,
         active: isActive
       })), root);
     }
@@ -178,13 +193,13 @@ function TooltipPortal(props) {
   };
 
   if (!hasGroup) {
-    var _tooltipPortal$group4;
+    var _tooltipPortal$id4;
 
-    var root = (_tooltipPortal$group4 = tooltipPortal[group]) === null || _tooltipPortal$group4 === void 0 ? void 0 : _tooltipPortal$group4.node;
+    var root = (_tooltipPortal$id4 = tooltipPortal[id]) === null || _tooltipPortal$id4 === void 0 ? void 0 : _tooltipPortal$id4.node;
 
     if (root) {
       return _reactDom.default.createPortal(isInDOM.current || keepInDOM ? _react.default.createElement(_TooltipContainer.default, _extends({}, props, {
-        targetElement: (0, _TooltipHelpers.getTargetElement)(target),
+        targetElement: targetElement,
         active: isActive
       }), children) : null, root);
     }
@@ -201,14 +216,16 @@ var createGroupElement = function createGroupElement(id) {
     var 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) {
     (0, _componentHelper.warn)(e);
   }
 };
 
-var createRootElement = function createRootElement(className) {
+var createRootElement = function createRootElement() {
+  var className = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'dnb-tooltip__portal';
+
   try {
     var element = document.querySelector(".".concat(className));
 

package/cjs/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;
 };