diginet-core-ui 1.3.73-beta.4 → 1.3.73-beta.5

package/components/avatar/index.js

@@ -232,7 +232,7 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         img.alt = '';
 
         img.onerror = () => {
-          setSrcState(null);
+          setSrcState(defaultSrc);
           existed[unique] = false;
         };
 

package/components/chip/index.js

@@ -6,9 +6,9 @@ import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import { ButtonIcon, Typography } from '../';
 import Icon from '../../icons';
-import { alignCenter, border, borderBox, flexRow, inlineFlex, justifyCenter, positionRelative, userSelectNone, whiteSpaceNoWrap, cursorNotAllowed, positionAbsolute, overflowHidden } from '../../styles/general';
+import { alignCenter, border, borderBox, flexRow, inlineFlex, justifyCenter, positionRelative, userSelectNone, cursorNotAllowed, positionAbsolute, overflowHidden } from '../../styles/general';
 import { hexToRGBA } from '../../styles/color-helper';
-import { useTheme } from '../../theme';
+import { useTheme, useColor as colors } from '../../theme';
 const {
   colors: {
     danger,
@@ -52,9 +52,10 @@ const Chip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const ref = useRef(null);
   const IconRef = useRef(null);
   if (!onDbClick && onDoubleClick) onDbClick = onDoubleClick;
-  const color = colorMap.get(colorProps) || colorProps;
+  let color = colorMap.get(colorProps) || colorProps;
+  if (colors[color]) color = colors[color];
   const infoChip = {
-    color: colorMap.get(colorProps) || colorProps,
+    color: color,
     contentColor: viewType !== 'filled' ? color : white,
     backgroundColor: viewType !== 'filled' ? white : color,
     iconSize: iconSizeMap.get(size),
@@ -160,7 +161,6 @@ const ChipLabelCSS = css`
     ${alignCenter};
     ${positionRelative};
     ${userSelectNone};
-    ${whiteSpaceNoWrap};
 `;
 
 const ChipRootCSS = (onClick, onDbClick, colorProps, info) => css`
@@ -268,7 +268,7 @@ Chip.propTypes = {
   viewType: PropTypes.oneOf(['ghost', 'outlined', 'filled']),
 
   /** color for text or background of Chip */
-  color: PropTypes.oneOf(['default', 'primary', 'info', 'success', 'warning', 'danger']),
+  color: PropTypes.oneOfType([PropTypes.oneOf(['default', 'primary', 'info', 'success', 'warning', 'danger']), PropTypes.string]),
 
   /** size of Chip */
   size: PropTypes.oneOf(['small', 'medium', 'large']),

package/components/form-control/date-range-picker/index.js

@@ -431,11 +431,11 @@ const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
     }
 
-    const trueWidth = width > 320 ? width < 633 ? 633 : width : 320;
+    const pickerWidth = window.innerWidth <= 633 ? 300 : 633;
 
-    if (left + trueWidth > innerWidth) {
-      if (innerWidth > trueWidth) {
-        style.left = (innerWidth - trueWidth) / 2;
+    if (left + pickerWidth > innerWidth) {
+      if (innerWidth > pickerWidth) {
+        style.left = (innerWidth - pickerWidth) / 2;
       }
     }
 

package/components/form-control/dropdown/index.js

@@ -894,6 +894,9 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
           value,
           data
         });
+      } else {
+        // Fix lost icon when select same value
+        triggerBlur(false);
       }
     }
 
@@ -1086,7 +1089,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
 
   const setSingleValueHandler = (data, keyArr) => {
-    const text = keyArr ? renderData(data, keyArr) : typeof renderSelectedItem === 'string' ? data[renderSelectedItem] : data[displayExpr || valueExpr] || data;
+    const text = keyArr ? renderData(data, keyArr) : typeof renderSelectedItem === 'string' ? data[renderSelectedItem] : data[displayExpr] || data[valueExpr] || data;
 
     if (typeof renderSelectedItem === 'function') {
       inputRef.current.innerHTML = '';
@@ -1157,8 +1160,8 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     return currentRef;
   });
   useEffect(() => {
-    setShowClear(clearAble && checkHasValue(valueProp) && !disabled && !readOnly && !loading);
-  }, [clearAble, valueProp, disabled, readOnly, loading]);
+    setShowClear(clearAble && checkHasValue(valueProp || defaultValue) && !disabled && !readOnly && !loading);
+  }, [clearAble, valueProp, defaultValue, disabled, readOnly, loading]);
   useEffect(() => {
     if (valueObjectDefault) {
       if (Array.isArray(valueObjectDefault)) {
@@ -1369,7 +1372,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       if (data) {
         var _displayExpr4;
 
-        const mask = (_displayExpr4 = displayExpr) === null || _displayExpr4 === void 0 ? void 0 : _displayExpr4.replace(regexBetween, _ => data[_]);
+        const mask = (data === null || data === void 0 ? void 0 : data[displayExpr]) || ((_displayExpr4 = displayExpr) === null || _displayExpr4 === void 0 ? void 0 : _displayExpr4.replace(regexBetween, _ => data[_]));
         text = mask === null || mask === void 0 ? void 0 : mask.replace(regexInclude, '');
       }
 

package/components/image/index.js

@@ -0,0 +1,164 @@
+/** @jsxRuntime classic */
+
+/** @jsx jsx */
+import { forwardRef, Fragment, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import { jsx, css, keyframes } from '@emotion/core';
+import OptionWrapper from '../others/option-wrapper';
+import { useIntersection } from '../../utils/intersectionObserver';
+import { classNames } from '../../utils';
+import AvatarDefault from '../../assets/avatar/default.svg';
+import { alignCenter, inlineFlex, overflowHidden, parseWidthHeight, positionRelative } from '../../styles/general';
+const blurKeyframe = keyframes`
+    0% { -webkit-filter: blur(4px);}
+    25% { -webkit-filter: blur(3px);}
+    50% { -webkit-filter: blur(2px);}
+    75% { -webkit-filter: blur(1px);}
+    100% { -webkit-filter: blur(0px);}
+`;
+const Image = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  action = {},
+  alt,
+  circular,
+  className,
+  defaultSrc,
+  height,
+  id,
+  lazyLoading,
+  onError,
+  src,
+  style,
+  width
+}, reference) => {
+  if (!defaultSrc) defaultSrc = AvatarDefault;
+  const ref = useRef(null);
+  const [srcState, setSrcState] = useState(src);
+  const [isInView, setIsInView] = useState(false);
+  const [onLoaded, setOnLoaded] = useState(false);
+  useIntersection(ref, () => {
+    setIsInView(true);
+  });
+
+  const _ImageCSS = ImageCSS(width, height, circular);
+
+  useEffect(() => {
+    if (src) {
+      if (isInView || !lazyLoading) {
+        const img = document.createElement('img');
+        img.src = src;
+        img.alt = '';
+
+        img.onerror = () => {
+          setSrcState(defaultSrc);
+          onError === null || onError === void 0 ? void 0 : onError();
+        };
+
+        img.onload = () => {
+          setSrcState(src);
+        };
+      }
+    }
+  }, [src]);
+  useImperativeHandle(reference, () => {
+    const currentRef = ref.current || {};
+    currentRef.element = ref.current;
+    const _instance = { ...action
+    }; // methods
+
+    _instance.__proto__ = {}; // hidden methods
+
+    currentRef.instance = _instance;
+    return currentRef;
+  });
+
+  const renderImage = () => {
+    const defaultImage = jsx("img", {
+      src: defaultSrc,
+      alt: '',
+      style: {
+        objectFit: 'cover'
+      },
+      width: width,
+      height: height
+    });
+    const image = jsx(Fragment, null, !onLoaded && defaultImage, jsx("img", {
+      css: blurAnimationCSS,
+      src: srcState,
+      alt: alt || srcState,
+      style: {
+        objectFit: 'cover'
+      },
+      onLoad: () => setOnLoaded(true),
+      width: width,
+      height: height
+    }));
+
+    if (lazyLoading) {
+      return isInView ? image : defaultImage;
+    } else return image;
+  };
+
+  return useMemo(() => {
+    return jsx("div", {
+      ref: ref,
+      css: _ImageCSS,
+      id: id,
+      className: classNames('DGN-UI-Image', className),
+      style: style
+    }, renderImage());
+  }, [alt, circular, className, defaultSrc, height, id, lazyLoading, src, style, width, isInView, onLoaded, srcState]);
+}));
+
+const ImageCSS = (width, height, circular) => css`
+    ${inlineFlex};
+    ${positionRelative};
+    ${alignCenter};
+    ${overflowHidden};
+    ${parseWidthHeight(width, height)};
+    ${circular && `border-radius: 50%`};
+`;
+
+const blurAnimationCSS = css`
+    animation: ${blurKeyframe} 1s ease;
+`;
+Image.defaultProps = {
+  circular: false,
+  className: '',
+  height: 200,
+  lazyLoading: false,
+  style: {},
+  width: 200
+};
+Image.propTypes = {
+  /** Image description. */
+  alt: PropTypes.string,
+
+  /** If `true`, image is circular.*/
+  circular: PropTypes.bool,
+
+  /** Class for component. */
+  className: PropTypes.string,
+
+  /** Default img when src error. */
+  defaultSrc: PropTypes.string,
+
+  /** Height of component. */
+  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
+  /** If `true`, lazy loading image.*/
+  lazyLoading: PropTypes.bool,
+
+  /** Callback fired when the src is error. */
+  onError: PropTypes.func,
+
+  /** Image path. */
+  src: PropTypes.string,
+
+  /** Style inline of component. */
+  style: PropTypes.object,
+
+  /** Width of component. */
+  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+};
+export { Image };
+export default OptionWrapper(Image);

package/components/index.js

@@ -64,7 +64,9 @@ export { default as Row } from './grid/Row';
 export { default as Col } from './grid/Col';
 export { default as Container } from './grid/Container'; //Icon
 
-export { default as Icon } from '../icons/index'; // List
+export { default as Icon } from '../icons/index'; //Image
+
+export { default as Image } from './image'; // List
 
 export { default as List } from './list/list';
 export { default as ListItem } from './list/list-item';

package/components/modal/body.js

@@ -5,16 +5,16 @@ import { memo, useMemo, useRef, forwardRef, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import { border, borderBox, displayBlock, overflowAuto, parseWidthHeight, positionRelative } from '../../styles/general';
-import { classNames, handleBreakpoints } from '../../utils';
+import { classNames } from '../../utils';
 import theme from '../../theme/settings';
+import { responsivePaddingCSS } from './header';
 const {
   colors: {
     fill: {
       'scrollbar-rest': scrollbarRest,
       'scrollbar-active': scrollbarActive
     }
-  },
-  spacing
+  }
 } = theme;
 const ModalBody = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
@@ -63,12 +63,7 @@ const ModalBodyCSS = css`
             background-color: ${scrollbarActive};
         }
     }
-    ${handleBreakpoints({
-  xs: 4,
-  md: 6
-}, propValue => {
-  return `padding: ${spacing([4, propValue])}`;
-})}
+    ${responsivePaddingCSS};
 `;
 ModalBody.defaultProps = {
   className: '',

package/components/modal/footer.js

@@ -5,11 +5,8 @@ import { memo, useMemo, useRef, forwardRef, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import { alignCenter, borderBox, flexRow, justifyEnd, positionRelative } from '../../styles/general';
-import theme from '../../theme/settings';
-import { classNames, handleBreakpoints } from '../../utils';
-const {
-  spacing
-} = theme;
+import { classNames } from '../../utils';
+import { responsivePaddingCSS } from './header';
 const ModalFooter = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
   boxShadow,
@@ -53,12 +50,7 @@ const ModalFooterCSS = boxShadow => css`
     border-radius: 0px 0px 4px 4px;
     box-shadow: ${boxShadow};
     order: 3;
-    ${handleBreakpoints({
-  xs: 4,
-  md: 6
-}, propValue => {
-  return `padding: ${spacing([4, propValue])}`;
-})}
+    ${responsivePaddingCSS};
 `;
 
 ModalFooter.defaultProps = {

package/components/modal/header.js

@@ -20,6 +20,12 @@ const {
   },
   spacing
 } = theme;
+export const responsivePaddingCSS = handleBreakpoints({
+  xs: 4,
+  md: 6
+}, propValue => {
+  return `padding: ${spacing([4, propValue])};`;
+});
 const ModalHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
   children,
@@ -82,12 +88,7 @@ const ModalHeaderCSS = modal => css`
     box-shadow: ${smallBoxShadow};
     cursor: ${modal.onMoveModal ? 'move' : 'inherit'};
     order: 1;
-    ${handleBreakpoints({
-  xs: 4,
-  md: 6
-}, propValue => {
-  return `padding: ${spacing([4, propValue])}`;
-})}
+    ${responsivePaddingCSS};
 `;
 
 ModalHeader.defaultProps = {

package/components/popover/index.js

@@ -8,7 +8,7 @@ import { jsx, css } from '@emotion/core';
 import OptionWrapper from '../others/option-wrapper';
 import { borderRadius4px, displayBlock, flexCol, justifyBetween, overflowAuto, parseWidthHeight, positionAbsolute, positionFixed, positionRelative } from '../../styles/general';
 import theme from '../../theme/settings';
-import { classNames, refType as ref } from '../../utils';
+import { classNames, isMobile, refType as ref } from '../../utils';
 const {
   colors: {
     system: {
@@ -155,6 +155,7 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   width,
   zIndex
 }, reference) => {
+  if (isMobile.any() && trigger === 'hover') trigger = 'click';
   const ref = useRef(null);
   const arrowRef = useRef(null);
   const [openState, setOpenState] = useState(open);
@@ -202,7 +203,7 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
     const _anchor = ((_anchor2 = anchor) === null || _anchor2 === void 0 ? void 0 : _anchor2.element) || ((_anchor3 = anchor) === null || _anchor3 === void 0 ? void 0 : (_anchor3$current = _anchor3.current) === null || _anchor3$current === void 0 ? void 0 : _anchor3$current.element) || ((_anchor4 = anchor) === null || _anchor4 === void 0 ? void 0 : _anchor4.current) || anchor;
 
-    if (clickOutsideToClose && !((_ref$current = ref.current) !== null && _ref$current !== void 0 && _ref$current.contains(event === null || event === void 0 ? void 0 : event.target)) && (!fullScreen || (_ref$current2 = ref.current) !== null && _ref$current2 !== void 0 && (_ref$current2$parentN = _ref$current2.parentNode) !== null && _ref$current2$parentN !== void 0 && _ref$current2$parentN.contains(event === null || event === void 0 ? void 0 : event.target)) && !(_anchor !== null && _anchor !== void 0 && _anchor.contains(event === null || event === void 0 ? void 0 : event.target)) && openState) {
+    if (clickOutsideToClose && !((_ref$current = ref.current) !== null && _ref$current !== void 0 && _ref$current.contains((event === null || event === void 0 ? void 0 : event.toElement) || (event === null || event === void 0 ? void 0 : event.target))) && (!fullScreen || (_ref$current2 = ref.current) !== null && _ref$current2 !== void 0 && (_ref$current2$parentN = _ref$current2.parentNode) !== null && _ref$current2$parentN !== void 0 && _ref$current2$parentN.contains(event === null || event === void 0 ? void 0 : event.target)) && !(_anchor !== null && _anchor !== void 0 && _anchor.contains((event === null || event === void 0 ? void 0 : event.toElement) || (event === null || event === void 0 ? void 0 : event.target))) && openState) {
       onClosePopover();
     }
   };
@@ -418,12 +419,11 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     cb === null || cb === void 0 ? void 0 : cb();
   };
 
-  const handleEventTrigger = () => {
+  const handleEventTrigger = e => {
     if (!openState) {
-      setOpenState(true);
+      onOpenPopover();
     } else {
-      onClose && onClose();
-      setOpenState(false);
+      onClickOutside(e);
     }
   };
 
@@ -466,6 +466,7 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       document.addEventListener('click', onClickOutside); // Update position popover on resize
 
       window.addEventListener('resize', updatePositionPopover);
+      if (trigger === 'hover') ref.current.addEventListener('mouseleave', handleEventTrigger, false);
       return () => {
         if (pressESCToClose) {
           document.removeEventListener('keydown', pressESCHandler);
@@ -473,6 +474,7 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
         document.removeEventListener('click', onClickOutside);
         window.removeEventListener('resize', updatePositionPopover);
+        if (trigger === 'hover' && ref.current) ref.current.removeEventListener('mouseleave', handleEventTrigger, false);
       };
     } else if (!openState) {
       document.documentElement.style.overflow = 'auto';
@@ -488,7 +490,10 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     const currentRef = ref.current || {};
     currentRef.element = ref.current;
     const _instance = {
-      show: el => !openState && el ? updatePositionPopover(el, onOpenPopover()) : onOpenPopover(),
+      show: el => {
+        if (el) setElement(el);
+        !openState && el ? updatePositionPopover(el, onOpenPopover()) : onOpenPopover();
+      },
       close: () => onClosePopover(),
       setPosition: el => updatePositionPopover(el),
       ...action
@@ -500,7 +505,10 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
     currentRef.instance = _instance;
 
-    currentRef.show = el => !openState && el ? updatePositionPopover(el, onOpenPopover()) : onOpenPopover();
+    currentRef.show = el => {
+      if (el) setElement(el);
+      !openState && el ? updatePositionPopover(el, onOpenPopover()) : onOpenPopover();
+    };
 
     currentRef.close = onClosePopover;
 

package/components/progress/circular.js

@@ -8,6 +8,7 @@ import PropTypes from 'prop-types';
 import { forwardRef, memo, useMemo, useRef } from 'react';
 import theme from '../../theme/settings';
 import { typography } from '../../styles/typography';
+import { useColor as colors } from '../../theme';
 
 const validatePercent = percent => {
   let per = +percent.toString().replace('%', '');
@@ -341,21 +342,27 @@ const CircularProgress = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   direction,
   duration,
   percent,
-  percentColor,
+  percentColor: percentColorProp,
   showValue,
+  color: colorProp,
   ...props
 }, ref) => {
   if (!ref) ref = useRef(null);
+  const color = colors[colorProp] || colorProp;
+  const percentColor = colors[percentColorProp] || percentColorProp;
   return determinate ? jsx(DeterminateCircularProgress, {
+    ref: ref,
+    color: color,
     direction: direction,
     duration: duration,
     percent: percent,
     percentColor: percentColor,
     showValue: true,
-    ...props,
-    ref: ref
-  }) : jsx(IndeterminateCircularProgress, { ...props,
-    ref: ref
+    ...props
+  }) : jsx(IndeterminateCircularProgress, {
+    ref: ref,
+    color: color,
+    ...props
   });
 }));
 CircularProgress.defaultProps = {

package/components/tab/tab-container.js

@@ -1,7 +1,7 @@
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import React, { forwardRef, useState, memo, useEffect, useRef, useImperativeHandle } from 'react';
+import React, { forwardRef, useState, memo, useEffect, useRef, useImperativeHandle, useMemo } from 'react';
 import { jsx, css } from '@emotion/core';
 import PropTypes from 'prop-types';
 import { classNames, randomString, refType as ref } from '../../utils';
@@ -48,22 +48,24 @@ const TabContainer = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     currentRef.instance = _instance;
     return currentRef;
   });
-  return jsx("div", {
-    css: _TabContainerCSS,
-    ref: ref,
-    id: `DGN-${id}-tab-button-container`,
-    className: classNames('DGN-UI-Tab-Container', className),
-    style: style,
-    ...props
-  }, jsx(TabContext.Provider, {
-    value: {
-      tabIndexState,
-      setTabIndexState,
-      direction
-    }
-  }, React.Children.map(children, child => child && /*#__PURE__*/React.cloneElement(child, {
-    level
-  }))));
+  return useMemo(() => {
+    return jsx("div", {
+      css: _TabContainerCSS,
+      ref: ref,
+      id: `DGN-${id}-tab-button-container`,
+      className: classNames('DGN-UI-Tab-Container', className),
+      style: style,
+      ...props
+    }, jsx(TabContext.Provider, {
+      value: {
+        tabIndexState,
+        setTabIndexState,
+        direction
+      }
+    }, React.Children.map(children, child => child && /*#__PURE__*/React.cloneElement(child, {
+      level
+    }))));
+  }, [children, className, direction, level, props, style, tabIndex, width, tabIndexState, value]);
 }));
 
 const TabContainerCSS = (direction, width) => css`
@@ -105,8 +107,8 @@ TabContainer.propTypes = {
   /** Any props else. */
   props: PropTypes.any,
 
-  /**
-   * Ref methods.
+  /**
+   * Ref methods.
    */
   reference: ref
 };

package/components/tab/tab-header.js

@@ -1,7 +1,7 @@
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import React, { memo, forwardRef, useContext, useRef, useState, useImperativeHandle } from 'react';
+import React, { memo, forwardRef, useContext, useRef, useState, useImperativeHandle, useMemo } from 'react';
 import { jsx, css } from '@emotion/core';
 import PropTypes from 'prop-types';
 import TabContext from './context';
@@ -10,11 +10,6 @@ import { borderBox, displayNone, flexCol, flexRow, justifyCenter, overflowHidden
 import { classNames, refType as ref } from '../../utils';
 import theme from '../../theme/settings';
 const {
-  colors: {
-    line: {
-      tab
-    }
-  },
   spacing
 } = theme;
 const TabHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
@@ -63,40 +58,42 @@ const TabHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     currentRef.instance = _instance;
     return currentRef;
   });
