@dnb/eufemia 9.30.0 → 9.32.0

package/es/components/tooltip/TooltipPortal.js

@@ -1,198 +1,157 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import React from 'react';
 import ReactDOM from 'react-dom';
-import PropTypes from 'prop-types';
-import { combineDescribedBy, warn } from '../../shared/component-helper';
+import { makeUniqueId, warn } from '../../shared/component-helper';
 import TooltipContainer from './TooltipContainer';
+import { getTargetElement } from './TooltipHelpers';
 let tooltipPortal;
 
-if (typeof window !== 'undefined') {
-  window.tooltipPortal = window.tooltipPortal || {};
-  tooltipPortal = window.tooltipPortal;
+if (typeof globalThis !== 'undefined') {
+  globalThis.tooltipPortal = globalThis.tooltipPortal || {};
+  tooltipPortal = globalThis.tooltipPortal;
 } else {
   tooltipPortal = {};
 }
 
-export default class TooltipPortal extends React.PureComponent {
-  constructor(...args) {
-    super(...args);
-
-    _defineProperty(this, "state", {
-      isMounted: false
-    });
-
-    _defineProperty(this, "init", () => {
-      const {
-        group,
-        active
-      } = this.props;
-      tooltipPortal[group] = tooltipPortal[group] || {
-        node: this.useRootElement(),
-        count: 0
-      };
-      tooltipPortal[group].count++;
-      this.setState({
-        isMounted: true,
-        active
-      }, () => {
-        if (!this.isMainGorup()) {
-          this.renderPortal();
-        }
-      });
-    });
-
-    _defineProperty(this, "renderPortal", () => {
-      const targetElement = this.getTargetElement();
-      const {
-        group
-      } = this.props;
-
-      if (!this.isMainGorup() && tooltipPortal[group]) {
-        clearTimeout(tooltipPortal[group].timeout);
-      }
-
-      this.handleAria(targetElement);
-
-      if (this.isMainGorup()) {
-        return ReactDOM.createPortal(React.createElement(TooltipContainer, _extends({
-          targetElement: targetElement
-        }, this.props, {
-          active: this.state.active
-        })), tooltipPortal[group].node);
-      } else {
-        ReactDOM.render(React.createElement(TooltipContainer, _extends({
-          targetElement: targetElement
-        }, this.props, {
-          active: this.state.active
-        })), tooltipPortal[group].node);
-      }
-    });
+function TooltipPortal(props) {
+  const {
+    active,
+    target,
+    hideDelay,
+    keepInDOM,
+    noAnimation,
+    children
+  } = props;
+  const [isMounted, setIsMounted] = React.useState(false);
+  const [isActive, setIsActive] = React.useState(active);
+  const [group] = React.useState(() => props.group || makeUniqueId());
+  const isInDOM = React.useRef(false);
+  const hasGroup = props.group;
+
+  if (tooltipPortal[group]) {
+    tooltipPortal[group].inDOM = isInDOM.current;
   }
 
-  componentDidMount() {
-    if (document.readyState === 'complete') {
-      this.init();
-    } else if (typeof window !== 'undefined') {
-      window.addEventListener('load', this.init);
+  const makePortal = () => {
+    if (!tooltipPortal[group]) {
+      tooltipPortal[group] = {
+        node: hasGroup ? createGroupElement(group) : createRootElement('dnb-tooltip__portal')
+      };
     }
-  }
+  };
 
-  componentDidUpdate(prevProps) {
-    const {
-      group,
-      active,
-      hide_delay
-    } = this.props;
-
-    if (tooltipPortal[group] && active !== prevProps.active) {
-      if (active && !prevProps.active) {
-        this.setState({
-          active: true
-        }, () => {
-          if (!this.isMainGorup()) {
-            this.renderPortal();
-          }
-        });
-      } else if (!active && prevProps.active) {
-        this.timeout = tooltipPortal[group].timeout = setTimeout(() => {
-          this.setState({
-            active: false
-          }, () => {
-            if (!this.isMainGorup()) {
-              this.renderPortal();
-            }
-          });
-        }, parseFloat(hide_delay));
-      }
+  const removeFromDOM = () => {
+    if (!keepInDOM && hasGroup && tooltipPortal[group] && !tooltipPortal[group].inDOM) {
+      ReactDOM.unmountComponentAtNode(tooltipPortal[group].node);
     }
-  }
+  };
 
-  isMainGorup() {
-    const {
-      group
-    } = this.props;
-    return group === 'main';
-  }
+  React.useEffect(() => {
+    var _tooltipPortal$group, _tooltipPortal$group2;
 
-  componentWillUnmount() {
-    const {
-      group
-    } = this.props;
-    clearTimeout(this.timeout);
+    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);
 
-    if (tooltipPortal[group]) {
-      tooltipPortal[group].count--;
+    if (active) {
+      makePortal();
+      setIsActive(true);
+      isInDOM.current = true;
 
-      if (!this.isMainGorup()) {
-        ReactDOM.unmountComponentAtNode(tooltipPortal[group].node);
+      if (hasGroup) {
+        renderPortal(true);
       }
+    } else if (!active && isMounted) {
+      const delayRender = () => {
+        setIsActive(false);
 
-      if (tooltipPortal[group].count === 0) {
-        try {
-          document.body.removeChild(tooltipPortal[group].node);
-        } catch (e) {}
+        if (hasGroup) {
+          renderPortal(false);
+        }
+      };
 
-        tooltipPortal[group] = null;
+      const delayHidden = () => {
+        isInDOM.current = false;
+        removeFromDOM();
+      };
+
+      if (noAnimation || globalThis.IS_TEST) {
+        delayRender();
+        delayHidden();
+      } else if (tooltipPortal[group]) {
+        const delay = parseFloat(String(hideDelay));
+        tooltipPortal[group].delayTimeout = setTimeout(delayRender, delay);
+        tooltipPortal[group].hiddenTimeout = setTimeout(delayHidden, delay + 300);
       }
     }
-  }
-
-  getTargetElement() {
-    if (typeof document !== 'undefined') {
-      const {
-        target
-      } = this.props;
-      return typeof target === 'string' ? typeof document !== 'undefined' && document.querySelector(target) : target;
+  }, [children, active, group, hideDelay, noAnimation]);
+  React.useEffect(() => {
+    if (keepInDOM) {
+      makePortal();
     }
-  }
 
-  useRootElement() {
-    if (typeof document !== 'undefined') {
-      try {
-        const elem = document.createElement('div');
-        elem.classList.add('dnb-tooltip__portal');
-        elem.classList.add('dnb-core-style');
-        document.body.appendChild(elem);
-        return elem;
-      } catch (e) {
-        warn(e);
-      }
-    }
-  }
+    return removeFromDOM;
+  }, []);
 
-  handleAria(elem) {
-    try {
-      if (!elem.classList.contains('dnb-tooltip__wrapper')) {
-        const existing = {
-          'aria-describedby': elem.getAttribute('aria-describedby')
-        };
-        elem.setAttribute('aria-describedby', combineDescribedBy(existing, this.props.internal_id));
-      }
-    } catch (e) {}
-  }
+  const renderPortal = isActive => {
+    var _tooltipPortal$group3;
+
+    const root = (_tooltipPortal$group3 = tooltipPortal[group]) === null || _tooltipPortal$group3 === void 0 ? void 0 : _tooltipPortal$group3.node;
 
-  render() {
-    if (this.state.isMounted && this.isMainGorup()) {
-      return this.renderPortal();
+    if (root && hasGroup && isInDOM.current) {
+      ReactDOM.render(React.createElement(TooltipContainer, _extends({}, props, {
+        targetElement: getTargetElement(target),
+        active: isActive
+      })), root);
     }
 
     return null;
+  };
+
+  if (!hasGroup) {
+    var _tooltipPortal$group4;
+
+    const root = (_tooltipPortal$group4 = tooltipPortal[group]) === null || _tooltipPortal$group4 === void 0 ? void 0 : _tooltipPortal$group4.node;
+
+    if (root) {
+      return ReactDOM.createPortal(isInDOM.current || keepInDOM ? React.createElement(TooltipContainer, _extends({}, props, {
+        targetElement: getTargetElement(target),
+        active: isActive
+      }), children) : null, root);
+    }
   }
 
+  return null;
 }
 
-_defineProperty(TooltipPortal, "defaultProps", {
-  internal_id: null,
-  active: false,
-  group: 'main',
-  hide_delay: 500
-});
-
-process.env.NODE_ENV !== "production" ? TooltipPortal.propTypes = {
-  internal_id: PropTypes.string,
-  target: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
-  active: PropTypes.bool,
-  group: PropTypes.string,
-  hide_delay: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-} : void 0;
+export default TooltipPortal;
+
+const createGroupElement = id => {
+  try {
+    const elem = document.createElement('div');
+    elem.classList.add('dnb-tooltip__group');
+    elem.setAttribute('id', id);
+    createRootElement('dnb-tooltip__portal').appendChild(elem);
+    return elem;
+  } catch (e) {
+    warn(e);
+  }
+};
+
+const createRootElement = className => {
+  try {
+    const element = document.querySelector(`.${className}`);
+
+    if (element) {
+      return element;
+    }
+
+    const elem = document.createElement('div');
+    elem.classList.add(className);
+    elem.classList.add('dnb-core-style');
+    document.body.appendChild(elem);
+    return elem;
+  } catch (e) {
+    warn(e);
+  }
+};

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

@@ -1,37 +1,13 @@
-import * as React from 'react';
-export type TooltipWithEventsShowDelay = string | number;
-export type TooltipWithEventsTarget =
-  | string
-  | Object
-  | ((...args: any[]) => any)
-  | React.ReactNode;
-export type TooltipWithEventsChildren =
-  | string
-  | ((...args: any[]) => any)
-  | React.ReactNode;
-
 /**
- * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
+ * Web Tooltip Component
+ *
  */
-export interface TooltipWithEventsProps
-  extends React.HTMLProps<HTMLElement> {
-  internal_id?: string;
-
-  /**
-   * Define the delay until the tooltip should show up after the initial hover / active state.
-   */
-  show_delay?: TooltipWithEventsShowDelay;
-  target?: TooltipWithEventsTarget;
-
-  /**
-   * Provide a string or a React Element to be shown as the tooltip content.
-   */
-  children?: TooltipWithEventsChildren;
-}
-export default class TooltipWithEvents extends React.Component<
-  TooltipWithEventsProps,
-  any
-> {
-  static defaultProps: object;
-  render(): JSX.Element;
-}
+import React from 'react';
+import { TooltipProps } from './types';
+declare type TooltipWithEventsProps = {
+    target: React.ReactElement & React.RefObject<HTMLElement>;
+    active: boolean;
+    internalId: string;
+};
+declare function TooltipWithEvents(props: TooltipProps & TooltipWithEventsProps): JSX.Element;
+export default TooltipWithEvents;

package/es/components/tooltip/TooltipWithEvents.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 const _excluded = ["children", "target"];
 
 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; }
@@ -8,178 +8,154 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 import React from 'react';
-import PropTypes from 'prop-types';
-import { combineDescribedBy, getInnerRef, warn } from '../../shared/component-helper';
+import { combineDescribedBy, warn } from '../../shared/component-helper';
+import { getRefElement, injectTooltipSemantic, isTouch, useHandleAria } from './TooltipHelpers';
 import TooltipPortal from './TooltipPortal';
-import { injectTooltipSemantic } from './TooltipHelpers';
-export default class TooltipWithEvents extends React.PureComponent {
-  constructor(props) {
-    super(props);
-
-    _defineProperty(this, "state", {
-      isActive: false,
-      isNotSemanticElement: false
-    });
-
-    _defineProperty(this, "handleSemanticElement", () => {
-      try {
-        const targetElement = document.querySelector(`*[aria-describedby*="${this.props.internal_id}"]`);
-
-        if (targetElement) {
-          const role = targetElement.getAttribute('role');
-
-          if (/div|p|span/i.test(targetElement === null || targetElement === void 0 ? void 0 : targetElement.tagName) && (!role || role === 'text')) {
-            this.setState({
-              isNotSemanticElement: true
-            });
-          }
-        }
-      } catch (e) {
-        warn(e);
-      }
-    });
-
-    _defineProperty(this, "addEvents", () => {
-      const domElement = getInnerRef(this._ref).current;
-
-      try {
-        domElement.addEventListener('click', this.onMouseLeave);
-        domElement.addEventListener('focus', this.onFocus);
-        domElement.addEventListener('blur', this.onMouseLeave);
-        domElement.addEventListener('mouseenter', this.onMouseEnter);
-        domElement.addEventListener('mouseleave', this.onMouseLeave);
-        domElement.addEventListener('touchstart', this.onMouseEnter);
-        domElement.addEventListener('touchend', this.onMouseLeave);
-      } catch (e) {
-        warn(e);
-      }
-    });
 
-    _defineProperty(this, "isTouch", e => {
-      return /touch/i.test(e.type);
-    });
+function TooltipWithEvents(props) {
+  const {
+    children,
+    target
+  } = props,
+        restProps = _objectWithoutProperties(props, _excluded);
+
+  const [isActive, setIsActive] = React.useState(false);
+  const [isNotSemanticElement, setIsNotSemanticElement] = React.useState(false);
+  const [isMounted, setIsMounted] = React.useState(false);
+  const onEnterTimeout = React.useRef();
+  const targetRef = React.useRef();
+  const cloneRef = React.useRef();
+  React.useEffect(() => {
+    targetRef.current = getRefElement(cloneRef);
+
+    if (!targetRef.current) {
+      targetRef.current = target.current;
+    }
+
+    if (targetRef.current) {
+      setIsMounted(true);
+      addEvents(targetRef.current);
+      handleSemanticElement();
+    }
 
-    _defineProperty(this, "onFocus", e => {
-      try {
-        if (document.documentElement.getAttribute('data-whatintent') === 'keyboard') {
-          return this.onMouseEnter(e);
+    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);
         }
-      } catch (e) {
-        warn(e);
       }
-    });
+    };
+  }, []);
 
-    _defineProperty(this, "onMouseEnter", e => {
-      try {
-        const isTouch = this.isTouch(e);
+  const handleSemanticElement = () => {
+    try {
+      const targetElement = document.querySelector(`*[aria-describedby*="${props.internalId}"]`);
 
-        if (isTouch) {
-          const elem = e.currentTarget;
-          elem.style.userSelect = 'none';
+      if (targetElement) {
+        const role = targetElement.getAttribute('role');
+
+        if (/div|p|span/i.test(targetElement === null || targetElement === void 0 ? void 0 : targetElement.tagName) && (!role || role === 'text')) {
+          setIsNotSemanticElement(true);
         }
-      } catch (e) {
-        warn(e);
       }
+    } catch (e) {
+      warn(e);
+    }
+  };
+
+  const addEvents = element => {
+    try {
+      element.addEventListener('click', onMouseLeave);
+      element.addEventListener('focus', onFocus);
+      element.addEventListener('blur', onMouseLeave);
+      element.addEventListener('mouseenter', onMouseEnter);
+      element.addEventListener('mousedown', onMouseEnter);
+      element.addEventListener('mouseleave', onMouseLeave);
+      element.addEventListener('touchstart', onMouseEnter);
+      element.addEventListener('touchend', onMouseLeave);
+    } catch (e) {
+      warn(e);
+    }
+  };
 
-      clearTimeout(this._onEnterTimeout);
-      this._onEnterTimeout = setTimeout(() => {
-        this.setState({
-          isActive: true,
-          clientX: e.clientX
-        });
-      }, typeof window !== 'undefined' && !window.IS_TEST ? parseFloat(this.props.show_delay) || 1 : 1);
-    });
-
-    _defineProperty(this, "onMouseLeave", e => {
-      try {
-        const isTouch = this.isTouch(e);
-
-        if (isTouch) {
-          const elem = e.currentTarget;
-          elem.style.userSelect = '';
-        }
-      } catch (e) {
-        warn(e);
+  const onFocus = e => {
+    try {
+      if (document.documentElement.getAttribute('data-whatintent') === 'keyboard') {
+        return onMouseEnter(e);
       }
+    } catch (e) {
+      warn(e);
+    }
+  };
 
-      clearTimeout(this._onEnterTimeout);
-      this.setState({
-        isActive: false
-      });
-    });
-
-    this._ref = Object.prototype.hasOwnProperty.call(props.target, 'current') ? props.target : React.createRef();
-  }
-
-  componentDidMount() {
-    this.setState({
-      _isMounted: true
-    }, () => {
-      this.addEvents();
-      this.handleSemanticElement();
-    });
-  }
-
-  componentWillUnmount() {
-    clearTimeout(this._onEnterTimeout);
-    const domElement = getInnerRef(this._ref).current;
-
-    if (domElement) {
-      try {
-        domElement.removeEventListener('click', this.onMouseLeave);
-        domElement.removeEventListener('focus', this.onFocus);
-        domElement.removeEventListener('blur', this.onMouseLeave);
-        domElement.removeEventListener('mouseenter', this.onMouseEnter);
-        domElement.removeEventListener('mouseleave', this.onMouseLeave);
-        domElement.removeEventListener('touchstart', this.onMouseEnter);
-        domElement.removeEventListener('touchend', this.onMouseLeave);
-      } catch (e) {
-        warn(e);
+  const onMouseEnter = e => {
+    try {
+      if (isTouch(e.type)) {
+        const elem = e.currentTarget;
+        elem.style.userSelect = 'none';
       }
+    } catch (e) {
+      warn(e);
     }
-  }
 
-  render() {
-    const _this$props = this.props,
-          {
-      children,
-      target
-    } = _this$props,
-          props = _objectWithoutProperties(_this$props, _excluded);
+    const run = () => {
+      setIsActive(true);
+    };
 
-    let componentWrapper = null;
+    if (props.noAnimation || globalThis.IS_TEST) {
+      run();
+    } else {
+      clearTimeout(onEnterTimeout.current);
+      onEnterTimeout.current = setTimeout(run, parseFloat(String(props.showDelay)) || 1);
+    }
+  };
 
+  const onMouseLeave = e => {
+    try {
+      if (isTouch(e.type)) {
+        const elem = e.currentTarget;
+        elem.style.userSelect = '';
+      }
+    } catch (e) {
+      warn(e);
+    }
+
+    clearTimeout(onEnterTimeout.current);
+    setIsActive(false);
+  };
+
+  const componentWrapper = React.useMemo(() => {
     if (React.isValidElement(target)) {
-      const params = this.state.isNotSemanticElement ? injectTooltipSemantic({
+      const params = isNotSemanticElement ? injectTooltipSemantic({
         className: props.className
       }) : {};
-      componentWrapper = React.cloneElement(target, _objectSpread(_objectSpread({
-        ref: this._ref
+      return React.cloneElement(target, _objectSpread(_objectSpread({
+        ref: cloneRef
       }, params), {}, {
-        'aria-describedby': combineDescribedBy(target.props, this.props.internal_id)
+        'aria-describedby': combineDescribedBy(target.props, props.internalId)
       }));
     }
 
-    return React.createElement(React.Fragment, null, componentWrapper, this.state._isMounted && React.createElement(TooltipPortal, _extends({
-      key: "tooltip",
-      active: this.state.isActive,
-      target: getInnerRef(this._ref).current,
-      clientX: this.state.clientX
-    }, props), children));
-  }
-
+    return null;
+  }, [target]);
+  useHandleAria(target, props.internalId);
+  return React.createElement(React.Fragment, null, componentWrapper, isMounted && React.createElement(TooltipPortal, _extends({
+    key: "tooltip",
+    active: isActive,
+    target: targetRef.current,
+    keepInDOM: true
+  }, restProps), children));
 }
 
-_defineProperty(TooltipWithEvents, "defaultProps", {
-  internal_id: null,
-  show_delay: 1,
-  target: null,
-  children: null
-});
-
-process.env.NODE_ENV !== "production" ? TooltipWithEvents.propTypes = {
-  internal_id: PropTypes.string,
-  show_delay: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  target: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.func, PropTypes.node]),
-  children: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.node])
-} : void 0;
+export default TooltipWithEvents;