diginet-core-ui 1.3.69-beta.9 → 1.3.70-beta.1

package/components/card/body.js

@@ -5,6 +5,7 @@ import { memo, useRef, useMemo, forwardRef, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
 import { jsx } from '@emotion/core';
 import OptionWrapper from '../others/option-wrapper';
+import { classNames } from '../../utils';
 const CardBody = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
   children,
@@ -30,7 +31,7 @@ const CardBody = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       id: id,
       ref: ref,
       style: style,
-      className: [`DGN-UI-Card-Body`, className].join(' ').trim().replace(/\s+/g, ' ')
+      className: classNames(`DGN-UI-Card-Body`, className)
     }, children);
   }, [children, className, id, style, title]);
 }));

package/components/card/extra.js

@@ -5,6 +5,7 @@ import { memo, useRef, useMemo, forwardRef, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
 import { jsx } from '@emotion/core';
 import OptionWrapper from '../others/option-wrapper';
+import { classNames } from '../../utils';
 const CardExtra = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
   children,
@@ -30,7 +31,7 @@ const CardExtra = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       id: id,
       ref: ref,
       style: style,
-      className: [`DGN-UI-Card-Extra`, className].join(' ').trim().replace(/\s+/g, ' ')
+      className: classNames(`DGN-UI-Card-Extra`, className)
     }, children);
   }, [children, className, id, style, title]);
 }));

package/components/card/footer.js

@@ -5,6 +5,7 @@ import { memo, useRef, useMemo, forwardRef, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
 import { jsx } from '@emotion/core';
 import OptionWrapper from '../others/option-wrapper';
+import { classNames } from '../../utils';
 const CardFooter = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
   children,
@@ -30,7 +31,7 @@ const CardFooter = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       id: id,
       ref: ref,
       style: style,
-      className: [`DGN-UI-Card-Footer`, className].join(' ').trim().replace(/\s+/g, ' ')
+      className: classNames(`DGN-UI-Card-Footer`, className)
     }, children);
   }, [children, className, id, style, title]);
 }));

package/components/card/header.js

@@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
 import { jsx } from '@emotion/core';
 import OptionWrapper from '../others/option-wrapper';
 import Typography from '../typography';
+import { classNames } from '../../utils';
 const CardHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
   children,
@@ -31,7 +32,7 @@ const CardHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       id: id,
       ref: ref,
       style: style,
-      className: [`DGN-UI-Card-Header`, className].join(' ').trim().replace(/\s+/g, ' ')
+      className: classNames(`DGN-UI-Card-Header`, className)
     }, children || jsx(Typography, {
       type: 'h3'
     }, title));

package/components/card/index.js

@@ -11,6 +11,7 @@ import CardHeader from './header';
 import { CardFooter } from './footer';
 import { CardBody } from './body';
 import { getColor } from '../../styles/utils';
+import { classNames } from '../../utils';
 const {
   colors: {
     system: {
@@ -29,6 +30,7 @@ const Card = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   children,
   className,
   dividerColor,
+  direction,
   footer,
   footerDivider,
   footerStyle,
@@ -43,7 +45,7 @@ const Card = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 }, reference) => {
   const ref = useRef(null);
 
-  const _CardCSS = CardCSS(width, height, headerDivider, footerDivider, dividerColor);
+  const _CardCSS = CardCSS(width, height, headerDivider, footerDivider, dividerColor, direction);
 
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
@@ -57,16 +59,16 @@ const Card = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     return currentRef;
   });
   const head = header || title ? jsx(CardHeader, {
-    className: (className === null || className === void 0 ? void 0 : className.header) || '',
+    className: classNames(className === null || className === void 0 ? void 0 : className.header),
     style: headerStyle,
     title: title
   }, header) : null;
   const foot = footer ? jsx(CardFooter, {
-    className: (className === null || className === void 0 ? void 0 : className.footer) || '',
+    className: classNames(className === null || className === void 0 ? void 0 : className.footer),
     style: footerStyle
   }, footer) : null;
   const body = bodyProp || children && (head || foot) ? jsx(CardBody, {
-    className: (className === null || className === void 0 ? void 0 : className.body) || '',
+    className: classNames(className === null || className === void 0 ? void 0 : className.body),
     style: bodyStyle
   }, bodyProp || children) : null;
   return useMemo(() => {
@@ -75,13 +77,13 @@ const Card = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       ref: ref,
       css: _CardCSS,
       style: style,
-      className: [`DGN-UI-Card`, (className === null || className === void 0 ? void 0 : className.container) || className].join(' ').trim().replace(/\s+/g, ' ')
+      className: classNames(`DGN-UI-Card`, (className === null || className === void 0 ? void 0 : className.container) || className)
     }, head, body || children, foot);
