diginet-core-ui 1.3.73 → 1.3.74

package/components/tab/tab-container.js

@@ -4,18 +4,20 @@
 import React, { forwardRef, useState, memo, useEffect, useRef, useImperativeHandle } from 'react';
 import { jsx, css } from '@emotion/core';
 import PropTypes from 'prop-types';
-import { randomString } from '../../utils';
+import { classNames, randomString, refType as ref } from '../../utils';
 import TabContext from './context';
 import { isNumeric } from '../../utils/type';
-import Typography from '../typography';
 import { flexCol, flexRow, positionRelative, parseWidth } from '../../styles/general';
+import { arrTypeTypography as typesTypography } from '../typography';
 const TabContainer = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  action = {},
   children,
-  tabIndex,
-  width,
+  className,
   direction,
   level,
-  className,
+  style,
+  tabIndex,
+  width,
   ...props
 }, reference) => {
   const ref = useRef(null);
@@ -37,7 +39,9 @@ const TabContainer = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }, [value, tabIndex]);
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
-    const _instance = {}; // methods
+    currentRef.element = ref.current;
+    const _instance = { ...action
+    }; // methods
 
     _instance.__proto__ = {}; // hidden methods
 
@@ -46,9 +50,10 @@ const TabContainer = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   });
   return jsx("div", {
     css: _TabContainerCSS,
-    className: ['DGN-UI-Tab-Container', className].join(' ').trim().replace(/\s+/g, ' '),
-    id: `DGN-${id}-tab-button-container`,
     ref: ref,
+    id: `DGN-${id}-tab-button-container`,
+    className: classNames('DGN-UI-Tab-Container', className),
+    style: style,
     ...props
   }, jsx(TabContext.Provider, {
     value: {
@@ -68,44 +73,41 @@ const TabContainerCSS = (direction, width) => css`
 `;
 
 TabContainer.defaultProps = {
-  width: '100%',
+  className: '',
   direction: 'horizontal',
   level: 'level1',
+  style: {},
   tabIndex: 0,
-  className: '',
-  style: {}
+  width: '100%'
 };
-const typesTypography = Typography.propTypes.type;
 TabContainer.propTypes = {
-  /** Width of component. */
-  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-
-  /** The value of the currently selected Tab. */
-  tabIndex: PropTypes.number,
-
   /** The content of the component. */
   children: PropTypes.node,
 
+  /** Class for component */
+  className: PropTypes.string,
+
   /** Direction change the position of Tabs. */
   direction: PropTypes.oneOf(['vertical', 'horizontal']),
 
   /** Direction change the size typography of Tab (typesTypography is types of Typography - exp: h1, h2, h3, p1 ...). */
-  level: PropTypes.oneOfType([PropTypes.oneOf(['level1', 'level2']), typesTypography]),
-
-  /** Class for component */
-  className: PropTypes.string,
+  level: PropTypes.oneOfType([PropTypes.oneOf(['level1', 'level2', ...typesTypography])]),
 
   /** Style inline of component. */
   style: PropTypes.object,
 
+  /** The value of the currently selected Tab. */
+  tabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
+  /** Width of component. */
+  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
   /** Any props else. */
   props: PropTypes.any,
 
-  /**
-   * Ref methods.
+  /**
+   * Ref methods.
    */
-  reference: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.instanceOf(Element)
-  })])
+  reference: ref
 };
 export default TabContainer;

package/components/tab/tab-header.js

@@ -4,22 +4,23 @@
 import React, { memo, forwardRef, useContext, useRef, useState, useImperativeHandle } from 'react';
 import { jsx, css } from '@emotion/core';
 import PropTypes from 'prop-types';
-import { color as colors } from '../../styles/colors';
 import TabContext from './context';
 import ButtonIcon from '../button/icon';
-import { borderBox, displayNone, flexCol, flexRow, justifyCenter, overflowHidden, parseWidthHeight, positionRelative, whiteSpaceNoWrap } from '../../styles/general';
+import { borderBox, displayNone, flexCol, flexRow, justifyCenter, overflowHidden, parseWidth, parseWidthHeight, positionRelative, whiteSpaceNoWrap } from '../../styles/general';
+import { classNames, refType as ref } from '../../utils';
+import theme from '../../theme/settings';
 const {
-  line: {
-    tab
-  }
-} = colors;
+  spacing
+} = theme;
 const TabHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  action = {},
