diginet-core-ui 1.4.55 → 1.4.56-beta.1

package/assets/images/menu/dhr/MHRP29N0033.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_2399_73)">
+<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.4 33.1C36.4 35 34.9 36.5 33 36.5H6C4.1 36.5 2.6 35 2.6 33.1V13H36.5V33.1H36.4Z" 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="M7 17.7C7 17.3 7.3 17 7.7 17H22.4C22.8 17 23.1 17.3 23.1 17.7V20.4C23.1 20.8 22.8 21.1 22.4 21.1H7.7C7.3 21 7 20.7 7 20.3V17.7Z" fill="#FF8C00"/>
+<path d="M24 17.7C24 17.3 24.3 17 24.7 17H27.4C27.8 17 28.1 17.3 28.1 17.7V20.4C28.1 20.8 27.8 21.1 27.4 21.1H24.7C24.3 21.1 24 20.8 24 20.4V17.7Z" fill="#FFC766"/>
+<path d="M29 29.7C29 29.3 29.3 29 29.7 29H32.4C32.8 29 33.1 29.3 33.1 29.7V32.4C33.1 32.8 32.8 33.1 32.4 33.1H29.7C29.3 33.1 29 32.8 29 32.4V29.7Z" fill="#F79B91"/>
+<path d="M12 23.7C12 23.3 12.3 23 12.7 23H15.4C15.8 23 16.1 23.3 16.1 23.7V26.4C16.1 26.8 15.8 27.1 15.4 27.1H12.7C12.3 27.1 12 26.8 12 26.4V23.7Z" fill="#CE8FEB"/>
+<path d="M17 23.7C17 23.3 17.3 23 17.7 23H32.4C32.8 23 33.1 23.3 33.1 23.7V26.4C33.1 26.8 32.8 27.1 32.4 27.1H17.7C17.3 27.1 17 26.8 17 26.4V23.7Z" fill="#8A43BF"/>
+<path d="M6 29.7C6 29.3 6.3 29 6.7 29H27.4C27.8 29 28.1 29.3 28.1 29.7V32.4C28.1 32.8 27.8 33.1 27.4 33.1H6.7C6.3 33 6 32.7 6 32.3V29.7Z" fill="#FF4444"/>
+</g>
+<defs>
+<clipPath id="clip0_2399_73">
+<rect width="39" height="39" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/assets/images/menu/dhr/MHRP29N0034.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_2399_72)">
+<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.4 33.1C36.4 35 34.9 36.5 33 36.5H6C4.1 36.5 2.6 35 2.6 33.1V13H36.5V33.1H36.4Z" 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="M7 17.7C7 17.3 7.3 17 7.7 17H22.4C22.8 17 23.1 17.3 23.1 17.7V20.4C23.1 20.8 22.8 21.1 22.4 21.1H7.7C7.3 21 7 20.7 7 20.3V17.7Z" fill="#FF8C00"/>
+<path d="M24 17.7C24 17.3 24.3 17 24.7 17H27.4C27.8 17 28.1 17.3 28.1 17.7V20.4C28.1 20.8 27.8 21.1 27.4 21.1H24.7C24.3 21.1 24 20.8 24 20.4V17.7Z" fill="#FFC766"/>
+<path d="M29 29.7C29 29.3 29.3 29 29.7 29H32.4C32.8 29 33.1 29.3 33.1 29.7V32.4C33.1 32.8 32.8 33.1 32.4 33.1H29.7C29.3 33.1 29 32.8 29 32.4V29.7Z" fill="#F79B91"/>
+<path d="M12 23.7C12 23.3 12.3 23 12.7 23H15.4C15.8 23 16.1 23.3 16.1 23.7V26.4C16.1 26.8 15.8 27.1 15.4 27.1H12.7C12.3 27.1 12 26.8 12 26.4V23.7Z" fill="#CE8FEB"/>
+<path d="M17 23.7C17 23.3 17.3 23 17.7 23H32.4C32.8 23 33.1 23.3 33.1 23.7V26.4C33.1 26.8 32.8 27.1 32.4 27.1H17.7C17.3 27.1 17 26.8 17 26.4V23.7Z" fill="#8A43BF"/>
+<path d="M6 29.7C6 29.3 6.3 29 6.7 29H27.4C27.8 29 28.1 29.3 28.1 29.7V32.4C28.1 32.8 27.8 33.1 27.4 33.1H6.7C6.3 33 6 32.7 6 32.3V29.7Z" fill="#FF4444"/>
+</g>
+<defs>
+<clipPath id="clip0_2399_72">
+<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

@@ -1,13 +1,13 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
-import { Button, ButtonIcon, Divider, HelperText, InputBase, Label, Typography } from "../..";
+import { Button, ButtonIcon, Divider, HelperText, InputBase, Label, Typography, CircularProgress, Popover } from "../..";
 import { getGlobal } from "../../../global";
 import locale from "../../../locale";
 import PropTypes from 'prop-types';
 import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { render } from 'react-dom';
