diginet-core-ui 1.4.60 → 1.4.61-beta.1

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

@@ -0,0 +1,23 @@
+<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2454_31)">
+<path d="M17.0998 10.7C17.0998 11 17.0998 11.2 16.9998 11.5C16.8998 11.8 16.7998 12 16.5998 12.1C16.3998 12.3 16.0998 12.5 15.7998 12.6C15.4998 12.7 15.1998 12.8 14.6998 12.8H13.7998V14.7H12.2998V8.80005H14.7998C15.1998 8.80005 15.4998 8.80005 15.6998 8.90005C15.9998 9.00005 16.1998 9.10005 16.3998 9.20005C16.5998 9.40005 16.7998 9.60005 16.8998 9.80005C16.9998 10.1 17.0998 10.3 17.0998 10.7ZM15.4998 10.7C15.4998 10.5 15.4998 10.4 15.3998 10.3C15.2998 10.2 15.1998 10.1 15.0998 10.1C14.8998 10 14.7998 10 14.5998 10C14.4998 10 14.2998 10 13.9998 10H13.6998V11.7H14.0998C14.3998 11.7 14.5998 11.7 14.6998 11.7C14.8998 11.7 14.9998 11.6 15.0998 11.5C15.1998 11.4 15.2998 11.3 15.2998 11.2C15.4998 11 15.4998 10.9 15.4998 10.7Z" fill="#2680EB"/>
+<path d="M22.2998 14.7H18.0998V8.80005H19.5998V13.5H22.2998V14.7Z" fill="#2680EB"/>
+<path d="M28.5998 14.7H26.9998L26.5998 13.5H24.3998L23.9998 14.7H22.4998L24.6998 8.90005H26.3998L28.5998 14.7ZM26.2998 12.4L25.5998 10.3L24.8998 12.4H26.2998Z" fill="#2680EB"/>
+<path d="M34.7998 14.7H33.3998L30.8998 10.7V14.7H29.4998V8.80005H31.2998L33.3998 12.1V8.80005H34.7998V14.7Z" fill="#2680EB"/>
+<path d="M30 25C29.7 25 29.5 24.9 29.3 24.7L27.3 22.7C26.9 22.3 26.9 21.7 27.3 21.3C27.7 20.9 28.3 20.9 28.7 21.3L30 22.6L33.3 19.3C33.7 18.9 34.3 18.9 34.7 19.3C35.1 19.7 35.1 20.3 34.7 20.7L30.7 24.7C30.5 24.9 30.3 25 30 25Z" fill="#1CA261"/>
+<path d="M32.4 30.5L34.2 28.7C34.6 28.3 34.6 27.7 34.2 27.3C33.8 26.9 33.2 26.9 32.8 27.3L31 29.1L29.2 27.3C28.8 26.9 28.2 26.9 27.8 27.3C27.4 27.7 27.4 28.3 27.8 28.7L29.6 30.5L27.8 32.3C27.4 32.7 27.4 33.3 27.8 33.7C28 33.9 28.3 34 28.5 34C28.7 34 29 33.9 29.2 33.7L31 31.9L32.8 33.7C33 33.9 33.3 34 33.5 34C33.7 34 34 33.9 34.2 33.7C34.6 33.3 34.6 32.7 34.2 32.3L32.4 30.5Z" fill="#FF4444"/>
+<path d="M26.3 24.9999H20.8C20.4 24.9999 20 24.6999 20 24.1999C20 23.6999 20.3 23.3999 20.8 23.3999H26.3C26.7 23.3999 27.1 23.6999 27.1 24.1999C27.1 24.6999 26.7 24.9999 26.3 24.9999Z" fill="#7BC0F9"/>
+<path d="M26.3 33.9999H20.8C20.4 33.9999 20 33.6999 20 33.1999C20 32.6999 20.3 32.3999 20.8 32.3999H26.3C26.7 32.3999 27.1 32.6999 27.1 33.1999C27.1 33.6999 26.7 33.9999 26.3 33.9999Z" fill="#7BC0F9"/>
+<path d="M7.90004 25.8C4.70004 25.8 2.10004 23.1 2.10004 19.9C2.10004 16.7 4.70004 14 7.90004 14C11.1 14 13.7 16.7 13.7 19.9C13.7 23.1 11.1 25.8 7.90004 25.8Z" fill="#2680EB"/>
+<path d="M15.6 32.6L15.2 31C15 30 14.5 29.4 13.5 29C11.7 28.3 10.6 27.6 10.6 27.6L9.10004 32L8.90004 32.6L8.30004 30.8C9.80004 28.8 8.20004 28.7 7.90004 28.7C7.60004 28.7 6.10004 28.8 7.50004 30.8L6.90004 32.6L6.70004 32L5.30004 27.5C5.30004 27.5 4.20004 28.2 2.40004 28.9C1.50004 29.2 1.10004 29.7 0.800039 30.4L0.400039 32.1C0.300039 32.6 0.200039 33.1 0.100039 33.6C-0.0999609 34.5 0.200039 35.3 1.00004 35.8C2.30004 36.8 3.80004 37.6 5.30004 38.3C6.70004 38.9 8.10004 39.1 9.60004 38.6C11.6 38 13.4 37 15 35.7C15.7 35.2 15.9 34.3 15.8 33.5C15.7 33.3 15.6 33 15.6 32.6Z" fill="#2680EB"/>
+<path d="M34.9999 2H31.9999C31.9999 0.9 31.0999 0 29.9999 0H16.9999C15.8999 0 14.9999 0.9 14.9999 2V4C14.9999 5.1 15.8999 6 16.9999 6H29.9999C31.0999 6 31.9999 5.1 31.9999 4H34.9999C36.0999 4 36.9999 4.9 36.9999 6V35C36.9999 36.1 36.0999 37 34.9999 37H15.1999C14.0999 37.8 12.9999 38.5 11.8999 39H11.9999H34.9999C37.1999 39 38.9999 37.2 38.9999 35V6C38.9999 3.8 37.1999 2 34.9999 2ZM16.9999 4V2H29.9999V4H16.9999Z" fill="#2680EB"/>
+<path d="M10 6C10 4.9 10.9 4 12 4H17V2H12C9.8 2 8 3.8 8 6V13C8.7 13 9.4 13.1 10 13.3V6Z" fill="#2680EB"/>
+<path d="M14.8998 28.4999H17.4998V32.4999H16.5998V32.6999C16.5998 32.8999 16.6998 33.1999 16.6998 33.3999C16.6998 33.5999 16.7998 33.7999 16.7998 33.8999H17.9998C18.5998 33.8999 18.9998 33.4999 18.9998 32.8999V27.8999C18.9998 27.2999 18.5998 26.8999 17.9998 26.8999H12.9998C12.6998 26.8999 12.4998 26.9999 12.2998 27.1999C12.6998 27.3999 13.1998 27.5999 13.7998 27.8999C14.1998 28.0999 14.5998 28.2999 14.8998 28.4999Z" fill="#2680EB"/>
+<path d="M17.5001 19.5V23.5H13.7001C13.4001 24 13.0001 24.5 12.6001 24.9C12.7001 25 12.9001 25 13.0001 25H18.0001C18.6001 25 19.0001 24.6 19.0001 24V19C19.0001 18.4 18.6001 18 18.0001 18H14.5001C14.6001 18.5 14.7001 19 14.7001 19.5H17.5001Z" fill="#2680EB"/>
+</g>
+<defs>
+<clipPath id="clip0_2454_31">
+<rect width="39" height="39" fill="white"/>
+</clipPath>
+</defs>
+</svg>

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

