diginet-core-ui 1.4.39 → 1.4.40

package/components/tooltip/index.js

@@ -1,522 +0,0 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { css, jsx } from '@emotion/core';
-import PropTypes from 'prop-types';
-import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
-import { bgColor, borderRadius4px, boxBorder, breakWord, displayInlineBlock, parseWidthHeight, positionAbsolute, textColor, userSelectNone, z } from "../../styles/general";
-import { useTheme } from "../../theme";
-import { classNames, getProp, randomString } from "../../utils";
-const defaultViewPadding = 4;
-const hiddenPositions = {
-  tooltip: {
-    left: '-10000000px',
-    opacity: 0
-  },
-  arrow: {
-    border: 'none',
-    left: '-10000000px',
-    opacity: 0,
-    top: '-10000000px'
-  }
-};
-const getScrollTop = () => {
-  var _ref, _ref2, _window$pageYOffset;
-  return (_ref = (_ref2 = (_window$pageYOffset = window.pageYOffset) !== null && _window$pageYOffset !== void 0 ? _window$pageYOffset : document.documentElement.scrollTop) !== null && _ref2 !== void 0 ? _ref2 : document.body.scrollTop) !== null && _ref !== void 0 ? _ref : 0;
-};
-const getScrollLeft = () => {
-  var _ref3, _ref4, _window$pageXOffset;
-  return (_ref3 = (_ref4 = (_window$pageXOffset = window.pageXOffset) !== null && _window$pageXOffset !== void 0 ? _window$pageXOffset : document.documentElement.scrollLeft) !== null && _ref4 !== void 0 ? _ref4 : document.body.scrollLeft) !== null && _ref3 !== void 0 ? _ref3 : 0;
-};
-const getArrowSpacing = (arrow, arrowSize, distance) => {
-  const defaultArrowSpacing = arrow ? arrowSize : 0;
-  return typeof distance === 'number' ? distance : defaultArrowSpacing;
-};
-const parseAlignMode = alignMode => {
-  if (alignMode.split('-').length > 1) {
-    return alignMode.split('-')[1];
-  }
-  return 'middle';
-};
-const Tooltip = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(({
-  action = {},
-  alignMode,
-  arrow,
-  arrowSize,
-  backgroundColor: backgroundColorProp,
-  children,
-  className,
-  color: colorProp,
-  direction,
-  disabled,
-  disableInteractive,
-  distance,
-  forceDirection,
-  hoverDelay,
-  padding,
-  size,
-  style,
-  tagCreatedName: TagCreatedName,
-  textAlign,
-  title,
-  tooltipMaxWidth,
-  viewportPadding,
-  ...props
-}, reference) => {
-  const Id = randomString(6, {
-    allowSymbol: false
-  });
-  const IDs = {
-    arrow: 'DGN-UI-tooltip-arrow-' + Id,
-    container: 'DGN-UI-tooltip-container-' + Id,
-    main: 'DGN-UI-tooltip-main-' + Id
-  };
-  const ref = useRef(null);
-  const arrowRef = useRef(null);
-  const tooltipRef = useRef(null);
-  const calculateTimeoutRef = useRef(null);
-  const hoverTimeoutRef = useRef(null);
-  const [open, setOpen] = useState(false);
-  const theme = useTheme();
-  const backgroundColor = getProp(theme.colors, backgroundColorProp, backgroundColorProp);
-  const color = getProp(theme.colors, colorProp, colorProp);
-  const _MainCSS = MainCSS(backgroundColor, color, size, padding, textAlign, theme);
-  const checkHorizontal = (distance, el, parent) => {
-    const {
-      left,
-      right
-    } = parent.getBoundingClientRect();
-    const clientW = document.documentElement.clientWidth;
-    const deadSpace = Math.min(left, clientW - right);
-    return el.offsetWidth + parent.offsetWidth + distance + viewportPadding + deadSpace < clientW;
-  };
-  const checkParent = (el, parent) => {
-    const {
-      bottom,
-      top
-    } = parent.getBoundingClientRect();
-    const bottomOverhang = bottom > window.innerHeight;
-    const topOverhang = top < 0;
-    if (topOverhang && bottomOverhang) {
-      return true;
-    }
-    if (parent.offsetHeight > el.offsetHeight) {
-      const halfTargetHeight = parent.offsetHeight / 2;
-      const arrowFree = arrowSize + 6;
-      const bOAmount = bottom - window.innerHeight;
-      const tOAmount = -top;
-      const centerToBottom = halfTargetHeight - bOAmount;
-      const centerToTop = halfTargetHeight - tOAmount;
-      return centerToBottom >= arrowFree && centerToTop >= arrowFree;
-    }
-    return !bottomOverhang && !topOverhang;
-  };
-  const checkArrowOverhang = arrowStyles => {
-    const scrollLeft = getScrollLeft();
-    const enoughLeft = arrowStyles.position.left - scrollLeft > viewportPadding;
-    const enoughRight = arrowStyles.position.left + arrowSize * 2 < scrollLeft + document.documentElement.clientWidth - viewportPadding;
-    return !enoughLeft || !enoughRight;
-  };
-  const getTooltipMaxWidth = () => {
-    return tooltipMaxWidth ? tooltipMaxWidth : typeof document !== 'undefined' ? document.documentElement.clientWidth - viewportPadding * 2 : 300;
-  };
-  const getArrowStyles = (direction, el, parent) => {
-    if (!parent || !arrow) {
-      return {
-        position: {
-          top: 0,
-          left: -10000000
-        }
-      };
-    }
-    const parentRect = parent.getBoundingClientRect();
-    const halfParentH = parent.offsetHeight / 2;
-    const halfParentW = parent.offsetWidth / 2;
-    const scrollTop = getScrollTop();
-    const scrollLeft = getScrollLeft();
-    const arrowSpacing = getArrowSpacing(arrow, arrowSize, distance);
-    const border = {};
-    const position = {};
-    switch (direction) {
-      case 'right':
-        border.borderLeft = `${arrowSize}px solid transparent`;
-        border.borderTop = `${arrowSize}px solid transparent`;
-        border.borderBottom = `${arrowSize}px solid transparent`;
-        border.borderRight = `${arrowSize}px solid ${backgroundColor}`;
-        position.top = el ? parentRect.top + scrollTop + halfParentH - arrowSize - 1 : '-10000000px';
-        position.left = parentRect.right + scrollLeft - arrowSize + 1;
-        break;
-      case 'left':
-        border.borderRight = `${arrowSize}px solid transparent`;
-        border.borderTop = `${arrowSize}px solid transparent`;
-        border.borderBottom = `${arrowSize}px solid transparent`;
-        border.borderLeft = `${arrowSize}px solid ${backgroundColor}`;
-        position.top = el ? parentRect.top + scrollTop + halfParentH - arrowSize - 1 : '-10000000px';
-        position.left = parentRect.left + scrollLeft - arrowSpacing - 1;
-        break;
-      case 'up':
-        border.borderBottom = `${arrowSize}px solid transparent`;
-        border.borderLeft = `${arrowSize}px solid transparent`;
-        border.borderRight = `${arrowSize}px solid transparent`;
-        border.borderTop = `${arrowSize}px solid ${backgroundColor}`;
-        position.left = el ? parentRect.left + scrollLeft + halfParentW - arrowSize : '-10000000px';
-        position.top = parentRect.top + scrollTop - arrowSpacing;
-        break;
-      case 'down':
-      default:
-        border.borderUp = `${arrowSize}px solid transparent`;
-        border.borderLeft = `${arrowSize}px solid transparent`;
-        border.borderRight = `${arrowSize}px solid transparent`;
-        border.borderBottom = `${arrowSize}px solid ${backgroundColor}`;
-        position.left = el ? parentRect.left + scrollLeft + halfParentW - arrowSize : '-10000000px';
-        position.top = parentRect.bottom + scrollTop + arrowSpacing + 1 - arrowSize;
-        break;
-    }
-    return {
-      border,
-      position
-    };
-  };
-  const getDirection = (arrowStyles, currentDirection, el, parent, recursive) => {
-    if (!parent) {
-      return currentDirection;
-    }
-    const clientW = document.documentElement.clientWidth;
-    const parentRect = parent.getBoundingClientRect();
-    const arrowSpacing = getArrowSpacing(arrow, arrowSize, distance);
-    const wrapperHeight = el.offsetHeight + arrowSpacing + viewportPadding;
-    const spaceBelow = window.innerHeight - parentRect.bottom;
-    const spaceAbove = parentRect.top;
-    const enoughBelow = spaceBelow >= wrapperHeight;
-    const enoughAbove = spaceAbove >= wrapperHeight;
-    switch (currentDirection) {
-      case 'right':
-        if (!checkHorizontal(arrowSpacing, el, parent) || !checkParent(el, parent)) {
-          return getDirection(arrowStyles, 'down', el, parent, true);
-        }
-        if (clientW - parentRect.right < el.offsetWidth + arrowSpacing + viewportPadding) {
-          return 'left';
-        }
-        return 'right';
-      case 'left':
-        if (!checkHorizontal(arrowSpacing, el, parent) || !checkParent(el, parent)) {
-          return getDirection(arrowStyles, 'down', el, parent, true);
-        }
-        if (parentRect.left < el.offsetWidth + arrowSpacing + viewportPadding) {
-          return 'right';
-        }
-        return 'left';
-      case 'up':
-        if (!recursive && arrowStyles && checkArrowOverhang(arrowStyles)) {
-          return getDirection(arrowStyles, 'left', el, parent, true);
-        }
-        if (!enoughAbove) {
-          if (enoughBelow) {
-            return 'down';
-          }
-          if (!recursive && arrowStyles && checkHorizontal(arrowSpacing, el, parent)) {
-            return getDirection(arrowStyles, 'right', el, parent, true);
-          }
-        }
-        return 'up';
-      case 'down':
-      default:
-        if (!recursive && arrowStyles && checkArrowOverhang(arrowStyles)) {
-          return getDirection(arrowStyles, 'right', el, parent, true);
-        }
-        if (!enoughBelow) {
-          if (enoughAbove) {
-            return 'up';
-          }
-          if (!recursive && arrowStyles && checkHorizontal(arrowSpacing, el, parent)) {
-            return getDirection(arrowStyles, 'right', el, parent, true);
-          }
-        }
-        return 'down';
-    }
-  };
-  const getVertical = (alignMode, direction, el, parent) => {
-    let left = -10000000,
-      top;
-    const arrowSpacing = getArrowSpacing(arrow, arrowSize, distance);
-    if (el) {
-      const scrollLeft = getScrollLeft();
-      const parentRect = parent.getBoundingClientRect();
-      const parentLeft = parentRect.left + scrollLeft;
-      const halfParentW = parent.offsetWidth / 2;
-      const tooltipW = Math.min(getTooltipMaxWidth(), el && el.offsetWidth);
-      const arrowCenter = parentLeft + halfParentW;
-      const arrowLeft = arrowCenter - arrowSize;
-      const arrowRight = arrowCenter + arrowSize;
-      if (alignMode === 'start') {
-        left = arrow ? Math.min(arrowLeft, parentLeft) : parentLeft;
-      } else if (alignMode === 'end') {
-        const rightWithArrow = Math.max(arrowRight, parentLeft + parent.offsetWidth);
-        const rightEdge = arrow ? rightWithArrow : parentLeft + parent.offsetWidth;
-        left = Math.max(rightEdge - tooltipW, scrollLeft + viewportPadding);
-      } else {
-        const centeredLeft = parentLeft + halfParentW - tooltipW / 2;
-        const availableLeft = scrollLeft + viewportPadding;
-        left = Math.max(centeredLeft, availableLeft);
-      }
-      const rightTooltip = left + tooltipW;
-      const rightScreen = document.documentElement.clientWidth + scrollLeft - viewportPadding;
-      const rightOverhang = rightTooltip - rightScreen;
-      if (rightOverhang > 0) {
-        left -= rightOverhang;
-      }
-      if (direction === 'up') {
-        top = parentRect.top + getScrollTop() - (el.offsetHeight + arrowSpacing);
-      } else {
-        top = parentRect.bottom + getScrollTop() + arrowSpacing;
-      }
-    }
-    return {
-      left: left + 'px',
-      top: top + 'px'
-    };
-  };
-  const getHorizontal = (alignMode, direction, el, parent) => {
-    let left = -10000000,
-      top = 0;
-    const arrowSpacing = getArrowSpacing(arrow, arrowSize, distance);
-    const arrowPadding = arrow ? 6 : 0;
-    if (el) {
-      const scrollLeft = getScrollLeft();
-      const scrollTop = getScrollTop();
-      const parentRect = parent.getBoundingClientRect();
-      const parentTop = parentRect.top + scrollTop;
-      const halfParentH = parent.offsetHeight / 2;
-      const arrowTop = parentTop + halfParentH - arrowSize;
-      const arrowBottom = parentRect.top + scrollTop + halfParentH + arrowSize;
-      if (alignMode === 'start') {
-        top = arrow ? Math.min(parentTop, arrowTop) : parentTop;
-      } else if (alignMode === 'end') {
-        const topForBottomAlign = parentRect.bottom + scrollTop - el.offsetHeight;
-        top = arrow ? Math.max(topForBottomAlign, arrowBottom - el.offsetHeight) : topForBottomAlign;
-      } else {
-        const centeredTop = Math.max(parentTop + halfParentH - el.offsetHeight / 2, scrollTop + viewportPadding);
-        top = Math.min(centeredTop, arrowTop - arrowPadding);
-      }
-      const bottomOverhang = top - scrollTop + el.offsetHeight + viewportPadding - window.innerHeight;
-      if (bottomOverhang > 0) {
-        top = Math.max(top - bottomOverhang, arrowBottom + arrowPadding - el.offsetHeight);
-      }
-      if (direction === 'right') {
-        left = parentRect.right + arrowSpacing + scrollLeft;
-      } else {
-        left = parentRect.left - arrowSpacing - el.offsetWidth + scrollLeft;
-      }
-    }
-    return {
-      left: left + 'px',
-      top: top + 'px'
-    };
-  };
-  const getPosition = (el, parent) => {
-    const align = parseAlignMode(alignMode);
-    let trueDirection = direction;
-    const maxWidth = getTooltipMaxWidth() + 'px';
-    let tooltipPosition, width;
-    if (!forceDirection && el) {
-      const arrowStylesForGetDirection = arrow && getArrowStyles(direction, el, parent);
-      trueDirection = getDirection(arrowStylesForGetDirection, trueDirection, el, parent, false);
-    }
-    if (el) {
-      const space = el.style.width ? 0 : 5;
-      width = Math.min(el.offsetWidth, parseInt(maxWidth)) + space + 'px';
-      tooltipPosition = trueDirection === 'up' || trueDirection === 'down' ? getVertical(align, trueDirection, el, parent) : getHorizontal(align, trueDirection, el, parent);
-    }
-    return {
-      tooltip: {
-        ...tooltipPosition,
-        maxWidth,
-        width
-      },
-      arrow: getArrowStyles(trueDirection, el, parent)
-    };
-  };
-  const onShowTooltip = (arrow, parent) => {
-    if (!tooltipRef.current || !arrowRef.current) return;
-    const arrowEl = arrowRef.current,
-      el = tooltipRef.current;
-    let positions;
-    clearTimeout(calculateTimeoutRef.current);
-    calculateTimeoutRef.current = setTimeout(() => {
-      positions = getPosition(el, parent);
-    }, 10);
-    clearTimeout(hoverTimeoutRef.current);
-    hoverTimeoutRef.current = setTimeout(() => {
-      Object.assign(el.style, positions.tooltip, {
-        opacity: 1
-      });
-      if (arrow) {
-        Object.assign(arrowEl.style, positions.arrow.border, {
-          opacity: 1
-        });
-        arrowEl.style.left = positions.arrow.position.left + 'px';
-        arrowEl.style.top = positions.arrow.position.top + 'px';
-      } else {
-        Object.assign(arrowEl.style, hiddenPositions.arrow);
-      }
-    }, hoverDelay);
-  };
-  const onHideTooltip = () => {
-    if (!tooltipRef.current || !arrowRef.current) return;
-    const arrowEl = arrowRef.current,
-      el = tooltipRef.current;
-    clearTimeout(hoverTimeoutRef.current);
-    hoverTimeoutRef.current = setTimeout(() => {
-      Object.assign(el.style, hiddenPositions.tooltip);
-      Object.assign(arrowEl.style, hiddenPositions.arrow);
-    }, hoverDelay);
-  };
-  const setOpenTrue = () => {
-    if (disabled) return;
-    setOpen(true);
-  };
-  const setOpenFalse = () => {
-    setOpen(false);
-  };
-  useEffect(() => {
-    if (open) {
-      onShowTooltip(arrow, ref.current);
-    } else {
-      onHideTooltip();
-    }
-  }, [open]);
-  useImperativeHandle(reference, () => {
-    const currentRef = ref.current || {};
-    currentRef.element = ref.current;
-    const _instance = {
-      ...action
-    }; // methods
-    _instance.__proto__ = {}; // hidden methods
-    currentRef.instance = _instance;
-    return currentRef;
-  });
-  const renderTooltip = useMemo(() => {
-    if (open && title) {
-      const node = jsx("div", {
-        className: 'DGN-UI-Portal DGN-Tooltip',
-        onMouseEnter: () => disableInteractive ? onHideTooltip() : null
-      }, jsx("span", {
-        className: IDs.arrow,
-        css: ArrowCSS,
-        ref: arrowRef,
-        style: {
-          ...hiddenPositions.arrow
-        }
-      }), jsx("span", {
-        className: classNames(IDs.main, className),
-        css: _MainCSS,
-        ref: tooltipRef,
-        style: {
-          ...hiddenPositions.tooltip
-        }
-      }, title));
-      return /*#__PURE__*/createPortal(node, document.body);
-    }
-    return null;
-  }, [backgroundColor, className, color, disableInteractive, hoverDelay, padding, size, textAlign, title, open, theme]);
-  return jsx(TagCreatedName, {
-    ref: ref,
-    className: IDs.container,
-    style: style,
-    onMouseEnter: setOpenTrue,
-    onMouseLeave: setOpenFalse,
-    onFocus: setOpenTrue,
-    onBlur: setOpenFalse,
-    ...props
-  }, children, renderTooltip);
-}));
-const ArrowCSS = css`
-    ${positionAbsolute};
-    ${userSelectNone};
-    ${parseWidthHeight(0)};
-    opacity: 0;
-    transition: opacity 0.1s ease-in-out;
-    ${z(5)};
-`;
-const MainCSS = (backgroundColor, color, size, padding, textAlign, {
-  typography
-}) => css`
-    ${displayInlineBlock};
-    ${boxBorder};
-    ${positionAbsolute};
-    ${userSelectNone};
-    ${borderRadius4px};
-    ${size === 'small' ? typography.paragraph3 : typography.paragraph2};
-    ${bgColor(backgroundColor)};
-    ${textColor(color)};
-    padding: ${padding};
-    text-align: ${textAlign};
-    opacity: 0;
-    transition: opacity 0.1s ease-in-out;
-    ${breakWord};
-    ${z(4)};
-`;
-Tooltip.defaultProps = {
-  alignMode: 'middle',
-  arrow: false,
-  arrowSize: 6,
-  backgroundColor: 'fill/tooltip',
-  className: '',
-  color: 'system/standard',
-  direction: 'down',
-  disabled: false,
-  disableInteractive: false,
-  forceDirection: false,
-  hoverDelay: 50,
-  padding: [1, 1.5],
-  size: 'medium',
-  style: {},
-  tagCreatedName: 'div',
-  textAlign: 'center',
-  viewportPadding: defaultViewPadding
-};
-Tooltip.propTypes = {
-  /** alignMode use to set align-items of the tooltip*/
-  alignMode: PropTypes.oneOf(['flex-end', 'flex-start', 'middle']),
-  /** If true, adds an arrow to the tooltip. */
-  arrow: PropTypes.bool,
-  /** Size of the arrow. */
-  arrowSize: PropTypes.number,
-  /** Background color of the tooltip. */
-  backgroundColor: PropTypes.string,
-  /** Tooltip reference element. */
-  children: PropTypes.node.isRequired,
-  /** Class for component. */
-  className: PropTypes.string,
-  /** Color of the title.                                                                                                                                                                                                                                        */
-  color: PropTypes.string,
-  /** Direction of the tooltip. */
-  direction: PropTypes.oneOf(['down', 'left', 'right', 'up']),
-  /** If `true`, the component is disabled. */
-  disabled: PropTypes.bool,
-  /** If `true`, makes a tooltip not interactive, i.e. it will close when the user hovers over the tooltip. */
-  disableInteractive: PropTypes.bool,
-  /** Distance between the tooltip and the children. */
-  distance: PropTypes.number,
-  /**  If `true`, set the static direction of the tooltip. */
-  forceDirection: PropTypes.bool,
-  /** The number of milliseconds to wait before showing the tooltip.  */
-  hoverDelay: PropTypes.number,
-  /** Padding of the title. */
-  padding: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
-  /** The size of the title. */
-  size: PropTypes.oneOf(['small', 'medium']),
-  /** Style inline of component. */
-  style: PropTypes.object,
-  /** Tag name of the element will be created to contain the children. */
-  tagCreatedName: PropTypes.oneOf(['div', 'span']),
-  /** Text align of the title. */
-  textAlign: PropTypes.oneOf(['center', 'justify', 'left', 'right']),
-  /** The title to show in tooltip when hover. */
-  title: PropTypes.oneOfType([PropTypes.element, PropTypes.string]).isRequired,
-  /** Max width of the tooltip */
-  tooltipMaxWidth: PropTypes.number,
-  /** Padding of the viewport with the tooltip */
-  viewportPadding: PropTypes.number
-};
-export default Tooltip;

package/components/tooltip/portal.js

@@ -1,11 +0,0 @@
-import { createPortal } from 'react-dom';
-import { usePortal } from "../../utils";
-const Portal = props => {
-  const {
-    children,
-    id
-  } = props;
-  const parent = usePortal(id);
-  return /*#__PURE__*/createPortal(children, parent);
-};
-export default Portal;