diginet-core-ui 1.4.65 → 1.4.66-beta.1

package/assets/images/menu/dhr/MHRP75N0025.svg

@@ -0,0 +1,15 @@
+<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2813_38)">
+<path d="M9.70007 26.7C9.70007 27.3 10.1001 27.8 10.7001 28V25.4C10.1001 25.5 9.70007 26 9.70007 26.7Z" fill="#FF8C00"/>
+<path d="M13.4001 31.5C13.3001 30.9 12.9001 30.4 12.4001 30.4V33C13.1001 32.7 13.5001 32.2 13.4001 31.5Z" fill="#FF8C00"/>
+<path d="M18.7001 38.3V22.3C17.7001 21.1 16.6001 20 15.2001 19.1C15.1001 19 14.9001 19 14.8001 19C14.0001 19 13.2001 19.1 12.4001 19.1C12.1001 19.1 11.9001 19.1 11.6001 19.1C11.3001 19.1 11.1001 19.1 10.8001 19.1C10.0001 19.1 9.20007 19.1 8.40007 19C8.30007 19 8.10007 19 8.00007 19.1C6.50007 20 5.30007 21.2 4.30007 22.6C2.40007 25 1.00007 27.7 0.300074 30.7C7.42078e-05 32.2 -0.199926 33.6 0.200074 35.1C0.600074 36.5 1.40007 37.5 2.70007 38C3.80007 38.5 7.00007 39 7.00007 39C8.20007 39 9.30007 39 10.5001 39C10.9001 39 11.2001 39 11.6001 39C11.9001 39 12.3001 39 12.7001 39C13.9001 39 15.0001 39 16.2001 39C16.1001 39 18.7001 38.4 18.7001 38.3ZM12.9001 28.4C14.3001 28.9 15.2001 30 15.3001 31.5C15.4001 33 14.4001 34.2 13.0001 34.6C12.4001 34.8 12.4001 34.8 12.4001 35.4V36.1H10.8001C10.8001 35.7 10.8001 35.4 10.8001 35C10.8001 34.8 10.7001 34.7 10.5001 34.6C9.20007 34.2 8.30007 33.4 7.90007 32C7.80007 31.7 7.80007 31.4 7.80007 31.1H9.80007C9.80007 31.8 10.1001 32.2 10.8001 32.5V30C10.7001 30 10.5001 29.9 10.3001 29.9C8.80007 29.4 7.80007 28.2 7.90007 26.7C7.90007 25.2 8.90007 24 10.3001 23.6C10.8001 23.5 10.8001 23.5 10.8001 23V22.1H12.4001C12.4001 22.5 12.4001 22.9 12.4001 23.2C12.4001 23.4 12.5001 23.5 12.7001 23.6C14.0001 24 14.9001 24.8 15.3001 26.1C15.5001 27 15.5001 27 14.6001 27H13.4001C13.4001 26.3 13.1001 25.8 12.4001 25.5V28.2C12.5001 28.3 12.7001 28.3 12.9001 28.4Z" fill="#FF8C00"/>
+<path d="M8.80007 17.7C8.60007 17.7 8.50007 17.6 8.40007 17.5C7.40007 16.1 6.40007 14.7 5.60007 13.2C5.30007 12.6 5.10007 12 4.90007 11.4C4.80007 11.2 4.90007 11 4.90007 10.8C4.90007 10.5 5.10007 10.3 5.50007 10.3C5.80007 10.3 6.10007 10.4 6.40007 10.5C6.90007 10.7 7.40007 10.9 7.90007 11.1C8.60007 11.4 9.30007 11.3 9.90007 10.8C10.1001 10.6 10.4001 10.4 10.7001 10.3C11.3001 9.9 11.9001 9.9 12.5001 10.3C12.8001 10.5 13.2001 10.7 13.5001 11C13.9001 11.3 14.4001 11.4 14.9001 11.3C15.5001 11.1 16.1001 10.9 16.7001 10.7C17.0001 10.6 17.3001 10.5 17.6001 10.5C18.0001 10.4 18.2001 10.6 18.2001 11C18.2001 11.4 18.1001 11.9 18.0001 12.3C17.6001 13.5 16.9001 14.5 16.2001 15.5C15.7001 16.2 15.2001 16.9 14.7001 17.6C14.6001 17.7 14.5001 17.8 14.4001 17.8C13.5001 17.7 9.70007 17.7 8.80007 17.7Z" fill="#FF8C00"/>
+<path d="M31.1 7.8C31 8.1 30.7 8.2 30.4 8.3H27.6V14.5L23.6 18.5C23.1 19 23 19.7 23.2 20.3C23.5 20.9 24.1 21.3 24.7 21.3H26.6V38.3C26.6 38.6 26.7 38.8 26.8 39H20.3C19.9 39 19.6 38.7 19.5 38.3V8.3H16.7C16.4 8.3 16.1 8.1 16 7.8C16 7.5 16.1 7.2 16.3 7L23.1 0.2C23.2 0.1 23.4 0 23.6 0C23.8 0 24 0.1 24.1 0.2L30.9 7C31.1 7.2 31.2 7.5 31.1 7.8Z" fill="#1CA261"/>
+<path d="M31.4598 12C31.6598 12 31.8598 12.1 31.9598 12.2L38.7598 19C38.9598 19.2 39.0598 19.5 38.9598 19.8C38.8598 20.1 38.5598 20.2 38.2598 20.3H35.4598V38.3C35.4598 38.7 35.1598 39 34.7598 39H28.2598C27.8598 39 27.5598 38.7 27.5598 38.3V20.3H24.7598C24.4598 20.3 24.1598 20.1 24.0598 19.8C23.9598 19.5 23.9598 19.2 24.2598 19L31.0598 12.2C31.0598 12.1 31.2598 12 31.4598 12Z" fill="#FF4444"/>
+</g>
+<defs>
+<clipPath id="clip0_2813_38">
+<rect width="39" height="39" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/assets/images/menu/invoice/W109F1000.svg

