diginet-core-ui 1.3.82 → 1.3.83-beta.1

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/paging/page-info.js

@@ -1,32 +1,33 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { memo, useState, useRef, useEffect, useMemo, forwardRef, useImperativeHandle, useLayoutEffect, useCallback } from 'react';
-import PropTypes from 'prop-types';
-import { jsx, css } from '@emotion/core';
+import { css, jsx } from '@emotion/core';
+import { ButtonIcon, Divider, Dropdown, NumberInput, Typography } from "./..";
 import OptionWrapper from "../others/option-wrapper";
-import { ButtonIcon, NumberInput, Dropdown, Typography, Divider } from "../";
 import { getGlobal } from "../../global";
-import theme from "../../theme/settings";
-import { alignCenter, borderBox, flexRow, noPadding, textCenter, cursorPointer, parseHeight, whiteSpaceNoWrap, justifyCenter } from "../../styles/general";
+import PropTypes from 'prop-types';
+import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { alignCenter, borderBox, cursorPointer, flexRow, justifyCenter, noPadding, parseHeight, parseMinHeight, parseMinWidth, parseMinWidthHeight, parseWidthHeight, textCenter, whiteSpaceNoWrap } from "../../styles/general";
+import { useTheme } from "../../theme";
+import { classNames, refType as ref } from "../../utils";
 const {
   colors: {
     system: {
-      active,
-      white
+      active: systemActive,
+      white: systemWhite
     },
     line: {
-      system,
-      category
+      system: lineSystem,
+      category: lineCategory
     },
     text: {
-      main
+      main: textMain
     }
   },
   typography: {
     paragraph2
   },
   spacing
-} = theme;
+} = useTheme();
 const getLastPage = (totalItems, itemsPerPage) => {
   let _lastPage = 0;
   if (totalItems && totalItems >= 0 && itemsPerPage && itemsPerPage > 0) {
@@ -53,7 +54,8 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   totalItems,
   typeShort
 }, reference) => {
-  let ref = useRef(null);
+  if (!reference) reference = useRef(null);
+  const ref = useRef(null);
   const timer = useRef(null);
   const currentPageRef = useRef(null);
   const numberRef = useRef(null);
@@ -66,8 +68,6 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const [disableNextState, setDisableNextState] = useState(!(totalItems > itemsPerPage));
   const [inputPageValue, setInputPageValue] = useState(currentPage);
   const _pagingInfoCSS = pagingInfoCSS(bgColor, typeShort);
-  // const _dynamicWidthCSS = dynamicWidthCSS(currentPageState.toString()?.length || 3);
-
   const _onChangePage = async ({
     page,
     e,
@@ -139,9 +139,6 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
     }
     setItemsPerPageState(per);
-    // currentPageRef.current = 0;
-    // setCurrentPageState(0);
-    // setInputPageValue(0);
     _onChangePage({
       page: 0
     });
@@ -253,13 +250,13 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       // getBoundingClientRect includes margin => phải trừ đi margin
       const style = window.getComputedStyle(child) || child.currentStyle;
       const margin = parseInt((style === null || style === void 0 ? void 0 : style.marginLeft) || 0) + parseInt((style === null || style === void 0 ? void 0 : style.marginRight) || 0);
-      if (infoChild.right - margin >= infoParent.width) {
+      if (infoChild.right - margin >= infoParent.right) {
         child.style.opacity = 0;
         child.style.setProperty('display', 'none', 'important');
       } else {
         child.style.opacity = 1;
       }
-      return infoChild.right >= infoParent.width;
+      return infoChild.right >= infoParent.right;
     });
   };
   const setWithNumber = useCallback((totalRefs = totalRef, numberRefs = numberRef) => {
@@ -297,12 +294,12 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     listPerPageData = [...new Map(listPerPageData.map(v => [JSON.stringify(v), v])).values()];
     listPerPageData.sort((a, b) => a.id - b.id);
     const showPaging = checkShowPaging();
-    return showPaging && jsx("div", {
+    return showPaging ? jsx("div", {
       ref: ref,
       css: _pagingInfoCSS,
       id: id,
       style: style,
-      className: ['DGN-UI-PagingInfo', className].join(' ').trim().replace(/\s+/g, ' ')
+      className: classNames('DGN-UI-PagingInfo', className)
     }, jsx(ButtonIcon, {
       circular: true,
       viewType: 'ghost',
@@ -360,15 +357,15 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       placeholder: '',
       max: lastPage,
       onKeyDown: checkKeyPress,
-      onChange: e => onTypePaging(e)
+      onChange: onTypePaging
     }), "/", jsx(Typography, {
       ref: refs => {
         totalRef.current = refs;
         setWithNumber(refs, null);
       },
       css: css`
-                                        ${whiteSpaceNoWrap}
-                                    `,
+                                    ${whiteSpaceNoWrap}
+                                `,
       type: 'p2'
     }, lastPage)), jsx(ButtonIcon, {
       circular: true,
@@ -415,7 +412,7 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }, typeShort ? jsx(Divider, {
       direction: 'vertical',
       height: 24,
-      color: category
+      color: lineCategory
     }) : getGlobal('lineNumber'), jsx(Dropdown, {
       allowSearch: false,
       viewType: 'underlined',
@@ -429,7 +426,7 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         readOnly: true
       },
       dropdownItemStyle: {
-        color: active
+        color: systemActive
       }
     })), jsx(Typography, {
       type: 'p2',
@@ -438,9 +435,9 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }, typeShort ? jsx(Divider, {
       direction: 'vertical',
       height: 24,
-      color: category
-    }) : getGlobal('total') + ':', totalItemsState));
-  }, [typeShort, bgColor, style, className, hideWithPage, totalItemsState, itemsPerPageState, currentPageState, listPerPageState, disablePrevState, disableNextState, inputPageValue]);
+      color: lineCategory
+    }) : getGlobal('total') + ':', totalItemsState)) : null;
+  }, [bgColor, className, hideWithPage, style, typeShort, currentPageState, disableNextState, disablePrevState, inputPageValue, itemsPerPageState, listPerPageState, totalItemsState]);
 }));
 const ViewNumberInput = css`
     ${flexRow};
@@ -454,11 +451,11 @@ const pagingInfoCSS = (bgColor, typeShort) => css`
     ${alignCenter};
     ${paragraph2};
     ${borderBox};
-    ${parseHeight(40)}
-    border-top: solid 1px ${system};
+    ${parseHeight(40)};
+    border-top: solid 1px ${lineSystem};
     padding: ${spacing([1, 0])};
     background-color: ${bgColor};
-    color: ${main};
+    color: ${textMain};
     .inputPage {
         ${textCenter};
         margin: ${spacing([0, 0.5])};
@@ -467,7 +464,7 @@ const pagingInfoCSS = (bgColor, typeShort) => css`
             input {
                 ${paragraph2};
                 ${textCenter};
-                color: ${active};
+                color: ${systemActive};
                 text-align: left;
             }
         }
@@ -485,9 +482,9 @@ const pagingInfoCSS = (bgColor, typeShort) => css`
     .DGN-UI-Dropdown {
         margin-left: ${`${spacing(typeShort ? [0] : [2])}`};
         margin-bottom: 0;
-        min-width: 52px;
+        ${parseMinWidth(52)};
         .DGN-UI-Dropdown-Form {
-            min-height: 24px;
+            ${parseMinHeight(24)};
             padding: 0;
             input,
             span {
@@ -496,14 +493,12 @@ const pagingInfoCSS = (bgColor, typeShort) => css`
                 ${cursorPointer};
             }
             .DGN-UI-Dropdown-Icon {
-                margin-left: 6px;
+                margin-left: ${spacing([1.5])};
                 div,
                 span,
                 svg {
-                    width: 20px;
-                    min-width: 20px;
-                    height: 20px;
-                    min-height: 20px;
+                    ${parseWidthHeight(20)};
+                    ${parseMinWidthHeight(20)};
                 }
             }
         }
@@ -518,14 +513,14 @@ const pagingInfoCSS = (bgColor, typeShort) => css`
     }
 `;
 PagingInfo.defaultProps = {
-  typeShort: false,
-  bgColor: white,
-  style: {},
+  bgColor: systemWhite,
   className: '',
-  totalItems: 0,
   currentPage: 0,
+  hideWithPage: 'none',
   listPerPage: [10, 15, 20, 30, 50],
-  hideWithPage: 'none'
+  style: {},
+  totalItems: 0,
+  typeShort: false
 };
 PagingInfo.propTypes = {
   /** Background color for component. */
@@ -578,9 +573,7 @@ PagingInfo.propTypes = {
    * * setTotalItems(items): Set total items
    *  * @param {items} - number
    */
-  reference: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.instanceOf(Element)
-  })])
+  reference: ref
 };
 export { PagingInfo };
 export default OptionWrapper(PagingInfo);

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/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/effect.js

@@ -1,50 +1,37 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { memo, useRef, useMemo, forwardRef, useImperativeHandle } from 'react';
-import PropTypes from 'prop-types';
-import { jsx, css } from '@emotion/core';
+import { css, jsx } from '@emotion/core';
 import OptionWrapper from "../components/others/option-wrapper";
-import { color as colors } from "../styles/colors";
+import PropTypes from 'prop-types';
+import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
+import { alignCenter, borderBox, flexRow, justifyCenter, outlineNone, parseMinWidthHeight, parseWidthHeight, userSelectNone } from "../styles/general";
+import { useColor as colors, useTheme } from "../theme";
+import { capitalize, classNames, refType as ref } from "../utils";
 import * as Icons from "./basic";
-import { capitalize } from "../utils";
-import { alignCenter, borderBox, flexRow, justifyCenter, outlineNone, userSelectNone } from "../styles/general";
 const {
-  system: {
-    rest
+  colors: {
+    system: {
+      rest: systemRest
+    }
   }
-} = colors;
+} = useTheme();
 const Icon = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
-  name,
   className,
-  style,
   color,
-  width,
   height,
-  viewBox,
+  id,
+  name,
   onClick,
+  style,
+  viewBox,
+  width,
   ...props
 }, reference) => {
+  if (!reference) reference = useRef(null);
   const ref = useRef(null);
-  const IconCss = css`
-                ${flexRow};
-                ${justifyCenter};
-                ${alignCenter};
-                ${borderBox};
-                ${outlineNone};
-                ${userSelectNone};
-                width: max-content;
-                height: max-content;
-                min-width: ${width ? isNaN(width) ? width : width + 'px' : '24px'};
-                min-height: ${width ? isNaN(height) ? height : height + 'px' : '24px'};
-            `;
-  const NotFoundIcon = css`
-                ${flexRow};
-                ${borderBox};
-                width: ${width ? isNaN(width) ? width : width + 'px' : '24px'};
-                height: ${width ? isNaN(width) ? width : width + 'px' : '24px'};
-                border: 1px dashed ${rest};
-            `;
+  const _IconCSS = IconCSS(width, height);
+  const _NotFoundIconCSS = NotFoundIconCSS(width);
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
     currentRef.element = ref.current;
@@ -68,48 +55,61 @@ const Icon = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       });
     } else {
       node = jsx("span", {
-        css: NotFoundIcon
+        css: _NotFoundIconCSS
       });
     }
     return jsx("span", {
-      className: 'DGN-UI-Icon ' + className,
-      style: style,
-      css: IconCss,
+      css: _IconCSS,
       ref: ref,
+      id: id,
+      className: classNames('DGN-UI-Icon', className),
+      style: style,
       onClick: onClick,
       ...props
     }, node);
