diginet-core-ui 1.4.63 → 1.4.64-beta.2

package/assets/images/menu/eo/WEO53APP01.svg

@@ -0,0 +1,16 @@
+<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2545_43)">
+<path d="M13.9 11.6C14 11.6 14.1 11.5 14.2 11.4L14.6 9.4C14.6 9.3 14.6 9.1 14.4 9.1L13 8.7C12.9 8.4 12.8 8.1 12.7 7.8L13.4 6.6C13.5 6.5 13.4 6.4 13.3 6.3L11.7 5C11.6 4.9 11.5 4.9 11.4 5L10.4 5.9C10.1 5.8 9.7 5.7 9.4 5.7L8.8 4.4C8.7 4.3 8.6 4.2 8.5 4.3L6.5 5C6.4 5 6.3 5.2 6.4 5.3L6.7 6.7C6.5 6.7 6.4 6.9 6.3 7C6.2 7.1 6.1 7.3 6 7.4L4.6 7.3C4.5 7.3 4.4 7.4 4.3 7.5L4 9.6C4 9.7 4 9.9 4.2 9.9L5.5 10.3C5.6 10.6 5.7 10.9 5.8 11.2L5.1 12.4C5 12.5 5.1 12.6 5.2 12.7L6.8 14C6.9 14.1 7 14.1 7.1 14L8.1 13.1C8.4 13.2 8.8 13.3 9.1 13.3L9.7 14.5C9.8 14.6 9.9 14.7 10 14.6L12 14C12.1 14 12.2 13.8 12.2 13.7L11.9 12.3C12 12.2 12.1 12.1 12.3 11.9C12.4 11.8 12.5 11.6 12.6 11.5L13.9 11.6ZM10.7 10.7C10 11.5 8.8 11.6 8 11C7.2 10.3 7.1 9 7.8 8.2C8.5 7.4 9.7 7.3 10.5 8C11.3 8.7 11.4 9.9 10.7 10.7Z" fill="#FF8C00" style="fill:#FF8C00;fill:color(display-p3 1.0000 0.5490 0.0000);fill-opacity:1;"/>
+<path d="M17.7 12.4C17.7 12.3 17.7 12.3 17.6 12.2L16.2 12C16.1 12 16 12 16 12.1L15.7 12.9C15.5 12.9 15.3 13 15.1 13.1L14.4 12.6C14.3 12.6 14.2 12.6 14.2 12.6L13.4 13.6C13.3 13.7 13.3 13.7 13.4 13.8L14 14.5C13.9 14.7 13.9 14.9 13.9 15.1L13.1 15.5C13 15.5 13 15.6 13 15.7L13.4 16.9C13.4 17 13.5 17 13.6 17L14.5 16.8C14.6 16.9 14.6 17 14.7 17C14.8 17 14.9 17.1 15 17.2V18.1C15 18.2 15.1 18.3 15.1 18.3L16.4 18.5C16.5 18.5 16.6 18.5 16.6 18.4L16.9 17.6C17.1 17.6 17.3 17.5 17.5 17.4L18.2 17.9C18.3 17.9 18.4 17.9 18.4 17.9L19.2 16.9C19.3 16.8 19.3 16.7 19.2 16.7L18.6 16C18.7 15.8 18.7 15.6 18.7 15.4L19.5 15C19.6 15 19.6 14.9 19.6 14.8L19.2 13.6C19.2 13.5 19.1 13.5 19 13.5L18.1 13.7C18 13.6 18 13.5 17.9 13.5C17.8 13.4 17.7 13.4 17.6 13.3L17.7 12.4ZM17.1 14.4C17.6 14.8 17.7 15.6 17.2 16.1C16.8 16.6 16 16.7 15.5 16.2C15 15.8 14.9 15 15.4 14.5C15.8 14 16.6 14 17.1 14.4Z" fill="#FF8C00" style="fill:#FF8C00;fill:color(display-p3 1.0000 0.5490 0.0000);fill-opacity:1;"/>
+<path d="M29.4 9.5L20.3 0.4C20 0.1 19.7 0 19.4 0H3.4C1.5 0 0 1.5 0 3.4V35.5C0 37.5 1.5 39 3.4 39H25.6C24.4 38.4 23.4 37.7 22.5 36.7H3.4C2.8 36.7 2.3 36.2 2.3 35.6V3.4C2.3 2.8 2.8 2.3 3.4 2.3H18.3V8C18.3 9.9 19.8 11.4 21.7 11.4H27.4V20.3C28.1 20.1 28.9 20 29.7 20V10.3C29.7 10 29.6 9.7 29.4 9.5ZM21.7 9.1C21.1 9.1 20.6 8.6 20.6 8V3.9L25.8 9.1H21.7Z" fill="#2680EB" style="fill:#2680EB;fill:color(display-p3 0.1490 0.5020 0.9216);fill-opacity:1;"/>
+<path d="M21.7 20.7H8C7.4 20.7 6.9 21.2 6.9 21.8C6.9 22.5 7.4 23 8 23H21.7C22.3 23 22.8 22.5 22.8 21.9C22.9 21.2 22.3 20.7 21.7 20.7Z" fill="#2680EB" style="fill:#2680EB;fill:color(display-p3 0.1490 0.5020 0.9216);fill-opacity:1;"/>
+<path d="M21.2 25.3C20.8 26 20.5 26.8 20.3 27.6H8C7.4 27.6 6.9 27.1 6.9 26.5C6.9 25.9 7.4 25.4 8 25.4H21.2V25.3Z" fill="#2680EB" style="fill:#2680EB;fill:color(display-p3 0.1490 0.5020 0.9216);fill-opacity:1;"/>
+<path d="M17.1 29.9H8C7.4 29.9 6.9 30.4 6.9 31C6.9 31.6 7.4 32.1 8 32.1H17.1C17.7 32.1 18.2 31.6 18.2 31C18.2 30.4 17.8 29.9 17.1 29.9Z" fill="#2680EB" style="fill:#2680EB;fill:color(display-p3 0.1490 0.5020 0.9216);fill-opacity:1;"/>
+<path d="M30 21C25 21 21 25 21 30C21 35 25 39 30 39C35 39 39 35 39 30C39 25 35 21 30 21ZM35.6 27.1L30.3 34.3C30 34.8 29.5 35 29 35C28.5 35 28 34.8 27.6 34.4L24.5 31C24 30.5 24 29.6 24.6 29.1C25.1 28.6 26 28.6 26.5 29.2L28.7 31.6L28.8 31.7C28.8 31.7 28.9 31.7 28.9 31.6L33.4 25.5C33.8 24.9 34.7 24.8 35.3 25.2C35.9 25.7 36 26.5 35.6 27.1Z" fill="#1CA261" style="fill:#1CA261;fill:color(display-p3 0.1098 0.6353 0.3804);fill-opacity:1;"/>
+</g>
+<defs>
+<clipPath id="clip0_2545_43">
+<rect width="39" height="39" fill="white" style="fill:white;fill-opacity:1;"/>
+</clipPath>
+</defs>
+</svg>

