diginet-core-ui 1.3.81 → 1.3.82-beta.2

package/components/badge/index.js

@@ -1,25 +1,28 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { memo, useRef, forwardRef, useMemo, useImperativeHandle } from 'react';
-import PropTypes from 'prop-types';
-import { jsx, css } from '@emotion/core';
+import { css, jsx } from '@emotion/core';
+import { Icon } from "./..";
 import OptionWrapper from "../others/option-wrapper";
-import { color as colors } from "../../styles/colors";
-import { typography } from "../../styles/typography";
-import { alignCenter, borderBox, borderRadius4px, flexRow, flexWrap, inlineFlex, justifyCenter, pointerEventsNone, positionAbsolute, positionRelative } from "../../styles/general";
-import Icon from "../../icons";
-const {
-  paragraph1,
-  paragraph2,
-  paragraph3
-} = typography;
+import PropTypes from 'prop-types';
+import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
+import { alignCenter, borderBox, borderRadius4px, flexRow, flexWrap, inlineFlex, justifyCenter, parseMinWidthHeight, parseWidthHeight, pointerEventsNone, positionAbsolute, positionRelative } from "../../styles/general";
+import { useColor as colors, useTheme } from "../../theme";
+import { classNames, refType as ref } from "../../utils";
 const {
-  system: {
-    rest,
-    white
-  }
-} = colors;
-const colorMap = new Map([['default', rest]]);
+  colors: {
+    system: {
+      rest: systemRest,
+      white: systemWhite
+    }
+  },
+  typography: {
+    paragraph1,
+    paragraph2,
+    paragraph3
+  },
+  spacing
+} = useTheme();
+const colorMap = new Map([['default', systemRest]]);
 const iconSizeMap = new Map([['medium', 24], ['large', 32], ['giant', 40]]);
 const dotSizeMap = new Map([['medium', 8], ['large', 10], ['giant', 12]]);
 const dotIndentMap = new Map([['medium', 4], ['large', 2]]);
@@ -70,28 +73,30 @@ const calDotPos = (anchorOrigin, contentDirection, dotSize, hasContent, size) =>
 const Badge = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
   anchorOrigin,
-  contentDirection,
+  children,
+  className,
+  color,
   content,
+  contentDirection,
+  iconProps,
+  id,
+  invisible,
   max,
   name,
-  color,
+  showZero,
   size,
-  className,
   style,
-  showZero,
-  invisible,
-  children,
-  iconProps,
   ...props
 }, reference) => {
+  if (!reference) reference = useRef(null);
   const ref = useRef(null);
   const typographySize = typographySizeMap.get(size);
   const iconSize = iconSizeMap.get(size);
   const dotSize = content || content === 0 && showZero ? dotSizeMap.get(size) + 8 : dotSizeMap.get(size);
   const dotColor = colors[color] || colorMap.get(color) || color;
   const dotPos = calDotPos(anchorOrigin, !children && name ? 'right' : contentDirection, dotSize, content || content === 0, size);
-  const _BadgeNumberCSS = BadgeNumberCSS(typographySize, children, name, dotSize, dotColor, invisible);
-  const _BadgeRootCSS = BadgeRootCSS(children, name, dotPos, _BadgeNumberCSS);
+  const _BadgeNumberCSS = BadgeNumberCSS(typographySize, children, name, dotSize, dotColor);
+  const _BadgeRootCSS = BadgeRootCSS(children, name, dotPos, _BadgeNumberCSS.name);
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
     currentRef.element = ref.current;
@@ -106,28 +111,30 @@ const Badge = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     let node = children;
     if (!node && name) {
       node = jsx(Icon, {
+        viewBox: true,
         name: name,
         width: iconSize,
         height: iconSize,
-        viewBox: true,
+        color: 'currentColor',
         ...iconProps
       });
     }
     return jsx("div", {
       css: _BadgeRootCSS,
       ref: ref,
-      className: ['DGN-UI-Badge', className].join(' ').trim().replace(/\s+/g, ' '),
+      id: id,
+      className: classNames('DGN-UI-Badge', className),
       style: style,
       ...props
     }, jsx("span", {
       className: 'DGN-UI-Badge-Children'
-    }, node), content !== undefined && jsx("span", {
+    }, node), content !== undefined && !invisible ? jsx("span", {
       css: _BadgeNumberCSS,
       className: 'DGN-UI-Badge-Dot'
-    }, max && content > max ? max + '+' : content === 0 && !showZero ? null : content));
-  }, [anchorOrigin, contentDirection, content, name, size, children, max, showZero, invisible, color, style, className, iconProps]);
+    }, max && content > max ? max + '+' : content === 0 && !showZero ? null : content) : null);
+  }, [anchorOrigin, children, className, color, content, contentDirection, iconProps, id, invisible, max, name, showZero, size, style, props]);
 }));