-  }, [bodyProp, bodyStyle, children, className, dividerColor, footer, footerDivider, footerStyle, header, headerDivider, headerStyle, height, id, style, title, width]);
+  }, [bodyProp, bodyStyle, children, className, dividerColor, direction, footer, footerDivider, footerStyle, header, headerDivider, headerStyle, height, id, style, title, width]);
 }));
 
-const CardCSS = (width, height, headerDivider, footerDivider, dividerColor) => css`
-    ${flexCol};
+const CardCSS = (width, height, headerDivider, footerDivider, dividerColor, direction) => css`
+    ${direction === 'vertical' ? flexCol : flexRow};
     ${positionRelative};
     ${borderBox};
     ${borderRadius4px};
@@ -140,6 +142,7 @@ Card.defaultProps = {
   bodyStyle: {},
   className: '',
   dividerColor: category,
+  direction: 'vertical',
   footerDivider: false,
   footerStyle: {},
   headerDivider: true,

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

@@ -3,7 +3,7 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
-import { forwardRef, memo, useEffect, useRef, useState, useImperativeHandle } from 'react';
+import React, { forwardRef, memo, useEffect, useRef, useState, useImperativeHandle } from 'react';
 import { Typography } from '../..';
 import { alignCenter, alignStart, borderBox, cursorPointer, displayBlock, flexRow, positionAbsolute, positionRelative, cursorNoDrop, parseWidthHeight } from '../../../styles/general';
 import { randomString } from '../../../utils';
@@ -20,7 +20,10 @@ const {
       pressed: clFillPressed
     },
     disabled: clDisabled,
-    formal2: clFormal2
+    formal2: clFormal2,
+    semantic: {
+      danger: clDanger
+    }
   },
   spacing
 } = theme;
@@ -45,6 +48,7 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   labelProps,
   width,
   stopPropagation,
+  required,
   ...props
 }, reference) => {
   if (!inputRef) {
@@ -150,7 +154,11 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     },
     color: disabled ? clDisabled : '',
     ...labelProps
-  }, children || label))));
+  }, jsx(React.Fragment, null, children || label, required && jsx("span", {
+    style: {
+      color: disabled ? clDisabled : clDanger
+    }
+  }, "*"))))));
 }));
 
 const CheckBoxSquareCSS = (width, clMain) => css`
@@ -316,10 +324,10 @@ Checkbox.propTypes = {
   /** The name of the Checkbox corresponds to the label displayed on the interface. */
   name: PropTypes.string,
 
-  /**
-   * Callback fired when the state is changed.
-   *
-   * You can pull out the new checked state by accessing `event.value` or `event.target.checked` (boolean).
+  /**
+   * Callback fired when the state is changed.
+   *
+   * You can pull out the new checked state by accessing `event.value` or `event.target.checked` (boolean).
    */
   onChange: PropTypes.func,
 
@@ -330,6 +338,9 @@ Checkbox.propTypes = {
   width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 
   /** The value of input */
-  value: PropTypes.any
+  value: PropTypes.any,
+
+  /** If `true`, the label will indicate that the checkbox is required. */
+  required: PropTypes.bool
 };
 export default Checkbox;

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

@@ -15,9 +15,6 @@ const {
     system: {
       disabled: systemDisabled
     },
-    semantic: {
-      danger
-    },
     text: {
       normal_label
     }
@@ -65,15 +62,13 @@ const Label = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     type: type,
     className: classNames('DGN-UI-Label', className, readOnly && 'read-only', disabled && 'disabled'),
     ...props
-  }, children), required && jsx("span", {
-    className: 'required'
-  }, " *")), [children, className, color, disabled, hoverTooltip, id, lineClamp, readOnly, required, type, props]);
+  }, children), !required && jsx(Typography, {
+    type: type,
+    color: 'danger'
+  }, "*")), [children, className, color, disabled, hoverTooltip, id, lineClamp, readOnly, required, type, props]);
 }));
 const LabelContainerCSS = css`
     ${flexRow};