-import { bgColor, borderRadius4px, cursorPointer, displayBlock, displayFlex, displayNone, flexCol, flexRow, invisible, justifyBetween, justifyEnd, itemsCenter, left, parseHeight, parseMaxWidth, parseMinWidth, parseWidth, pointerEventsNone, positionFixed, shadowLarge, textCenter, top, userSelectNone, whiteSpaceNoWrap, z } from "../../../styles/general";
+import { bgColor, borderRadius4px, cursorPointer, displayBlock, displayFlex, displayNone, flexCol, flexRow, invisible, justifyBetween, justifyEnd, itemsCenter, left, parseHeight, parseMaxWidth, parseMinWidth, parseWidth, pointerEventsNone, positionFixed, shadowLarge, textCenter, top, userSelectNone, whiteSpaceNoWrap, z, justifyCenter, positionAbsolute, borderRadius, parseWidthHeight } from "../../../styles/general";
 import { useTheme } from "../../../theme";
 import { capitalizeSentenceCase, classNames, isEqual, date as moment, randomString, updatePosition } from "../../../utils";
 import { getColor } from "../../../styles/utils";
@@ -131,9 +131,15 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
   const [, setValueFr] = useState(Date.now());
   const [, setValueTo] = useState(Date.now());
   const [, setSelected] = useState(Date.now());
+  const [loadingState, setLoadingState] = useState(periodOptions === null || periodOptions === void 0 ? void 0 : periodOptions.loading);
+  const [totalState, setTotalState] = useState(periodOptions === null || periodOptions === void 0 ? void 0 : periodOptions.total);
+  const [dataSourceState, setDataSourceState] = useState((periodOptions === null || periodOptions === void 0 ? void 0 : periodOptions.dataSource) || []);
+  const [openState, setOpenState] = useState(false);
   const selectedPeriodRef = useRef('');
   const selectedPeriodIndex = useRef(null);
   const focusBtnRef = useRef('today');
+  const loadMoreTimer = useRef(null);
+  const dropdownListRef = useRef(null);
   const [valueState, setValueState] = useState();
   const navigatorFromRefs = {
     doubleLeft: useRef(null),
@@ -218,6 +224,8 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
   const onDayClick = e => {
     const el = e.currentTarget;
     const v = parseInt(el.dataset.time, 10);
+    selectedPeriodRef.current = '';
+    focusBtnRef.current = '';
     if (values.current.length === 0) {
       //push
       el.classList.add(unique.day.active);
@@ -520,7 +528,8 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
   const setButtonState = () => {
     const isVisible = isEqual(values.current, tempValues.current);
     const query = function (selector) {
-      return footerRef.current.querySelector(selector);
+      var _footerRef$current;
+      return (_footerRef$current = footerRef.current) === null || _footerRef$current === void 0 ? void 0 : _footerRef$current.querySelector(selector);
     };
     const close = query(`.${unique.close}`);
     const cancel = query(`.${unique.cancel}`);
@@ -534,19 +543,20 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
       visibility: 'visible'
     };
     if (isVisible) {
-      Object.assign(close.style, visible);
-      Object.assign(cancel.style, hidden);
-      Object.assign(confirm.style, hidden);
+      Object.assign((close === null || close === void 0 ? void 0 : close.style) || {}, visible);
+      Object.assign((cancel === null || cancel === void 0 ? void 0 : cancel.style) || {}, hidden);
+      Object.assign((confirm === null || confirm === void 0 ? void 0 : confirm.style) || {}, hidden);
     } else {
-      Object.assign(cancel.style, visible);
-      Object.assign(confirm.style, visible);
-      Object.assign(close.style, hidden);
+      Object.assign((cancel === null || cancel === void 0 ? void 0 : cancel.style) || {}, visible);
+      Object.assign((confirm === null || confirm === void 0 ? void 0 : confirm.style) || {}, visible);
+      Object.assign((close === null || close === void 0 ? void 0 : close.style) || {}, hidden);
     }
   };
   const onCancel = () => {
     updateValues(tempValues.current);
     setButtonState();
     closePicker();
+    setOpenState(false);
   };
   const onConfirm = () => {
     setButtonState();
@@ -556,6 +566,7 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
       onChangeValue(values.current);
     }
     closePicker();
+    setOpenState(false);
   };
   const onSwap = open => {
     if (!isEnable) return;
@@ -701,6 +712,22 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
       controls && setButtonState();
     });
   };