-const BadgeNumberCSS = (typographySize, children, name, dotSize, dotColor, invisible) => css`
+const BadgeNumberCSS = (typographySize, children, name, dotSize, dotColor) => css`
     ${typographySize};
     ${flexRow};
     ${alignCenter};
@@ -136,84 +143,88 @@ const BadgeNumberCSS = (typographySize, children, name, dotSize, dotColor, invis
     ${borderBox};
     ${pointerEventsNone};
     ${children || name ? positionAbsolute : positionRelative};
-    color: ${white};
-    min-height: ${dotSize}px;
-    min-width: ${dotSize}px;
+    color: ${systemWhite};
+    ${parseMinWidthHeight(dotSize)};
     background-color: ${dotColor};
     border-radius: ${dotSize / 2}px;
-    padding: 0 4px;
-    transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-    ${invisible && 'transform: scale(0) translate(50%, -50%);'};
+    padding: ${spacing([0, 1])};
 `;
-const BadgeRootCSS = (children, name, dotPos, _BadgeNumberCSS) => css`
+const BadgeRootCSS = (children, name, dotPos, BadgeNumberCSSName) => css`
     ${inlineFlex};
     ${alignCenter};
     ${justifyCenter};
     ${positionRelative};
     ${borderBox};
     ${borderRadius4px};
-    color: ${white};
-    height: max-content;
-    min-height: max-content;
-    width: max-content;
-    min-width: max-content;
-    .css-${_BadgeNumberCSS.name} {
-        ${(children || name) && dotPos}
+    ${parseWidthHeight('max-content')};
+    ${parseMinWidthHeight('max-content')};
+    .css-${BadgeNumberCSSName} {
+        ${(children || name) && dotPos};
     }
 `;
 Badge.defaultProps = {
-  color: 'default',
-  size: 'medium',
   anchorOrigin: {
     vertical: 'top',
     horizontal: 'right'
   },
+  className: '',
+  color: 'default',
   content: null,
-  max: 99,
   contentDirection: 'left',
-  showZero: false,
   invisible: false,
-  className: '',
+  max: 99,
+  showZero: false,
+  size: 'medium',
   style: {}
 };
 Badge.propTypes = {
+  /** The anchor of the badge. */
   anchorOrigin: PropTypes.shape({
     horizontal: PropTypes.oneOf(['left', 'right']),
     vertical: PropTypes.oneOf(['top', 'bottom'])
   }),
-  /** the quantity is shown on the badge */
+  /** The badge will be added relative to this node. */
+  children: PropTypes.node,
+  /** Class for component. */
+  className: PropTypes.string,
+  /** The color of the component. */
+  color: PropTypes.oneOfType([PropTypes.oneOf(['default', 'primary', 'info', 'success', 'warning', 'danger']), PropTypes.string]),
+  /** The content rendered within the badge. */
   content: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  /** the largest number is displayed on the badge */
-  max: PropTypes.number,
-  /** used to fill background for button */
+  /** Direction of content within the badge */
   contentDirection: PropTypes.oneOf(['left', 'right']),
-  /** background color of badge */
-  color: PropTypes.oneOfType([PropTypes.oneOf(['default', 'primary', 'info', 'success', 'warning', 'danger']), PropTypes.string]),
-  /** use name will replace children with ButtonIcon */
+  /** If `true`, the badge is invisible */
+  invisible: PropTypes.bool,
+  /** Max count to show. */
+  max: PropTypes.number,
+  /** Prop name of [ButtonIcon](https://core.diginet.com.vn/ui/?path=/docs/buttonicon) components.  */
   name: PropTypes.string,
-  /** other icon props when use prop name */
-  iconProps: PropTypes.object,
-  /** size of Badge
+  /** Controls whether the badge is hidden when `content` is zero. */
+  showZero: PropTypes.bool,
+  /** Size of the components.
    *
    * * medium (dot 8px, typography p3)
    * * large (button 10px, typography p2)
    * * giant (button 12px, typography p1)
    * */
   size: PropTypes.oneOf(['medium', 'large', 'giant']),
-  /** Controls whether the badge is hidden when content is zero */
-  showZero: PropTypes.bool,
-  /** If true, the badge is invisible */
-  invisible: PropTypes.bool,
-  /** className of component */
-  className: PropTypes.string,
-  /** style inline of component */
+  /** Style inline of component. */
   style: PropTypes.object,
-  /** the function get ref */
-  refs: PropTypes.func,
-  /** the content displayed under the number of the badge */
-  children: PropTypes.node,
-  /** any props else */
-  props: PropTypes.any
+  /**
+   * ref methods (ref.current.instance.*method*)
+   *
+   * * option(): Gets all UI component properties
+   *  * Returns value - object
+   * * option(optionName): Gets the value of a single property
+   *  * @param {optionName} - string
+   *  * Returns value - any
+   * * option(optionName, optionValue): Updates the value of a single property
+   *  * @param {optionName} - string
+   *  * @param {optionValue} - any
+   * * option(options): Updates the values of several properties
+   *  * @param {options} - object
+   */
+  reference: ref
 };
 export { Badge };
 export default OptionWrapper(Badge);

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

@@ -1078,6 +1078,8 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     title: "",
     onDrop: onDropInput,
     onDragLeave: onDropInput,
+    onClick: e => e.target.value = null // Fix not fire onChange when select same file
+    ,
     ...inputProps
   })), [inputProps]);
   const AttachedView = useMemo(() => jsx(ScrollBar, {
@@ -1438,12 +1440,14 @@ Attachment.defaultProps = {
   maxFile: Infinity,
   multiple: true,
   readOnly: false,
+  style: {},
   uploadErrorInfo: {
     maxFile: getGlobal(['errorDefault', 'maxFile']),
     maxSize: getGlobal(['errorDefault', 'maxSize']),
     fileType: getGlobal(['errorDefault', 'fileType']),
     existingFile: getGlobal(['errorDefault', 'existingFile'])
-  }
+  },
+  viewType: 'detail'
 };
 Attachment.propTypes = {
   /** File types that can be accepted. */

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

@@ -1,15 +1,13 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
-import useInput from "../../../utils/useInput";
-import PropTypes from 'prop-types';
-import { jsx, css } from '@emotion/core';
+import { css, jsx } from '@emotion/core';
+import { Icon, Typography } from "../..";
 import { getGlobal } from "../../../global";
-import Icon from "../../../icons";
-import { Typography } from "../..";
-import { useTheme, useColor as colors } from "../../../theme";
-import { classNames, refType as ref } from "../../../utils";
-import { alignCenter, border, borderBox, borderNone, borderRadius4px, displayBlock, flexRow, outlineNone, parseHeight, parseWidth, parseWidthHeight, pointerEventsNone, positionAbsolute, positionRelative } from "../../../styles/general";
+import PropTypes from 'prop-types';
+import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
+import { alignCenter, backgroundTransparent, border, borderBox, borderNone, borderRadius4px, displayBlock, flexRow, outlineNone, parseHeight, parseMinHeight, parseMinWidthHeight, parseWidth, parseWidthHeight, pointerEventsNone, positionAbsolute, positionRelative } from "../../../styles/general";
+import { useColor as colors, useTheme } from "../../../theme";
+import { classNames, refType as ref, useInput } from "../../../utils";
 const {
   colors: {
     system: {
@@ -77,6 +75,7 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   viewType,
   ...props
 }, reference) => {
+  if (!reference) reference = useRef(null);
   if (!autoWidth && inputProps !== null && inputProps !== void 0 && inputProps.autoWidth) autoWidth = inputProps.autoWidth;
   const _onChange = e => {
     onChange && onChange(e);
@@ -94,7 +93,7 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const widthInit = useRef(null);
   const isEnabled = !readOnly && !disabled;
   const _InputBaseCSS = InputBaseCSS(readOnly, status);
-  const _SingleLineCSS = SingleLineCSS(autoWidth);
+  const _SingleLineCSS = SingleLineCSS(autoWidth, readOnly);
   const _InputCSS = InputCSS(autoWidth, isEnabled, hoverTooltip);
   const _TypoCSS = TypoCSS(disabled);
   const _TextAreaCSS = TextAreaCSS(resize, readOnly);
@@ -406,20 +405,22 @@ const InputBaseCSS = (readOnly, status) => css`
     }`}
     & + .DGN-UI-HelperText {
         ${positionAbsolute};
-        min-height: 16px;
+        ${parseMinHeight(16)};
         top: 100%;
     }
 `;
-const SingleLineCSS = autoWidth => css`
+const SingleLineCSS = (autoWidth, readOnly) => css`
     ${parseWidthHeight(autoWidth ? 'max-content' : 'auto', 'max-content')}
     ${alignCenter};
     flex: 1 1 auto;
     &:focus-within {
-        border-bottom-color: ${semanticInfo};
-        &::after {
-            border-bottom-color: inherit;
-            transform: scaleX(1);
-        }
+        ${!readOnly && `
+            border-bottom-color: ${semanticInfo};
+            &::after {
+                border-bottom-color: inherit;
+                transform: scaleX(1);
+            }
+        `}
     }
     &.outlined {
         ${parseHeight(40)};
@@ -432,7 +433,7 @@ const InputCSS = (autoWidth, isEnabled, hoverTooltip) => css`
     ${outlineNone};
     transition: all 0.1s;
     color: ${textMain};
-    background-color: transparent;
+    ${backgroundTransparent};
     padding-top: 0;
     padding-bottom: 0;
     ${paragraph1};
@@ -493,9 +494,8 @@ const TextAreaCSS = (resize, readOnly) => css`
     ${positionRelative};
     ${borderBox};
     ${parseWidth('100%')};
+    ${parseMinWidthHeight('max-content')};
     color: ${textMain};
-    min-height: max-content;
-    min-width: max-content;
     background-color: transparent;
     padding: ${spacing(0.5, 0)};
     overflow-y: auto;

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

@@ -5,7 +5,7 @@ import { Typography } from "../..";
 import OptionWrapper from "../../others/option-wrapper";
 import PropTypes from 'prop-types';
 import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
-import { flexRow, typographyTypes } from "../../../styles/general";
+import { flexRow, parseMinHeight, typographyTypes } from "../../../styles/general";
 import { useTheme } from "../../../theme";
 import { classNames } from "../../../utils";
 const {
@@ -33,6 +33,7 @@ const Label = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   type,
   ...props
 }, reference) => {
+  if (!reference) reference = useRef(null);
   const ref = useRef(null);
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
@@ -71,19 +72,19 @@ const LabelContainerCSS = css`
     }
 `;
 const LabelRootCSS = css`
-    min-height: 16px;
+    ${parseMinHeight(16)};
     margin: 0;
     word-break: break-all;
 `;
 Label.defaultProps = {
-  type: 'h6',
+  children: '',
+  className: '',
   color: normal_label,
-  lineClamp: 1,
-  required: false,
   disabled: false,
+  lineClamp: 1,
   readOnly: false,
-  className: '',
-  children: ''
+  required: false,
+  type: 'h6'
 };
 Label.propTypes = {
   /** The content of the component. */
@@ -99,7 +100,7 @@ Label.propTypes = {
   /** Consult [Typography's](https://core.diginet.com.vn/ui/?path=/docs/typography) documents. */
   color: PropTypes.string,
   /** Consult [Typography's](https://core.diginet.com.vn/ui/?path=/docs/typography) documents. */
-  lineClamp: PropTypes.number,
+  lineClamp: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(['auto'])]),
   /** Consult [Typography's](https://core.diginet.com.vn/ui/?path=/docs/typography) documents. */
   hoverTooltip: PropTypes.bool,
   /** Consult [Typography's](https://core.diginet.com.vn/ui/?path=/docs/typography) documents. */

package/components/grid/Col.js

@@ -1,10 +1,10 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import PropTypes from 'prop-types';
 import { jsx } from '@emotion/core';
-import Grid from '.';
+import PropTypes from 'prop-types';
 import { makeStyles } from "../../theme";
 import { classNames } from "../../utils";
+import Grid from '.';
 const useStyles = makeStyles({
   customCol: {
     '& .DGN-UI-Control': {
@@ -45,6 +45,7 @@ Col.defaultProps = {
   md: false,
   sm: false,
   style: {},
+  verticalAlign: 'auto',
   wrap: 'wrap',
   xl: false,
   xs: true,
@@ -67,6 +68,8 @@ Col.propTypes = {
   sm: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
   /** Style inline of component. */
   style: PropTypes.object,
+  /** Self-align of the grid item. */
+  verticalAlign: PropTypes.oneOf(['auto', 'start', 'center', 'end']),
   /** Defines the flex-wrap style property. It's applied for all screen sizes. */
   wrap: PropTypes.oneOf(['nowrap', 'wrap-reverse', 'wrap']),
   /** If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for the `xl` breakpoint and wider screens if not overridden. */

package/components/grid/Container.js

@@ -1,9 +1,9 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import PropTypes from 'prop-types';
 import { jsx } from '@emotion/core';
-import Grid from '.';
+import PropTypes from 'prop-types';
 import { classNames } from "../../utils";
+import Grid from '.';
 const checkChildren = children => {
   if (!children) return false;
   if (Array.isArray(children)) {

package/components/grid/Row.js

@@ -1,9 +1,9 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import PropTypes from 'prop-types';
 import { jsx } from '@emotion/core';
-import Grid from '.';
+import PropTypes from 'prop-types';
 import { classNames } from "../../utils";
+import Grid from '.';
 const checkChildren = children => {
   if (!children) return false;
   if (Array.isArray(children)) {

package/components/grid/index.js

@@ -1,17 +1,17 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { memo, useContext, useRef, useMemo, forwardRef, useImperativeHandle } from 'react';
+import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
-import { jsx, css } from '@emotion/core';
-import GridContext from "./context";
-import theme from "../../theme/settings";
-import { breakpointKeys } from "../../theme/createBreakpoints";
+import { forwardRef, memo, useContext, useImperativeHandle, useMemo, useRef } from 'react';
 import { borderBox } from "../../styles/general";
+import { useTheme } from "../../theme";
+import { breakpointKeys } from "../../theme/createBreakpoints";
 import { classNames, handleBreakpoints } from "../../utils";
+import GridContext from "./context";
 const {
   breakpoints: themeBreakpoints,
   spacing: themeSpacing
-} = theme;
+} = useTheme();
 const Grid = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
   children,
@@ -30,6 +30,7 @@ const Grid = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   spacing,
   style,
   topSpacing: topSpacingProp,
+  verticalAlign,
   wrap,
   xl,
   xs,
@@ -42,7 +43,7 @@ const Grid = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   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);
+  const _GridCSS = GridCSS(direction, zeroMinWidth, container, item, wrap, verticalAlign);
   const _GridSpacingCSS = GridSpacingCSS(rowSpacing, columnSpacing, topSpacing, leftSpacing);
   const _HandleGridCSS = HandleGridCSS([xs, sm, md, lg, xl], columns);
   useImperativeHandle(reference, () => {
@@ -65,7 +66,7 @@ const Grid = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }, jsx(GridContext.Provider, {
       value: columns
     }, children));
-  }, [columns, columnSpacing, leftSpacing, rowSpacing, topSpacing, children, className, container, direction, id, item, lg, md, sm, spacing, style, wrap, xl, xs, zeroMinWidth]);
+  }, [columns, columnSpacing, leftSpacing, rowSpacing, topSpacing, children, className, container, direction, id, item, lg, md, sm, spacing, style, verticalAlign, wrap, xl, xs, zeroMinWidth]);
 }));
 const getOffset = val => {
   const parse = parseFloat(val);
@@ -108,7 +109,7 @@ const handleGrid = (size, value, columns) => {
         ${css}
     }`;
 };
-const GridCSS = (direction, zeroMinWidth, container, item, wrap) => css`
+const GridCSS = (direction, zeroMinWidth, container, item, wrap, verticalAlign) => css`
     ${borderBox};
     ${container && `
         display: flex;
@@ -117,6 +118,7 @@ const GridCSS = (direction, zeroMinWidth, container, item, wrap) => css`
     `};
     ${item && `
         margin: 0;
+        align-self: ${verticalAlign}
     `};
     ${zeroMinWidth && `min-width: 0;`}
     ${handleBreakpoints(direction, propValue => {
@@ -182,6 +184,7 @@ Grid.defaultProps = {
   sm: false,
   spacing: 0,
   style: {},
+  verticalAlign: 'auto',
   wrap: 'wrap',
   xl: false,
   xs: false,
@@ -218,6 +221,8 @@ Grid.propTypes = {
   spacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
   /** Defines the vertical space of `container` components. */
   topSpacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
+  /** Self-align of the grid item. */
+  verticalAlign: PropTypes.oneOf(['auto', 'start', 'center', 'end']),
   /** Defines the flex-wrap style property. It's applied for all screen sizes. */
   wrap: PropTypes.oneOf(['nowrap', 'wrap-reverse', 'wrap']),
   /** If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for the `xl` breakpoint and wider screens if not overridden. */

package/components/popover/index.js

@@ -182,7 +182,7 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
   const updatePositionPopover = (el = null, cb) => {
     var _window, _window2, _anchor6, _anchorRect, _anchorRect2, _anchor7, _anchorRect3, _anchorRect4, _anchorRect5, _anchorRect6, _anchorRect7, _anchorRect8, _anchorRect9, _anchorRect10, _anchorRect11, _anchorRect12, _newDirectionObject, _newDirectionObject$t, _transformOrigin, _newDirectionObject2, _newDirectionObject2$, _transformOrigin2;
-    setElement(el instanceof Element ? el : null);
+    if (el instanceof Element) setElement(el);
     if (!ref.current) {
       window.removeEventListener('resize', updatePositionPopover);
       return;

package/components/progress/circular.js

@@ -167,12 +167,12 @@ const CircularProgress = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const radius = Math.max(0, (containerW - circleStrokeW) / 2);
   const radiusX10 = radius * 10;
   const circumference = radius * 2 * Math.PI;
-  const _ContainerCSS = ContainerCSS(containerW);
+  const _ContainerCSS = ContainerCSS(containerW, directionAngle);
   const _CircleBackgroundCSS = CircleBackgroundCSS(background, !determinate);
   const _CircleMainCSS = CircleMainCSS(color);
   const _CircleMainIndeterminateCSS = CircleMainIndeterminateCSS(radiusX10);
-  const _CircleMainDeterminateCSS = CircleMainDeterminateCSS(circumference, percent, directionAngle, duration);
-  const _TextCSS = TextCSS(percentColor, color, dimension);
+  const _CircleMainDeterminateCSS = CircleMainDeterminateCSS(circumference, percent, duration);
+  const _TextCSS = TextCSS(percentColor, color, dimension, directionAngle);
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
     currentRef.element = ref.current;
@@ -234,9 +234,11 @@ const keyframeDash = r => keyframes`
 		stroke-dashoffset: -${r * 124 / 200};
 	}
 `;
-const ContainerCSS = containerW => css`
+const ContainerCSS = (containerW, directionAngle) => css`
     ${displayInlineBlock};
     ${parseWidthHeight(containerW)};
+    transform: rotate(${directionAngle}deg);
+    transform-origin: center;
 `;
 const AnimationRotateCSS = css`
     animation: ${keyframeRotate} 2s linear infinite;
@@ -251,11 +253,9 @@ const CircleMainCSS = color => css`
     stroke: ${color};
     stroke-linecap: round;
 `;
-const CircleMainDeterminateCSS = (circumference, percent, directionAngle, duration) => css`
+const CircleMainDeterminateCSS = (circumference, percent, duration) => css`
     stroke-dasharray: ${`${circumference} ${circumference}`};
     stroke-dashoffset: ${circumference - validatePercent(percent) / 100 * circumference};
-    // transform: rotate(${directionAngle}deg);
-    transform-origin: center;
     transition: stroke-dashoffset ${duration}s cubic-bezier(0.77, 0, 0.175, 1); /* easeInOutQuart */
 `;
 const CircleMainIndeterminateCSS = radiusX10 => css`
@@ -263,11 +263,13 @@ const CircleMainIndeterminateCSS = radiusX10 => css`
     stroke-dashoffset: 0;
     animation: ${keyframeDash(radiusX10)} 2s ease-in-out infinite;
 `;
-const TextCSS = (percentColor, color, dimension) => css`
+const TextCSS = (percentColor, color, dimension, directionAngle) => css`
     ${userSelectNone};
     fill: ${percentColor ? percentColor : color};
     ${dimension.labelStyle}
     text-anchor: middle;
+    transform: rotate(${-directionAngle}deg);
+    transform-origin: center;
 `;
 CircularProgress.defaultProps = {
   background: lineCategory,
@@ -278,7 +280,7 @@ CircularProgress.defaultProps = {
   duration: 1,
   percent: 25,
   percentColor: semanticInfo,
-  showValue: false,
+  showValue: true,
   size: 'medium',
   style: {}
 };

package/components/tab/tab.js

@@ -102,7 +102,7 @@ const TabItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       css: _IndicatorCSS,
       className: 'Indicator'
     }));
-  }, [children, className, color, disabled, endIcon, index, label, level, onClick, props, startIcon, style, isVertical, tabIndexState]);
+  }, [children, className, color, disabled, endIcon, index, label, labelProps, level, onClick, props, startIcon, style, isVertical, tabIndexState]);
 }));
 const TabButtonCSS = (color, isVertical) => css`
     ${flexRow};

package/components/typography/index.js

@@ -176,7 +176,7 @@ Typography.propTypes = {
   /** If `true`, hover will show tooltip when text clamped. */
   hoverTooltip: PropTypes.bool,
   /** The line-clamp property truncates text at a specific number of lines. */
-  lineClamp: PropTypes.number,
+  lineClamp: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(['auto'])]),
   /** 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. */

package/icons/menu/v2/index.js

@@ -2,18 +2,32 @@
 /* eslint-disable no-empty */
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { memo, forwardRef, useRef, useMemo } from 'react';
-import PropTypes from 'prop-types';
 import { jsx } from '@emotion/core';
+import PropTypes from 'prop-types';
+import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
+import { classNames } from "../../../utils";
 const IconMenu = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  type,
+  action,
+  className,
+  height,
+  id,
   name,
-  width,
-  height
-}, ref) => {
-  if (!ref) {
-    ref = useRef(null);
-  }
+  style,
+  type,
+  width
+}, reference) => {
+  if (!reference) reference = useRef(null);
+  const ref = useRef(null);
+  useImperativeHandle(reference, () => {
+    const currentRef = ref.current || {};
+    currentRef.element = ref.current;
+    const _instance = {
+      ...action
+    }; // methods
+    _instance.__proto__ = {}; // hidden methods
+    currentRef.instance = _instance;
+    return currentRef;
+  });
   const getResourceImage = fileName => {
     let icon = require("../../../assets/images/menu/dhr/Default.svg");
     try {
@@ -22,26 +36,36 @@ const IconMenu = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     return icon;
   };
   return useMemo(() => jsx("img", {
+    ref: ref,
+    id: id,
+    className: classNames('DGN-UI-IconMenu', className),
+    style: style,
     src: getResourceImage(name + '.svg'),
     width: width,
     height: height,
-    alt: ''
-  }), [type, name, width, height]);
+    alt: name
+  }), [className, height, id, name, style, type, width]);
 }));
 IconMenu.defaultProps = {
+  className: '',
+  height: '100%',
   name: 'Default',
   type: 'dhr',
   width: '100%',
-  height: '100%'
+  style: {}
 };
 IconMenu.propTypes = {
-  /** Menu type (DHR || ERP || BEM). */
-  type: PropTypes.oneOf(['dhr', 'erp', 'bem']),
+  /** Class for component. */
+  className: PropTypes.string,
+  /** Height of icon. */
+  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   /** Name of icon. */
   name: PropTypes.string,
+  /** Menu type (DHR || ERP || BEM). */
+  type: PropTypes.oneOf(['dhr', 'erp', 'bem']),
   /** Width of icon. */
   width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  /** Height of icon. */
-  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+  /** Style inline of component. */
+  style: PropTypes.object
 };
 export default IconMenu;

package/package.json

@@ -1,42 +1,73 @@
 {
   "name": "diginet-core-ui",
-  "version": "1.3.81",
-  "description": "The DigiNet core ui",
-  "homepage": "https://diginet.com.vn",
+  "version": "1.3.82-beta.2",
+  "description": "",
   "main": "index.js",
+  "license": "UNLICENSED",
   "scripts": {
-    "start-js": "react-scripts start --max_old_space_size=4096",
-    "start": "npx npm-run-all -p start-js",
-    "build": "GENERATE_SOURCEMAP=false && react-scripts build --env=production --max_old_space_size=8192",
-    "eject": "react-scripts eject",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "start": "npm-run-all --parallel start-sb eslint-test",
+    "start-sb": "start-storybook -p 9050",
+    "build-storybook": "build-storybook -c .storybook -s src",
+    "build": "run-script-os",
+    "build:windows": "rimraf dist && mkdirp dist/components && npm run compile && sass --style=compressed src/scss:dist/css && xcopy src\\\\assets dist\\\\assets\\ /e /y",
+    "build:darwin:linux:default": "rm -rf dist && npm run compile && sass --style=compressed src/scss:dist/css && cp -rf src/assets dist/assets",
+    "compile": "babel src --out-dir dist --ignore **/*.stories.js",
+    "pack": "npm run build && cp *.md dist/ && npm run version:bump --silent && npm run version:add --silent && cd dist && npm pack",
+    "production-keep-version": "npm run build && cp *.md dist/ && cp package.json dist/ && cd dist && npm publish",
+    "beta": "npm run build && cp *.md dist/ && cp package.json dist/ && cd dist && npm publish --tag beta",
+    "production": "npm run build && cp *.md dist/ && npm run version:bump --silent && npm run version:add --silent && cd dist && npm publish",
+    "version:add": "run-script-os",
+    "version:add:windows": "cat package.json.tmp | sed \"s/0.0.0/%npm_package_version%/g\" > dist/package.json",
+    "version:add:darwin:linux:default": "VERSION=$(npm run version:extract --silent) && cat package.json.tmp | sed \"s/0.0.0/${VERSION}/g\" > dist/package.json",
+    "version:bump": "npm version patch --no-git-tag-version --silent",
+    "version:extract": "cat package.json | grep version | head -1 | awk -F: '{ print $2 }' | sed 's/[\",]//g' | tr -d '[[:space:]]'",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "lint": "eslint --fix --config .eslintrc.js \"**/*.js\"",
+    "eslint-test": "onchange \"src/**/*.{js,jsx,json}\" -- eslint . --fix",
+    "test-storybook": "test-storybook --url http://localhost:9050"
   },
   "dependencies": {
     "@emotion/core": "^10.0.35",
+    "babel-plugin-module-resolver": "^4.1.0",
     "prop-types": "^15.7.2"
   },
-  "repository": {
-    "type": "git",
-    "url": "git+https://diginetvn@bitbucket.org/diginetvn/diginet-core-ui.git"
+  "lint-staged": {
+    "*/**/*.{js,jsx,json}": [
+      "prettier --write",
+      "git add"
+    ]
   },
-  "keywords": [
-    "core ui",
-    "diginet"
-  ],
-  "author": "rocachien",
-  "contributors": [
-    {
-      "name": "Chien Do",
-      "email": "rocachien@gmail.com"
-    },
-    {
-      "name": "Nhat Tran",
-      "email": "tranminhnhat1005@gmail.com"
-    },
-    {
-      "name": "Thuan Nguyen",
-      "email": "nt.thuan.hutech@gmail.com"
-    }
-  ],
-  "license": "MIT"
+  "devDependencies": {
+    "@babel/cli": "^7.14.3",
+    "@babel/plugin-proposal-class-properties": "^7.13.0",
+    "@babel/plugin-proposal-logical-assignment-operators": "^7.16.0",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.0",
+    "@babel/plugin-proposal-optional-chaining": "^7.14.2",
+    "@babel/plugin-proposal-private-methods": "^7.18.6",
+    "@babel/plugin-proposal-private-property-in-object": "^7.18.6",
+    "@babel/preset-react": "^7.13.13",
+    "@storybook/addon-actions": "6.2.9",
+    "@storybook/addon-essentials": "6.2.9",
+    "@storybook/addon-links": "6.2.9",
+    "@storybook/addon-postcss": "^2.0.0",
+    "@storybook/react": "6.2.9",
+    "@storybook/test-runner": "^0.7.1",
+    "autoprefixer": "^10.3.1",
+    "babel-loader": "^8.2.2",
+    "eslint": "^8.4.1",
+    "eslint-plugin-react": "^7.27.1",
+    "eslint-plugin-regex": "^1.10.0",
+    "husky": "^7.0.4",
+    "jest": "^27.5.1",
+    "lint-staged": "^12.1.2",
+    "mkdirp": "^1.0.4",
+    "npm-run-all": "^4.1.5",
+    "onchange": "^7.1.0",
+    "postcss-flexbugs-fixes": "^5.0.2",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "rimraf": "^3.0.2",
+    "run-script-os": "^1.1.6",
+    "sass": "^1.37.0"
+  }
 }

package/readme.md

@@ -38,6 +38,9 @@ npm test
 ```
 
 ## Changelog