-  }, [name, color, width, height, className, style, viewBox, onClick]);
+  }, [className, color, height, id, name, onClick, style, viewBox, width, props]);
 }));
+const IconCSS = (width = 24, height = 24) => css`
+    ${flexRow};
+    ${justifyCenter};
+    ${alignCenter};
+    ${borderBox};
+    ${outlineNone};
+    ${userSelectNone};
+    ${parseWidthHeight('max-content')};
+    ${parseMinWidthHeight(width, height)};
+`;
+const NotFoundIconCSS = (width = 24) => css`
+    ${flexRow};
+    ${borderBox};
+    ${parseWidthHeight(width)};
+    border: 1px dashed ${systemRest};
+`;
 Icon.defaultProps = {
   className: '',
-  style: {},
   color: 'dark6',
+  height: 24,
+  style: {},
   viewBox: true,
-  width: 24,
-  height: 24
+  width: 24
 };
 Icon.propTypes = {
-  /** name of icon in icons store */
-  name: PropTypes.string.isRequired,
-  /** color of icon<br />
-   * default: #7F828E
-   */
-  color: PropTypes.string,
-  /** className of icon in icons store */
+  /** Class for component. */
   className: PropTypes.string,
-  /** style of icon in icons store */
-  style: PropTypes.object,
-  /** the width of icon */
-  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  /** the height of icon */
+  /** The color of the component. */
+  color: PropTypes.string,
+  /** Height of the component. */
   height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  /** have view box if true */
+  /** Name of icon in [Basic Icon](https://core.diginet.com.vn/ui/?path=/story/icon-basic) */
+  name: PropTypes.string.isRequired,
+  /** Style inline of component. */
+  style: PropTypes.object,
+  /** If `true`, component have view box. */
   viewBox: PropTypes.bool,
-  /** have view box if true */
-  onClick: PropTypes.func,
+  /** Width of the component. */
+  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   /**
-   * ref methods
+   * ref methods (ref.current.instance.*method*)
    *
    * * option(): Gets all UI component properties
    *  * Returns value - object
@@ -122,9 +122,7 @@ Icon.propTypes = {
    * * option(options): Updates the values of several properties
    *  * @param {options} - object
    */
-  reference: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.instanceOf(Element)
-  })])
+  reference: ref
 };
 export { Icon };
 export default OptionWrapper(Icon);

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.82",
-  "description": "The DigiNet core ui",
-  "homepage": "https://diginet.com.vn",
+  "version": "1.3.83-beta.1",
+  "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,12 @@ npm test
 ```
 
 ## Changelog
+## 1.3.83
+- \[Changed\]: IconMenu – Add prop className, style
+- \[Changed\]: Grid – Add prop verticalAlign
+- \[Changed\]: Label– Add lineClamp auto
+- \[Fixed\]: Popover – Fix bug not save last position of anchor
+
 ## 1.3.82
 - \[Fixed\]: CircularProgress – Fix transform rotate wrong inside flex column
 

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;