+  const openPeriodPicker = () => {
+    // const arr = pickerRef.current.getElementsByTagName('td');
+    updateTempValues(values.current.length === 1 ? [values.current[0], values.current[0]] : values.current);
+    setOpenState(true);
+    setTimeout(() => {
+      renderPicker();
+      // pickerRef.current.addEventListener('mouseover', e => onPickerHover(e, arr));
+      window.addEventListener('resize', onResize);
+      window.addEventListener('scroll', onScroll);
+      document.addEventListener('mousedown', onClickOutside);
+      if (pressESCToClose) {
+        document.addEventListener('keydown', pressESCHandler);
+      }
+      controls && setButtonState();
+    });
+  };
   const closePicker = () => {
     const backGr = document.getElementById(unique.backGr);
     if (!backGr) return;
@@ -725,10 +752,12 @@ 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)) {
       controls ? onCancel() : closePicker();
+      setOpenState(false);
     }
   };
   const triggerFocus = () => {
@@ -743,9 +772,13 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
   const onInputFocus = () => {
     if (!isEnable) return;
     const el = ipConRef.current;
-    if (!el.classList.contains(unique.focus)) {
-      el.classList.add(unique.focus);
-      openPicker();
+    if ((periodOptions === null || periodOptions === void 0 ? void 0 : periodOptions.enable) === true) {
+      openPeriodPicker();
+    } else {
+      if (!el.classList.contains(unique.focus)) {
+        el.classList.add(unique.focus);
+        openPicker();
+      }
     }
   };
   const setInputValue = (time, reset, unshift = false) => {
@@ -806,8 +839,8 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
           const firstday = new Date(currentDay.setDate(first)).setHours(0, 0, 0);
           const lastday = new Date(currentDay.setDate(last)).setHours(0, 0, 0);
           value = [firstday.valueOf(), lastday.valueOf()];
-          valueFr.current = firstday;
-          valueTo.current = lastday;
+          valueFr.current = new Date(firstday);
+          valueTo.current = new Date(lastday);
           break;
         }
       case 'thisMonth':
@@ -830,8 +863,8 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
             lastday = new Date(lastDayArray[2], lastDayArray[1], lastDayArray[0]);
           }
           value = [firstday.valueOf(), lastday.valueOf()];
-          valueFr.current = firstday;
-          valueTo.current = lastday;
+          valueFr.current = new Date(firstday);
+          valueTo.current = new Date(lastday);
           selectedPeriodIndex.current = `period${periodData === null || periodData === void 0 ? void 0 : periodData.idx}`;
           selectedPeriodRef.current = periodData === null || periodData === void 0 ? void 0 : periodData[periodOptions === null || periodOptions === void 0 ? void 0 : periodOptions.displayExpr];
           document.getElementById(selectedPeriodIndex.current).style.background = getColor('fill/hover');
@@ -915,6 +948,15 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
       closePicker();
     };
   }, [actionIconAt, clearAble, controls, disabled, displayFormat, max, min, pressESCToClose, readOnly, startFromZero, unitCount, viewType]);
+  useEffect(() => {
+    setLoadingState(periodOptions === null || periodOptions === void 0 ? void 0 : periodOptions.loading);
+  }, [periodOptions === null || periodOptions === void 0 ? void 0 : periodOptions.loading]);
+  useEffect(() => {
+    setTotalState(periodOptions === null || periodOptions === void 0 ? void 0 : periodOptions.total);
+  }, [periodOptions === null || periodOptions === void 0 ? void 0 : periodOptions.total]);
+  useEffect(() => {
+    setDataSourceState((periodOptions === null || periodOptions === void 0 ? void 0 : periodOptions.dataSource) || []);
+  }, [periodOptions === null || periodOptions === void 0 ? void 0 : periodOptions.dataSource]);
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
     currentRef.element = ref.current;
@@ -1030,6 +1072,33 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
     className: unique.table.table,
     ref: tableToRef
   }, renderHeader(unique), jsx("tbody", null))));
