diginet-core-ui 1.3.87 → 1.3.88

package/components/tooltip/index.js

@@ -1,4 +1,5 @@
 /** @jsxRuntime classic */
+
 /** @jsx jsx */
 import { forwardRef, memo, useEffect, useRef, useState, useMemo, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
@@ -36,24 +37,32 @@ const hiddenPositions = {
     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,
@@ -93,7 +102,9 @@ const Tooltip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const calculateTimeoutRef = useRef(null);
   const hoverTimeoutRef = useRef(null);
   const [open, setOpen] = useState(false);
+
   const _MainCSS = MainCSS(backgroundColor, color, size, padding, textAlign);
+
   const checkHorizontal = (distance, el, parent) => {
     const {
       left,
@@ -103,6 +114,7 @@ const Tooltip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     const deadSpace = Math.min(left, clientW - right);
     return el.offsetWidth + parent.offsetWidth + distance + viewportPadding + deadSpace < clientW;
   };
+
   const checkParent = (el, parent) => {
     const {
       bottom,
@@ -110,9 +122,11 @@ const Tooltip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     } = 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;
@@ -122,17 +136,21 @@ const Tooltip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       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 {
@@ -142,6 +160,7 @@ const Tooltip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         }
       };
     }
+
     const parentRect = parent.getBoundingClientRect();
     const halfParentH = parent.offsetHeight / 2;
     const halfParentW = parent.offsetWidth / 2;
@@ -150,6 +169,7 @@ const Tooltip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     const arrowSpacing = getArrowSpacing(arrow, arrowSize, distance);
     const border = {};
     const position = {};
+
     switch (direction) {
       case 'right':
         border.borderLeft = `${arrowSize}px solid transparent`;
@@ -159,6 +179,7 @@ const Tooltip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         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`;
@@ -167,6 +188,7 @@ const Tooltip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         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`;
@@ -175,6 +197,7 @@ const Tooltip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         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`;
@@ -185,15 +208,18 @@ const Tooltip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         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);
@@ -202,56 +228,72 @@ const Tooltip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     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;
+        top;
     const arrowSpacing = getArrowSpacing(arrow, arrowSize, distance);
+
     if (el) {
       const scrollLeft = getScrollLeft();
       const parentRect = parent.getBoundingClientRect();
@@ -261,6 +303,7 @@ const Tooltip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       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') {
@@ -272,28 +315,34 @@ const Tooltip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         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;
+        top = 0;
     const arrowSpacing = getArrowSpacing(arrow, arrowSize, distance);
     const arrowPadding = arrow ? 6 : 0;
+
     if (el) {
       const scrollLeft = getScrollLeft();
       const scrollTop = getScrollTop();
@@ -302,6 +351,7 @@ const Tooltip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       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') {
@@ -311,48 +361,56 @@ const Tooltip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         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,
+      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;
+          el = tooltipRef.current;
     let positions;
     clearTimeout(calculateTimeoutRef.current);
     calculateTimeoutRef.current = setTimeout(() => {
@@ -363,6 +421,7 @@ const Tooltip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       Object.assign(el.style, positions.tooltip, {
         opacity: 1
       });
+
       if (arrow) {
         Object.assign(arrowEl.style, positions.arrow.border, {
           opacity: 1
@@ -374,23 +433,27 @@ const Tooltip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
     }, hoverDelay);
   };
+
   const onHideTooltip = () => {
     if (!tooltipRef.current || !arrowRef.current) return;
     const arrowEl = arrowRef.current,
-      el = tooltipRef.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);
@@ -401,10 +464,11 @@ const Tooltip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
     currentRef.element = ref.current;
-    const _instance = {
-      ...action
+    const _instance = { ...action
     }; // methods
+
     _instance.__proto__ = {}; // hidden methods
+
     currentRef.instance = _instance;
     return currentRef;
   });
@@ -417,19 +481,18 @@ const Tooltip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         className: IDs.arrow,
         css: ArrowCSS,
         ref: arrowRef,
-        style: {
-          ...hiddenPositions.arrow
+        style: { ...hiddenPositions.arrow
         }
       }), jsx("span", {
         className: classNames(IDs.main, className),
         css: _MainCSS,
         ref: tooltipRef,
-        style: {
-          ...hiddenPositions.tooltip
+        style: { ...hiddenPositions.tooltip
         }
       }, title));
       return /*#__PURE__*/createPortal(node, document.body);
     }
+
     return null;
   }, [backgroundColor, className, color, disableInteractive, hoverDelay, padding, size, textAlign, title, open]);
   return jsx(TagCreatedName, {
@@ -451,6 +514,7 @@ const ArrowCSS = css`
     transition: opacity 0.1s ease-in-out;
     z-index: ${zIndexCORE(5)};
 `;
+
 const MainCSS = (backgroundColor, color, size, padding, textAlign) => css`
     ${displayInlineBlock};
     ${boxBorder};
@@ -467,6 +531,7 @@ const MainCSS = (backgroundColor, color, size, padding, textAlign) => css`
     ${breakWord};
     z-index: ${zIndexCORE(4)};
 `;
+
 Tooltip.defaultProps = {
   alignMode: 'middle',
   arrow: false,
@@ -489,44 +554,64 @@ Tooltip.defaultProps = {
 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.string,
+
   /** 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
 };

package/components/tooltip/portal.js

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