@dnb/eufemia 9.29.0 → 9.31.0

package/es/components/tooltip/TooltipContainer.js

@@ -6,304 +6,204 @@ 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 { isTrue } from '../../shared/component-helper';
 import { getOffsetLeft } from '../../shared/helpers';
 import classnames from 'classnames';
-export default class TooltipContainer extends React.PureComponent {
-  constructor(...args) {
-    super(...args);
-
-    _defineProperty(this, "_rootRef", React.createRef());
-
-    _defineProperty(this, "offset", 16);
+export default function TooltipContainer(props) {
+  const {
+    internalId,
+    active,
+    attributes,
+    arrow,
+    position,
+    animatePosition,
+    fixedPosition,
+    noAnimation,
+    useHover,
+    children
+  } = props;
+  const [style, setStyle] = React.useState(null);
+  const [hover, setHover] = React.useState(false);
+  const isActive = isTrue(active) || hover;
+  const [wasActive, makeActive] = React.useState(false);
+  const [renewStyles, forceRerender] = React.useState(getBodySize);
+  const elementRef = React.useRef(null);
+  const offset = React.useRef(16);
+  const debounceTimeout = React.useRef();
+  const resizeObserver = React.useRef(null);
+
+  function getBodySize() {
+    if (!isActive || typeof document === 'undefined') {
+      return 0;
+    }
 
-    _defineProperty(this, "state", {
-      hide: null,
-      hover: null,
-      width: 0,
-      height: 0
-    });
+    const {
+      width,
+      height
+    } = document.body.getBoundingClientRect();
+    return width + height;
+  }
 
-    _defineProperty(this, "handleMouseEnter", () => {
-      if (isTrue(this.props.active) && this.props.useHover) {
-        this.setState({
-          hover: true
-        });
+  React.useLayoutEffect(() => {
+    const addPositionObserver = () => {
+      if (resizeObserver.current || typeof document === 'undefined') {
+        return;
       }
-    });
 
-    _defineProperty(this, "handleMouseLeave", () => {
-      if (this.props.useHover) {
-        this.setState({
-          hover: false
+      try {
+        resizeObserver.current = new ResizeObserver(entries => {
+          clearTimeout(debounceTimeout.current);
+          debounceTimeout.current = setTimeout(() => forceRerender(getBodySize()), 100);
         });
-      }
-    });
-  }
-
-  static getDerivedStateFromProps(props, state) {
-    if (state.leaveInDOM && !props.active && !state.hover) {
-      state.hide = true;
-    }
-
-    if (props.active || state.hover) {
-      state.leaveInDOM = true;
-      state.hide = false;
-    }
+        resizeObserver.current.observe(document.body);
+      } catch (e) {}
+    };
 
-    return state;
-  }
+    const removePositionObserver = () => {
+      var _resizeObserver$curre;
 
-  componentDidMount() {
-    if (isTrue(this.props.active)) {
-      this.updateSize();
-    }
+      clearTimeout(debounceTimeout.current);
+      (_resizeObserver$curre = resizeObserver.current) === null || _resizeObserver$curre === void 0 ? void 0 : _resizeObserver$curre.disconnect();
+    };
 
-    this.addPositionObserver();
-  }
-
-  componentDidUpdate(prevProps) {
-    if (this.props !== prevProps) {
-      this.updateSize();
+    if (isActive) {
+      makeActive(true);
+      addPositionObserver();
+    } else {
+      removePositionObserver();
     }
-  }
 
-  componentWillUnmount() {
-    this.removePositionObserver();
-  }
+    return removePositionObserver;
+  }, [isActive]);
+  React.useLayoutEffect(() => {
+    const element = elementRef === null || elementRef === void 0 ? void 0 : elementRef.current;
+    const {
+      targetElement: target,
+      align,
+      fixedPosition
+    } = props;
 
-  addPositionObserver() {
-    if (this.resizeObserver || typeof document === 'undefined') {
+    if (typeof window === 'undefined' || !element || !(target !== null && target !== void 0 && target.getBoundingClientRect)) {
       return;
     }
 
-    try {
-      this.resizeObserver = new ResizeObserver(entries => {
-        clearTimeout(this._ddt);
-        this._ddt = setTimeout(() => {
-          this.setState({
-            w: entries[0].contentRect.width,
-            h: entries[0].contentRect.height
-          });
-        }, 30);
-      });
-      this.resizeObserver.observe(document.body);
-    } catch (e) {}
-  }
-
-  removePositionObserver() {
-    clearTimeout(this._ddt);
-
-    if (this.resizeObserver) {
-      this.resizeObserver.disconnect();
-      this.resizeObserver = null;
+    const elementWidth = element.offsetWidth;
+    const elementHeight = element.offsetHeight;
+    let alignOffset = 0;
+    const rect = target.getBoundingClientRect();
+    const targetBodySize = {
+      width: target.offsetWidth,
+      height: target.offsetHeight
+    };
+
+    if (!target.offsetHeight) {
+      targetBodySize.width = rect.width;
+      targetBodySize.height = rect.height;
     }
-  }
 
-  getGlobalStyle() {
-    if (!this.props.targetElement) {
-      return {
-        display: 'none'
-      };
-    }
+    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 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;
 
-    return this.makeStyle(this.props.position, this.props.arrow);
-  }
+    const style = _objectSpread({}, props.style);
 
-  makeStyle(position, arrow) {
-    if (typeof window === 'undefined') {
-      return {};
+    if (align === 'left') {
+      alignOffset = -targetBodySize.width / 2;
+    } else if (align === 'right') {
+      alignOffset = targetBodySize.width / 2;
     }
 
-    let alignOffset = 0;
-
-    try {
-      const {
-        targetElement: target,
-        align,
-        fixed_position,
-        clientX
-      } = this.props;
-      const rect = target.getBoundingClientRect();
-      const targetSize = {
-        width: target.offsetWidth,
-        height: target.offsetHeight
-      };
-
-      if (!target.offsetHeight) {
-        targetSize.width = rect.width;
-        targetSize.height = rect.height;
+    const topHorizontal = top + targetBodySize.height / 2 - elementHeight / 2;
+    const leftVertical = left - elementWidth / 2 + targetBodySize.width / 2 + alignOffset;
+    const stylesFromPosition = {
+      left: () => {
+        style.top = topHorizontal;
+        style.left = left - elementWidth - offset.current;
+      },
+      right: () => {
+        style.top = topHorizontal;
+        style.left = left + targetBodySize.width + offset.current;
+      },
+      top: () => {
+        style.left = leftVertical;
+        style.top = top - elementHeight - offset.current;
+      },
+      bottom: () => {
+        style.left = leftVertical;
+        style.top = top + targetBodySize.height + offset.current;
       }
-
-      const scrollY = window.scrollY !== undefined ? window.scrollY : window.pageYOffset;
-      const scrollX = window.scrollX !== undefined ? window.scrollX : window.pageXOffset;
-      const top = (isTrue(fixed_position) ? 0 : scrollY) + rect.top;
-      const useMouseWhen = targetSize.width > 400;
-      const mousePos = clientX - getOffsetLeft(target) + rect.left / 2 + (this._rootRef.current ? this._rootRef.current.offsetWidth : 0);
-      const widthBased = scrollX + rect.left;
-      const left = useMouseWhen && mousePos < targetSize.width ? mousePos : widthBased;
-
-      const style = _objectSpread({}, this.props.style);
-
-      if (align === 'left') {
-        alignOffset = -targetSize.width / 2;
-      } else if (align === 'right') {
-        alignOffset = targetSize.width / 2;
+    };
+    const stylesFromArrow = {
+      left: () => {
+        style.left = left + targetBodySize.width / 2 - offset.current + alignOffset;
+      },
+      right: () => {
+        style.left = left - elementWidth + targetBodySize.width / 2 + offset.current + alignOffset;
+      },
+      top: () => {
+        style.top = top + targetBodySize.height / 2 - offset.current;
+      },
+      bottom: () => {
+        style.top = top + targetBodySize.height / 2 - elementHeight + offset.current;
       }
+    };
 
-      const stylesFromPosition = {
-        left: () => {
-          style.top = top + targetSize.height / 2 - this.state.height / 2;
-          style.left = left - this.state.width - this.offset;
-        },
-        right: () => {
-          style.top = top + targetSize.height / 2 - this.state.height / 2;
-          style.left = left + targetSize.width + this.offset;
-        },
-        top: () => {
-          style.left = left - this.state.width / 2 + targetSize.width / 2 + alignOffset;
-          style.top = top - this.state.height - this.offset;
-        },
-        bottom: () => {
-          style.left = left - this.state.width / 2 + targetSize.width / 2 + alignOffset;
-          style.top = top + targetSize.height + this.offset;
-        }
-      };
-      const stylesFromArrow = {
-        left: () => {
-          style.left = left + targetSize.width / 2 - this.offset + alignOffset;
-        },
-        right: () => {
-          style.left = left - this.state.width + targetSize.width / 2 + this.offset + alignOffset;
-        },
-        top: () => {
-          style.top = top + targetSize.height / 2 - this.offset;
-        },
-        bottom: () => {
-          style.top = top + targetSize.height / 2 - this.state.height + this.offset;
-        }
-      };
+    if (stylesFromPosition[position]) {
+      stylesFromPosition[position]();
+    }
 
-      if (stylesFromPosition[position]) {
-        stylesFromPosition[position]();
-      }
+    if (stylesFromArrow[arrow]) {
+      stylesFromArrow[arrow]();
+    }
 
-      if (stylesFromArrow[arrow]) {
-        stylesFromArrow[arrow]();
-      }
+    const rightOffset = parseFloat(String(style.left)) + elementWidth - window.innerWidth;
 
-      return style;
-    } catch (e) {
-      return {};
+    if (rightOffset > 0) {
+      style.left = window.innerWidth - elementWidth;
     }
-  }
 
-  checkWindowPosition(style) {
     if (style.left < 0) {
-      style.left = this.offset;
-    } else {
-      try {
-        const rightOffset = style.left + this.state.width - window.innerWidth;
-
-        if (rightOffset > 0) {
-          style.left = window.innerWidth - this.state.width - this.offset;
-        }
-      } catch (e) {}
+      style.left = 0;
     }
 
-    return style;
-  }
-
-  updateSize() {
-    try {
-      if (!this.state.height) {
-        this._rootRef.current.style.left = '';
-      }
-
-      const width = this._rootRef.current.offsetWidth;
-      const height = this._rootRef.current.offsetHeight;
-
-      if (width !== this.state.width || height !== this.state.height) {
-        this.setState({
-          width,
-          height
-        });
-      }
-    } catch (e) {}
-  }
-
-  render() {
-    const {
-      internal_id,
-      active,
-      attributes,
-      arrow,
-      position,
-      animate_position,
-      fixed_position,
-      no_animation,
-      children
-    } = this.props;
-    const {
-      hover,
-      hide
-    } = this.state;
-    const isActive = isTrue(active) || hover;
+    if (style.top < 0) {
+      style.top = 0;
+    }
 
     if (isActive) {
-      this._style = this.checkWindowPosition(this.getGlobalStyle());
+      setStyle(style);
     }
+  }, [isActive, arrow, position, children, renewStyles]);
 
-    return React.createElement("span", _extends({
-      role: "tooltip",
-      "aria-hidden": true,
-      style: this._style,
-      ref: this._rootRef,
-      onMouseEnter: this.handleMouseEnter,
-      onMouseLeave: this.handleMouseLeave
-    }, attributes, {
-      className: classnames(attributes.className, isActive ? 'dnb-tooltip--active' : hide && 'dnb-tooltip--hide', isTrue(animate_position) && 'dnb-tooltip--animate_position', isTrue(no_animation) && 'dnb-tooltip--no-animation', isTrue(fixed_position) && 'dnb-tooltip--fixed')
-    }), arrow && React.createElement("span", {
-      className: `dnb-tooltip__arrow dnb-tooltip__arrow__arrow--${arrow} dnb-tooltip__arrow__position--${position}`
-    }), React.createElement("span", {
-      id: internal_id,
-      className: "dnb-tooltip__content"
-    }, children));
-  }
-
-}
-
-_defineProperty(TooltipContainer, "defaultProps", {
-  internal_id: null,
-  targetElement: null,
-  clientX: null,
-  active: false,
-  position: 'center',
-  arrow: null,
-  align: null,
-  animate_position: null,
-  fixed_position: null,
-  no_animation: null,
-  useHover: true,
-  style: null,
-  attributes: null,
-  children: null
-});
+  const handleMouseEnter = () => {
+    if (isTrue(active) && useHover !== false) {
+      setHover(true);
+    }
+  };
 
-process.env.NODE_ENV !== "production" ? TooltipContainer.propTypes = {
-  internal_id: PropTypes.string,
-  targetElement: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.object, PropTypes.node]),
-  clientX: PropTypes.number,
-  active: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  position: PropTypes.string,
-  arrow: PropTypes.string,
-  align: PropTypes.string,
-  animate_position: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  fixed_position: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  no_animation: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  useHover: PropTypes.bool,
-  style: PropTypes.object,
-  attributes: PropTypes.object,
-  children: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.node])
-} : void 0;
+  const handleMouseLeave = () => {
+    if (useHover !== false) {
+      setHover(false);
+    }
+  };
+
+  return React.createElement("span", _extends({
+    role: "tooltip",
+    "aria-hidden": true,
+    ref: elementRef,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave
+  }, 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)
+  }), arrow && React.createElement("span", {
+    className: `dnb-tooltip__arrow dnb-tooltip__arrow__arrow--${arrow} dnb-tooltip__arrow__position--${position}`
+  }), React.createElement("span", {
+    id: internalId,
+    className: "dnb-tooltip__content"
+  }, children));
+}

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

@@ -1 +1,31 @@
-export function injectTooltipSemantic(params: any): any;
+/**
+ * Web Tooltip Component
+ *
+ */
+import React from 'react';
+export declare function injectTooltipSemantic(params: any): any;
+export declare const defaultProps: {
+    id: any;
+    group: any;
+    size: string;
+    active: any;
+    position: string;
+    arrow: string;
+    align: any;
+    animatePosition: boolean;
+    fixedPosition: boolean;
+    skipPortal: any;
+    noAnimation: boolean;
+    showDelay: number;
+    hideDelay: number;
+    targetSelector: any;
+    targetElement: any;
+    className: any;
+    children: any;
+    tooltip: any;
+};
+export declare function getTargetElement(target: HTMLElement): HTMLElement;
+export declare function useHandleAria(targetElement: React.RefObject<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

@@ -1,6 +1,71 @@
+import React from 'react';
 import classnames from 'classnames';
+import { combineDescribedBy } from '../../shared/component-helper';
 export function injectTooltipSemantic(params) {
   params.tabIndex = '0';
   params.className = classnames("dnb-tooltip__wrapper dnb-tab-focus", params.className);
   return params;
-}
+}
+export const defaultProps = {
+  id: null,
+  group: null,
+  size: 'basis',
+  active: null,
+  position: 'top',
+  arrow: 'center',
+  align: null,
+  animatePosition: false,
+  fixedPosition: false,
+  skipPortal: null,
+  noAnimation: false,
+  showDelay: 300,
+  hideDelay: 500,
+  targetSelector: null,
+  targetElement: null,
+  className: null,
+  children: null,
+  tooltip: null
+};
+export function getTargetElement(target) {
+  if (typeof document !== 'undefined') {
+    return typeof target === 'string' ? typeof document !== 'undefined' && document.querySelector(target) : 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));
+      }
+    } catch (e) {}
+  }, [targetElement, internalId]);
+}
+export function getPropsFromTooltipProp(localProps) {
+  return localProps.tooltip ? React.isValidElement(localProps.tooltip) && localProps.tooltip.props ? localProps.tooltip.props : {
+    children: localProps.tooltip
+  } : null;
+}
+export function getRefElement(target) {
+  var _unknownTarget$curren;
+
+  const unknownTarget = target;
+  let element = target;
+
+  if (unknownTarget !== null && unknownTarget !== void 0 && (_unknownTarget$curren = unknownTarget.current) !== null && _unknownTarget$curren !== void 0 && _unknownTarget$curren._ref) {
+    element = getRefElement(unknownTarget.current._ref);
+  }
+
+  if (Object.prototype.hasOwnProperty.call(element, 'current')) {
+    element = element.current;
+  }
+
+  return element;
+}
+export const isTouch = type => {
+  return /touch/i.test(type);
+};

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

@@ -1,33 +1,15 @@
-import * as React from 'react';
-export type TooltipPortalTarget = string | Object;
-export type TooltipPortalHideDelay = string | number;
-
 /**
- * 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 TooltipPortalProps extends React.HTMLProps<HTMLElement> {
-  internal_id?: string;
-  target: TooltipPortalTarget;
-
-  /**
-   * Set to `true` the tooltip will show up.
-   */
-  active?: boolean;
-
-  /**
-   * If the tooltip should animate from one target to the next, define a unique ID.
-   */
-  group?: string;
-
-  /**
-   * Define the delay until the tooltip should disappear up after initial visibility.
-   */
-  hide_delay?: TooltipPortalHideDelay;
-}
-export default class TooltipPortal extends React.Component<
-  TooltipPortalProps,
-  any
-> {
-  static defaultProps: object;
-  render(): JSX.Element;
-}
+import React from 'react';
+import { TooltipProps } from './types';
+declare type TooltipPortalProps = {
+    target: HTMLElement;
+    active: boolean;
+    keepInDOM?: boolean;
+    group?: string;
+    children?: React.ReactNode;
+};
+declare function TooltipPortal(props: TooltipProps & TooltipPortalProps): React.ReactPortal;
+export default TooltipPortal;