package/assets/images/menu/eo/WEO53TR001.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_2545_24)">
+<path d="M38.7 9.5L29.5 0.4C29.3 0.1 29 0 28.7 0H12.7C10.8 0 9.29999 1.5 9.29999 3.4V9.5C9.39999 9.5 9.49999 9.5 9.59999 9.6L11.6 10.3V3.4C11.6 2.8 12.1 2.3 12.7 2.3H27.5V8C27.5 9.9 29 11.4 30.9 11.4H36.6V35.5C36.6 36.1 36.1 36.6 35.5 36.6H12.7C12.1 36.6 11.6 36.1 11.6 35.5V26.5C11.3 26.5 11.1 26.4 10.8 26.2L9.59999 25.1C9.49999 25.1 9.39999 25.2 9.29999 25.2V35.5C9.29999 37.4 10.8 38.9 12.7 38.9H35.5C37.4 38.9 38.9 37.4 38.9 35.5V10.3C39 10 38.9 9.7 38.7 9.5ZM31 9.1C30.4 9.1 29.9 8.6 29.9 8V3.9L35.1 9.1H31Z" fill="#2680EB" style="fill:#2680EB;fill:color(display-p3 0.1490 0.5020 0.9216);fill-opacity:1;"/>
+<path d="M31 20.7H17.3C16.7 20.7 16.2 21.2 16.2 21.8C16.2 22.4 16.7 22.9 17.3 22.9H31C31.6 22.9 32.1 22.4 32.1 21.8C32.1 21.2 31.6 20.7 31 20.7Z" fill="#2680EB" style="fill:#2680EB;fill:color(display-p3 0.1490 0.5020 0.9216);fill-opacity:1;"/>
+<path d="M31 25.3H17.3C16.7 25.3 16.2 25.8 16.2 26.4C16.2 27 16.7 27.5 17.3 27.5H31C31.6 27.5 32.1 27 32.1 26.4C32.1 25.8 31.6 25.3 31 25.3Z" fill="#2680EB" style="fill:#2680EB;fill:color(display-p3 0.1490 0.5020 0.9216);fill-opacity:1;"/>
+<path d="M26.4 29.9H17.3C16.7 29.9 16.2 30.4 16.2 31C16.2 31.6 16.7 32.1 17.3 32.1H26.4C27 32.1 27.5 31.6 27.5 31C27.5 30.4 27 29.9 26.4 29.9Z" fill="#2680EB" style="fill:#2680EB;fill:color(display-p3 0.1490 0.5020 0.9216);fill-opacity:1;"/>
+<path d="M13 15.3C12.9 15.1 12.7 14.9 12.5 14.7C12.3 14.5 12.1 14.3 12 14.1L12.4 12C12.4 11.8 12.3 11.6 12.2 11.6L9.2 10.5C9 10.4 8.8 10.5 8.7 10.7L7.7 12.6C7.2 12.6 6.7 12.7 6.2 12.9L4.6 11.5C4.4 11.4 4.2 11.4 4.1 11.5L1.7 13.5C1.5 13.6 1.5 13.8 1.6 14L2.7 15.8C2.5 16.3 2.3 16.8 2.2 17.3L0.2 18C0.1 17.9 0 18.1 0 18.3L0.6 21.4C0.6 21.6 0.8 21.7 1 21.7L3.1 21.6C3.2 21.8 3.4 22 3.5 22.2C3.6 22.4 3.9 22.6 4 22.8L3.6 24.9C3.6 25.1 3.7 25.3 3.8 25.3L6.8 26.4C7 26.5 7.2 26.4 7.3 26.2L8.3 24.3C8.8 24.3 9.3 24.2 9.8 24L11.4 25.4C11.6 25.5 11.8 25.5 11.9 25.4L14.3 23.4C14.5 23.3 14.5 23.1 14.4 22.9L13.3 21.1C13.5 20.6 13.7 20.1 13.8 19.6L15.8 18.9C16 18.8 16.1 18.7 16.1 18.4L15.5 15.3C15.5 15.1 15.3 15 15.1 15L13 15.3ZM10 20.7C8.8 21.8 6.9 21.6 5.8 20.4C4.7 19.2 4.9 17.3 6.1 16.2C7.3 15.1 9.2 15.3 10.3 16.5C11.4 17.7 11.2 19.7 10 20.7Z" fill="#FF8C00" style="fill:#FF8C00;fill:color(display-p3 1.0000 0.5490 0.0000);fill-opacity:1;"/>
+<path d="M20 13.3C20.1 13.2 20.3 13.1 20.4 13C20.5 12.9 20.6 12.8 20.8 12.7L22.1 13C22.2 13 22.3 13 22.4 12.8L23.1 10.9C23.1 10.8 23.1 10.7 23 10.6L21.8 10C21.8 9.7 21.7 9.4 21.6 9L22.5 8C22.6 7.9 22.6 7.8 22.5 7.7L21.2 6.2C21 6 20.9 6 20.8 6.1L19.7 6.8C19.4 6.6 19.1 6.5 18.8 6.5L18.4 5.2C18.3 5.1 18.1 5 18 5L16 5.4C15.9 5.4 15.8 5.5 15.8 5.7L15.9 7C15.8 7.1 15.6 7.2 15.5 7.3C15.4 7.4 15.3 7.5 15.1 7.6L13.8 7.3C13.7 7.3 13.6 7.3 13.5 7.5L12.8 9.4C12.8 9.5 12.8 9.6 12.9 9.7L14.1 10.3C14.1 10.6 14.2 10.9 14.3 11.3L13.4 12.3C13.3 12.4 13.3 12.5 13.4 12.6L14.7 14.1C14.8 14.2 14.9 14.2 15 14.1L16.1 13.4C16.4 13.6 16.7 13.7 17 13.7L17.4 15C17.4 15.1 17.6 15.2 17.7 15.2L19.7 14.8C19.8 14.8 19.9 14.7 19.9 14.5L20 13.3ZM16.5 11.3C15.8 10.5 15.9 9.3 16.7 8.7C17.5 8 18.7 8.1 19.3 8.9C19.9 9.7 19.9 10.9 19.1 11.5C18.3 12.1 17.2 12.1 16.5 11.3Z" fill="#FF8C00" style="fill:#FF8C00;fill:color(display-p3 1.0000 0.5490 0.0000);fill-opacity:1;"/>
+</g>
+<defs>
+<clipPath id="clip0_2545_24">
+<rect width="39" height="39" fill="white" style="fill:white;fill-opacity:1;"/>
+</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-input/DateField.js