@@ -0,0 +1,18 @@
+<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2469_36)">
+<path d="M33.6 3.09998H31V5.69998C31 7.39998 29.6 8.69998 28 8.69998C26.3 8.69998 25 7.39998 25 5.69998V3.09998H14V5.69998C14 7.39998 12.7 8.69998 11 8.69998C9.4 8.69998 8 7.39998 8 5.69998V3.09998H5.4C2.4 3.09998 0 5.49998 0 8.39998V33.6C0 36.6 2.4 39 5.4 39H33.6C36.6 39 39 36.6 39 33.6V8.39998C39 5.49998 36.6 3.09998 33.6 3.09998ZM36.5 33.1C36.5 35 34.9 36.5 33 36.5H6C4.1 36.5 2.6 35 2.6 33.1V13H36.5V33.1Z" fill="#2680EB"/>
+<path d="M30 5.9V1.8C30 0.8 29.2 0 28.2 0H27.8C26.8 0 26 0.8 26 1.8V5.9C26 6.9 26.8 7.7 27.8 7.7H28.2C29.2 7.7 30 6.9 30 5.9Z" fill="#7BC0F9"/>
+<path d="M13 5.9V1.8C13 0.8 12.2 0 11.2 0H10.8C9.8 0 9 0.8 9 1.8V5.9C9 6.9 9.8 7.7 10.8 7.7H11.2C12.2 7.7 13 6.9 13 5.9Z" fill="#7BC0F9"/>
+<path d="M13 24H7.6C7.2 24 7 23.8 7 23.5V18C7 17.7 7.2 17.4 7.6 17.4H13C13.3 17.4 13.6 17.6 13.6 18V23.5C13.6 23.8 13.3 24 13 24Z" fill="#1CA261"/>
+<path d="M22.3002 24H16.8002C16.5002 24 16.2002 23.8 16.2002 23.4V18C16.2002 17.7 16.4002 17.4 16.8002 17.4H22.3002C22.6002 17.4 22.9002 17.6 22.9002 18V23.5C22.8002 23.8 22.6002 24 22.3002 24Z" fill="#FFAA00"/>
+<path d="M31.4999 24H25.9999C25.6999 24 25.3999 23.8 25.3999 23.4V18C25.3999 17.7 25.5999 17.4 25.9999 17.4H31.4999C31.7999 17.4 32.0999 17.6 32.0999 18V23.5C31.9999 23.8 31.7999 24 31.4999 24Z" fill="#FF4444"/>
+<path d="M13 32.8H7.6C7.3 32.8 7 32.6 7 32.2V26.7C7 26.4 7.2 26.1 7.6 26.1H13C13.3 26.1 13.6 26.3 13.6 26.7V32.2C13.6 32.5 13.3 32.8 13 32.8Z" fill="#FFAA00"/>
+<path d="M22.3002 32.8H16.8002C16.5002 32.8 16.2002 32.6 16.2002 32.2V26.7C16.2002 26.4 16.4002 26.1 16.8002 26.1H22.3002C22.6002 26.1 22.9002 26.3 22.9002 26.7V32.2C22.8002 32.5 22.6002 32.8 22.3002 32.8Z" fill="#FF4444"/>
+<path d="M31.4999 32.8H25.9999C25.6999 32.8 25.3999 32.6 25.3999 32.2V26.7C25.3999 26.4 25.5999 26.1 25.9999 26.1H31.4999C31.7999 26.1 32.0999 26.3 32.0999 26.7V32.2C31.9999 32.5 31.7999 32.8 31.4999 32.8Z" fill="#1CA261"/>
+</g>
+<defs>
+<clipPath id="clip0_2469_36">
+<rect width="39" height="39" fill="white"/>
+</clipPath>
+</defs>
+</svg>

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/date-range-picker/index.js