+  const onLoadMoreHandler = e => {
+    e.persist();
+    if (loadMoreTimer.current) {
+      clearTimeout(loadMoreTimer.current);
+    }
+    const {
+      onLoadMore,
+      limit
+    } = periodOptions;
+    loadMoreTimer.current = setTimeout(() => {
+      if (onLoadMore && (dataSourceState === null || dataSourceState === void 0 ? void 0 : dataSourceState.length) < totalState && !loadingState) {
+        const {
+          scrollTop,
+          scrollHeight,
+          offsetHeight
+        } = e.target;
+        if (scrollHeight <= Math.ceil(scrollTop + 2) + offsetHeight && dropdownListRef.current) {
+          var _dropdownListRef$curr;
+          const length = (_dropdownListRef$curr = dropdownListRef.current.children) === null || _dropdownListRef$curr === void 0 ? void 0 : _dropdownListRef$curr.length;
+          !!onLoadMore && onLoadMore({
+            skip: length,
+            limit: limit
+          });
+        }
+      }
+    }, 300);
+  };
   const rightCalendarPeriodComp = jsx("div", {
     css: _PeriodContainerCSS
   }, jsx(Typography, {
@@ -1038,7 +1107,20 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
     style: {
       marginBottom: 8
     }
-  }, selectPeriodText), periodOptions === null || periodOptions === void 0 ? void 0 : (_periodOptions$dataSo = periodOptions.dataSource) === null || _periodOptions$dataSo === void 0 ? void 0 : _periodOptions$dataSo.map((p, idx) => {
+  }, selectPeriodText), loadingState ? jsx("div", {
+    css: LoadingProgressCSS,
+    className: 'DGN-Dropdown-Loading-Progress'
+  }, jsx(CircularProgress, {
+    size: 24
+  })) : null, jsx("div", {
+    style: {
+      width: '100%',
+      maxHeight: 175,
+      overflowY: 'scroll'
+    },
+    ref: dropdownListRef,
+    onScroll: onLoadMoreHandler
+  }, periodOptions === null || periodOptions === void 0 ? void 0 : (_periodOptions$dataSo = periodOptions.dataSource) === null || _periodOptions$dataSo === void 0 ? void 0 : _periodOptions$dataSo.map((p, idx) => {
     const isSelected = (p === null || p === void 0 ? void 0 : p[periodOptions === null || periodOptions === void 0 ? void 0 : periodOptions.displayExpr]) === selectedPeriodRef.current;
     return jsx("div", {
       id: `period${idx}`,
@@ -1055,7 +1137,7 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
       color: 'inherit',
       type: 'p1'
     }, p === null || p === void 0 ? void 0 : p[periodOptions === null || periodOptions === void 0 ? void 0 : periodOptions.displayExpr]));
-  }));
+  })));
   const tooltipComp = jsx("div", {
     className: unique.tooltip,
     ref: tooltipRef
@@ -1087,7 +1169,40 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
     ...labelProps,
     disabled: disabled,
     required: required
-  }, label) : null, jsx(InputBase, {
+  }, label) : null, periodOptions !== null && periodOptions !== void 0 && periodOptions.enable ? jsx(Popover, {
+    open: openState,
+    className: 'DGN-UI-Popover-Period',
+    anchorOrigin: {
+      horizontal: 'left',
+      vertical: 'bottom'
+    },
+    anchor: jsx("div", null, jsx(InputBase, {
+      inputProps: {
+        placeholder: !readOnly && !disabled ? placeholder : '',
+        ...inputProps
+      },
+      readOnly: true,
+      ref: ipConRef,
+      inputRef: ipRef,
+      disabled: disabled,
+      viewType: viewType,
+      inputStyle: {
+        textAlign: textAlign,
+        textOverflow: 'ellipsis',
+        ...inputStyle
+      },
+      startIcon: startIcon,
+      startIconProps: {
+        className: 'non-effect allow-disabled'
+      },
+      endIcon: endIcon,
+      value: valueState
+    }), error ? jsx(HelperText, {
+      ...helperTextProps,
+      disabled: disabled
+    }, error) : null),
+    onOpen: openPeriodPicker
+  }, pickerComp) : jsx("div", null, jsx(InputBase, {
     inputProps: {
       placeholder: !readOnly && !disabled ? placeholder : '',
       ...inputProps
@@ -1112,7 +1227,7 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
   }), error ? jsx(HelperText, {
     ...helperTextProps,
     disabled: disabled
-  }, error) : null);
+  }, error) : null));
 }));
 const unique = {
   backGr: 'DGN-UI-Portal',
@@ -1304,7 +1419,18 @@ const pickerCSS = {
     transform: 'scale(0)'
   }
 };
-
+const LoadingProgressCSS = css`
+    ${displayFlex};
+    ${flexRow};
+    ${justifyCenter};
+    ${itemsCenter};
+    ${positionAbsolute};
+    ${borderRadius(4)};
+    ${parseWidthHeight('100%')}
+    ${bgColor('rgba(255, 255, 255, 0.6)')};
+    ${z(2)};
+    ${top(0)};
+`;
 // DateRangePicker.defaultProps = {
 //     actionIconAt: 'end',
 //     clearAble: false,
@@ -1365,7 +1491,12 @@ DateRangePicker.propTypes = {
    *  displayExpr: "DisplayName",
    *  valueFromExpr: "DateFrom",
    *  valueToExpr: "DateTo",
-   *  valueFormat: "DD/MM/YYYY"
+   *  valueFormat: "DD/MM/YYYY",
+   *  limit: 5,
+   *  skip: 0,
+   *  total: 100,
+   *  onLoadMore: () => {},
+   *  loading: false
    * }
    */
   periodOptions: PropTypes.object,

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