@@ -41,8 +41,8 @@ export class DateField {
   }
 }
 
-/**
- * Pad a number with zeros to the left.
+/**
+ * Pad a number with zeros to the left.
  */
 const padNumber = (number, length) => {
   let numberString = String(number);
@@ -158,7 +158,7 @@ export const useDateField = (format, localize, date) => {
       minute,
       second
     } = dateField;
-    const date = new Date(year || 0, typeof month === 'number' ? month - 1 : 0,
+    const date = new Date(year || 0, typeof month === 'number' ? Math.max(0, month - 1) : 0,
     // The default day is 1 when the value is null, otherwise it becomes the last day of the month.
     day || 1, hour || 0, minute || 0, second || 0);
     if (typeof type === 'undefined' || typeof value === 'undefined') {

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

@@ -1,5 +1,6 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
+import { useEffect } from 'react';
 import { css, jsx } from '@emotion/core';
 import { HelperText, Label } from "../..";
 import { getGlobal } from "../../../global";
@@ -8,12 +9,19 @@ import PropTypes from 'prop-types';
 import { forwardRef, memo, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { cursorNotAllowed, displayBlock, positionRelative } from "../../../styles/general";
 import useThemeProps from "../../../theme/utils/useThemeProps";
-import { classNames, refType as ref, useControlled } from "../../../utils";
+import { classNames, refType as ref, useControlled, parseDateByFormat } from "../../../utils";
 import UncontrolledInputBase from "../input-base/UncontrolledInputBase";
 import useDateInputState from "./useDateInputState";
 import useIsFocused from "./useIsFocused";
 import useKeyboardInputEvent from "./useKeyboardInputEvent";
 import { getInputSelectedState, isFieldFullValue, useEventCallback, useInputSelection, validateDateTime } from "./utils";
+const usePrevious = value => {
+  const ref = useRef();
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+  return ref.current;
+};
 const DateInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
   if (!reference) reference = useRef(null);
 
@@ -57,6 +65,7 @@ const DateInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference
     selectionStart: 0,
     selectionEnd: 0
   });
+  const selectedStateOld = usePrevious(selectedState) || {};
   const isError = !!error;
   const isEnabled = !readOnly && !disabled;
   useImperativeHandle(reference, () => {
@@ -124,15 +133,25 @@ const DateInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference
     setSelectionRange(state.selectionStart, state.selectionEnd);
   });
   const onSegmentValueChangeWithNumericKeys = useEventCallback(event => {
+    var _inputRef$current;
     const input = event.target;
     const key = event.key;
     const pattern = selectedState.selectedPattern;
     if (!pattern) {
       return;
     }
+    const displayDate = ((_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.value) || '';
+    const dataDisplayVal = parseDateByFormat(displayDate, formatStr) || [];
+    const patternName = Object.keys(dataDisplayVal).find(name => name.includes(pattern));
+    const valDisplay = (dataDisplayVal === null || dataDisplayVal === void 0 ? void 0 : dataDisplayVal[patternName]) || '';
     const field = getDateField(pattern);
     const value = parseInt(key, 10);
-    const padValue = parseInt(`${field.value || ''}${key}`, 10);
+    // * If Date or Month ['DD', 'MM'];
+    // * If current display value has two number and first num is 0
+    // * If current value !== 0
+    // * And Already finish text month or date
+    // ===> Not chain the previous num
+    const padValue = ['DD', 'MM'].includes(patternName) && valDisplay.length === 2 && valDisplay[0] === '0' && key !== 0 && (selectedStateOld.selectedPattern || '').toUpperCase() !== pattern ? Number(key) : parseInt(`${field.value || ''}${key}`, 10);
     let newValue = value;
 
     // Check if the value entered by the user is a valid date

package/components/form-control/date-input/utils.js

@@ -1,9 +1,9 @@
 import { isValid, parse, setDate, setHours, setMinutes, setMonth, setSeconds, setYear } from 'date-fns';
 import { useCallback, useEffect, useRef } from 'react';
 
-/**
- * https://github.com/facebook/react/issues/14099#issuecomment-440013892
- * @param {function} fn
+/**
+ * https://github.com/facebook/react/issues/14099#issuecomment-440013892
+ * @param {function} fn
  */
 export const useEventCallback = fn => {
   const ref = useRef(fn);
@@ -217,7 +217,7 @@ export const modifyDate = (date, type, value) => {
     case 'year':
       return setYear(date, value);
     case 'month':
-      return setMonth(date, value - 1);
+      return setMonth(date, Math.max(0, value - 1));
     case 'day':
       return setDate(date, value);
     case 'hour':

package/components/form-control/date-picker/index.js

@@ -106,19 +106,24 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
     value: valueProp,
     viewType,
     onBlur,
+    delayOnChange: delayOnChangeProp,
     ...other
   } = props;
   const dateLocale = locale.get();
   const displayFormat = (_getDateFormats = getDateFormats(dateLocale, minZoom)) !== null && _getDateFormats !== void 0 ? _getDateFormats : displayFormatProp;
   const returnFormat = (_pickerReturnFormat$g = pickerReturnFormat.get(minZoom)) !== null && _pickerReturnFormat$g !== void 0 ? _pickerReturnFormat$g : returnFormatProp;
   const placeholder = placeholderProp !== null && placeholderProp !== void 0 ? placeholderProp : displayFormat;
+  const renderDateInputCondition = useDateInput && minZoom !== 'quarter' && !min && !max || true;
+  const delayOnChange = delayOnChangeProp || renderDateInputCondition ? typeof delayOnChangeProp === 'number' ? delayOnChangeProp : getGlobal('delayOnInput') : 0;
   const [value, setValue] = useControlled(parseValueToDate(valueProp), parseValueToDate(defaultValue));
   const [openPickerState, setOpenPickerState] = useState(false);
+  const defaultVal = useRef(valueProp);
   const ipRef = useRef(null);
   const ref = useRef(null);
   const focusedValue = useRef(null);
   const pickerRef = useRef(null);
   const buttonCarlendarRef = useRef(null);
+  const timer = useRef(null);
   const isError = !!error && (!value || !isValid(value));
   const _DatePickerRoot = DatePickerRoot();
   const _IconAreaCSS = IconAreaCSS();
@@ -140,9 +145,12 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
     const vl = (e === null || e === void 0 ? void 0 : e.value) || e;
     closePicker();
     setValue(vl);
-    onChange === null || onChange === void 0 ? void 0 : onChange({
-      value: isValid(vl) ? formatValue(vl, returnFormat) : String(vl) === 'Invalid Date' ? 'Invalid Date' : vl
-    });
+    if (timer.current) clearTimeout(timer.current);
+    timer.current = setTimeout(() => {
+      onChange === null || onChange === void 0 ? void 0 : onChange({
+        value: isValid(vl) ? formatValue(vl, returnFormat) : String(vl) === 'Invalid Date' ? defaultVal.current : vl
+      });
+    }, delayOnChange);
   };
   const onCalendarClick = e => {
     !controls ? onChangeValue(e) : focusedValue.current = e === null || e === void 0 ? void 0 : e.value;
@@ -224,7 +232,6 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
       return null;
     } else return parse(value, lowerCaseDayYear(returnFormat), new Date());
   }, [value]);
-  const renderDateInputCondition = useDateInput && minZoom !== 'quarter' && !min && !max || true;
   return jsx(Fragment, null, jsx("div", {
     ref: ref,
     css: _DatePickerRoot,
@@ -339,6 +346,8 @@ DatePicker.propTypes = {
   controls: PropTypes.bool,
   /** The default value of the component. */
   defaultValue: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string, PropTypes.object]),
+  /** The number of milliseconds to wait before call onChange. */
+  delayOnChange: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
   /** If `true`, the form control will be disabled. */
   disabled: PropTypes.bool,
   /** Format to display value. */

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-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

@@ -1182,6 +1182,37 @@ export const Block = /*#__PURE__*/memo(({
     fill: fillColor(color)
   }));
 });
+export const BloodMinus = /*#__PURE__*/memo(({
+  width,
+  height,
+  color = 'system/rest',
+  viewBox = false
+}) => {
+  if (viewBox) {
+    return /*#__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: "M6.64325 19.2933C5.21442 17.8221 4.5 15.9911 4.5 13.8001C4.5 12.2487 5.12083 10.5484 6.3625 8.69905C7.60417 6.84972 9.48333 4.83472 12 2.65405C14.5167 4.83472 16.3958 6.84972 17.6375 8.69905C18.8792 10.5484 19.5 12.2487 19.5 13.8001C19.5 15.9911 18.785 17.8221 17.355 19.2933C15.925 20.7645 14.1394 21.5001 11.9983 21.5001C9.85708 21.5001 8.07208 20.7645 6.64325 19.2933ZM8 15H16V13H8V15Z",
+      fill: fillColor(color)
+    }));
+  }
+  return /*#__PURE__*/React.createElement("svg", {
+    width: width || 15,
+    height: height || 19,
+    viewBox: "0 0 15 19",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M2.14325 16.6392C0.714417 15.1681 0 13.337 0 11.146C0 9.59467 0.620833 7.89433 1.8625 6.045C3.10417 4.19567 4.98333 2.18067 7.5 0C10.0167 2.18067 11.8958 4.19567 13.1375 6.045C14.3792 7.89433 15 9.59467 15 11.146C15 13.337 14.285 15.1681 12.855 16.6392C11.425 18.1104 9.63942 18.846 7.49825 18.846C5.35708 18.846 3.57208 18.1104 2.14325 16.6392ZM3.5 12.3459H11.5V10.3459H3.5V12.3459Z",
+    fill: fillColor(color)
+  }));
+});
 export const Cake = /*#__PURE__*/memo(({
   width,
   height,
@@ -4648,6 +4679,34 @@ export const OneSquare = /*#__PURE__*/memo(({
     fill: fillColor(color)
   }));
 });
+export const OpenNew = /*#__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: "M12 3V5H5V19H19V12H21V19C21 20.1 20.1 21 19 21H5C3.89 21 3 20.1 3 19V5C3 3.9 3.89 3 5 3H12ZM21 3V10H19V6.41016L9.16992 16.2402L7.75977 14.8301L17.5898 5H14V3H21Z",
+    fill: fillColor(color)
+  })) : /*#__PURE__*/React.createElement("svg", {
+    width: width || 18,
+    height: height || 18,
+    viewBox: "0 0 18 18",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M9 0V2H2V16H16V9H18V16C18 17.1 17.1 18 16 18H2C0.89 18 0 17.1 0 16V2C0 0.9 0.89 0 2 0H9ZM18 0V7H16V3.41016L6.16992 13.2402L4.75977 11.8301L14.5898 2H11V0H18Z",
+    fill: fillColor(color)
+  }));
+});
 export const Undo = /*#__PURE__*/memo(({
   width,
   height,

package/package.json

@@ -1,44 +1,78 @@
-{
-  "name": "diginet-core-ui",
-  "version": "1.4.63",
-  "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.64-beta.2",
+  "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,9 @@ npm test
 ```
 
 ## Changelog
+## 1.4.64
+- \[Added\]: Icon – Add Icon BloodMinus
+- \[Changed\]: DatePicker - Allow manual input for the DatePicker (default value shows "Invalid Date" when typing) + add a "delayOnChange" prop.
 
 ## 1.4.63
 - \[Added\]: Icon – Add IconMenu MHRP39N0029

package/utils/date.js

@@ -4,11 +4,11 @@ const language = locale.get();
 const localeName = language === 'en' ? 'en-US' : 'vi-VN';
 const units = ['year', 'month', 'day', 'hour', 'minute', 'second', 'millisecond'];
 
-/**
- *
- * @param {Date|String|Array} value is a date time
- * @param {String} format the input date format
- * @param {Boolean} setNow return current time if true
+/**
+ *
+ * @param {Date|String|Array} value is a date time
+ * @param {String} format the input date format
+ * @param {Boolean} setNow return current time if true
  */
 const getDate = (value, format = 'MM/DD/YYYY', setNow = true) => {
   if (value) {
@@ -52,11 +52,11 @@ const getMethodOfUnit = unit => {
   }
 };
 
-/**
- * check 1 value is a date
- * @param {Date|String|Array|Number} value the value to check
- * @param {String} formatInput the format date to check valid date
- * @returns {Boolean} valid date
+/**
+ * check 1 value is a date
+ * @param {Date|String|Array|Number} value the value to check
+ * @param {String} formatInput the format date to check valid date
+ * @returns {Boolean} valid date
  */
 export const isValidDate = (value, formatInput) => {
   if (typeof value === 'string' || Array.isArray(value)) {
@@ -69,11 +69,11 @@ export const isValidDate = (value, formatInput) => {
   return false;
 };
 
-/**
- * get the end of month from month and year or from a date
- * @param {Number|String|Date|Array} month the month of year (can also be validated as year) or a value with date type
- * @param {Number} year the year (can also be validated as month if arg 1 is year)
- * @returns {Number} end day
+/**
+ * get the end of month from month and year or from a date
+ * @param {Number|String|Date|Array} month the month of year (can also be validated as year) or a value with date type
+ * @param {Number} year the year (can also be validated as month if arg 1 is year)
+ * @returns {Number} end day
  */
 export const getEndDayOfMonth = (month, year) => {
   if (!year) {
@@ -92,11 +92,11 @@ export const getEndDayOfMonth = (month, year) => {
   return 'Invalid Date';
 };
 
-/**
- * return a date time follow the concrete format
- * @param {Date|String|Array} value is a date time
- * @param {String} formatOutput format of date
- * @param {Boolean} utc is utc time
+/**
+ * return a date time follow the concrete format
+ * @param {Date|String|Array} value is a date time
+ * @param {String} formatOutput format of date
+ * @param {Boolean} utc is utc time
  */
 export const formatDate = (value, formatOutput = 'DD/MM/YYYY', utc = false) => {
   if (!value) return formatOutput;
@@ -232,21 +232,21 @@ export const formatDate = (value, formatOutput = 'DD/MM/YYYY', utc = false) => {
   }
 };
 
-/**
- * return a date like moment
- * @param {Date|String|Array} value is date time
- * @param {String} formatInput format of input date value
- * @returns {Object} date
+/**
+ * return a date like moment
+ * @param {Date|String|Array} value is date time
+ * @param {String} formatInput format of input date value
+ * @returns {Object} date
  */
 const date = (value, formatInput = 'MM/DD/YYYY') => {
   const originDate = getDate(value, formatInput);
 
-  /**
-   * compare two date time and return a period
-   * @param {Date|String|Array} date is a date time
-   * @param {String} unit one of milliseconds|seconds|minutes|hours|days|months|years
-   * @param {Boolean|Number} floating allow odd numbers
-   * @returns {Number} distance
+  /**
+   * compare two date time and return a period
+   * @param {Date|String|Array} date is a date time
+   * @param {String} unit one of milliseconds|seconds|minutes|hours|days|months|years
+   * @param {Boolean|Number} floating allow odd numbers
+   * @returns {Number} distance
    */
   const diff = (compareDate, unit = 'days', floating = false) => {
     compareDate = getDate(compareDate);
@@ -295,12 +295,12 @@ const date = (value, formatInput = 'MM/DD/YYYY') => {
     return result.toFixed(floating ? typeof floating === 'number' ? floating : 2 : 0);
   };
 
-  /**
-   * add or subtract date time
-   * @param {Number} num the quantity to cal for unit
-   * @param {String} unit the unit of date/time
-   * @param {String} operator operator to cal (add/subtract)
-   * @returns {Object} date
+  /**
+   * add or subtract date time
+   * @param {Number} num the quantity to cal for unit
+   * @param {String} unit the unit of date/time
+   * @param {String} operator operator to cal (add/subtract)
+   * @returns {Object} date
    */
   const calculation = (num, unit, operator) => {
     if (isNaN(num)) {
@@ -311,11 +311,11 @@ const date = (value, formatInput = 'MM/DD/YYYY') => {
     return date(originDate, formatInput);
   };
 
-  /**
-   * get the moment of time follow unit time
-   * @param {String} unit the unit of time
-   * @param {String} moment start|end to get start|end of the moment
-   * @returns {Object} date
+  /**
+   * get the moment of time follow unit time
+   * @param {String} unit the unit of time
+   * @param {String} moment start|end to get start|end of the moment
+   * @returns {Object} date
    */
   const timeOf = (unit, moment) => {
     let temp = 1;
@@ -337,12 +337,12 @@ const date = (value, formatInput = 'MM/DD/YYYY') => {
     return date(originDate, formatInput);
   };
 
-  /**
-   *
-   * @param {Date|String|Number|Array} compareDate date to calculate moment, undefined will compare with now
-   * @param {String|Array} unit year|month|day|hour|minute|second|millisecond, allow undefined
-   * @param {Boolean|Number} floating allow odd numbers
-   * @returns {String} moments
+  /**
+   *
+   * @param {Date|String|Number|Array} compareDate date to calculate moment, undefined will compare with now
+   * @param {String|Array} unit year|month|day|hour|minute|second|millisecond, allow undefined
+   * @param {Boolean|Number} floating allow odd numbers
+   * @returns {String} moments
    */
   const relative = (compareDate, unit, floating) => {
     compareDate = getDate(compareDate);
@@ -378,17 +378,17 @@ const date = (value, formatInput = 'MM/DD/YYYY') => {
   };
   return {
     value: originDate,
-    /**
-     * return a date time follow the concrete format
-     * @param {String} formatOutput format of date
-     * @param {Boolean} utc is utc time
+    /**
+     * return a date time follow the concrete format
+     * @param {String} formatOutput format of date
+     * @param {Boolean} utc is utc time
      */
     format: (formatOutput, utc) => formatDate(originDate, formatOutput, utc),
     diff,
-    /**
-     * check 1 value is a date
-     * @param {String} formatInput the format date to check valid date
-     * @returns {Boolean} valid date
+    /**
+     * check 1 value is a date
+     * @param {String} formatInput the format date to check valid date
+     * @returns {Boolean} valid date
      */
     isValid: () => isValidDate(originDate, formatInput),
     add: (num, unit) => calculation(num, unit, 'add'),
@@ -398,4 +398,14 @@ const date = (value, formatInput = 'MM/DD/YYYY') => {
     relative
   };
 };
+export const parseDateByFormat = (dateStr, format) => {
+  const separators = /[-/]/;
+  const dateParts = dateStr.split(separators);
+  const formatParts = format.split(separators);
+  const result = {};
+  formatParts.forEach((part, index) => {
+    result[part] = dateParts[index] === part ? '' : dateParts[index];
+  });
+  return result;
+};
 export default date;