-  return jsx("div", {
-    css: _ContainerCSS,
-    id: `DGN-control`,
-    className: classNames('DGN-UI-Tab-Header-Container', className),
-    style: style,
-    ...props
-  }, scrollButtons && !isVertical && jsx(ButtonIcon, {
-    css: scrollLeftButtonCSS,
-    name: isVertical ? 'ArrowUp' : 'ArrowLeft',
-    viewType: 'text',
-    size: 'tiny',
-    viewBox: true,
-    disabled: !showScrollLeftButton,
-    onClick: () => _onClickScrollButton(true)
-  }), jsx("div", {
-    css: _TabHeaderCSS,
-    className: 'DGN-UI-Tab-Header',
-    ref: ref,
-    onScroll: e => {
-      var _e$target;
-
-      return scrollButtons && setScrollLeft((e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.scrollLeft) || 0);
-    }
-  }, React.Children.map(children, child => child && /*#__PURE__*/React.cloneElement(child, {
-    level
-  }))), scrollButtons && !isVertical && jsx(ButtonIcon, {
-    css: scrollRightButtonCSS,
-    name: isVertical ? 'ArrowDown' : 'ArrowRight',
-    viewType: 'text',
-    size: 'tiny',
-    viewBox: true,
-    disabled: !showScrollRightButton,
-    onClick: () => _onClickScrollButton(false)
-  }));
+  return useMemo(() => {
+    return jsx("div", {
+      css: _ContainerCSS,
+      id: `DGN-control`,
+      className: classNames('DGN-UI-Tab-Header-Container', className),
+      style: style,
+      ...props
+    }, scrollButtons && !isVertical && jsx(ButtonIcon, {
+      css: scrollLeftButtonCSS,
+      name: isVertical ? 'ArrowUp' : 'ArrowLeft',
+      viewType: 'text',
+      size: 'tiny',
+      viewBox: true,
+      disabled: !showScrollLeftButton,
+      onClick: () => _onClickScrollButton(true)
+    }), jsx("div", {
+      css: _TabHeaderCSS,
+      className: 'DGN-UI-Tab-Header',
+      ref: ref,
+      onScroll: e => {
+        var _e$target;
+
+        return scrollButtons && setScrollLeft((e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.scrollLeft) || 0);
+      }
+    }, React.Children.map(children, child => child && /*#__PURE__*/React.cloneElement(child, {
+      level
+    }))), scrollButtons && !isVertical && jsx(ButtonIcon, {
+      css: scrollRightButtonCSS,
+      name: isVertical ? 'ArrowDown' : 'ArrowRight',
+      viewType: 'text',
+      size: 'tiny',
+      viewBox: true,
+      disabled: !showScrollRightButton,
+      onClick: () => _onClickScrollButton(false)
+    }));
+  }, [centered, children, className, level, props, scrollButtons, style, width, direction, isVertical, scrollLeft]);
 }));
 
 const ContainerCSS = (centered, isVertical, width) => css`
@@ -109,7 +106,6 @@ const ContainerCSS = (centered, isVertical, width) => css`
     flex-direction: ${isVertical ? 'column' : 'row'};
     max-width: ${isVertical ? 'max-content' : '100%'};
     padding: 0;