@@ -0,0 +1,12 @@
+<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2792_16)">
+<path d="M34.6224 19.9772C34.9209 20.0771 35.2194 19.9772 35.3189 19.7775L37.7066 15.6821C37.9056 15.3825 37.8061 15.0828 37.6071 14.883L35.1199 12.8853C35.2194 12.0862 35.2194 11.387 35.1199 10.5879L37.6071 8.59021C37.8061 8.49032 37.9056 8.19067 37.7066 7.99089L35.3189 3.89556C35.2194 3.5959 34.9209 3.49602 34.6224 3.5959L31.7372 4.79454C31.1403 4.2951 30.4439 3.99545 29.7474 3.69579L29.25 0.599317C29.25 0.199772 28.9515 0 28.6531 0H23.977C23.6786 0 23.4796 0.199772 23.3801 0.499431L22.9821 3.5959C22.5842 3.69579 22.2857 3.89556 21.9872 4.09533C21.6888 4.2951 21.2908 4.49488 21.0918 4.79454L18.2066 3.5959C17.9082 3.49602 17.6097 3.5959 17.5102 3.79567L15.023 7.99089C14.824 8.29055 14.9235 8.59021 15.1224 8.78998L17.6097 10.7877C17.5102 11.5868 17.5102 12.286 17.6097 13.0851L15.1224 15.0828C14.9235 15.2826 14.824 15.5822 15.023 15.8819L17.4107 19.9772C17.5102 20.2769 17.9082 20.3768 18.1071 20.2769L20.9923 19.0783C21.5893 19.5777 22.2857 19.8773 22.9821 20.177L23.4796 23.2735C23.5791 23.5731 23.7781 23.7729 24.0765 23.7729H28.7525C29.051 23.7729 29.25 23.5731 29.3495 23.2735L29.7474 20.177C30.1454 20.0771 30.4439 19.8773 30.7423 19.6776C31.1403 19.4778 31.4388 19.278 31.7372 19.0783L34.6224 19.9772ZM28.5536 15.6821C26.4643 16.8808 23.7781 16.1816 22.4847 14.0839C21.1913 11.9863 22.0867 9.18953 24.176 7.99089C26.2653 6.79226 28.9515 7.49146 30.2449 9.58907C31.4388 11.6867 30.6429 14.3836 28.5536 15.6821Z" fill="#FF8C00" style="fill:#FF8C00;fill:color(display-p3 1.0000 0.5490 0.0000);fill-opacity:1;"/>
+<path d="M6.66582 29.4664C6.66582 29.9659 6.66582 30.4653 6.66582 30.9647C6.66582 31.4642 6.26786 31.9636 5.67092 31.9636C4.07908 31.9636 2.48724 31.9636 0.895408 31.9636C0.298469 31.9636 0 31.6639 0 31.0646C0 27.169 0 23.1736 0 19.1782C0 18.9784 0 18.8785 0.0994898 18.6787C0.19898 18.2792 0.497449 18.0794 0.895408 18.0794H5.77041C6.26786 18.0794 6.66582 18.3791 6.66582 18.9784V29.4664Z" fill="#2680EB" style="fill:#2680EB;fill:color(display-p3 0.1490 0.5020 0.9216);fill-opacity:1;"/>
+<path d="M38.3036 37.3574C37.7066 38.2564 36.9107 38.8557 35.7168 38.9556C34.4235 39.0555 33.1301 38.9556 31.9362 38.9556C28.0561 38.9556 24.0765 38.9556 20.1964 38.9556C18.6046 38.9556 17.0128 38.9556 15.4209 38.9556C13.4311 38.8557 11.7398 38.2564 10.4464 36.7581C9.65051 35.959 9.15306 34.9602 8.7551 33.9613C8.55612 33.2621 8.35714 32.5629 8.25765 31.7638V19.5777C9.84949 19.4778 11.4413 19.5777 13.0332 19.8774C13.1327 19.8774 13.3316 19.9772 13.4311 19.9772C13.8291 20.0771 15.3214 20.5766 17.5102 22.2746C19.102 23.673 20.5944 24.9716 22.1862 26.37C22.7832 26.8694 23.3801 27.3688 23.8776 27.8682C23.977 27.9681 24.176 28.1679 24.375 28.2678C25.0714 28.967 25.8673 29.5663 26.6633 30.2655C26.7628 30.2655 26.7628 30.3654 26.8622 30.3654C26.8622 30.3654 26.8622 30.3654 26.9617 30.4653C26.9617 30.4653 26.9617 30.4653 27.0612 30.5652C27.2602 30.7649 27.3597 30.9647 27.5587 31.2644C27.5587 31.3643 27.6582 31.3643 27.6582 31.4642C27.7577 31.6639 27.8571 31.9636 27.8571 32.2632C27.9566 32.9624 27.7577 33.6616 27.2602 34.261C26.7628 34.8603 26.1658 35.1599 25.4694 35.2598C24.773 35.3597 24.0765 35.1599 23.4796 34.6605L14.3265 27.3688C14.0281 27.0692 13.5306 27.169 13.2321 27.4687C12.9337 27.7684 13.0332 28.2678 13.3316 28.5675L22.4847 35.8591C23.2806 36.4585 24.176 36.7581 25.1709 36.7581C25.3699 36.7581 25.4694 36.7581 25.6684 36.7581C26.7628 36.6582 27.8571 36.0589 28.5536 35.1599C29.25 34.261 29.5485 33.1622 29.449 32.1634H33.926C34.4235 32.1634 34.9209 32.1634 35.5179 32.1634C35.9158 32.2632 36.4133 32.2632 36.8112 32.463C37.9056 32.7627 38.801 33.9613 39 35.1599C38.9005 35.959 38.7015 36.6582 38.3036 37.3574Z" fill="#2680EB" style="fill:#2680EB;fill:color(display-p3 0.1490 0.5020 0.9216);fill-opacity:1;"/>
+</g>
+<defs>
+<clipPath id="clip0_2792_16">
+<rect width="39" height="39" fill="white" style="fill:white;fill-opacity:1;"/>
+</clipPath>
+</defs>
+</svg>