@@ -752,6 +752,7 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
     }
     ipRef.current && ipRef.current.blur();
     updateTempValues([]);
+    setOpenState(false);
   };
   const onClickOutside = e => {
     if (ipConRef.current && !ipConRef.current.contains(e.target) && ipRef.current && !ipRef.current.contains(e.target) && pickerRef.current && !pickerRef.current.contains(e.target)) {

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

@@ -5,7 +5,7 @@ import { Avatar, ButtonIcon, Checkbox, Chip, CircularProgress, HelperText, Input
 import Popover from "../../popover";
 import { getGlobal } from "../../../global";
 import PropTypes from 'prop-types';
-import { Fragment, forwardRef, memo, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { Fragment, forwardRef, memo, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, useCallback } from 'react';
 import ReactDOM from 'react-dom';
 import { animation, bgColor, border, borderBottom, borderBottomColor, borderColor, borderNone, borderRadius, bottom, boxBorder, breakWord, cursorDefault, cursorNotAllowed, cursorPointer, displayBlock, displayFlex, fill, flexRow, flexWrap, inset, insetX, invisible, italic, itemsCenter, justifyCenter, justifyStart, outlineNone, overflowYScroll, overflowHidden, parseHeight, parseMaxHeight, parseMaxWidth, parseMinHeight, parseWidth, parseWidthHeight, pointerEventsNone, positionAbsolute, positionRelative, textColor, top, userSelectNone, z } from "../../../styles/general";
 import { useTheme } from "../../../theme";
@@ -89,6 +89,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
     multiple,
     noDataText: noDataTextProp,
     onChange,
+    onOpened,
     onClosed,
     onInput,
     onKeyDown,
@@ -201,14 +202,14 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
     }
     !!blur && inputRef.current.blur();
   };
-  const onClickInput = e => {
+  const onClickInput = useCallback(e => {
     if (disabled || readOnly || loadingState) return;
     if (!dropdownListRef.current) {
       if (!multiple || !Array.from(inputRef.current.querySelectorAll('.DGN-UI-Chip')).some(item => item.contains(e === null || e === void 0 ? void 0 : e.target))) {
         setOpenState(true);
       }
     }
-  };
+  }, [disabled, readOnly, loadingState]);
   const showDropdown = () => {
     const dropdown = children ? jsx("div", {
       css: _DropdownListCSS,
@@ -300,10 +301,10 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
     });
   };
 
-  /**
-   * So sánh text đầu vào cáo map với txtSearch
-   * @param text
-   * @return {boolean}
+  /**
+   * So sánh text đầu vào cáo map với txtSearch
+   * @param text
+   * @return {boolean}
    */
   const handleRenderBySearch = (text = '') => {
     if (text === null || text === undefined) text = '';
@@ -316,10 +317,10 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
     } else return text.toLowerCase().includes(txtSearch.toLowerCase());
   };
 
-  /**
-   * 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}
+  /**
+   * 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 = '';
@@ -1110,6 +1111,8 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
         filter.current.strSearch = '';
         handleActionLoadData(true);
       }
+    } else if (openState) {
+      onOpened && onOpened();
     }
   }, [openState]);
   useLayoutEffect(() => {
@@ -1802,9 +1805,9 @@ Dropdown.propTypes = {
   defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),
   /** If `true`, the component is disabled. */
   disabled: PropTypes.bool,
-  /** The field name used for displaying text in the dropdown list.<br/>
-   * Examples: 'name', '{id} - {name}', '{age} age(s)'<br/>
-   * Note: Do not use 'id - name', as it will return undefined.
+  /** The field name used for displaying text in the dropdown list.<br/>
+   * Examples: 'name', '{id} - {name}', '{age} age(s)'<br/>
+   * Note: Do not use 'id - name', as it will return undefined.
    */
   displayExpr: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),
   /**  Inline style for dropdown items. */