-    ${isVertical ? `border-right: solid 1px ${tab}` : `border-bottom: solid 1px ${tab}`};
 `;
 
 const TabHeaderCSS = (isVertical, width) => isVertical ? css`
@@ -173,8 +169,8 @@ TabHeader.propTypes = {
   /** Any props else. */
   props: PropTypes.any,
 
-  /**
-   * Ref methods.
+  /**
+   * Ref methods.
    */
   reference: ref
 };

package/components/tab/tab-panel.js

@@ -1,7 +1,7 @@
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import { memo, forwardRef, useContext, useRef, useEffect, useState, useImperativeHandle } from 'react';
+import { memo, forwardRef, useContext, useRef, useEffect, useState, useImperativeHandle, useMemo } from 'react';
 import { jsx, css } from '@emotion/core';
 import PropTypes from 'prop-types';
 import TabContext from './context';
@@ -50,16 +50,18 @@ const TabPanel = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     currentRef.instance = _instance;
     return currentRef;
   });
-  return jsx("div", {
-    css: _TabPanelCSS,
-    ref: ref,
-    role: 'tab-panel',
-    "aria-labelledby": `tab-${index}`,
-    id: `tab-panel-${index}`,
-    className: classNames('DGN-UI-Tab-Panel', className),
-    style: style,
-    ...props
-  }, isActive || !lazyLoading || isRendered ? children : null);
+  return useMemo(() => {
+    return jsx("div", {
+      css: _TabPanelCSS,
+      ref: ref,
+      role: 'tab-panel',
+      "aria-labelledby": `tab-${index}`,
+      id: `tab-panel-${index}`,
+      className: classNames('DGN-UI-Tab-Panel', className),
+      style: style,
+      ...props
+    }, isActive || !lazyLoading || isRendered ? children : null);
+  }, [children, className, index, lazyLoading, props, style, isActive, isRendered, tabIndexState]);
 }));
 
 const TabPanelCSS = (isVertical, isActive) => css`
@@ -96,8 +98,8 @@ TabPanel.propTypes = {
   /** Any props else. */
   props: PropTypes.any,
 
-  /**
-   * Ref methods.
+  /**
+   * Ref methods.
    */
   reference: ref
 };

package/components/tab/tab.js

@@ -32,6 +32,7 @@ const TabItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   endIcon,
   index,
   label,
+  labelProps,
   level,
   onClick,
   startIcon,
@@ -95,20 +96,22 @@ const TabItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       className: 'end-icon'
     }, ' ', node, ' ');
   }, [endIcon]);
-  return jsx("div", {
-    css: _TabButtonCSS,
-    ref: ref,
-    className: classNames('DGN-UI-Tab-Item', disabled && 'disabled', index === tabIndexState && !disabled && 'selected', className),
-    style: style,
-    onClick: _onClick,
-    ...props
-  }, startIcon && StartIcon, jsx(Typography, {
-    type: level,
-    color: 'inherit'
-  }, label), children, endIcon && EndIcon, jsx(Ripple, null), jsx("span", {
-    css: _IndicatorCSS,
-    className: 'Indicator'
-  }));
+  return useMemo(() => {
+    return jsx("div", {
+      css: _TabButtonCSS,
+      ref: ref,
+      className: classNames('DGN-UI-Tab-Item', disabled && 'disabled', index === tabIndexState && !disabled && 'selected', className),
+      style: style,
+      onClick: _onClick,
+      ...props
+    }, startIcon && StartIcon, jsx(Typography, { ...labelProps,
+      type: level,
+      color: 'inherit'
+    }, label), children, endIcon && EndIcon, jsx(Ripple, null), jsx("span", {
+      css: _IndicatorCSS,
+      className: 'Indicator'
+    }));
+  }, [children, className, color, disabled, endIcon, index, label, labelProps, level, onClick, props, startIcon, style, isVertical, tabIndexState]);
 }));
 
 const TabButtonCSS = (color, isVertical) => css`