-    .required {
-        color: ${danger};
-    }
     & + .DGN-UI-InputBase.outlined {
         margin-top: ${spacing([0.5])};
     }

package/components/form-control/money-input/index.js

@@ -550,10 +550,10 @@ MoneyInput.propTypes = {
   /** style inline of input in MoneyInput component */
   inputStyle: PropTypes.object,
 
-  /** validation value, argument can:<br/>
-   * * string: the validation rule. Example required.<br/>
-   * * object: the validation rule insist name, property, message. Example {name: 'min', compareValue: 9, message: 'Error'} or {max: 99}<br/>
-   * * array: the validation rule list, insist object/string
+  /** validation value, argument can:<br/>
+   * * string: the validation rule. Example required.<br/>
+   * * object: the validation rule insist name, property, message. Example {name: 'min', compareValue: 9, message: 'Error'} or {max: 99}<br/>
+   * * array: the validation rule list, insist object/string
    */
   validates: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.array, PropTypes.func]),
 
@@ -566,13 +566,13 @@ MoneyInput.propTypes = {
   /** on input function */
   onInput: PropTypes.func,
 
-  /**
-   * on change function, return an object:<br/>
-   * {<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;value: is a number or null value<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;target.value: value of input<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;...element<br/>
-   * }
+  /**
+   * on change function, return an object:<br/>
+   * {<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;value: is a number or null value<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;target.value: value of input<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;...element<br/>
+   * }
    */
   onChange: PropTypes.func,
 

package/components/form-control/number-input/index2.js

@@ -80,13 +80,13 @@ const NumberInput = /*#__PURE__*/forwardRef(({
   const clamp = (num, min, max) => Math.min(Math.max(num, min), max);
 
   if (valueProps || valueProps === 0) valueProps = clamp(valueProps, min, max);
-  /**
-   * Convert number to format money
-   * @param vl {number} - value
-   * @type {function(*): number}
-   * @return {string}
-   * @example 1200300.123 => 1,200,300.123
-   * @example 1200300,123 => 1.200.300,123
+  /**
+   * Convert number to format money
+   * @param vl {number} - value
+   * @type {function(*): number}
+   * @return {string}
+   * @example 1200300.123 => 1,200,300.123
+   * @example 1200300,123 => 1.200.300,123
    */
 
   const parseNumberToMoney = useCallback((vl, isNumber) => {
@@ -120,13 +120,13 @@ const NumberInput = /*#__PURE__*/forwardRef(({
 
     return number;
   }, [decimalSymbol, max, value]);
-  /**
-   * Convert money to format number
-   * @param vl {string} - value
-   * @type {function(*): number}
-   * @return {number}
-   * @example 1,200,300.123 => 1200300.123
-   * @example 1.200.300,123 => 1200300.123
+  /**
+   * Convert money to format number
+   * @param vl {string} - value
+   * @type {function(*): number}
+   * @return {number}
+   * @example 1,200,300.123 => 1200300.123
+   * @example 1.200.300,123 => 1200300.123
    */
 
   const convertMoneyToNumber = useCallback((vl, isNumber) => {
@@ -398,10 +398,10 @@ NumberInput.propTypes = {
   /** style inline of input in NumberInput component */
   inputStyle: PropTypes.object,
 
-  /** validation value, argument can:<br/>
-   * * string: the validation rule. Example required.<br/>
-   * * object: the validation rule insist name, property, message. Example {name: 'min', compareValue: 9, message: 'Error'} or {max: 99}<br/>
-   * * array: the validation rule list, insist object/string
+  /** validation value, argument can:<br/>
+   * * string: the validation rule. Example required.<br/>
+   * * object: the validation rule insist name, property, message. Example {name: 'min', compareValue: 9, message: 'Error'} or {max: 99}<br/>
+   * * array: the validation rule list, insist object/string
    */
   validates: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.array, PropTypes.func]),
 

package/components/form-control/phone-input/index.js

@@ -398,13 +398,13 @@ PhoneInput.propTypes = {
   /** on input function */
   onInput: PropTypes.func,
 
-  /**
-   * on change function. Return a object, example:<br/>
-   * {<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;target: {value: "(+84) 123 456 789", ...}<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;value: 0123456789<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;countryCode: 84<br/>
-   * }
+  /**
+   * on change function. Return a object, example:<br/>
+   * {<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;target: {value: "(+84) 123 456 789", ...}<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;value: 0123456789<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;countryCode: 84<br/>
+   * }
    */
   onChange: PropTypes.func,
 

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

@@ -3,7 +3,7 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
-import { forwardRef, memo, useState, useRef, useEffect, useMemo } from 'react';
+import React, { forwardRef, memo, useState, useRef, useEffect, useMemo } from 'react';
 import theme from '../../../theme/settings';
 import { randomString } from '../../../utils';
 import Typography from './../../typography';
@@ -18,7 +18,10 @@ const {
       active: clSystemActive,
       rest: clSystemRest
     },
-    disabled: clDisabled
+    disabled: clDisabled,
+    semantic: {
+      danger: clDanger
+    }
   }
 } = theme;
 const Radio = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
@@ -36,6 +39,7 @@ const Radio = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   inputRef,
   inputProps,
   labelProps,
+  required,
   ...props
 }, ref) => {
   if (!inputRef) {
@@ -94,7 +98,11 @@ const Radio = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       color: disabled ? clDisabled : '',
       type: 'p1',
       ...labelProps
-    }, label !== null && label !== void 0 ? label : value)));
+    }, jsx(React.Fragment, null, label !== null && label !== void 0 ? label : value, required && jsx("span", {
+      style: {
+        color: disabled ? clDisabled : clDanger
+      }
+    }, "*")))));
   }, [disabled, onChange, readOnly, checkedState]);
 }));
 const formCheckCSS = css`
@@ -199,11 +207,11 @@ Radio.propTypes = {
   /** Props for input. */
   inputProps: PropTypes.object,
 
-  /** Callback fired when the state is changed.
-   *
-   * @param {object} event The event source of the callback.
-   * You can pull out the new value by accessing `event.target.value` (string).
-   * You can pull out the new checked state by accessing `event.target.checked` (boolean).
+  /** Callback fired when the state is changed.
+   *
+   * @param {object} event The event source of the callback.
+   * You can pull out the new value by accessing `event.target.value` (string).
+   * You can pull out the new checked state by accessing `event.target.checked` (boolean).
    *  */
   onChange: PropTypes.func,
 
@@ -211,6 +219,9 @@ Radio.propTypes = {
   readOnly: PropTypes.bool,
 
   /** Props for Typography of label. */
-  labelProps: PropTypes.object
+  labelProps: PropTypes.object,
+
+  /** If `true`, the label will indicate that the Radio is required. */
+  required: PropTypes.bool
 };
 export default Radio;

package/components/form-control/text-input/index.js

@@ -430,10 +430,10 @@ TextInput.propTypes = {
   /** Type of the input element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types). */
   type: PropTypes.oneOf(['inform', 'edit', 'quickEdit', 'text', 'number', 'password']),
 
-  /** Validation value, argument can:<br/>
-   * * string: the validation rule. Example required.<br/>
-   * * object: the validation rule insist name, property, message. Example {name: 'min', compareValue: 9, message: 'Error'} or {max: 99}<br/>
-   * * array: the validation rule list, insist object/string
+  /** Validation value, argument can:<br/>
+   * * string: the validation rule. Example required.<br/>
+   * * object: the validation rule insist name, property, message. Example {name: 'min', compareValue: 9, message: 'Error'} or {max: 99}<br/>
+   * * array: the validation rule list, insist object/string
    */
   validates: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.array, PropTypes.func]),
 

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

@@ -3,7 +3,7 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
-import { forwardRef, memo, useEffect, useMemo, useRef, useState } from 'react';
+import React, { forwardRef, memo, useEffect, useMemo, useRef, useState } from 'react';
 import theme from '../../../theme/settings';
 import generateRandom from '../../../utils/randomString';
 import Typography from '../../typography';
@@ -23,7 +23,10 @@ const {
     primary: clPrimary,
     hover: clHover,
     disabled: clDisabled,
-    white: clWhite
+    white: clWhite,
+    semantic: {
+      danger: clDanger
+    }
   },
   spacing
 } = theme;
@@ -42,6 +45,7 @@ const Toggle = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   inputProps,
   lineClamp,
   hoverTooltip,
+  required,
   ...props
 }, ref) => {
   if (!inputRef) {
@@ -180,7 +184,11 @@ const Toggle = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     hoverTooltip: hoverTooltip,
     lineClamp: lineClamp || null,
     mapping: 'label'
-  }, label))), [disabled, onChange, checkedState, readOnly]);
+  }, jsx(React.Fragment, null, label, required && jsx("span", {
+    style: {
+      color: disabled ? clDisabled : clDanger
+    }
+  }, "*"))))), [disabled, onChange, checkedState, readOnly]);
 }));
 Toggle.defaultProps = {
   disabled: false,
@@ -191,7 +199,8 @@ Toggle.defaultProps = {
   id: '',
   width: 40,
   height: 20,
-  lineClamp: null
+  lineClamp: null,
+  required: false
 };
 Toggle.propTypes = {
   /** * If `true`, the component is disabled. */
@@ -230,11 +239,14 @@ Toggle.propTypes = {
   /** Shows tooltip containing Label on hover */
   hoverTooltip: PropTypes.bool,
 
-  /** * Callback fired when the state is changed.
-   *
-   * @param {object} event The event source of the callback.
-   * You can pull out the new checked state by accessing `event.target.checked` (boolean).
+  /** * Callback fired when the state is changed.
+   *
+   * @param {object} event The event source of the callback.
+   * You can pull out the new checked state by accessing `event.target.checked` (boolean).
    */
-  onChange: PropTypes.func
+  onChange: PropTypes.func,
+
+  /** If `true`, the label will indicate that the checkbox is required. */
+  required: PropTypes.bool
 };
 export default Toggle;

package/components/grid/index.js

@@ -38,8 +38,8 @@ const Grid = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const rowSpacing = rowSpacingProp || spacing;
   const columnSpacing = columnSpacingProp || spacing;
   const columns = container ? columnsProp : columnsContext;
-  const topSpacing = topSpacingProp || rowSpacing;
-  const leftSpacing = leftSpacingProp || columnSpacing;
+  const topSpacing = topSpacingProp !== null && topSpacingProp !== void 0 ? topSpacingProp : rowSpacing;
+  const leftSpacing = leftSpacingProp !== null && leftSpacingProp !== void 0 ? leftSpacingProp : columnSpacing;
   const ref = useRef(null);
 
   const _GridCSS = GridCSS(direction, zeroMinWidth, container, item, wrap);

package/components/popover/index.js

@@ -13,6 +13,9 @@ const {
   colors: {
     system: {
       white
+    },
+    fill: {
+      tooltip: fillTooltip
     }
   },
   typography: {
@@ -129,6 +132,7 @@ const getDirectionPopover = direction => {
   }
 };
 
+const backgroundMap = new Map([['light', white], ['dark', fillTooltip]]);
 const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
   anchor,
@@ -531,8 +535,9 @@ const PopoverContainerCSS = (bgColor, width, height) => css`
     transition: opacity 0.3s ease;
     pointer-events: initial;
     opacity: 0;