@@ -1813,14 +1816,14 @@ Dropdown.propTypes = {
   error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
   /** Props applied to the [HelperText](https://core.diginet.com.vn/ui/?path=/story/form-control-text-helpertext) element. */
   helperTextProps: PropTypes.object,
-  /** The field name used for displaying icons.<br/>
-   * Example:<br/>
-   * &nbsp;&nbsp;string: 'icon'<br/>
-   * &nbsp;&nbsp;object: {<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;key: 'icon',<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;prefix: 'https://imglink.com',<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;suffix: '.jpg'<br/>
-   * &nbsp;&nbsp;}
+  /** The field name used for displaying icons.<br/>
+   * Example:<br/>
+   * &nbsp;&nbsp;string: 'icon'<br/>
+   * &nbsp;&nbsp;object: {<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;key: 'icon',<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;prefix: 'https://imglink.com',<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;suffix: '.jpg'<br/>
+   * &nbsp;&nbsp;}
    */
   iconExpr: PropTypes.oneOfType([PropTypes.string, PropTypes.shape({
     key: PropTypes.string,
@@ -1852,10 +1855,12 @@ Dropdown.propTypes = {
   noDataText: PropTypes.string,
   /** Callback function fired when the value changes. */
   onChange: PropTypes.func,
+  /** Callback function fired when the dropdown is opened. */
+  onOpened: PropTypes.func,
   /** Callback function fired when the dropdown is closed. */
   onClosed: PropTypes.func,
-  /** Callback function fired when the input value changes.<br/>
-   * If undefined, the filter function will run (default behavior).
+  /** Callback function fired when the input value changes.<br/>
+   * If undefined, the filter function will run (default behavior).
    */
   onInput: PropTypes.func,
   /** Callback function fired when a key is pressed down in the input. */
@@ -1868,21 +1873,21 @@ Dropdown.propTypes = {
   placeholder: PropTypes.string,
   /** If `true`, the component is read-only. */
   readOnly: PropTypes.bool,
-  /** Function used for custom rendering of items.<br/>
-   * Example: `(data, index) => data.name + ' - ' + data.role`<br/>
-   * This can be used as an alternative to `displayExpr`
+  /** Function used for custom rendering of items.<br/>
+   * Example: `(data, index) => data.name + ' - ' + data.role`<br/>
+   * This can be used as an alternative to `displayExpr`
    */
   renderItem: PropTypes.func,
-  /** Function or field name used to display selected items.<br/>
-   * Example: `(data, index) => index + ' - ' + data.name`<br/>
+  /** Function or field name used to display selected items.<br/>
+   * Example: `(data, index) => index + ' - ' + data.name`<br/>
    */
   renderSelectedItem: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
   /** If `true`, the label will indicate that the input is required. */
   required: PropTypes.bool,
-  /**
-   * Duration to wait after entering search content before triggering a search.<br/>
-   * Example: 700 -> 700ms, '700ms' -> 700ms, '0.7s' -> 700ms, '1m' -> 60000ms
-   * If `true`, the default delayOnInput will be used.
+  /**
+   * Duration to wait after entering search content before triggering a search.<br/>
+   * Example: 700 -> 700ms, '700ms' -> 700ms, '0.7s' -> 700ms, '1m' -> 60000ms
+   * If `true`, the default delayOnInput will be used.
    */
   searchDelayTime: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]),
   /** Specifies the field name or expression used to compare values with the search string. */
@@ -1915,19 +1920,19 @@ Dropdown.propTypes = {
   viewType: PropTypes.oneOf(['underlined', 'outlined', 'none']),
   /** Custom icon to override the default arrow icon. */
   endIcon: PropTypes.string
-  /**
-   * ref methods
-   *
-   * how to get component element? ref.current
-   *
-   * how to call method? ref.current.instance.{method}
-   *
-   * * showDropdown(): Show dropdown
-   * * closeDropdown(): Close dropdown
-   * * onClear(): Clear selected value
-   * * setPreviousValue(): Set value to previous value
-   * * setValue(value): Set value of dropdown
-   *  * @param {value} - string || number || array
+  /**
+   * ref methods
+   *
+   * how to get component element? ref.current
+   *
+   * how to call method? ref.current.instance.{method}
+   *
+   * * showDropdown(): Show dropdown
+   * * closeDropdown(): Close dropdown
+   * * onClear(): Clear selected value
+   * * setPreviousValue(): Set value to previous value
+   * * setValue(value): Set value of dropdown
+   *  * @param {value} - string || number || array
    */
 };
 export default Dropdown;

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/package.json

@@ -1,44 +1,78 @@
-{
-  "name": "diginet-core-ui",
-  "version": "1.4.60",
-  "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.61-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

@@ -42,7 +42,12 @@ npm test
 
 ## Changelog
 
-## 1.4.59
+## 1.4.61
+- \[Added\]: Icon – Add IconMenu MHRM38N1051
+- \[Fixed\]: Dropdown  – Dropdown multiple core has a disable bug
+- \[Fixed\]: Dropdown  – Add a prop to support callback when clicking on the Dropdown.
+
+## 1.4.60
 - \[Added\]: Icon – Add IconMenu MHRP09N0039, MHRP09N0040
 - \[Fixed\]: NumberInput  – Negative values can still be pasted when disabledNegative is enabled
 - \[Fixed\]: Dropdown, NumberInput, TextInput, ....  – Updated the default delayOnSearch value to 1200 ms