@@ -128,7 +131,7 @@ const TabButtonCSS = (color, isVertical) => css`
     background-color: ${white};
     border: 0;
     color: ${colors[color] || color || rest};
-    max-width: 320px;
+    max-width: ${isVertical ? '100%' : '287px'};
     min-width: 80px;
     padding: ${isVertical ? spacing([3.5, 4]) : spacing([2.5, 4])};
     pointer-events: auto;
@@ -211,6 +214,9 @@ TabItem.propTypes = {
   /** 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,
 
@@ -223,8 +229,8 @@ TabItem.propTypes = {
   /** Any props else. */
   props: PropTypes.any,
 
-  /**
-   * Ref methods.
+  /**
+   * Ref methods.
    */
   reference: ref
 };

package/components/tooltip/index.js

@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 import { createPortal } from 'react-dom';
 import { randomString } from '../../utils';
 import { jsx, css } from '@emotion/core';
-import { borderBox, borderRadius4px, displayInlineBlock, flexRow, parseHeight, positionAbsolute, positionRelative, userSelectNone } from '../../styles/general';
+import { borderBox, borderRadius4px, displayInlineBlock, flexRow, parseWidthHeight, positionAbsolute, positionRelative, userSelectNone } from '../../styles/general';
 import theme from '../../theme/settings';
 const {
   colors: {
@@ -499,8 +499,7 @@ const ContainerCSS = css`
     ${flexRow};
     ${positionRelative};
     ${borderBox};