-    background-color: ${bgColor};
+    background-color: ${backgroundMap.get(bgColor) || bgColor};
     box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    ${bgColor === 'dark' && `color: ${white};`}
 `;
 
 const PopoverArrowCSS = bgColor => css`
@@ -541,7 +546,7 @@ const PopoverArrowCSS = bgColor => css`
     ${parseWidthHeight(0)};
     border-left: 6px solid transparent;
     border-right: 6px solid transparent;
-    border-bottom: 6px solid ${bgColor};
+    border-bottom: 6px solid ${backgroundMap.get(bgColor) || bgColor};
 `;
 
 Popover.defaultProps = {
@@ -550,7 +555,7 @@ Popover.defaultProps = {
     horizontal: 'center'
   },
   arrow: false,
-  bgColor: white,
+  bgColor: 'light',
   className: '',
   clickOutsideToClose: true,
   fullScreen: false,
@@ -576,9 +581,9 @@ Popover.propTypes = {
   /** An HTML element, or a function that returns one. It's used to set the position of the popover. */
   anchor: PropTypes.oneOfType([PropTypes.instanceOf(Element), PropTypes.func, PropTypes.object, PropTypes.node, ref]),
 
-  /**
-   * This is the point on the anchor where the popover's anchor will attach to.
-   * Options: vertical: [top, center, bottom]; horizontal: [left, center, right].
+  /**
+   * This is the point on the anchor where the popover's anchor will attach to.
+   * Options: vertical: [top, center, bottom]; horizontal: [left, center, right].
    */
   anchorOrigin: PropTypes.shape({
     horizontal: PropTypes.oneOf(['center', 'left', 'right']),
@@ -589,7 +594,7 @@ Popover.propTypes = {
   arrow: PropTypes.bool,
 
   /** Background color of the component. */
-  bgColor: PropTypes.string,
+  bgColor: PropTypes.oneOfType(PropTypes.oneOf(['light', 'dark']), PropTypes.string),
 
   /** The content of the component. */
   children: PropTypes.node,
@@ -600,14 +605,14 @@ Popover.propTypes = {
   /** If `true`, click outside will close component. */
   clickOutsideToClose: PropTypes.bool,
 
-  /**
-   * Direction when Popover shown.
-   * Note: This prop will overwrite anchorOrigin & transformOrigin.
-   *
-   * * top: anchorOrigin: { vertical: 'top', horizontal: 'center' }, transformOrigin: { vertical: 'bottom', horizontal: 'center' }
-   * * left: anchorOrigin: { vertical: 'center', horizontal: 'left' }, transformOrigin: { vertical: 'center', horizontal: 'right' }
-   * * right: anchorOrigin: { vertical: 'center', horizontal: 'right' }, transformOrigin: { vertical: 'center', horizontal: 'left' }
-   * * bottom: anchorOrigin: { vertical: 'bottom', horizontal: 'center' }, transformOrigin: { vertical: 'top', horizontal: 'center' }
+  /**
+   * Direction when Popover shown.
+   * Note: This prop will overwrite anchorOrigin & transformOrigin.
+   *
+   * * top: anchorOrigin: { vertical: 'top', horizontal: 'center' }, transformOrigin: { vertical: 'bottom', horizontal: 'center' }
+   * * left: anchorOrigin: { vertical: 'center', horizontal: 'left' }, transformOrigin: { vertical: 'center', horizontal: 'right' }
+   * * right: anchorOrigin: { vertical: 'center', horizontal: 'right' }, transformOrigin: { vertical: 'center', horizontal: 'left' }
+   * * bottom: anchorOrigin: { vertical: 'bottom', horizontal: 'center' }, transformOrigin: { vertical: 'top', horizontal: 'center' }
    */
   direction: PropTypes.oneOf(['top', 'left', 'right', 'bottom']),
 
@@ -626,9 +631,9 @@ Popover.propTypes = {
   /** Style inline of component. */
   style: PropTypes.object,
 
-  /**
-   * This is the point on the popover which will attach to the anchor's origin.
-   * Options: vertical: [top, center, bottom]; horizontal: [left, center, right].
+  /**
+   * This is the point on the popover which will attach to the anchor's origin.
+   * Options: vertical: [top, center, bottom]; horizontal: [left, center, right].
    */
   transformOrigin: PropTypes.shape({
     horizontal: PropTypes.oneOf(['center', 'left', 'right']),
@@ -641,13 +646,13 @@ Popover.propTypes = {
   /** Config z-index of the component. */
   zIndex: PropTypes.number,
 
-  /**
-   * ref methods (ref.current.instance.*method*)
-   *
-   * * show: Show popover
-   * * close: Close popover
-   * * setPosition(element): Set position of popover
-   *  * @param {element} - element
+  /**
+   * ref methods (ref.current.instance.*method*)
+   *
+   * * show: Show popover
+   * * close: Close popover
+   * * setPosition(element): Set position of popover
+   *  * @param {element} - element
    */
   reference: ref
 };

package/components/tab/tab-container.js

@@ -7,8 +7,8 @@ import PropTypes from 'prop-types';
 import { randomString } 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(({
   children,
   tabIndex,
@@ -75,7 +75,6 @@ TabContainer.defaultProps = {
   className: '',
   style: {}
 };
-const typesTypography = Typography.propTypes.type;
 TabContainer.propTypes = {
   /** Width of component. */
   width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
@@ -90,7 +89,7 @@ TabContainer.propTypes = {
   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]),
+  level: PropTypes.oneOfType([PropTypes.oneOf(['level1', 'level2', ...typesTypography])]),
 
   /** Class for component */
   className: PropTypes.string,

package/components/typography/index.js

@@ -4,9 +4,9 @@
 import { memo, useRef, forwardRef, useImperativeHandle, Fragment, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
-import { renderHTML } from '../../utils';
+import { classNames, renderHTML } from '../../utils';
 import { Popover } from '..';
-import { breakWord, displayBlock, displayInlineBlock, overflowHidden, positionRelative, textCapitalize, textCenter, textUppercase } from '../../styles/general';
+import { breakWord, cursorPointer, displayBlock, displayInlineBlock, overflowHidden, positionRelative, textCapitalize, textCenter, textUppercase } from '../../styles/general';
 import { color as colors } from '../../styles/colors';
 import theme from '../../theme/settings';
 const {
@@ -44,24 +44,25 @@ const colorMap = new Map([['default', main], ['secondary', rest]]);
 const isTextClamped = elm => (elm === null || elm === void 0 ? void 0 : elm.scrollHeight) > (elm === null || elm === void 0 ? void 0 : elm.clientHeight);
 
 const Typography = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  type,
-  color,
-  center,
-  uppercase,
   capitalize,
-  fullWidth,
-  mapping,
-  className,
-  lineClamp,
+  center,
   children,
+  className,
+  color,
+  fullWidth,
   hoverTooltip,
+  lineClamp,
+  mapping,
+  onClick,
   tooltipDirection,
+  type,
+  uppercase,
   ...props
 }, reference) => {
   const ref = useRef(null);
   const [openTooltip, setOpenTooltip] = useState(false);
 
-  const _TextRootCSS = TextRootCSS(color, type, lineClamp);
+  const _TextRootCSS = TextRootCSS(color, type, lineClamp, onClick);
 
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
@@ -73,7 +74,7 @@ const Typography = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     return currentRef;
   });
 
-  const classNames = inTooltip => ['DGN-UI-Typography', center && 'DGN-Typography-center', fullWidth && 'DGN-Typography-fullWidth', `DGN-Typography-${type}`, uppercase && `DGN-Typography-Uppercase`, capitalize && 'DGN-Typography-Capitalize', !inTooltip && lineClamp && 'DGN-Typography-Clamp', className].join(' ').trim().replace(/\s+/g, ' ');
+  const classes = inTooltip => classNames('DGN-UI-Typography', center && 'DGN-Typography-center', fullWidth && 'DGN-Typography-fullWidth', `DGN-Typography-${type}`, uppercase && `DGN-Typography-Uppercase`, capitalize && 'DGN-Typography-Capitalize', !inTooltip && lineClamp && 'DGN-Typography-Clamp', className);
 
   const setHoverTooltip = (open, isTooltip) => {
     !isTooltip && setOpenTooltip(false);
@@ -105,28 +106,30 @@ const Typography = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       direction: tooltipDirection
     }, renderHTML(renderChildren(), mapping, {
       css: _TextRootCSS,
-      className: classNames(true),
+      className: classes(true),
       style: {
         color: textTooltip,
         padding: '4px 6px'
       }
     }));
-  }, [openTooltip, tooltipDirection, children, mapping, color, type, lineClamp]);
+  }, [openTooltip, tooltipDirection, children, mapping, color, type, lineClamp, onClick]);
   return jsx(Fragment, null, renderHTML(renderChildren(), mapping, {
     ref: ref,
     css: _TextRootCSS,
-    className: classNames(false),
+    className: classes(false),
     onMouseEnter: () => setHoverTooltip(true),
     onMouseLeave: () => setHoverTooltip(false),
+    onClick: onClick,
     ...props
   }), hoverTooltip && renderTooltip);
 }));
 
-const TextRootCSS = (color, type, lineClamp) => css`
+const TextRootCSS = (color, type, lineClamp, onClick) => css`
     ${displayInlineBlock};
     ${positionRelative};
     ${breakWord};
     ${paragraph1};
+    ${onClick && cursorPointer};
     white-space: break-spaces;
     color: ${colorMap.get(color) || colors[color] || color};
     max-width: max-content;
@@ -155,14 +158,14 @@ const TextRootCSS = (color, type, lineClamp) => css`
 `;
 
 Typography.defaultProps = {
-  type: 'p1',
-  color: 'default',
   center: false,
-  fullWidth: true,
-  mapping: 'span',
   className: '',
+  color: 'default',
+  fullWidth: true,
   hoverTooltip: false,
-  tooltipDirection: 'bottom'
+  mapping: 'span',
+  tooltipDirection: 'bottom',
+  type: 'p1'
 };
 /** type of text<br/>
  * h1: Title <br/>
@@ -193,7 +196,7 @@ Typography.propTypes = {
   /** Color of text ['primary', 'secondary', 'success', 'warning', 'danger', 'info', '#hex', rgb(#,#,#)]. */
   color: PropTypes.string,
 
-  /** If true, the component will take up the full width of its container. */
+  /** If `true`, the component will take up the full width of its container. */
   fullWidth: PropTypes.bool,
 
   /** If `true`, hover will show tooltip when text clamped. */
@@ -205,6 +208,9 @@ Typography.propTypes = {
   /** The component used for the root node. Either a string to use a HTML element or a component. */
   mapping: PropTypes.string,
 
+  /** Callback fired when the component is clicked. */
+  onClick: PropTypes.func,
+
   /** Accepts all props which `mapping` tag support. */
   props: PropTypes.object,
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "diginet-core-ui",
-  "version": "1.3.69-beta.9",
+  "version": "1.3.70-beta.1",
   "description": "",
   "main": "index.js",
   "license": "UNLICENSED",

package/readme.md

@@ -38,6 +38,15 @@ npm test
 ```
 
 ## Changelog
+## 1.3.70
+- \[Changed\]: Checkbox – Add prop required
+- \[Changed\]: Radio – Add prop required
+- \[Changed\]: Toggle – Add prop required
+- \[Changed\]: Storybook – Add template storybook
+- \[Changed\]: MoneyInput, NumberInput, PhoneInput, TextInput – Add helperTextProps
+- \[Fixed\]: Tooltip – Add display flex
+- \[Fixed\]: Checkbox – Fix bug not show value when label is empty string
+
 ## 1.3.69
 - \[Fixed\]: DatePicker – Fix not show placeholder
 - \[Fixed\]: DatePicker – Fix set value when select date