package/assets/images/menu/invoice/W110F1000.svg

@@ -0,0 +1,10 @@
+<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2792_17)">
+<path d="M37 30H35.5V27C35.5 24 33 21.5 30 21.5H23.2C22.8 20.5 22 19.7 21 19.3V15H33C35.2 15 37 13.2 37 11V4C37 1.8 35.2 0 33 0H6C3.8 0 2 1.8 2 4V11C2 13.2 3.8 15 6 15H18V19.3C17 19.7 16.2 20.5 15.8 21.5H9C6 21.5 3.5 24 3.5 27V30H2C0.9 30 0 30.9 0 32V37C0 38.1 0.9 39 2 39H8C9.1 39 10 38.1 10 37V32C10 30.9 9.1 30 8 30H6.5V27C6.5 25.6 7.6 24.5 9 24.5H15.8C16.2 25.5 17 26.3 18 26.7V30H16C14.9 30 14 30.9 14 32V37C14 38.1 14.9 39 16 39H23C24.1 39 25 38.1 25 37V32C25 30.9 24.1 30 23 30H21V26.7C22 26.3 22.8 25.5 23.2 24.5H30C31.4 24.5 32.5 25.6 32.5 27V30H31C29.9 30 29 30.9 29 32V37C29 38.1 29.9 39 31 39H37C38.1 39 39 38.1 39 37V32C39 30.9 38.1 30 37 30ZM22.5 6H31.5C32.3 6 33 6.7 33 7.5C33 8.3 32.3 9 31.5 9H22.5C21.7 9 21 8.3 21 7.5C21 6.7 21.7 6 22.5 6ZM8.7 10.2C7.2 10.2 6 9 6 7.5C6 6 7.2 4.8 8.7 4.8C10.2 4.8 11.4 6 11.4 7.5C11.4 9 10.2 10.2 8.7 10.2ZM13.6 7.5C13.6 6 14.8 4.8 16.3 4.8C17.8 4.8 19 6 19 7.5C19 9 17.8 10.2 16.3 10.2C14.8 10.2 13.6 9 13.6 7.5ZM7 33V36H3V33H7ZM20.5 23C20.5 23.6 20.1 24 19.5 24C18.9 24 18.5 23.6 18.5 23C18.5 22.4 18.9 22 19.5 22C20.1 22 20.5 22.4 20.5 23ZM22 33V36H17V33H22ZM36 36H32V33H36V36Z" fill="#2680EB" style="fill:#2680EB;fill:color(display-p3 0.1490 0.5020 0.9216);fill-opacity:1;"/>
+</g>
+<defs>
+<clipPath id="clip0_2792_17">
+<rect width="39" height="39" fill="white" style="fill:white;fill-opacity:1;"/>
+</clipPath>
+</defs>
+</svg>