-    ${parseHeight('max-content')};
-    width: auto;
+    ${parseWidthHeight('fit-content', 'fit-content')};
 `;
 const ArrowCSS = css`
     ${positionAbsolute};

package/components/typography/index.js

@@ -113,7 +113,8 @@ const Typography = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       className: classes(true),
       style: {
         color: textTooltip,
-        padding: spacing([1, 1.5])
+        padding: spacing([1, 1.5]),
+        height: 'fit-content'
       }
     }));
   }, [openTooltip, capitalize, center, children, className, color, fullWidth, hoverTooltip, lineClamp, mapping, onClick, tooltipDirection, type, uppercase]);

package/icons/basic.js

@@ -2318,6 +2318,34 @@ export const First = /*#__PURE__*/memo(({
     fill: colors[color] || color
   }));
 });
+export const FiveSquare = /*#__PURE__*/memo(({
+  width,
+  height,
+  color = '#7F828E',
+  viewBox = false
+}) => {
+  return viewBox ? /*#__PURE__*/React.createElement("svg", {
+    width: width || 24,
+    height: height || 24,
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M5 3H19C20.1 3 21 3.9 21 5V19C21 20.1 20.1 21 19 21H5C3.9 21 3 20.1 3 19V5C3 3.9 3.9 3 5 3ZM11 9H15V7H9V13H13V15H9V17H13C14.1 17 15 16.11 15 15V13C15 11.89 14.1 11 13 11H11V9Z",
+    fill: colors[color] || color
+  })) : /*#__PURE__*/React.createElement("svg", {
+    width: width || 18,
+    height: height || 18,
+    viewBox: "0 0 18 18",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M2 0H16C17.1 0 18 0.9 18 2V16C18 17.1 17.1 18 16 18H2C0.9 18 0 17.1 0 16V2C0 0.9 0.9 0 2 0ZM8 6H12V4H6V10H10V12H6V14H10C11.1 14 12 13.11 12 12V10C12 8.89 11.1 8 10 8H8V6Z",
+    fill: colors[color] || color
+  }));
+});
 export const Flag = /*#__PURE__*/memo(({
   width,
   height,
@@ -2396,6 +2424,34 @@ export const FolderInsurance = /*#__PURE__*/memo(({
     fill: colors[color] || color
   }));
 });
+export const FourSquare = /*#__PURE__*/memo(({
+  width,
+  height,
+  color = '#7F828E',
+  viewBox = false
+}) => {
+  return viewBox ? /*#__PURE__*/React.createElement("svg", {
+    width: width || 24,
+    height: height || 24,
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M4.83846 3H18.2785C19.3345 3 20.1985 3.9 20.1985 5V19C20.1985 20.1 19.3345 21 18.2785 21H4.83846C3.78246 21 2.91846 20.1 2.91846 19V5C2.91846 3.9 3.78246 3 4.83846 3ZM12.5185 17H14.4385V7H12.5185V11H10.5985V7H8.67846V13H12.5185V17Z",
+    fill: colors[color] || color
+  })) : /*#__PURE__*/React.createElement("svg", {
+    width: width || 18,
+    height: height || 18,
+    viewBox: "0 0 18 18",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M2.83846 0H16.2785C17.3345 0 18.1985 0.9 18.1985 2V16C18.1985 17.1 17.3345 18 16.2785 18H2.83846C1.78246 18 0.918457 17.1 0.918457 16V2C0.918457 0.9 1.78246 0 2.83846 0ZM10.5185 14H12.4385V4H10.5185V8H8.59846V4H6.67846V10H10.5185V14Z",
+    fill: colors[color] || color
+  }));
+});
 export const Gavel = /*#__PURE__*/memo(({
   width,
   height,
@@ -3804,6 +3860,34 @@ export const NotificationV2 = /*#__PURE__*/memo(({
     fill: colors[color] || color
   }));
 });
+export const OneSquare = /*#__PURE__*/memo(({
+  width,
+  height,
+  color = '#7F828E',
+  viewBox = false
+}) => {
+  return viewBox ? /*#__PURE__*/React.createElement("svg", {
+    width: width || 24,
+    height: height || 24,
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M5 3H19C20.1 3 21 3.9 21 5V19C21 20.1 20.1 21 19 21H5C3.9 21 3 20.1 3 19V5C3 3.9 3.9 3 5 3ZM12 17H14V7H10V9H12V17Z",
+    fill: colors[color] || color
+  })) : /*#__PURE__*/React.createElement("svg", {
+    width: width || 18,
+    height: height || 18,
+    viewBox: "0 0 18 18",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M2 0H16C17.1 0 18 0.9 18 2V16C18 17.1 17.1 18 16 18H2C0.9 18 0 17.1 0 16V2C0 0.9 0.9 0 2 0ZM9 14H11V4H7V6H9V14Z",
+    fill: colors[color] || color
+  }));
+});
 export const Undo = /*#__PURE__*/memo(({
   width,
   height,
@@ -5613,6 +5697,34 @@ export const SyncHorizontal = /*#__PURE__*/memo(({
     fill: colors[color] || color
   }));
 });
+export const ThreeSquare = /*#__PURE__*/memo(({
+  width,
+  height,
+  color = '#7F828E',
+  viewBox = false
+}) => {
+  return viewBox ? /*#__PURE__*/React.createElement("svg", {
+    width: width || 24,
+    height: height || 24,
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M5.01001 3H19.01C20.11 3 21 3.9 21 5V19C21 20.1 20.11 21 19.01 21H5.01001C3.91001 21 3.01001 20.1 3.01001 19V5C3.01001 3.9 3.91001 3 5.01001 3ZM13.51 12C14.34 12 15.01 11.33 15.01 10.5V9C15.01 7.89 14.11 7 13.01 7H9.00001V9H13V11H11V13H13V15H9.00001V17H13.01C14.11 17 15.01 16.11 15.01 15V13.5C15.01 12.67 14.34 12 13.51 12Z",
+    fill: colors[color] || color
+  })) : /*#__PURE__*/React.createElement("svg", {
+    width: width || 18,
+    height: height || 18,
+    viewBox: "0 0 18 18",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M2.01001 0H16.01C17.11 0 18 0.9 18 2V16C18 17.1 17.11 18 16.01 18H2.01001C0.91001 18 0.0100098 17.1 0.0100098 16V2C0.0100098 0.9 0.91001 0 2.01001 0ZM10.51 9C11.34 9 12.01 8.33 12.01 7.5V6C12.01 4.89 11.11 4 10.01 4H6.00001V6H10V8H8.00001V10H10V12H6.00001V14H10.01C11.11 14 12.01 13.11 12.01 12V10.5C12.01 9.67 11.34 9 10.51 9Z",
+    fill: colors[color] || color
+  }));
+});
 export const Touch = /*#__PURE__*/memo(({
   width,
   height,
@@ -5697,6 +5809,34 @@ export const Treeview = /*#__PURE__*/memo(({
     fill: colors[color] || color
   }));
 });
+export const TwoSquare = /*#__PURE__*/memo(({
+  width,
+  height,
+  color = '#7F828E',
+  viewBox = false
+}) => {
+  return viewBox ? /*#__PURE__*/React.createElement("svg", {
+    width: width || 24,
+    height: height || 24,
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M5 3H19C20.1 3 21 3.9 21 5V19C21 20.1 20.1 21 19 21H5C3.9 21 3 20.1 3 19V5C3 3.9 3.9 3 5 3ZM13 13C14.1 13 15 12.11 15 11V9C15 7.89 14.1 7 13 7H9V9H13V11H11C9.9 11 9 11.89 9 13V17H15V15H11V13H13Z",
+    fill: colors[color] || color
+  })) : /*#__PURE__*/React.createElement("svg", {
+    width: width || 18,
+    height: height || 18,
+    viewBox: "0 0 18 18",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M2 0H16C17.1 0 18 0.9 18 2V16C18 17.1 17.1 18 16 18H2C0.9 18 0 17.1 0 16V2C0 0.9 0.9 0 2 0ZM10 10C11.1 10 12 9.11 12 8V6C12 4.89 11.1 4 10 4H6V6H10V8H8C6.9 8 6 8.89 6 10V14H12V12H8V10H10Z",
+    fill: colors[color] || color
+  }));
+});
 export const View = /*#__PURE__*/memo(({
   width,
   height,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "diginet-core-ui",
-  "version": "1.3.73-beta.4",
+  "version": "1.3.73-beta.5",
   "description": "",
   "main": "index.js",
   "license": "UNLICENSED",

package/theme/index.js

@@ -1,3 +1,3 @@
 export { default as ThemeProvider } from './theme-provider';
-export { useTheme } from './set-theme';
+export { useTheme, useColor } from './set-theme';
 export { default as makeStyles } from './make-styles';

package/theme/set-theme.js

@@ -36,4 +36,5 @@ export const setTheme = theme => {
     });
   }
 };
-export const useTheme = () => Settings;
+export const useTheme = () => Settings;
+export const useColor = Settings.colors;

package/utils/index.js

@@ -24,4 +24,6 @@ export { default as refType } from './refType';
 export * from './sb-template';
 export { default as SbTemplate } from './sb-template';
 export { default as handleBreakpoints } from './handleBreakpoints';
+export { default as useMediaQuery } from './useMediaQuery';
+export { default as isMobile } from './isMobile';
 export default utils;

package/utils/useMediaQuery.js

@@ -4,7 +4,7 @@ import { useEffect, useState } from 'react'; // Usage:
 //     return <div>{`The view port is ${matches ? 'at least' : 'less than'} 768 pixels wide`}</div>;
 // }
 
-export const useMediaQuery = query => {
+const useMediaQuery = query => {
   const getMatches = query => {
     // Prevents SSR issues
     if (typeof window !== 'undefined') {
@@ -41,4 +41,6 @@ export const useMediaQuery = query => {
     };
   }, [query]);
   return matches;
-};
+};
+
+export default useMediaQuery;