+  centered,
   children,
-  style,
   className,
   level,
   scrollButtons,
-  centered,
+  style,
+  width,
   ...props
 }, reference) => {
   var _ref$current, _ref$current2;
@@ -33,9 +34,9 @@ const TabHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   let showScrollLeftButton = !isVertical && scrollLeft > 0;
   let showScrollRightButton = !isVertical && (ref === null || ref === void 0 ? void 0 : (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.offsetWidth) + scrollLeft < (ref === null || ref === void 0 ? void 0 : (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.scrollWidth);
 
-  const _ContainerCSS = ContainerCSS(centered, isVertical);
+  const _ContainerCSS = ContainerCSS(centered, isVertical, width);
 
-  const _TabHeaderCSS = TabHeaderCSS(isVertical);
+  const _TabHeaderCSS = TabHeaderCSS(isVertical, width);
 
   const scrollLeftButtonCSS = scrollButtonCSS(true, showScrollLeftButton, showScrollRightButton);
   const scrollRightButtonCSS = scrollButtonCSS(false, showScrollLeftButton, showScrollRightButton);
@@ -48,7 +49,9 @@ const TabHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
-    const _instance = {}; // methods
+    currentRef.element = ref.current;
+    const _instance = { ...action
+    }; // methods
 
     _instance.__proto__ = {}; // hidden methods
 
@@ -58,7 +61,7 @@ const TabHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   return jsx("div", {
     css: _ContainerCSS,
     id: `DGN-control`,
-    className: ['DGN-UI-Tab-Header-Container', className].join(' ').trim().replace(/\s+/g, ' '),
+    className: classNames('DGN-UI-Tab-Header-Container', className),
     style: style,
     ...props
   }, scrollButtons && !isVertical && jsx(ButtonIcon, {
@@ -91,26 +94,26 @@ const TabHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }));
 }));
 
-const ContainerCSS = (centered, isVertical) => css`
+const ContainerCSS = (centered, isVertical, width) => css`
     ${flexRow};
     ${overflowHidden};
     ${positionRelative};
     ${borderBox};
+    ${parseWidthHeight(width, 'auto')};
     ${centered && justifyCenter};
     flex-direction: ${isVertical ? 'column' : 'row'};
     max-width: ${isVertical ? 'max-content' : '100%'};
-    height: auto;
-    width: 100%;
     padding: 0;
-    ${isVertical ? `border-right: solid 1px ${tab}` : `border-bottom: solid 1px ${tab}`};
 `;
 
-const TabHeaderCSS = isVertical => isVertical ? css`
+const TabHeaderCSS = (isVertical, width) => isVertical ? css`
               ${flexCol};
+              ${parseWidth(width)};
           ` : css`
               ${flexRow};
               ${positionRelative};
               ${whiteSpaceNoWrap};
+              ${parseWidth(width)};
               margin: 0;
               overflow-x: auto;
               scroll-behavior: smooth;
@@ -126,7 +129,7 @@ const scrollButtonCSS = (scrollPrevious, showScrollLeftButton, showScrollRightBu
     ${parseWidthHeight(24, 24)};
     overflow: initial;
     align-self: center;
-    margin: ${scrollPrevious ? '0 8px 0 0' : '0 0 0 8px'};
+    margin: ${scrollPrevious ? spacing([0, 2, 0, 0]) : spacing([0, 0, 0, 2])};
     opacity: ${scrollPrevious && showScrollLeftButton || !scrollPrevious && showScrollRightButton ? '1' : '0'};
     :disabled {
         span {
@@ -136,26 +139,30 @@ const scrollButtonCSS = (scrollPrevious, showScrollLeftButton, showScrollRightBu
 `;
 
 TabHeader.defaultProps = {
-  scrollButtons: false,
+  centered: false,
   className: '',
+  scrollButtons: false,
   style: {},
-  centered: false
+  width: '100%'
 };
 TabHeader.propTypes = {
+  /** If true, the tabs are centered. */
+  centered: PropTypes.bool,
+
   /** Element to display in Tab header. */
   children: PropTypes.array,
 
   /** Class for component. */
   className: PropTypes.string,
 
-  /** Style inline of component. */
-  style: PropTypes.object,
-
   /** If true, show scroll buttons. */
   scrollButtons: PropTypes.bool,
 
-  /** If true, the tabs are centered. */
-  centered: PropTypes.bool,
+  /** Style inline of component. */
+  style: PropTypes.object,
+
+  /** Width of component. */
+  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 
   /** Any props else. */
   props: PropTypes.any,
@@ -163,8 +170,6 @@ TabHeader.propTypes = {
   /**
    * Ref methods.
    */
-  reference: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.instanceOf(Element)
-  })])
+  reference: ref
 };
 export default TabHeader;

