diginet-core-ui 1.3.88 → 1.3.89

package/components/tab/tab.js

@@ -1,17 +1,15 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import { forwardRef, memo, useMemo, useContext, useRef, useImperativeHandle } from 'react';
 import { jsx, css } from '@emotion/core';
 import PropTypes from 'prop-types';
 import Icon from "../../icons";
-import { color as colors } from "../../styles/colors";
+import { useTheme, useColor as colors } from "../../theme";
 import Ripple from "../button/ripple-effect";
 import Typography from "../typography";
 import TabContext from "./context";
 import { itemsCenter, bgTransparent, boxBorder, shadowNone, breakWord, cursorDefault, cursorPointer, flexRow, justifyCenter, justifyStart, outlineNone, overflowHidden, pointerEventsNone, positionAbsolute, positionRelative, textCenter, whiteSpaceNoWrap } from "../../styles/general";
 import { classNames, refType as ref } from "../../utils";
-import theme from "../../theme/settings";
 const {
   colors: {
     system: {
@@ -22,7 +20,7 @@ const {
     }
   },
   spacing
-} = theme;
+} = useTheme();
 const TabItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
   children,
@@ -46,51 +44,42 @@ const TabItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   } = useContext(TabContext);
   const ref = useRef(null);
   const isVertical = direction === 'vertical';
-
   const _TabButtonCSS = TabButtonCSS(color, isVertical);
-
   const _IndicatorCSS = IndicatorCSS(isVertical);
-
   const _onClick = event => {
     if (disabled) return;
     onClick ? onClick(event, index) : setTabIndexState(index);
   };
-
   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;
   });
   const StartIcon = useMemo(() => {
     let node = startIcon;
-
     if (typeof node === 'string') {
       node = jsx(Icon, {
         color: 'currentColor',
         name: startIcon
       });
     }
-
     return jsx("span", {
       css: ButtonIconCSS
     }, " ", node, " ");
   }, [startIcon]);
   const EndIcon = useMemo(() => {
     let node = endIcon;
-
     if (typeof node === 'string') {
       node = jsx(Icon, {
         color: 'currentColor',
         name: endIcon
       });
     }
-
     return jsx("span", {
       css: ButtonIconCSS,
       className: 'end-icon'
@@ -104,7 +93,8 @@ const TabItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       style: style,
       onClick: _onClick,
       ...props
-    }, startIcon && StartIcon, jsx(Typography, { ...labelProps,
+    }, startIcon && StartIcon, jsx(Typography, {
+      ...labelProps,
       type: level,
       color: 'inherit'
     }, label), children, endIcon && EndIcon, jsx(Ripple, null), jsx("span", {
@@ -113,7 +103,6 @@ const TabItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }));
   }, [children, className, color, disabled, endIcon, index, label, level, onClick, props, startIcon, style, isVertical, tabIndexState]);
 }));
-
 const TabButtonCSS = (color, isVertical) => css`
     ${flexRow};
     ${overflowHidden};
@@ -160,7 +149,6 @@ const TabButtonCSS = (color, isVertical) => css`
         }
     }
 `;
-
 const IndicatorCSS = isVertical => css`
     ${positionAbsolute};
     height: ${isVertical ? '100%' : '4px'};
@@ -171,7 +159,6 @@ const IndicatorCSS = isVertical => css`
     transition: transform 0.2s ease-in-out;
     border-radius: 1px;
 `;
-
 const ButtonIconCSS = css`
     ${flexRow};
     ${itemsCenter};
@@ -195,42 +182,30 @@ TabItem.defaultProps = {
 TabItem.propTypes = {
   /** Element to display in Tabs (like label). */
   children: PropTypes.node,
-
   /** Class for component. */
   className: PropTypes.string,
-
   /** Color for Tabs. */
   color: PropTypes.string,
-
   /** If true, the component is disabled. */
   disabled: PropTypes.bool,
-
   /** Icon to the right of the button. */
   endIcon: PropTypes.node,
-
   /** Index received in position of TabHeaderButton. */
   index: PropTypes.number,
-
   /** Data string, if any. */
   label: PropTypes.string,
-
   /** [Props](https://core.diginet.com.vn/ui/?path=/docs/typography--title) applied to the `Typography` label. */
   labelProps: PropTypes.object,
-
   /** Callback fired when a "click" event is detected. */
   onClick: PropTypes.func,
-
   /** Icon to the left of the button. */
   startIcon: PropTypes.node,
-
   /** Style inline of component. */
   style: PropTypes.object,
-
   /** Any props else. */
   props: PropTypes.any,
-
-  /**
-   * Ref methods.
+  /**
+   * Ref methods.
    */
   reference: ref
 };

package/components/tooltip/index.js

@@ -1,5 +1,4 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import { forwardRef, memo, useEffect, useRef, useState, useMemo, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
@@ -37,32 +36,24 @@ 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,
@@ -102,9 +93,7 @@ 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,
@@ -114,7 +103,6 @@ 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,
@@ -122,11 +110,9 @@ 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;
@@ -136,21 +122,17 @@ 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 {
@@ -160,7 +142,6 @@ const Tooltip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         }
       };
     }
-
     const parentRect = parent.getBoundingClientRect();
     const halfParentH = parent.offsetHeight / 2;
     const halfParentW = parent.offsetWidth / 2;
@@ -169,7 +150,6 @@ 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`;
@@ -179,7 +159,6 @@ 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`;
@@ -188,7 +167,6 @@ 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`;
@@ -197,7 +175,6 @@ 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`;
@@ -208,18 +185,15 @@ 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);
@@ -228,72 +202,56 @@ 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();
@@ -303,7 +261,6 @@ 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') {
@@ -315,34 +272,28 @@ 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();
@@ -351,7 +302,6 @@ 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') {
@@ -361,56 +311,48 @@ 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(() => {
@@ -421,7 +363,6 @@ 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
@@ -433,27 +374,23 @@ 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);
@@ -464,11 +401,10 @@ 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;
   });
@@ -481,18 +417,19 @@ 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, {
@@ -514,7 +451,6 @@ const ArrowCSS = css`
     transition: opacity 0.1s ease-in-out;
     z-index: ${zIndexCORE(5)};
 `;
-
 const MainCSS = (backgroundColor, color, size, padding, textAlign) => css`
     ${displayInlineBlock};
     ${boxBorder};
@@ -531,7 +467,6 @@ const MainCSS = (backgroundColor, color, size, padding, textAlign) => css`
     ${breakWord};
     z-index: ${zIndexCORE(4)};
 `;
-
 Tooltip.defaultProps = {
   alignMode: 'middle',
   arrow: false,
@@ -554,64 +489,44 @@ 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,6 +1,5 @@
 import { createPortal } from 'react-dom';
 import { usePortal } from "../../utils";
-
 const Portal = props => {
   const {
     children,
@@ -9,5 +8,4 @@ const Portal = props => {
   const parent = usePortal(id);
   return /*#__PURE__*/createPortal(children, parent);
 };
-
 export default Portal;