package/components/button/icon.js

@@ -1,7 +1,7 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
-import { CircularProgress, Icon } from "./..";
+import { CircularProgress, Icon, Tooltip } from "./..";
 import OptionWrapper from "../others/option-wrapper";
 import PropTypes from 'prop-types';
 import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
@@ -78,7 +78,8 @@ const ButtonIcon = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
     style,
     viewBox,
     viewType,
-    width
+    width,
+    title
   } = props;
   const ref = useRef(null);
   const rippleRef = useRef(null);
@@ -109,7 +110,10 @@ const ButtonIcon = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
     return currentRef;
   });
   return useMemo(() => {
-    return jsx("button", {
+    return jsx(Tooltip, {
+      title: title,
+      disableInteractive: !title
+    }, jsx("button", {
       css: [_ButtonRootCSS, _ButtonSizeCSS],
       ref: ref,
       id: id,
@@ -129,8 +133,8 @@ const ButtonIcon = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
       ref: rippleRef,
       color: getRippleColor(colorProp, viewType, colors),
       circular: circular
-    }));
-  }, [children, circular, className, colorHover, colorProp, disabled, height, id, loading, name, onClick, size, style, viewBox, viewType, width, theme]);
+    })));
+  }, [children, circular, className, colorHover, colorProp, disabled, height, id, loading, name, onClick, size, style, viewBox, viewType, width, theme, title]);
 }));
 const ButtonIconCSS = iconSize => css`
     ${displayFlex};
@@ -287,18 +291,6 @@ const ButtonRootCSS = (circular, colorHover, color, name, isColorDefault, viewTy
         filter: brightness(1);
     }
 `;