package/components/tab/tab-panel.js

@@ -4,20 +4,25 @@
 import { memo, forwardRef, useContext, useRef, useEffect, useState, useImperativeHandle } from 'react';
 import { jsx, css } from '@emotion/core';
 import PropTypes from 'prop-types';
-import { color as colors } from '../../styles/colors';
 import TabContext from './context';
-import { borderBox, displayNone, flexCol, positionRelative } from '../../styles/general';
+import { borderBox, displayNone, flexCol, parseWidthHeight, positionRelative } from '../../styles/general';
+import theme from '../../theme/settings';
+import { classNames, refType as ref } from '../../utils';
 const {
-  text: {
-    main
-  }
-} = colors;
+  colors: {
+    text: {
+      main
+    }
+  },
+  spacing
+} = theme;
 const TabPanel = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  action = {},
   children,
-  index,
-  style,
   className,
+  index,
   lazyLoading,
+  style,
   ...props
 }, reference) => {
   const {
@@ -36,7 +41,9 @@ const TabPanel = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }, [tabIndexState]);
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
-    const _instance = {}; // methods
+    currentRef.element = ref.current;
+    const _instance = { ...action
+    }; // methods
 
     _instance.__proto__ = {}; // hidden methods
 
@@ -45,12 +52,12 @@ const TabPanel = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   });
   return jsx("div", {
     css: _TabPanelCSS,
+    ref: ref,
+    role: 'tab-panel',
     "aria-labelledby": `tab-${index}`,
     id: `tab-panel-${index}`,
-    className: ['DGN-UI-Tab-Panel', className].join(' ').trim().replace(/\s+/g, ' '),
+    className: classNames('DGN-UI-Tab-Panel', className),
     style: style,
-    role: 'tab-panel',
-    ref: ref,
     ...props
   }, isActive || !lazyLoading || isRendered ? children : null);
 }));
@@ -60,41 +67,38 @@ const TabPanelCSS = (isVertical, isActive) => css`
     ${borderBox};
     ${positionRelative};
     ${isActive ? flexCol : displayNone};
+    ${parseWidthHeight('100%', isVertical ? 300 : '100%')}
     color: ${main};
-    height: ${isVertical ? '300px' : '100%'};
-    padding: 0px ${isVertical ? '12px' : '10'};
-    width: 100%;
+    padding: ${spacing([0, isVertical ? 3 : 2.5])};
 `;
 
 TabPanel.defaultProps = {
   className: '',
-  style: {},
-  lazyLoading: false
+  lazyLoading: false,
+  style: {}
 };
 TabPanel.propTypes = {
   /** The content of the component. */
   children: PropTypes.node,
 
-  /** Index received in position of TabHeaderButton. */
-  index: PropTypes.number,
-
   /** Class for component. */
   className: PropTypes.string,
 
-  /** Style inline of component. */
-  style: PropTypes.object,
+  /** Index received in position of TabHeaderButton. */
+  index: PropTypes.number,
 
   /** Lazy loading mode. */
   lazyLoading: PropTypes.bool,
 
+  /** Style inline of component. */
+  style: PropTypes.object,
+
   /** Any props else. */
   props: PropTypes.any,
 
-  /**
-   * Ref methods.
+  /**
+   * Ref methods.
    */
-  reference: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.instanceOf(Element)
-  })])
+  reference: ref
 };
 export default TabPanel;