@@ -11,6 +11,7 @@ import { animation, bgColor, border, borderBottom, borderBottomColor, borderColo
 import { useTheme } from "../../../theme";
 import useThemeProps from "../../../theme/utils/useThemeProps";
 import { classNames, getProp, isMobile, randomString } from "../../../utils";
+import { isEmpty, typeOf } from "../../../utils/type";
 const currentValue = {},
   isSearch = {},
   allValue = {};
@@ -135,6 +136,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
   const loadMoreTimer = useRef(null);
   const dataChosen = useRef([]);
   const popupRef = useRef(null);
+  const valueObjectDefaultInit = useRef({});
   const filter = useRef({
     skip: skip || 0,
     limit: limit || 50
@@ -297,10 +299,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 = '';
@@ -313,17 +315,18 @@ 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 = '';
     let isReplace = true;
     if (data || data === 0) {
+      var _data$displayExpr;
       displayExpr = displayExpr || valueExpr;
-      let mask = data === null || data === void 0 ? void 0 : data[displayExpr];
+      let mask = typeOf(data === null || data === void 0 ? void 0 : data[displayExpr], 'array') ? ((_data$displayExpr = data[displayExpr]) === null || _data$displayExpr === void 0 ? void 0 : _data$displayExpr[0]) || '' : data === null || data === void 0 ? void 0 : data[displayExpr];
       // convert {id} - {name} to {<data[id]>} - {<data[name]>}
       if (selectAll && (data === null || data === void 0 ? void 0 : data[valueExpr]) === 'all') {
         isReplace = false;
@@ -342,6 +345,43 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
     var _dataSourceUsable2;
     const items = [];
     let dataSourceUsable = [...dataSourceState];
+    if (vlObjDefaultState && (vlObjDefaultState === null || vlObjDefaultState === void 0 ? void 0 : vlObjDefaultState.length) > 0 && isEmpty(txtSearch)) {
+      // Sẽ Xem Lại
+      // if (vlObjDefaultState && vlObjDefaultState?.length > 0) {
+      const length = vlObjDefaultState === null || vlObjDefaultState === void 0 ? void 0 : vlObjDefaultState.length;
+      let existItemQuantity = 0;
+      for (let index = length - 1; index >= 0; index--) {
+        if ((vlObjDefaultState[index][valueExpr] || vlObjDefaultState[index][valueExpr] === 0) && !dataSourceUsable.some(data => data[valueExpr] === vlObjDefaultState[index][valueExpr])) {
+          if (isMultipleVal(vlObjDefaultState[index])) {
+            if (isEmpty(valueObjectDefaultInit.current)) {
+              let dataCloneDeep = {};
+              for (const name in vlObjDefaultState[index]) {
+                var _vlObjDefaultState$in;
+                if (name) dataCloneDeep[name] = (((_vlObjDefaultState$in = vlObjDefaultState[index]) === null || _vlObjDefaultState$in === void 0 ? void 0 : _vlObjDefaultState$in[name]) || []).map(item => item);
+              }
+              if (!isEmpty(dataCloneDeep)) valueObjectDefaultInit.current = dataCloneDeep;
+              const valueObjectDefaultOrigin = {
+                ...valueObjectDefaultInit.current
+              } || {};
+              const arr = (valueObjectDefaultOrigin === null || valueObjectDefaultOrigin === void 0 ? void 0 : valueObjectDefaultOrigin[valueExpr]) || [];
+              for (let i = 0; i < arr.length; i++) {
+                let objData = {};
+                for (const name in valueObjectDefaultOrigin) {
+                  var _valueObjectDefaultOr;
+                  if (name) objData[name] = (valueObjectDefaultOrigin === null || valueObjectDefaultOrigin === void 0 ? void 0 : (_valueObjectDefaultOr = valueObjectDefaultOrigin[name]) === null || _valueObjectDefaultOr === void 0 ? void 0 : _valueObjectDefaultOr[i]) || '';
+                }
+                dataSourceUsable.unshift(objData);
+              }
+            }
+          } else dataSourceUsable.unshift(vlObjDefaultState[index]);
+        } else {
+          // Nếu số lượng phần tử của valueObjectDefault tồn tại trong dataSource nhiều hơn hoặc bằng limit thì không remove nữa
+          if (++existItemQuantity > limit) {
+            continue;
+          }
+        }
+      }
+    }
 
     // search dataSource dựa trên txtSearch
     if (!onInput) {
@@ -358,20 +398,6 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
         });
       }
     }
-    if (vlObjDefaultState && (vlObjDefaultState === null || vlObjDefaultState === void 0 ? void 0 : vlObjDefaultState.length) > 0) {
-      const length = vlObjDefaultState === null || vlObjDefaultState === void 0 ? void 0 : vlObjDefaultState.length;
-      let existItemQuantity = 0;
-      for (let index = length - 1; index >= 0; index--) {
-        if ((vlObjDefaultState[index][valueExpr] || vlObjDefaultState[index][valueExpr] === 0) && !dataSourceUsable.some(data => data[valueExpr] === vlObjDefaultState[index][valueExpr])) {
-          dataSourceUsable.unshift(vlObjDefaultState[index]);
-        } else {
-          // Nếu số lượng phần tử của valueObjectDefault tồn tại trong dataSource nhiều hơn hoặc bằng limit thì không remove nữa
-          if (++existItemQuantity > limit) {
-            continue;
-          }
-        }
-      }
-    }
     const length = (_dataSourceUsable2 = dataSourceUsable) === null || _dataSourceUsable2 === void 0 ? void 0 : _dataSourceUsable2.length;
     for (let index = 0; index < length; index++) {
       const data = dataSourceUsable[index];
@@ -399,10 +425,11 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
         data,
         index
       }) : jsx(Typography, {
+        lineClamp: 1,
         type: 'p1'
       }, displayText);
       if (multiple && selectBox) {
-        let checked = valueMulti.includes(value);
+        let checked = typeOf(value, 'array') ? valueMulti.some(item => value.includes(item)) : valueMulti.includes(value);
         if (selectAll && value === 'all') checked = selectAll && value === 'all' && valueMulti.length > 0;
         const isMaximumSelection = maximumSelectionLength === (valueMulti === null || valueMulti === void 0 ? void 0 : valueMulti.length);
         itemDisabled = itemDisabled || isMaximumSelection && !checked;
@@ -423,7 +450,12 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
           value: value,
           disabled: itemDisabled,
           onChange: e => onChangeValue(e, displayText, value, icon, data, index)
-        }, icon, text)));
+        }, jsx("div", {
+          style: {
+            display: 'flex',
+            alignItems: 'center'
+          }
+        }, icon, text))));
       } else {
         items.push(jsx("div", {
           key: index,
@@ -486,7 +518,9 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
     const dataSourceUsable = [...dataSourceState];
     // Nếu có load more thì đẩy đội tượng mặc định lên đầu
     let notExistItem = 0;
-    if (onLoadMore && vlObjDefaultState !== null && vlObjDefaultState !== void 0 && vlObjDefaultState.length) {
+    if (onLoadMore && vlObjDefaultState !== null && vlObjDefaultState !== void 0 && vlObjDefaultState.length && isEmpty(txtSearch)) {
+      // Sẽ Xem Lại
+      // if (onLoadMore && vlObjDefaultState?.length) {
       const length = vlObjDefaultState.length;
       for (let index = length - 1; index >= 0; index--) {
         if (!dataSourceUsable.some(data => data[valueExpr] === vlObjDefaultState[index][valueExpr])) {
@@ -550,7 +584,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
       } else {
         item = jsx(Fragment, null, icon, text);
       }
-      if (!dropdownListRef.current) {
+      if (!dropdownListRef.current || isEmpty(txtSearch)) {
         return;
       }
       ReactDOM.render(item, dropdownListRef.current.appendChild(dropdownItem));
@@ -997,7 +1031,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
     if (valueProp !== undefined && (!dropdownListRef.current || children || JSON.stringify(valueProp) !== JSON.stringify(currentValue[unique]))) {
       setValueIntoInput(valueProp);
       if (oneLiner && multiple) {
-        const valueArray = sortMultiple(valueProp);
+        const valueArray = sortMultiple(valueProp, true);
         setValueMultiDisplay(valueArray === null || valueArray === void 0 ? void 0 : valueArray.display);
         setValueMultiOverflow(valueArray === null || valueArray === void 0 ? void 0 : valueArray.overflow);
         if ((valueArray === null || valueArray === void 0 ? void 0 : valueArray.overflow.length) === 0 && openMultipleOverflow) {
@@ -1098,9 +1132,34 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
     disabled: disabled,
     ...labelProps
   }, label) : null, [label, required, disabled, labelProps]);
+  const isMultipleVal = (objData = {}) => {
+    let status = false;
+    if (typeOf(objData === null || objData === void 0 ? void 0 : objData[valueExpr], 'array') && !isEmpty(objData === null || objData === void 0 ? void 0 : objData[valueExpr]) || typeOf(objData === null || objData === void 0 ? void 0 : objData[displayExpr], 'array') && !isEmpty(objData === null || objData === void 0 ? void 0 : objData[displayExpr])) {
+      status = true;
+    }
+    return status;
+  };
   const getData = () => {
+    var _valObjDefault;
     let dataFilter = JSON.parse(JSON.stringify(dataSourceState));
-    dataFilter = uniqBy([...vlObjDefaultState, ...dataFilter], data => data === null || data === void 0 ? void 0 : data[valueExpr]);
+    let valObjDefault = vlObjDefaultState;
+    if (isMultipleVal((_valObjDefault = valObjDefault) === null || _valObjDefault === void 0 ? void 0 : _valObjDefault[0])) {
+      var _vlObjDefaultState$;
+      valObjDefault = [];
+      const arr = (vlObjDefaultState === null || vlObjDefaultState === void 0 ? void 0 : (_vlObjDefaultState$ = vlObjDefaultState[0]) === null || _vlObjDefaultState$ === void 0 ? void 0 : _vlObjDefaultState$[valueExpr]) || [];
+      for (let i = 0; i < arr.length; i++) {
+        let objData = {};
+        for (const name in vlObjDefaultState[0]) {
+          var _vlObjDefaultState$2;
+          if (name) objData[name] = (_vlObjDefaultState$2 = vlObjDefaultState[0]) === null || _vlObjDefaultState$2 === void 0 ? void 0 : _vlObjDefaultState$2[name][i];
+        }
+        if (!isEmpty(objData)) valObjDefault.push(objData);
+      }
+    }
+    dataFilter = uniqBy([...valObjDefault, ...dataFilter], data => {
+      let result = data === null || data === void 0 ? void 0 : data[valueExpr];
+      return result;
+    });
     return dataFilter;
   };
   const getTextWidth = text => {
@@ -1127,8 +1186,8 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
     const inputWidth = inputElement === null || inputElement === void 0 ? void 0 : inputElement.clientWidth;
     const items = [];
     if ((valueMulti === null || valueMulti === void 0 ? void 0 : valueMulti.length) > 0) {
+      const dataFilter = getData();
       value.map((vl, index) => {
-        const dataFilter = getData();
         const data = dataFilter.find(v => v[valueExpr] === vl || v === vl);
         if (data) {
           const displayText = displayValue(data);
@@ -1181,8 +1240,8 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
   const renderMultipleItem = value => {
     const items = [];
     if ((valueMulti === null || valueMulti === void 0 ? void 0 : valueMulti.length) > 0) {
+      const dataFilter = getData();
       value.map((vl, index) => {
-        const dataFilter = getData();
         const data = dataFilter.find(v => v[valueExpr] === vl || v === vl);
         if (data) {
           const displayText = displayValue(data);
@@ -1251,8 +1310,8 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
   const renderOverflowPopover = value => {
     const items = [];
     if ((valueMulti === null || valueMulti === void 0 ? void 0 : valueMulti.length) > 0) {
+      const dataFilter = getData();
       value.map((vl, index) => {
-        const dataFilter = getData();
         const data = dataFilter.find(v => v[valueExpr] === vl || v === vl);
         if (data) {
           const displayText = displayValue(data);
@@ -1743,9 +1802,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. */
@@ -1754,14 +1813,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,
@@ -1795,8 +1854,8 @@ Dropdown.propTypes = {
   onChange: 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. */
@@ -1809,21 +1868,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. */
@@ -1854,19 +1913,19 @@ Dropdown.propTypes = {
   valueObjectDefault: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
   /** The variant to use. */
   viewType: PropTypes.oneOf(['underlined', 'outlined', 'none'])
-  /**
-   * 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({});
@@ -95,13 +98,13 @@ const NumberInput = /*#__PURE__*/forwardRef((inProps, reference) => {
 
   // if (valueProps || valueProps === 0) valueProps = clamp(valueProps, min, max);
 
-  /**
-   * Convert number to format money
-   * @param vl {number} - value
-   * @type {function}
-   * @return {string}
-   * @example 1200300.123 => 1,200,300.123
-   * @example 1200300,123 => 1.200.300,123
+  /**
+   * Convert number to format money
+   * @param vl {number} - value
+   * @type {function}
+   * @return {string}
+   * @example 1200300.123 => 1,200,300.123
+   * @example 1200300,123 => 1.200.300,123
    */
   const parseNumberToMoney = useCallback((vl, isNumber) => {
     var _number, _number2, _number$, _number3;
@@ -149,13 +152,13 @@ const NumberInput = /*#__PURE__*/forwardRef((inProps, reference) => {
     return number;
   }, [decimalSymbol, max, value, decimalDigit, fixedDecimalDigit]);
 
-  /**
-   * Convert money to format number
-   * @param vl {string} - value
-   * @type {function}
-   * @return {number}
-   * @example 1,200,300.123 => 1200300.123
-   * @example 1.200.300,123 => 1200300.123
+  /**
+   * Convert money to format number
+   * @param vl {string} - value
+   * @type {function}
+   * @return {number}
+   * @example 1,200,300.123 => 1200300.123
+   * @example 1.200.300,123 => 1200300.123
    */
   const convertMoneyToNumber = useCallback((vl, isNumber) => {
     var _number4, _number4$toString, _number4$toString$rep, _number4$toString$rep2, _number4$toString$rep3;
@@ -168,16 +171,19 @@ const NumberInput = /*#__PURE__*/forwardRef((inProps, reference) => {
   const _onInput = useCallback((e, flag) => {
     var _e$target$value;
     let valueT = (_e$target$value = e.target.value) !== null && _e$target$value !== void 0 ? _e$target$value : e.value;
-    if (disabledNegative && Number(valueT || 0) < 0) return;
+    if (disabledNegative && eval(valueT || 0) <= 0 || valueT.includes('-')) valueT = 0;
+    if ((min || min === 0) && eval(valueT) <= min || min === 0 && valueT.includes('-')) valueT = min;
+    if ((max || max === 0) && eval(valueT) >= max) valueT = max;
     valueT = parseNumberToMoney(valueT);
     const returnValue = convertMoneyToNumber(valueT);
     e.value = globalRef.current.value = !isNaN(parseFloat(returnValue)) ? parseFloat(returnValue) : null;
     // e.target.value = globalRef.current.valueString = valueT || '';
     // globalRef.current.returnValue = returnValue || '';
     e.target.value = globalRef.current.valueString = valueT || '';
+    e.value = valueT;
     globalRef.current.returnValue = returnValue || '';
     onInput === null || onInput === void 0 ? void 0 : onInput(e);
-    setValue(valueT);
+    setValue(eval(valueT));
     if (flag) _onChange(e);
   }, [min, max, decimalDigit]);
   const _onBlur = useCallback(e => {
@@ -490,10 +496,10 @@ NumberInput.propTypes = {
   style: PropTypes.object,
   /** Thousand separator character. */
   thousandSeparator: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['.', ','])]),
-  /** Validation value, argument can:<br/>
-   * * string: the validation rule. Example required.<br/>
-   * * object: the validation rule insist name, property, message. Example {name: 'min', compareValue: 9, message: 'Error'} or {max: 99}<br/>
-   * * array: the validation rule list, insist object/string
+  /** Validation value, argument can:<br/>
+   * * string: the validation rule. Example required.<br/>
+   * * object: the validation rule insist name, property, message. Example {name: 'min', compareValue: 9, message: 'Error'} or {max: 99}<br/>
+   * * array: the validation rule list, insist object/string
    */
   validates: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.array, PropTypes.func]),
   /** The value of the input element, required for a controlled component. */

package/icons/basic.js

@@ -1430,6 +1430,32 @@ export const CancelUnderline = /*#__PURE__*/memo(({
     fill: fillColor(color)
   }));
 });
+export const CelebrationColor = /*#__PURE__*/memo(({
+  width,
+  height
+}) => {
+  return /*#__PURE__*/React.createElement("svg", {
+    width: width || 24,
+    height: height || 24,
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M1 22.5L6 8.5L15 17.5L1 22.5Z",
+    fill: "#111D5E"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M10.1 9.05L9.05 8L9.65 7.4C9.88333 7.16667 10 6.88333 10 6.55C10 6.21667 9.88333 5.93333 9.65 5.7L9 5.05L10.05 4L10.7 4.65C11.2333 5.18333 11.5 5.81667 11.5 6.55C11.5 7.28333 11.2333 7.91667 10.7 8.45L10.1 9.05Z",
+    fill: "#0095FF"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M14.05 13.0501L13 12.0001L18.6 6.4001C19.1333 5.86676 19.775 5.6001 20.525 5.6001C21.275 5.6001 21.9167 5.86676 22.45 6.4001L23.05 7.0001L22 8.0501L21.4 7.4501C21.1667 7.21676 20.875 7.1001 20.525 7.1001C20.175 7.1001 19.8833 7.21676 19.65 7.4501L14.05 13.0501Z",
+    fill: "#FFAA00"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M16.05 14.95L15 13.9L16.6 12.3C17.1333 11.7667 17.775 11.5 18.525 11.5C19.275 11.5 19.9167 11.7667 20.45 12.3L22.05 13.9L21 14.95L19.4 13.35C19.1667 13.1167 18.875 13 18.525 13C18.175 13 17.8833 13.1167 17.65 13.35L16.05 14.95Z",
+    fill: "#FF3D71"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M12.05 11.05L11 10L14.6 6.4C14.8333 6.16667 14.95 5.875 14.95 5.525C14.95 5.175 14.8333 4.88333 14.6 4.65L13 3.05L14.05 2L15.65 3.6C16.1833 4.13333 16.45 4.775 16.45 5.525C16.45 6.275 16.1833 6.91667 15.65 7.45L12.05 11.05Z",
+    fill: "#00C875"
+  }));
+});
 export const Category = /*#__PURE__*/memo(({
   width,
   height,

package/package.json

@@ -1,44 +1,78 @@
-{
-  "name": "diginet-core-ui",
-  "version": "1.4.55",
-  "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.56-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,6 +42,13 @@ npm test
 
 ## Changelog
 
+## 1.4.56
+- \[Added\]: Icon – Add IconMenu MHRP29N0033, MHRP29N0034
+- \[Added\]: Icon – Add Icon CelebrationColor
+- \[Fixed\]: Dropdown  - Fix valueObjectDefault bug in Dropdown.
+- \[Fixed\]: NumberInput  – Fix issue where NumberInput allowed pasting negative values even when disabledNegative prop was enabled.
+- \[Added\]: DateRangePicker  – Add a new mode to change the UI of DateRangePicker
+
 ## 1.4.55
 - \[Added\]: Icon – Add IconMenu MHRM09N1401, MHRM09N1402
 - \[Added\]: Icon – Add Icon Book

package/utils/type.js

@@ -33,6 +33,34 @@ const isNumeric = object => {
 const isObject = object => {
   return type(object) === 'object';
 };
+const typeOf = (value, type) => {
+  const result = Object.prototype.toString.call(value).slice(8, -1).toLowerCase();
+  return type ? result === String(type).toLowerCase() : result;
+};
+const isEmpty = (value, escapeZero = false) => {
+  switch (typeOf(value)) {
+    case 'object':
+      {
+        return value && Object.keys(value).length <= 0 || !value;
+      }
+    case 'array':
+      {
+        return value.length <= 0;
+      }
+    case 'string':
+      {
+        return !value;
+      }
+    case 'number':
+      {
+        if (!escapeZero) return value === 0 ? false : !value;else return !value;
+      }
+    default:
+      {
+        return !value;
+      }
+  }
+};
 const isEmptyObject = object => {
   let property;
   for (property in object) {
@@ -66,4 +94,4 @@ const isDeferred = object => {
 const isEvent = object => {
   return !!(object && object.preventDefault);
 };
-export { isBoolean, isExponential, isDate, isDefined, isFunction, isString, isNumeric, isObject, isEmptyObject, isPlainObject, isPrimitive, isWindow, isRenderer, isPromise, isDeferred, type, isEvent };
+export { isBoolean, isExponential, isDate, isDefined, isFunction, isString, isNumeric, isObject, isEmptyObject, isPlainObject, isPrimitive, isWindow, isRenderer, isPromise, isDeferred, type, isEvent, isEmpty, typeOf };