-
-// ButtonIcon.defaultProps = {
-//     circular: false,
-//     className: '',
-//     color: 'default',
-//     colorHover: 'system/active',
-//     disabled: false,
-//     size: 'medium',
-//     viewBox: true,
-//     viewType: 'outlined',
-// };
-
 ButtonIcon.propTypes = {
   /** The content of the component. */
   children: PropTypes.node,
@@ -314,20 +306,22 @@ ButtonIcon.propTypes = {
   disabled: PropTypes.bool,
   /** Height oof the component. */
   height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /** Title of hover tooltip */
+  title: PropTypes.string,
   /** If `true`, the loading indicator is shown. */
   loading: PropTypes.bool,
   /** Callback fired when the component is clicked. */
   onClick: PropTypes.func,
   /** Name of [icon](https://core.diginet.com.vn/ui/?path=/story/icon-basic). */
   name: PropTypes.string,
-  /**
-   * 	The size of the component.
-   *
-   * * tiny (button 24px, icon 16px)
-   * * small (button 32px, icon 20px)
-   * * medium (button 40px, icon 24px)
-   * * large (button 48px, icon 32px)
-   * * giant (button 56px, icon 40px)
+  /**
+   * 	The size of the component.
+   *
+   * * tiny (button 24px, icon 16px)
+   * * small (button 32px, icon 20px)
+   * * medium (button 40px, icon 24px)
+   * * large (button 48px, icon 32px)
+   * * giant (button 56px, icon 40px)
    * */
   size: PropTypes.oneOf(['tiny', 'small', 'medium', 'large', 'giant', 'extraGiant']),
   /** Style inline of component. */
@@ -338,19 +332,19 @@ ButtonIcon.propTypes = {
   viewType: PropTypes.oneOf(['text', 'outlined', 'filled', 'ghost']),
   /** Width of the component. */
   width: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
-  /**
-   * 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
+  /**
+   * 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
    */
 };
 export { ButtonIcon };

package/components/form-control/calendar/function.js

@@ -652,7 +652,7 @@ const renderNavigator = (className, refs, dbLeftFn, leftFn, rightFn, dbRightFn,
     color: 'primary',
     type: 'h3',
     ref: refs.content,
-    format: ['lowercase']
+    format: ['sentence']
   }))), jsx("div", {
     className: className.navigator.around
   }, jsx(ButtonIcon, {

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

@@ -226,7 +226,7 @@ const Calendar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
    * START EFFECT
    */
   useEffect(() => {
-    if (defaultValue && defaultValue !== '' && isValidDate(defaultValue)) {
+    if (defaultValue && defaultValue !== '' && isValidDate(defaultValue) && !value) {
       if (isBeforeLimit(min, defaultValue)) {
         onUpdate(min);
       } else if (isAfterLimit(max, defaultValue)) {

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

@@ -1,13 +1,15 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
-import { ButtonIcon, InputBase, Label, Popover, PopoverBody } from "../..";
+import { ButtonIcon, InputBase, Label, Popover, PopoverBody, HelperText } from "../..";
 import PropTypes from 'prop-types';
-import { Fragment, forwardRef, memo, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from 'react';
+import { Fragment, forwardRef, memo, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState, useMemo } from 'react';
 import { animation, borderColor, displayBlock, overflowHidden, parseHeight, parseMinWidth, positionRelative, scaleX } from "../../../styles/general";
 import { useTheme } from "../../../theme";
 import useThemeProps from "../../../theme/utils/useThemeProps";
 import { classNames, getProp } from "../../../utils";
+const regexBetween = /[^{}]+(?=})/g;
+const regexInclude = /{|}/g;
 const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
   if (!reference) reference = useRef(null);
   const theme = useTheme();
@@ -22,10 +24,14 @@ const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referen
   });
   const {
     action = {},
+    allowInput,
     bgColor: bgColorProp,
     children,
     className,
     delayOnInput,
+    disabled,
+    displayExpr: displayExprProp,
+    error,
     endIcon,
     inputProps,
     inputRef,
@@ -39,10 +45,19 @@ const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referen
     placeholder,
     startIcon,
     style,
-    value,
-    viewType
+    value: valueProps,
+    valueExpr,
+    viewType,
+    helperTextProps
   } = props;
+  let displayExpr = displayExprProp;
   const bgColor = typeof bgColorProp === 'string' ? getProp(colors, bgColorProp, bgColorProp) : bgColorProp;
+  const ErrorView = useMemo(() => {
+    return error ? jsx(HelperText, {
+      ...helperTextProps,
+      disabled: disabled
+    }, error) : null;
+  }, [disabled, error, helperTextProps]);
   const ref = useRef(null);
   const dropdownBoxRef = useRef(null);
   const timer = useRef(null);
@@ -85,6 +100,28 @@ const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referen
       onClosed === null || onClosed === void 0 ? void 0 : onClosed();
     }
   };
+
+  /**
+   * Chuyển đổi data thành giá trị cần hiện thị dựa vào displayExpr [string, string object {field} - {field}], renderSelectedItem, displayExpr, valueExpr
+   * @param data {object} rowData of dataSource
+   * @return {string}
+   */
+  const displayValue = data => {
+    let text = '';
+    if (data || data === 0) {
+      displayExpr = displayExpr || valueExpr;
+      let mask = data === null || data === void 0 ? void 0 : data[displayExpr];
+      // convert {id} - {name} to {<data[id]>} - {<data[name]>}
+      if (!mask && regexBetween.test(displayExpr)) {
+        var _displayExpr;
+        mask = (_displayExpr = displayExpr) === null || _displayExpr === void 0 ? void 0 : _displayExpr.replace(regexBetween, _ => (data === null || data === void 0 ? void 0 : data[_]) || '');
+      } else if (!mask) {
+        mask = typeof data !== 'object' ? data : '';
+      }
+      text = mask.toString().replace(regexInclude, '');
+    }
+    return text;
+  };
   useLayoutEffect(() => {
     if (ref.current) {
       const {
@@ -130,15 +167,17 @@ const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referen
       onClick: openOnClickAt === 'icon' ? onTriggerDropdown : null
     }) : null;
   };
+  const value = displayValue(valueProps);
   return jsx(Fragment, null, jsx("div", {
     ref: ref,
     css: _DropdownBoxRootCSS,
-    className: classNames('DGN-UI-Dropdown-Box', className),
+    className: classNames('DGN-UI-Dropdown-Box', className, error && 'error'),
     style: style
   }, label ? jsx(Label, {
     ...labelProps
   }, label) : null, jsx(InputBase, {
     ...inputProps,
+    readOnly: !allowInput,
     style: inputStyle,
     viewType: viewType,
     inputRef: inputRef,
@@ -157,7 +196,7 @@ const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referen
     anchor: ref.current,
     width: popoverWidth,
     onClose: closeDropdownBox
-  }, jsx(PopoverBody, null, children)));
+  }, jsx(PopoverBody, null, children)), ErrorView);
 }));
 const DropdownBoxRootCSS = (bgColorProp, {
   colors
@@ -166,6 +205,17 @@ const DropdownBoxRootCSS = (bgColorProp, {
     ${positionRelative};
     ${parseMinWidth(150)};
     ${parseHeight('max-content')};
+    &.error {
+        .DGN-UI-InputBase {
+            ${borderColor(getProp(colors, 'semantic/danger'))};
+            &::before {
+                ${borderColor(getProp(colors, 'semantic/danger'))};
+            }
+            &::after {
+                ${borderColor(getProp(colors, 'semantic/danger'))};
+            }
+        }
+    }
     .DGN-UI-InputBase {
         background: ${bgColorProp ? bgColorProp === true ? getProp(colors, 'fill/disabled') : bgColorProp : 'inherit'} !important;
         ${openState && css`
@@ -183,20 +233,6 @@ const DropdownBoxCSS = ({
     margin-top: ${spacing([1])};
     ${overflowHidden};
 `;
-
-// DropdownBox.defaultProps = {
-//     className: '',
-//     label: '',
-//     placeholder: '',
-//     startIcon: 'Search',
-//     endIcon: 'ArrowDown',
-//     openOnClickAt: 'icon',
-//     viewType: 'underlined',
-//     inputProps: {},
-//     delayOnInput: 700,
-//     zIndex: zIndexCORE(1),
-// };
-
 DropdownBox.propTypes = {
   /** class for dropdown */
   className: PropTypes.string,
@@ -233,6 +269,12 @@ DropdownBox.propTypes = {
   /** the function will run after open */
   onOpened: PropTypes.func,
   /** the function will run after close */
-  onClosed: PropTypes.func
+  onClosed: PropTypes.func,
+  /** Error message displayed below the input. */
+  error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+  /** If `true`, the component is disabled. */
+  disabled: PropTypes.bool,
+  /** If `true`, the input is enable. */
+  allowInput: PropTypes.bool
 };
 export default DropdownBox;

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

@@ -49,7 +49,7 @@ const NumberInput = /*#__PURE__*/forwardRef((inProps, reference) => {
     labelProps,
     max: maxProp,
     maxDigit,
-    min,
+    min: minProp,
     nonStyle,
     onBlur,
     onChange,
@@ -69,9 +69,12 @@ const NumberInput = /*#__PURE__*/forwardRef((inProps, reference) => {
     viewType
   } = props;
   let max = maxProp;
+  let min = minProp;
   let thousandSymbol = thousandSeparator;
   let decimalSymbol = decimalSymbolProp;
   let valueProps = valueProp;
+  if (!min && min !== 0) min = -Infinity;
+  if (!max && max !== 0) max = Infinity;
   const pos = useRef(null);
   const ref = useRef(null);
   const globalRef = useRef({});

package/icons/basic.js

@@ -7312,6 +7312,44 @@ export const Inheritance = /*#__PURE__*/memo(({
     fill: fillColor(color)
   }));
 });
+export const Import = /*#__PURE__*/memo(({
+  width,
+  height,
+  color = 'system/rest',
+  viewBox = false
+}) => {
+  return viewBox ? /*#__PURE__*/React.createElement("svg", {
+    width: width || 24,
+    height: height || 24,
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M13 8.62059L8.28283 3.2307V6.41849L7.94949 6.39752L7.47475 6.36606C6.12121 6.28217 4.9697 5.97807 3.94949 5.43279C2.89899 4.87703 2 4.08008 1.23232 3L1 3.09438C1.41414 5.03432 2.24242 7.18398 3.85859 8.75691C4.81818 9.70067 6.07071 10.4452 7.68687 10.8122L7.86869 10.8541L8.28283 10.9485V14L13 8.62059Z",
+    fill: fillColor(color)
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M5 11.4316V19C5 20.1046 5.89543 21 7 21H19C20.1046 21 21 20.1046 21 19V7C21 5.89543 20.1046 5 19 5H11.9165L13.6738 7H19V19H7V12.2796C6.54269 12.2796 5 11.5 5 11.4316Z",
+    fill: fillColor(color)
+  })) : /*#__PURE__*/React.createElement("svg", {
+    width: width || 20,
+    height: height || 18,
+    viewBox: "0 0 20 18",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M12 5.62059L7.28283 0.230696V3.41849L6.94949 3.39752L6.47475 3.36606C5.12121 3.28217 3.9697 2.97807 2.94949 2.43279C1.89899 1.87703 1 1.08008 0.232323 0L0 0.0943766C0.414141 2.03432 1.24242 4.18398 2.85859 5.75691C3.81818 6.70067 5.07071 7.44519 6.68687 7.8122L6.86869 7.85415L7.28283 7.94852V11L12 5.62059Z",
+    fill: fillColor(color)
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M4 8.43156V16C4 17.1046 4.89543 18 6 18H18C19.1046 18 20 17.1046 20 16V4C20 2.89543 19.1046 2 18 2H10.9165L12.6738 4H18V16H6V9.27963C5.54269 9.27963 4 8.5 4 8.43156Z",
+    fill: fillColor(color)
+  }));
+});
 export const Warning = /*#__PURE__*/memo(({
   width,
   height,

package/package.json

@@ -1,44 +1,78 @@
-{
-  "name": "diginet-core-ui",
-  "version": "1.4.65",
-  "description": "The DigiNet core ui",
-  "homepage": "https://diginet.com.vn",
-  "main": "index.js",
-  "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"
-  },
-  "dependencies": {
-    "@emotion/core": "^10.0.35",
-    "prop-types": "^15.7.2",
-    "@emotion/css": "^11.11.0",
-    "@emotion/react": "^11.10.6"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://diginetvn@bitbucket.org/diginetvn/diginet-core-ui.git"
-  },
-  "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"
-}
+{
+  "name": "diginet-core-ui",
+  "version": "1.4.66-beta.1",
+  "description": "",
+  "main": "index.js",
+  "license": "UNLICENSED",
+  "scripts": {
+    "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",
+    "freshtall": "npm cache clean --force && rm -rf node_modules && rm -f package-lock.json && npm install",
+    "test-storybook": "test-storybook --url http://localhost:9050",
+    "preinstall": "echo {} > package-lock.json"
+  },
+  "dependencies": {
+    "@emotion/core": "^10.0.35",
+    "@emotion/css": "^11.11.0",
+    "@emotion/react": "^11.10.6",
+    "babel-plugin-module-resolver": "^4.1.0",
+    "date-fns": "^2.30.0",
+    "prop-types": "^15.7.2"
+  },
+  "lint-staged": {
+    "*/**/*.{js,jsx,json}": [
+      "prettier --write",
+      "git add"
+    ]
+  },
+  "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.58.3"
+  }
+}

package/readme.md

@@ -41,6 +41,12 @@ npm test
 ```
 
 ## Changelog
+
+## 1.4.66
+- \[Added\]: Icon – Add Icon Import
+- \[Added\]: Icon – Add IconMenu W109F1000, W110F1000
+- \[Added\]: ButtonIcon – Use the title prop to show text on hover for the ButtonIcon
+
 ## 1.4.65
 - \[Added\]: Icon – Add Icon OpenNew
 - \[Added\]: Icon – Add IconMenu WEO53TR001, WEO53APP01