package/components/tab/tab.js

@@ -10,26 +10,33 @@ import Ripple from '../button/ripple-effect';
 import Typography from '../typography';
 import TabContext from './context';
 import { alignCenter, backgroundTransparent, borderBox, boxShadowNone, 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 {
-  system: {
-    active,
-    disabled: systemDisabled,
-    rest,
-    white
-  }
-} = colors;
+  colors: {
+    system: {
+      active,
+      disabled: systemDisabled,
+      rest,
+      white
+    }
+  },
+  spacing
+} = theme;
 const TabItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  index,
+  action = {},
   children,
+  className,
   color,
   disabled,
-  style,
-  className,
-  startIcon,
   endIcon,
+  index,
   label,
-  onClick,
+  labelProps,
   level,
+  onClick,
+  startIcon,
+  style,
   ...props
 }, reference) => {
   const {
@@ -51,7 +58,9 @@ const TabItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
-    const _instance = {}; // methods
+    currentRef.element = ref.current;
+    const _instance = { ...action
+    }; // methods
 
     _instance.__proto__ = {}; // hidden methods
 
@@ -89,12 +98,12 @@ const TabItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }, [endIcon]);
   return jsx("div", {
     css: _TabButtonCSS,
-    className: ['DGN-UI-Tab-Item', disabled ? 'disabled' : '', index === tabIndexState && !disabled ? 'selected' : '', className].join(' ').trim().replace(/\s+/g, ' '),
+    ref: ref,
+    className: classNames('DGN-UI-Tab-Item', disabled && 'disabled', index === tabIndexState && !disabled && 'selected', className),
     style: style,
     onClick: _onClick,
-    ref: ref,
     ...props
-  }, startIcon && StartIcon, jsx(Typography, {
+  }, startIcon && StartIcon, jsx(Typography, { ...labelProps,
     type: level,
     color: 'inherit'
   }, label), children, endIcon && EndIcon, jsx(Ripple, null), jsx("span", {
@@ -120,9 +129,9 @@ const TabButtonCSS = (color, isVertical) => css`
     background-color: ${white};
     border: 0;
     color: ${colors[color] || color || rest};
-    max-width: 320px;
-    min-width: ${isVertical ? '264px' : '80px'};
-    padding: ${isVertical ? '14px 16px' : '10px 16px'};
+    max-width: ${isVertical ? '100%' : '287px'};
+    min-width: 80px;
+    padding: ${isVertical ? spacing([3.5, 4]) : spacing([2.5, 4])};
     pointer-events: auto;
     transition: all 0.2s ease-in-out, background-color 0.2s ease-in-out;
     &.disabled {
@@ -169,45 +178,48 @@ const ButtonIconCSS = css`
     ${borderBox};
     max-height: 24px;
     max-width: 24px;
-    margin-right: 4px;
+    margin-right: ${spacing([1])};
     &.end-icon {
         margin-right: unset;
-        margin-left: 4px;
+        margin-left: ${spacing([1])};
     }
 `;
 TabItem.defaultProps = {
+  className: '',
   disabled: false,
   label: '',
-  className: '',
   style: {}
 };
 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,
 
-  /** Element to display in Tabs (like label). */
-  children: PropTypes.node,
-
-  /** Icon to the left of the button. */
-  startIcon: PropTypes.node,
-
-  /** Icon to the right of the button. */
-  endIcon: PropTypes.node,
+  /** [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,
 
-  /** Class for component. */
-  className: PropTypes.string,
+  /** Icon to the left of the button. */
+  startIcon: PropTypes.node,
 
   /** Style inline of component. */
   style: PropTypes.object,
@@ -218,8 +230,6 @@ TabItem.propTypes = {
   /**
    * Ref methods.
    */
-  reference: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.instanceOf(Element)
-  })])
+  reference: ref
 };
 export default TabItem;