+## 1.3.82
+- \[Fixed\]: CircularProgress – Fix transform rotate wrong inside flex column
+
 ## 1.3.81
 - \[Added\]: Icon – Feedback, Newspaper
 - \[Changed\]: Button – Add prop href, urlParams

package/utils/index.js

@@ -1,30 +1,31 @@
 import * as utils from '.';
-export * from "./array/array";
+export { default as capitalize } from "./string/capitalize";
+export { default as capitalizeSentenceCase } from "./string/capitalizeSentenceCase";
 export { default as classNames } from "./classNames";
-export * from "./date";
 export { default as date } from "./date";
 export { default as getFileType } from "./getFileType";
 export { default as handleBreakpoints } from "./handleBreakpoints";
 export { default as isMobile } from "./isMobile";
 export { default as mapParent } from "./map-parent";
+export { default as onValidate } from "./validate";
 export { default as parseTextToHTML } from "./parseHTML";
 export { default as promisify } from "./promisify";
 export { default as randomString } from "./randomString";
 export { default as refType } from "./refType";
 export { default as removeUnicode } from "./remove-unicode";
-export * from "./render-portal";
 export { default as renderHTML } from "./renderHTML";
 export { default as renderIcon } from "./renderIcon";
-export * from "./sb-template";
 export { default as SbTemplate } from "./sb-template";
-export { default as capitalize } from "./string/capitalize";
-export { default as capitalizeSentenceCase } from "./string/capitalizeSentenceCase";
-export * from "./string/string";
 export { default as updatePosition } from "./updatePosition";
 export { default as useDelayUnmount } from "./useDelayUnmount";
+export { default as useInput } from "./useInput";
 export { default as useMediaQuery } from "./useMediaQuery";
 export { default as useOnClickOutside } from "./useOnClickOutside";
 export { default as usePortal } from "./usePortal";
+export * from "./array/array";
+export * from "./date";
+export * from "./render-portal";
+export * from "./sb-template";
+export * from "./string/string";
 export * from "./validate";
-export { default as onValidate } from "./validate";
 export default utils;