diginet-core-ui 1.4.54 → 1.4.55

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

@@ -0,0 +1,14 @@
+<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2363_38)">
+<path d="M39 9.7C38.9 9.1 38.9 8.4 38.7 7.7C37.6 3.4 33.8 0.3 29.2 0H29C28.9 0 28.8 0 28.6 0C27.9 0 27.5 0.5 27.5 1.1C27.5 1.7 28 2.1 28.6 2.1H28.7C29 2.1 29.3 2.1 29.6 2.2C33.7 2.7 36.8 6.1 36.9 10.1C36.9 10.8 37.3 11.2 37.9 11.2C38.2 11.2 38.5 11.1 38.7 10.9C39 10.6 39 10.3 39 9.9V9.7Z" fill="#FFC766"/>
+<path d="M35.3 10.1C35.3 10 35.3 9.9 35.3 9.7C34.9 7.3 33.6 5.6 31.4 4.5C30.4 4 29.3 3.8 28.1 3.8C27.5 3.8 27.1 4.2 27.1 4.7C27.1 5.2 27.4 5.7 27.9 5.8C28 5.8 28.1 5.8 28.2 5.8H28.3C29.9 5.9 31.2 6.5 32.2 7.6C32.9 8.4 33.3 9.4 33.3 10.4C33.3 11 33.7 11.5 34.3 11.5C34.9 11.5 35.3 11 35.3 10.4V10.1Z" fill="#FFC766"/>
+<path d="M0 29.3C0.1 29.9 0.1 30.6 0.3 31.3C1.4 35.6 5.2 38.7 9.8 39H10C10.1 39 10.2 39 10.4 39C11.1 39 11.5 38.5 11.5 37.9C11.5 37.3 11 36.9 10.4 36.9H10.3C10 36.9 9.7 36.9 9.4 36.8C5.2 36.4 2.1 33 2.1 29C2.1 28.3 1.7 27.9 1.1 27.9C0.8 27.9 0.5 28 0.3 28.2C0.1 28.4 0 28.7 0 29V29.3Z" fill="#FFC766"/>
+<path d="M3.7 28.9C3.7 29 3.7 29.1 3.7 29.3C4.1 31.7 5.4 33.4 7.6 34.5C8.6 35 9.7 35.2 10.9 35.2C11.5 35.2 11.9 34.8 11.9 34.3C11.9 33.8 11.6 33.3 11.1 33.2C11 33.2 10.9 33.2 10.8 33.2H10.7C9.1 33.1 7.8 32.5 6.8 31.4C6.1 30.6 5.7 29.6 5.7 28.6C5.7 28 5.3 27.5 4.7 27.5C4.1 27.5 3.7 28 3.7 28.6V28.9Z" fill="#FFC766"/>
+<path d="M31.8001 26.9999C31.8001 29.8999 30.6001 32.1999 28.2001 33.7999C24.7001 36.1999 20.4001 35.7999 17.3001 32.6999L11.1001 26.4999L9.30009 24.6999C7.70009 23.0999 6.10009 21.4999 4.50009 19.8999C4.10009 19.3999 3.90009 18.9999 4.00009 18.3999C4.10009 17.7999 4.50009 17.3999 5.10009 17.1999C5.70009 16.9999 6.30009 17.1999 6.70009 17.5999C8.20009 19.0999 9.70009 20.5999 11.2001 22.0999L13.0001 23.8999C13.0001 23.9999 13.1001 23.9999 13.2001 24.0999C13.5001 24.2999 13.8001 24.2999 14.1001 24.0999C14.4001 23.7999 14.4001 23.4999 14.2001 23.1999C14.2001 23.0999 14.1001 23.0999 14.0001 22.9999L7.40009 16.3999C6.50009 15.4999 5.70009 14.6999 4.80009 13.7999C4.40009 13.3999 4.30009 12.8999 4.40009 12.3999C4.50009 11.8999 4.80009 11.4999 5.30009 11.1999C5.90009 10.8999 6.60009 11.0999 7.20009 11.5999L12.9001 17.2999L16.2001 20.5999C16.3001 20.6999 16.3001 20.6999 16.4001 20.7999C16.7001 20.9999 17.0001 20.9999 17.3001 20.7999C17.6001 20.5999 17.6001 20.1999 17.4001 19.9999C17.4001 19.8999 17.3001 19.8999 17.2001 19.7999L7.40009 9.99994C7.30009 9.89994 7.20009 9.69994 7.10009 9.59994C6.70009 9.09994 6.70009 8.29994 7.10009 7.69994C7.40009 7.29994 7.80009 7.09994 8.20009 7.09994C8.70009 7.09994 9.20009 7.29994 9.60009 7.59994C11.9001 9.99994 14.4001 12.3999 16.7001 14.6999L19.4001 17.2999L19.6001 17.4999C19.9001 17.7999 20.3001 17.7999 20.5001 17.4999C20.8001 17.1999 20.8001 16.8999 20.5001 16.4999C20.4001 16.3999 20.4001 16.3999 20.3001 16.2999L12.8001 8.99994C12.4001 8.59994 12.2001 8.09994 12.3001 7.59994C12.4001 6.99994 12.8001 6.49994 13.4001 6.29994C14.0001 6.09994 14.6001 6.19994 15.0001 6.69994C18.9001 10.5999 22.8001 14.4999 26.7001 18.3999C26.9001 18.5999 27.2001 18.8999 27.6001 18.6999C28.0001 18.4999 28.0001 18.0999 28.0001 17.8999V17.3999C28.0001 16.0999 28.0001 14.6999 28.0001 13.3999C28.0001 12.2999 28.8001 11.4999 29.9001 11.4999C31.0001 11.4999 31.8001 12.2999 31.8001 13.3999V16.3999C31.8001 19.7999 31.8001 23.3999 31.8001 26.9999Z" fill="#FFAA00"/>
+</g>
+<defs>
+<clipPath id="clip0_2363_38">
+<rect width="39" height="39" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/assets/images/menu/dhr/MHRM09N1402.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_2363_39)">
+<path d="M38.6992 9.52442L29.5758 0.401028C29.275 0.100257 28.9743 0 28.6735 0H12.6324C10.7275 0 9.22363 1.50386 9.22363 3.40874V6.01542C9.72492 6.11568 10.2262 6.3162 10.527 6.71722L11.4293 7.61954V3.40874C11.4293 2.8072 11.9306 2.30591 12.5321 2.30591H27.4704V8.02057C27.4704 9.92545 28.9743 11.4293 30.8792 11.4293H36.5938V35.6915C36.5938 36.2931 36.0925 36.7943 35.491 36.7943H12.6324C12.0308 36.7943 11.5295 36.2931 11.5295 35.6915V31.8817C11.4293 31.7815 11.329 31.6812 11.2288 31.581L9.22363 29.5758V35.5913C9.22363 37.4961 10.7275 39 12.6324 39H35.5912C37.4961 39 39 37.4961 39 35.5913V10.3265C39 10.0257 38.8997 9.72493 38.6992 9.52442ZM30.9794 9.12339C30.3779 9.12339 29.7763 8.62211 29.7763 8.02057V3.91003L34.9897 9.12339H30.9794Z" fill="#2680EB"/>
+<path d="M34.0002 26.3C34.0002 26.9 33.5002 27.4 32.9002 27.4H25.8002C25.9002 26.8 26.0002 26.2 26.0002 25.6V25.1H32.9002C33.5002 25.2 34.0002 25.7 34.0002 26.3Z" fill="#2680EB"/>
+<path d="M34.0002 21.2C34.0002 21.8 33.5002 22.3 32.9002 22.3H26.0002C26.0002 21.5 26.0002 20.8 26.0002 20H32.9002C33.5002 20.1 34.0002 20.6 34.0002 21.2Z" fill="#2680EB"/>
+<path d="M34.0002 16.1C34.0002 16.7 33.5002 17.3 32.9002 17.3H26.0002V15H32.9002C33.5002 15 34.0002 15.5 34.0002 16.1Z" fill="#2680EB"/>
+<path d="M29.4002 31.4C29.4002 32 28.9002 32.5 28.3002 32.5H22.4002C23.3002 31.8 24.1002 31.1 24.7002 30.2H28.3002C28.9002 30.3 29.4002 30.8 29.4002 31.4Z" fill="#2680EB"/>
+<path d="M25.0001 25.7C25.0001 28.3 23.9001 30.4 21.8001 31.8C18.7001 34 14.8001 33.6 12.1001 30.9L4.9001 23.7C3.5001 22.3 2.0001 20.8 0.600098 19.4C0.100098 18.9 -0.0999023 18.5 9.76566e-05 18C0.100098 17.4 0.400098 17.1 1.0001 16.9C1.6001 16.7 2.1001 16.9 2.5001 17.3C3.8001 18.6 5.2001 20 6.6001 21.3L8.3001 23C8.6001 23.2 8.9001 23.2 9.1001 23C9.4001 22.8 9.4001 22.5 9.2001 22.2C9.1001 22.2 9.0001 22.1 9.0001 22L3.0001 16.1C2.2001 15.3 1.4001 14.5 0.700098 13.8C0.400098 13.5 0.200098 13 0.300098 12.6C0.400098 12.1 0.700098 11.8 1.1001 11.6C1.7001 11.3 2.3001 11.5 2.8001 12L8.0001 17L11.0001 20C11.1001 20.1 11.1001 20.1 11.2001 20.2C11.5001 20.4 11.7001 20.4 12.0001 20.2C12.2001 20 12.3001 19.7 12.1001 19.4C12.1001 19.3 12.0001 19.3 11.9001 19.2L3.2001 10.4C3.1001 10.3 3.0001 10.2 2.9001 10.1C2.5001 9.6 2.6001 8.9 2.9001 8.4C3.2001 8.1 3.5001 7.9 3.9001 7.9C4.3001 7.9 4.8001 8.1 5.1001 8.4C7.2001 10.5 9.4001 12.7 11.5001 14.8L14.1001 17.4C14.4001 17.6 14.7001 17.6 14.9001 17.4C15.1001 17.2 15.1001 16.8 14.9001 16.5C14.8001 16.4 14.8001 16.4 14.7001 16.3L7.9001 9.5C7.6001 9.1 7.4001 8.7 7.5001 8.2C7.6001 7.6 7.9001 7.2 8.5001 7.1C9.0001 6.9 9.5001 7 9.9001 7.4C13.4001 10.9 16.9001 14.4 20.4001 17.9C20.6001 18.1 20.8001 18.3 21.2001 18.2C21.6001 18 21.6001 17.7 21.6001 17.5V17C21.6001 15.8 21.6001 14.6 21.6001 13.4C21.6001 12.4 22.3001 11.7 23.3001 11.7C24.3001 11.7 25.0001 12.4 25.0001 13.4V16.1C25.0001 19.2 25.0001 22.5 25.0001 25.7Z" fill="#FFAA00"/>
+</g>
+<defs>
+<clipPath id="clip0_2363_39">
+<rect width="39" height="39" fill="white"/>
+</clipPath>
+</defs>
+</svg>

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

@@ -0,0 +1,13 @@
+<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2376_31)">
+<path d="M34.4 6.99995C30.9 6.29995 27.6 5.09995 24.6 3.19995C23.3 2.39995 22 1.39995 20.8 0.399951C20.1 -0.200049 19 -0.200049 18.3 0.399951C17.1 1.39995 15.8 2.39995 14.4 3.19995C11.4 5.09995 8.1 6.39995 4.6 6.99995C3.7 7.19995 3 8.09995 3 8.99995V18.4C3 26.0999 7.3 33.2 14 36.4L18.7 38.7C19.2 39 19.9 39 20.4 38.7C20.4 38.7 22 37.9 24.4 36.7C26.7 35.5 28 34.6 28.8 33.9C29.3 33.5 29.9 33 30.3 32.5C33.9 29 36 23.9 36 18.5V8.99995C36 8.09995 35.3 7.19995 34.4 6.99995Z" fill="#1CA261"/>
+<path d="M32.1 8.99995C29.2 8.39995 26.4 7.39995 23.8 5.79995C22.7 5.09995 21.6 4.29995 20.5 3.39995C19.9 2.89995 19 2.89995 18.3 3.39995C17.3 4.29995 16.2 5.09995 15 5.79995C12.6 7.29995 9.8 8.39995 6.9 8.99995C6.1 9.19995 5.5 9.89995 5.5 10.7V18.7C5.5 25.2 9.1 31.2 14.8 34L18.8 35.9C19.3 36.1 19.8 36.1 20.3 35.9C20.3 35.9 21.7 35.2 23.7 34.2C25.7 33.2 26.8 32.4 27.5 31.8C28 31.4 28.4 31 28.8 30.6C31.8 27.5 33.6 23.2 33.6 18.6V10.6C33.5 9.79995 32.9 9.09995 32.1 8.99995Z" fill="#72E395"/>
+<path d="M29.8 10.9C27.4 10.4 25.1 9.59995 23 8.29995C22.1 7.69995 21.2 7.09995 20.3 6.39995C19.8 5.99995 19 5.99995 18.5 6.39995C17.7 7.09995 16.8 7.79995 15.8 8.29995C13.7 9.59995 11.4 10.4 9 10.9C8.4 11 7.9 11.6 7.9 12.3V18.7999C7.9 24.0999 10.9 28.9999 15.5 31.2999L18.7 32.9C19.1 33.1 19.5 33.1 19.9 32.9C19.9 32.9 21 32.3 22.7 31.5C24.3 30.7 25.2 30.1 25.8 29.6C26.2 29.3 26.5 29 26.9 28.6C29.4 26.1 30.8 22.4999 30.8 18.7999V12.3C30.9 11.6 30.5 11 29.8 10.9Z" fill="#1CA261"/>
+<path d="M24.6 18.1H20.9V14.4C20.9 13.6 20.3 13 19.5 13C18.7 13 18.1 13.6 18.1 14.4V18.1H14.4C13.6 18.1 13 18.7 13 19.5C13 20.3 13.6 20.9 14.4 20.9H18.1V24.6C18.1 25.4 18.7 26 19.5 26C20.3 26 20.9 25.4 20.9 24.6V20.9H24.6C25.4 20.9 26 20.3 26 19.5C26 18.7 25.4 18.1 24.6 18.1Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_2376_31">
+<rect width="39" height="39" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/components/button/more.js

@@ -29,7 +29,8 @@ const ButtonMore = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
     options,
     optionType,
     popoverProp,
-    style
+    style,
+    onClick
   } = props;
   const isOptionFull = optionType === 'full';
   let anchor = anchorProp;
@@ -38,7 +39,8 @@ const ButtonMore = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
   const [iconState, setIconState] = useState(false);
   const _OptionFullCSS = OptionFullCSS(theme);
   const _PopoverCSS = PopoverCSS(isOptionFull, theme);
-  const openPopover = () => {
+  const openPopover = e => {
+    onClick && onClick(e);
     setOpenState(true);
   };
   const closePopover = () => {
@@ -59,6 +61,8 @@ const ButtonMore = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
       if (item !== null && item !== void 0 && item.hidden) return null;else if ( /*#__PURE__*/isValidElement(item)) return item;else {
         const icon = item === null || item === void 0 ? void 0 : item.icon;
         const label = item === null || item === void 0 ? void 0 : item.label;
+        const className = (item === null || item === void 0 ? void 0 : item.className) || '';
+        const style = (item === null || item === void 0 ? void 0 : item.style) || {};
         const action = () => {
           closePopover();
           if (typeof (item === null || item === void 0 ? void 0 : item.action) === 'function') item === null || item === void 0 ? void 0 : item.action();
@@ -67,7 +71,8 @@ const ButtonMore = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
         return isOptionFull ? jsx("button", {
           key: idx,
           css: _OptionFullCSS,
-          className: 'DGN-UI-ButtonMore-Option',
+          className: `DGN-UI-ButtonMore-Option ${className}`,
+          style: style,
           onClick: action
         }, icon ? jsx(Icon, {
           className: 'DGN-UI-ButtonMore-Option-Icon',
@@ -197,14 +202,18 @@ ButtonMore.propTypes = {
     label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
     icon: PropTypes.string,
     action: PropTypes.func,
-    hidden: PropTypes.bool
+    hidden: PropTypes.bool,
+    className: PropTypes.string,
+    style: PropTypes.object
   })),
   /** The variant of option's type. */
   optionType: PropTypes.oneOf(['full', 'icon']),
   /** [Props](https://core.diginet.com.vn/ui/?path=/docs/components-popover) applied to the main `Popover`. */
   popoverProp: PropTypes.object,
   /** Style inline of component. */
-  style: PropTypes.object
+  style: PropTypes.object,
+  /** Callback fired when the component is clicked. */
+  onClick: PropTypes.func
 };
 export { ButtonMore };
 export default OptionWrapper(ButtonMore);

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

@@ -7,9 +7,10 @@ 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, left, parseHeight, parseMaxWidth, parseMinWidth, 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 } from "../../../styles/general";
 import { useTheme } from "../../../theme";
 import { capitalizeSentenceCase, classNames, isEqual, date as moment, randomString, updatePosition } from "../../../utils";
+import { getColor } from "../../../styles/utils";
 import { generateCalendarCSS, onUpdateNavigator, renderHeader, renderNavigator } from "../calendar/function";
 import ControlComp from "../control";
 import useThemeProps from "../../../theme/utils/useThemeProps";
@@ -66,6 +67,7 @@ const parseDate = day => {
   return Date.parse(new Date(day));
 };
 const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
+  var _periodOptions$dataSo;
   // props priority: `inProps` > `themeDefaultProps`
   const props = useThemeProps({
     props: inProps,
@@ -101,6 +103,7 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
     unitCount,
     value,
     viewType,
+    periodOptions,
     ...other
   } = props;
   const placeholder = placeholderProp !== null && placeholderProp !== void 0 ? placeholderProp : `${displayFormat} - ${displayFormat}`;
@@ -128,7 +131,9 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
   const [, setValueFr] = useState(Date.now());
   const [, setValueTo] = useState(Date.now());
   const [, setSelected] = useState(Date.now());
-  const [focusBtn, setFocusBtn] = useState('today');
+  const selectedPeriodRef = useRef('');
+  const selectedPeriodIndex = useRef(null);
+  const focusBtnRef = useRef('today');
   const [valueState, setValueState] = useState();
   const navigatorFromRefs = {
     doubleLeft: useRef(null),
@@ -153,9 +158,12 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
   const yesterdayText = getGlobal(['yesterday']);
   const thisWeekText = getGlobal(['thisWeek']);
   const thisMonthText = getGlobal(['thisMonth']);
+  const selectPeriodText = getGlobal(['selectPeriod']);
   const _ControlContainerCSS = ControlContainerCSS(theme);
   const _FooterContainerCSS = FooterContainerCSS(theme);
   const _DateOptionsCSS = DateOptionsCSS(theme);
+  const _PeriodContainerCSS = PeriodContainerCSS(theme);
+  const _PeriodItemCSS = PeriodItemCSS(theme);
   const updateValues = useCallback(v => {
     values.current = v;
     setValues();
@@ -262,8 +270,8 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
       tableData = [],
       weekDateFirst = getDateOfWeek(firstDay),
       weekDateLast = getDateOfWeek(lastDay);
-    /**
-     * days of previous month
+    /**
+     * days of previous month
      */
     for (let i = weekDateFirst; i > 0; i--) {
       const day = Date.parse(new Date(time.getFullYear(), time.getMonth(), 1));
@@ -275,8 +283,8 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
         className: unique.day.day
       })));
     }
-    /**
-     * days of current month
+    /**
+     * days of current month
      */
     for (let i = 0; i < lastDate; i++) {
       const day = new Date(time.getFullYear(), time.getMonth(), i + 1);
@@ -302,8 +310,8 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
         type: 'h6'
       }, i + 1)));
     }
-    /**
-     * days of next month
+    /**
+     * days of next month
      */
     for (let i = 0; i < 13 - weekDateLast; i++) {
       const day = Date.parse(new Date(time.getFullYear(), time.getMonth() + 1, 0));
@@ -744,12 +752,13 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
     if (!ipRef.current) return;
     const el = ipRef.current;
     let enUnitText = locale.get() === 'en' && selected.current > 1 ? unitText + 's' : unitText;
+    const showPeriod = periodOptions === null || periodOptions === void 0 ? void 0 : periodOptions.enable;
     let tempValue;
     if (!reset) {
       if (unshift) {
-        tempValue = formatValue(time, displayFormat) + ' - ' + el.value + (showUnitCount ? ` (${selected.current} ${enUnitText})` : '');
+        tempValue = `${showPeriod && selectedPeriodRef.current ? `${selectedPeriodRef.current} (` : ''}` + formatValue(time, displayFormat) + ' - ' + el.value + (showUnitCount ? ` (${selected.current} ${enUnitText})` : '') + `${showPeriod ? ')' : ''}`;
       } else {
-        tempValue = el.value + ' - ' + formatValue(time, displayFormat) + (showUnitCount ? ` (${selected.current} ${enUnitText})` : '');
+        tempValue = `${showPeriod && selectedPeriodRef.current ? `${selectedPeriodRef.current} (` : ''}` + el.value + ' - ' + formatValue(time, displayFormat) + (showUnitCount ? ` (${selected.current} ${enUnitText})` : '') + `${showPeriod && selectedPeriodRef.current ? ')' : ''}`;
       }
     } else {
       tempValue = formatValue(time, displayFormat);
@@ -768,14 +777,20 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
     !!onChange && onChange(e);
     onSwap(true);
   };
-  const onClickPresetDate = type => {
+  const onClickPresetDate = (type, periodData) => {
     if (!type) return;
-    setFocusBtn(type);
     let value = [];
     const currentDay = new Date();
+    if (focusBtnRef.current) {
+      document.getElementById(focusBtnRef.current).style.color = getColor('system/dark');
+    }
+    if (selectedPeriodIndex.current) {
+      document.getElementById(selectedPeriodIndex.current).style.background = getColor('white');
+    }
     switch (type) {
       case 'today':
         value = [new Date(Date.now() - 25200000).valueOf()];
+        valueFr.current = new Date(Date.now() - 25200000);
         break;
       case 'yesterday':
         {
@@ -788,21 +803,48 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
         {
           const first = currentDay.getDate() - currentDay.getDay() + 1; // First day is the day of the month - the day of the week
           const last = first + 6; // last day is the first day + 6
-          const firstday = new Date(currentDay.setDate(first)).setHours(0, 0, 0).valueOf();
-          const lastday = new Date(currentDay.setDate(last)).setHours(0, 0, 0).valueOf();
-          value = [firstday, lastday];
+          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;
           break;
         }
       case 'thisMonth':
         {
-          let firstday = new Date(currentDay.getFullYear(), currentDay.getMonth(), 1).valueOf();
-          let lastday = new Date(currentDay.getFullYear(), currentDay.getMonth() + 1, 0).valueOf();
-          value = [firstday, lastday];
+          let firstday = new Date(currentDay.getFullYear(), currentDay.getMonth(), 1);
+          let lastday = new Date(currentDay.getFullYear(), currentDay.getMonth() + 1, 0);
+          value = [firstday.valueOf(), lastday.valueOf()];
+          valueFr.current = firstday;
+          valueTo.current = lastday;
+          break;
+        }
+      case 'period':
+        {
+          let firstday = periodData === null || periodData === void 0 ? void 0 : periodData[periodOptions === null || periodOptions === void 0 ? void 0 : periodOptions.valueFromExpr];
+          let lastday = periodData === null || periodData === void 0 ? void 0 : periodData[periodOptions === null || periodOptions === void 0 ? void 0 : periodOptions.valueToExpr];
+          if ((periodOptions === null || periodOptions === void 0 ? void 0 : periodOptions.valueFormat) === 'DD/MM/YYYY') {
+            const firstDayArray = firstday.split('/');
+            const lastDayArray = lastday.split('/');
+            firstday = new Date(firstDayArray[2], firstDayArray[1], firstDayArray[0]);
+            lastday = new Date(lastDayArray[2], lastDayArray[1], lastDayArray[0]);
+          }
+          value = [firstday.valueOf(), lastday.valueOf()];
+          valueFr.current = firstday;
+          valueTo.current = 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');
           break;
         }
       default:
         break;
     }
+    if (type !== 'period') {
+      selectedPeriodRef.current = '';
+      focusBtnRef.current = type;
+      document.getElementById(focusBtnRef.current).style.color = getColor('primary');
+    }
     updateValues(value);
     updateSelected(countDay(values.current));
     renderPicker();
@@ -909,6 +951,7 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
   }, jsx("div", {
     css: _DateOptionsCSS
   }, jsx(Button, {
+    id: 'today',
     size: "medium",
     labelProps: {
       type: 'h4',
@@ -917,8 +960,9 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
       }
     },
     onClick: () => onClickPresetDate('today'),
-    color: focusBtn === 'today' && 'primary'
+    color: focusBtnRef.current === 'today' && 'primary'
   }, todayText), jsx(Button, {
+    id: 'yesterday',
     size: "medium",
     labelProps: {
       type: 'h4',
@@ -927,8 +971,9 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
       }
     },
     onClick: () => onClickPresetDate('yesterday'),
-    color: focusBtn === 'yesterday' && 'primary'
+    color: focusBtnRef.current === 'yesterday' && 'primary'
   }, yesterdayText), jsx(Button, {
+    id: 'thisWeek',
     size: "medium",
     labelProps: {
       type: 'h4',
@@ -937,8 +982,9 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
       }
     },
     onClick: () => onClickPresetDate('thisWeek'),
-    color: focusBtn === 'thisWeek' && 'primary'
+    color: focusBtnRef.current === 'thisWeek' && 'primary'
   }, thisWeekText), jsx(Button, {
+    id: 'thisMonth',
     size: "medium",
     labelProps: {
       type: 'h4',
@@ -947,7 +993,7 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
       }
     },
     onClick: () => onClickPresetDate('thisMonth'),
-    color: focusBtn === 'thisMonth' && 'primary'
+    color: focusBtnRef.current === 'thisMonth' && 'primary'
   }, thisMonthText)), jsx("div", {
     css: _ControlContainerCSS,
     className: unique.footer,
@@ -984,6 +1030,32 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
     className: unique.table.table,
     ref: tableToRef
   }, renderHeader(unique), jsx("tbody", null))));
+  const rightCalendarPeriodComp = jsx("div", {
+    css: _PeriodContainerCSS
+  }, jsx(Typography, {
+    color: 'inherit',
+    type: 'h3',
+    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) => {
+    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}`,
+      key: `period${idx}`,
+      style: {
+        background: isSelected ? getColor('fill/hover') : ''
+      },
+      css: _PeriodItemCSS,
+      onClick: () => onClickPresetDate('period', {
+        ...p,
+        idx
+      })
+    }, jsx(Typography, {
+      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
@@ -1004,7 +1076,7 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
       height: '226px',
       margin: spacing([4.5, 0.5, 0])
     }
-  }), rightCalendarComp), tooltipComp, controls ? footerMemo : null);
+  }), controls && periodOptions !== null && periodOptions !== void 0 && periodOptions.enable ? rightCalendarPeriodComp : rightCalendarComp), tooltipComp, controls ? footerMemo : null);
   return jsx(ControlComp, {
     ...other,
     disabled: disabled,
@@ -1057,6 +1129,7 @@ const unique = {
   }),
   wrapper: 'DGN-UI-DateRangePicker-Wrapper',
   container: 'DGN-UI-DateRangePicker',
+  periodContainer: 'DGN-UI-DateRangePicker-Period',
   icon: 'DGN-UI-DateRangePicker-Icon',
   tooltip: 'DGN-UI-DateRangePicker-Tooltip',
   navigator: {
@@ -1132,6 +1205,29 @@ const DateOptionsCSS = ({
     ${displayFlex};
     padding-left: ${spacing(4)}px;
 `;
+const PeriodContainerCSS = ({
+  spacing
+}) => css`
+    ${displayFlex};
+    ${flexCol};
+    ${parseWidth('100%')};
+    ${itemsCenter}
+    margin: ${spacing([4, 0, 0, 0])} !important;
+`;
+const PeriodItemCSS = ({
+  spacing
+}) => css`
+    ${parseHeight(36)};
+    ${displayFlex};
+    ${itemsCenter};
+    ${parseWidth('100%')};
+    padding: ${spacing([2, 4])};
+    box-sizing: border-box;
+    &:hover {
+        ${bgColor(getColor('fill/hover'))};
+        ${cursorPointer};
+    }
+`;
 const pickerCSS = {
   backGr: ({
     zIndex
@@ -1262,6 +1358,17 @@ DateRangePicker.propTypes = {
   placeholder: PropTypes.string,
   /** If `true`, hitting escape will close component. */
   pressESCToClose: PropTypes.bool,
+  /** Options for period selector.
+   * example: {
+   *  enable: true,
+   *  dataSource: [],
+   *  displayExpr: "DisplayName",
+   *  valueFromExpr: "DateFrom",
+   *  valueToExpr: "DateTo",
+   *  valueFormat: "DD/MM/YYYY"
+   * }
+   */
+  periodOptions: PropTypes.object,
   /** If `true`, the component is readOnly. */
   readOnly: PropTypes.bool,
   /** If `true`, the input element is required. */

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

@@ -63,6 +63,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
     action = {},
     allowInput,
     allowSearch,
+    allowDuplicateValue,
     children,
     className,
     clearAble,
@@ -112,7 +113,9 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
     valueObjectDefault,
     viewType,
     defaultValue,
-    disabled
+    disabled,
+    selectAll,
+    selectAllLabel
   } = props;
   const selectBox = multiple && selectBoxProp === undefined ? true : selectBoxProp;
   const searchExpr = typeof searchExprProp === 'string' ? [searchExprProp] : searchExprProp;
@@ -176,6 +179,12 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
   const _DropdownItemCSS = DropdownItemCSS(multiple, selectBox, theme);
   const _DropdownRootCSS = DropdownRootCSS(_DropdownFormCSS.name, _DropdownInputCSS.name, theme);
   const _CheckBoxCSS = CheckBoxCSS(theme);
+  const handleDataSource = data => {
+    let dataCustom = (data !== undefined ? data : dataSource) || [];
+    return selectAll ? [{
+      [valueExpr]: 'all'
+    }, ...dataCustom] : dataCustom;
+  };
 
   /* Start handler */
   const setShowDropdown = () => {
@@ -311,17 +320,21 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
    */
   const displayValue = data => {
     let text = '';
+    let isReplace = true;
     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)) {
+      if (selectAll && (data === null || data === void 0 ? void 0 : data[valueExpr]) === 'all') {
+        isReplace = false;
+        text = selectAllLabel || getGlobal('selectAll');
+      } else 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, '');
+      if (isReplace) text = mask.toString().replace(regexInclude, '');
     }
     return text;
   };
@@ -389,7 +402,8 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
         type: 'p1'
       }, displayText);
       if (multiple && selectBox) {
-        const checked = Array.isArray(valueMulti) ? valueMulti.includes(value) : valueMulti.includes(value);
+        let checked = 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;
         items.push(jsx("div", {
@@ -402,6 +416,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
           },
           tabIndex: -1
         }, jsx(Checkbox, {
+          determinate: !(selectAll && (data === null || data === void 0 ? void 0 : data[valueExpr]) === 'all' && (valueMulti || []).length !== (dataSourceState || []).length - 1),
           css: _CheckBoxCSS,
           forTreeView: true,
           checked: checked,
@@ -437,7 +452,6 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
     }, items !== null && items !== void 0 && items.length ? items : EmptyDataText);
   };
   const mapTreeView = () => {
-    console.log('here');
     return jsx("div", {
       css: _DropdownListCSS,
       ref: dropdownListRef,
@@ -639,7 +653,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
           const total = data && data.total ? data.total : data === null || data === void 0 ? void 0 : data.length;
           setTotalState(total);
         }
-        setDataSourceState(isReset ? rows : dataSourceState.concat(rows));
+        setDataSourceState(handleDataSource(isReset ? rows : dataSourceState.concat(rows)));
       }
     };
     setLoadingState(true);
@@ -703,8 +717,10 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
     } else if (multiple) {
       if (!Array.isArray(currentValue[unique])) currentValue[unique] = [];
       // const newValueArr = [...currentValue[unique]];
-      const newValueArrState = [...valueMulti];
-      if (!newValueArrState.some(v => JSON.stringify(v) === JSON.stringify(value))) {
+      let newValueArrState = [...valueMulti];
+      if (selectAll && value === 'all') {
+        newValueArrState = e !== null && e !== void 0 && e.value ? dataSourceState.flatMap(item => (item === null || item === void 0 ? void 0 : item[valueExpr]) === 'all' ? [] : [item === null || item === void 0 ? void 0 : item[valueExpr]]) : [];
+      } else if (!newValueArrState.some(v => JSON.stringify(v) === JSON.stringify(value))) {
         // newValueArr.push(value);
         newValueArrState.push(value);
       } else {
@@ -717,7 +733,8 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
         data
       });
     } else {
-      const isChanged = currentValue[unique] !== value;
+      // biến allowDuplicateValue chỉ dùng trong trường hợp đặc biệt ID 300034
+      const isChanged = allowDuplicateValue ? allowDuplicateValue : currentValue[unique] !== value;
       if (isChanged) {
         if (valueProp === undefined) {
           allValue[unique].push(value);
@@ -914,7 +931,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
     setTotalState(total);
   }, [total]);
   useEffect(() => {
-    setDataSourceState(dataSource || []);
+    setDataSourceState(handleDataSource(dataSource || []));
   }, [dataSource]);
   useEffect(() => {
     setShowClear(clearAble && checkHasValue(valueProp !== null && valueProp !== void 0 ? valueProp : defaultValue) && !disabled && !readOnly && !loadingState);
@@ -1708,6 +1725,8 @@ Dropdown.propTypes = {
   }),
   /** If `true`, the input box for searching will be displayed. */
   allowSearch: PropTypes.bool,
+  /** If `true`, click on same item will add its value instead of remove it (better not use this, only for specific situation). */
+  allowDuplicateValue: PropTypes.bool,
   /** If `true`, the input value will be added when user hit Enter. */
   allowInput: PropTypes.bool,
   /** The content to be displayed inside the Dropdown box, such as TreeView. */
@@ -1811,6 +1830,10 @@ Dropdown.propTypes = {
   searchExpr: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
   /** Specifies the comparison operation used to search items. */
   searchMode: PropTypes.oneOf(['contains', 'startswith', 'equals']),
+  /** If `true`, show select all check box. */
+  selectAll: PropTypes.bool,
+  /** The content display for label of checkbox select all */
+  selectAllLabel: PropTypes.string,
   /** If `true`, checkboxes will be shown next to each dropdown item. */
   selectBox: PropTypes.bool,
   /** Inline style for the component. */

package/global/index.js

@@ -50,6 +50,7 @@ const globalObject = {
     yesterday: 'Hôm qua',
     thisWeek: 'Tuần này',
     thisMonth: 'Tháng này',
+    selectPeriod: 'Chọn theo kỳ',
     // Time Picker
     months: {
       full: ['tháng 01', 'tháng 02', 'tháng 03', 'tháng 04', 'tháng 05', 'tháng 06', 'tháng 07', 'tháng 08', 'tháng 09', 'tháng 10', 'tháng 11', 'tháng 12'],
@@ -130,6 +131,7 @@ const globalObject = {
     yesterday: 'Yesterday',
     thisWeek: 'This week',
     thisMonth: 'This month',
+    selectPeriod: 'Select period',
     // Time Picker
     months: {
       full: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
@@ -210,6 +212,7 @@ const globalObject = {
     yesterday: '昨天',
     thisWeek: '本周',
     thisMonth: '本月',
+    selectPeriod: '按期选择',
     // Time Picker
     months: {
       full: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],

package/icons/basic.js

@@ -3591,6 +3591,78 @@ export const Loading = /*#__PURE__*/memo(({
     fill: fillColor(color)
   }));
 });
+export const LoadingV2 = /*#__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", {
+      d: "M14.839 11.9628C14.8263 11.5706 14.8901 11.1797 15.0267 10.8146C15.1632 10.4495 15.3694 10.1178 15.6326 9.84012C15.8957 9.56247 16.2102 9.34477 16.5565 9.20052C16.9027 9.05628 17.2734 8.98856 17.6455 9.00158C18.0114 9.00011 18.3739 9.07538 18.712 9.22302C19.0501 9.37065 19.357 9.5877 19.6148 9.86153C19.8725 10.1354 20.0761 10.4605 20.2136 10.8181C20.3511 11.1756 20.4196 11.5584 20.4154 11.9442C20.408 12.7233 20.112 13.4684 19.5906 14.0206C19.0692 14.5728 18.3638 14.8883 17.6248 14.8997C17.2588 14.9002 16.8963 14.8246 16.5581 14.6771C16.22 14.5297 15.9126 14.3134 15.6538 14.0406C15.3951 13.7678 15.1899 13.4438 15.0501 13.0873C14.9102 12.7308 14.8385 12.3486 14.839 11.9628Z",
+      fill: fillColor(color)
+    }), /*#__PURE__*/React.createElement("path", {
+      d: "M6.40063 16.1997C5.90052 16.1997 5.47554 16.3747 5.12551 16.7246C4.77561 17.0749 4.60053 17.4998 4.60053 17.9999C4.60053 18.5001 4.77547 18.925 5.12551 19.2753C5.47567 19.6253 5.90065 19.8003 6.40063 19.8003C6.89234 19.8003 7.31518 19.6253 7.66941 19.2753C8.02351 18.9254 8.20056 18.5001 8.20056 17.9999C8.20056 17.4998 8.02356 17.0752 7.66941 16.7246C7.31513 16.375 6.89234 16.1997 6.40063 16.1997Z",
+      fill: fillColor(color)
+    }), /*#__PURE__*/React.createElement("path", {
+      d: "M5.99998 12.3999C5.99998 11.8499 5.80424 11.3792 5.41253 10.9872C5.02086 10.5956 4.54995 10.3998 3.99997 10.3998C3.44995 10.3998 2.97912 10.5956 2.58741 10.9872C2.19579 11.3789 2 11.8498 2 12.3999C2 12.9498 2.19575 13.4204 2.58741 13.8122C2.97912 14.204 3.44995 14.3998 3.99997 14.3998C4.54995 14.3998 5.02086 14.204 5.41253 13.8122C5.80424 13.4207 5.99998 12.9498 5.99998 12.3999Z",
+      fill: fillColor(color)
+    }), /*#__PURE__*/React.createElement("path", {
+      d: "M17.6001 7.80014C17.8749 7.80014 18.1107 7.70207 18.3063 7.50632C18.5021 7.3104 18.6002 7.0749 18.6002 6.79996C18.6002 6.52488 18.5021 6.28956 18.3063 6.09377C18.1106 5.89785 17.8749 5.79995 17.6001 5.79995C17.325 5.79995 17.0895 5.89802 16.8937 6.09377C16.698 6.2896 16.6 6.52488 16.6 6.79996C16.6 7.07503 16.698 7.3104 16.8937 7.50632C17.0895 7.70224 17.325 7.80014 17.6001 7.80014Z",
+      fill: fillColor(color)
+    }), /*#__PURE__*/React.createElement("path", {
+      d: "M6.39963 4.60009C5.7912 4.60009 5.27248 4.81471 4.8433 5.2438C4.41406 5.6729 4.19958 6.19167 4.19958 6.79996C4.19958 7.40848 4.41406 7.92702 4.8433 8.3563C5.27261 8.78553 5.79133 9.0001 6.39963 9.0001C7.00793 9.0001 7.52669 8.7854 7.95579 8.3563C8.38489 7.92702 8.59951 7.40835 8.59951 6.79996C8.59951 6.19167 8.38489 5.6729 7.95579 5.2438C7.52669 4.81471 7.00793 4.60009 6.39963 4.60009Z",
+      fill: fillColor(color)
+    }), /*#__PURE__*/React.createElement("path", {
+      d: "M20.8491 11.5497C20.6158 11.3164 20.3325 11.1998 19.9993 11.1998C19.6658 11.1998 19.3825 11.3164 19.1492 11.5497C18.9161 11.7831 18.7995 12.0665 18.7995 12.4C18.7995 12.7332 18.9161 13.017 19.1492 13.2498C19.3826 13.4832 19.6658 13.5998 19.9993 13.5998C20.3325 13.5998 20.616 13.4832 20.8491 13.2498C21.0825 13.0167 21.1989 12.7332 21.1989 12.4C21.1989 12.0667 21.0827 11.7832 20.8491 11.5497Z",
+      fill: fillColor(color)
+    }), /*#__PURE__*/React.createElement("path", {
+      d: "M17.5993 16.5998C17.2157 16.5998 16.8866 16.7372 16.6115 17.0123C16.3367 17.2871 16.1992 17.6164 16.1992 17.9999C16.1992 18.3832 16.3367 18.7125 16.6115 18.9876C16.8866 19.2627 17.2158 19.3999 17.5993 19.3999C17.9826 19.3999 18.3117 19.2624 18.5868 18.9876C18.8619 18.7126 18.9993 18.3834 18.9993 17.9999C18.9993 17.6164 18.8619 17.2874 18.5868 17.0123C18.3118 16.7372 17.9826 16.5998 17.5993 16.5998Z",
+      fill: fillColor(color)
+    }), /*#__PURE__*/React.createElement("path", {
+      d: "M12.0002 18.7996C11.5585 18.7996 11.1814 18.9561 10.8687 19.2687C10.5563 19.5812 10.4 19.9581 10.4 20.3998C10.4 20.8416 10.5562 21.2185 10.8687 21.531C11.1814 21.8436 11.5584 22 12.0002 22C12.4419 22 12.8189 21.8436 13.1314 21.531C13.444 21.2185 13.6002 20.8416 13.6002 20.3998C13.6002 19.9581 13.444 19.5812 13.1314 19.2687C12.8189 18.9561 12.4419 18.7996 12.0002 18.7996Z",
+      fill: fillColor(color)
+    }), /*#__PURE__*/React.createElement("path", {
+      d: "M11.9993 2C11.3328 2 10.7658 2.23322 10.2991 2.69989C9.83257 3.16659 9.59926 3.73339 9.59926 4.4C9.59926 5.06666 9.83248 5.63318 10.2991 6.09994C10.7658 6.56651 11.3326 6.79987 11.9993 6.79987C12.6662 6.79987 13.2327 6.56664 13.6993 6.09994C14.1658 5.6334 14.3991 5.06666 14.3991 4.4C14.3991 3.73343 14.1658 3.16677 13.6993 2.69989C13.2327 2.23335 12.6662 2 11.9993 2Z",
+      fill: fillColor(color)
+    }));
+  }
+  return /*#__PURE__*/React.createElement("svg", {
+    width: width || 20,
+    height: height || 20,
+    viewBox: "0 0 20 20",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M4.40063 14.1997C3.90052 14.1997 3.47554 14.3747 3.12551 14.7246C2.77561 15.0749 2.60053 15.4998 2.60053 15.9999C2.60053 16.5001 2.77547 16.925 3.12551 17.2753C3.47567 17.6253 3.90065 17.8003 4.40063 17.8003C4.89234 17.8003 5.31518 17.6253 5.66941 17.2753C6.02351 16.9254 6.20056 16.5001 6.20056 15.9999C6.20056 15.4998 6.02356 15.0752 5.66941 14.7246C5.31513 14.375 4.89234 14.1997 4.40063 14.1997Z",
+    fill: fillColor(color)
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M3.99998 10.3999C3.99998 9.84993 3.80424 9.37924 3.41253 8.98722C3.02086 8.59556 2.54995 8.39977 1.99997 8.39977C1.44995 8.39977 0.979123 8.5956 0.587413 8.98722C0.19579 9.37893 0 9.84976 0 10.3999C0 10.9498 0.195746 11.4204 0.587413 11.8122C0.979123 12.204 1.44995 12.3998 1.99997 12.3998C2.54995 12.3998 3.02086 12.204 3.41253 11.8122C3.80424 11.4207 3.99998 10.9498 3.99998 10.3999Z",
+    fill: fillColor(color)
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M15.6001 5.80014C15.8749 5.80014 16.1107 5.70207 16.3063 5.50632C16.5021 5.3104 16.6002 5.0749 16.6002 4.79996C16.6002 4.52488 16.5021 4.28956 16.3063 4.09377C16.1106 3.89785 15.8749 3.79995 15.6001 3.79995C15.325 3.79995 15.0895 3.89802 14.8937 4.09377C14.698 4.2896 14.6 4.52488 14.6 4.79996C14.6 5.07503 14.698 5.3104 14.8937 5.50632C15.0895 5.70224 15.325 5.80014 15.6001 5.80014Z",
+    fill: fillColor(color)
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M4.39963 2.60009C3.7912 2.60009 3.27248 2.81471 2.8433 3.2438C2.41406 3.6729 2.19958 4.19167 2.19958 4.79996C2.19958 5.40848 2.41406 5.92702 2.8433 6.3563C3.27261 6.78553 3.79133 7.0001 4.39963 7.0001C5.00793 7.0001 5.52669 6.7854 5.95579 6.3563C6.38489 5.92702 6.59951 5.40835 6.59951 4.79996C6.59951 4.19167 6.38489 3.6729 5.95579 3.2438C5.52669 2.81471 5.00793 2.60009 4.39963 2.60009Z",
+    fill: fillColor(color)
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M18.8491 9.54974C18.6158 9.31638 18.3325 9.19984 17.9993 9.19984C17.6658 9.19984 17.3825 9.31638 17.1492 9.54974C16.9161 9.78309 16.7995 10.0665 16.7995 10.4C16.7995 10.7332 16.9161 11.017 17.1492 11.2498C17.3826 11.4832 17.6658 11.5998 17.9993 11.5998C18.3325 11.5998 18.616 11.4832 18.8491 11.2498C19.0825 11.0167 19.1989 10.7332 19.1989 10.4C19.1989 10.0667 19.0827 9.78322 18.8491 9.54974Z",
+    fill: fillColor(color)
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M15.5993 14.5998C15.2157 14.5998 14.8866 14.7372 14.6115 15.0123C14.3367 15.2871 14.1992 15.6164 14.1992 15.9999C14.1992 16.3832 14.3367 16.7125 14.6115 16.9876C14.8866 17.2627 15.2158 17.3999 15.5993 17.3999C15.9826 17.3999 16.3117 17.2624 16.5868 16.9876C16.8619 16.7126 16.9993 16.3834 16.9993 15.9999C16.9993 15.6164 16.8619 15.2874 16.5868 15.0123C16.3118 14.7372 15.9826 14.5998 15.5993 14.5998Z",
+    fill: fillColor(color)
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M10.0002 16.7996C9.55854 16.7996 9.18141 16.9561 8.86873 17.2687C8.55635 17.5812 8.40005 17.9581 8.40005 18.3998C8.40005 18.8416 8.55617 19.2185 8.86873 19.531C9.18141 19.8436 9.55837 20 10.0002 20C10.4419 20 10.8189 19.8436 11.1314 19.531C11.444 19.2185 11.6002 18.8416 11.6002 18.3998C11.6002 17.9581 11.444 17.5812 11.1314 17.2687C10.8189 16.9561 10.4419 16.7996 10.0002 16.7996Z",
+    fill: fillColor(color)
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M9.99934 0C9.33277 0 8.76585 0.233223 8.29914 0.699887C7.83257 1.16659 7.59926 1.73339 7.59926 2.4C7.59926 3.06666 7.83248 3.63318 8.29914 4.09994C8.76585 4.56651 9.33264 4.79987 9.99934 4.79987C10.6662 4.79987 11.2327 4.56664 11.6993 4.09994C12.1658 3.6334 12.3991 3.06666 12.3991 2.4C12.3991 1.73343 12.1658 1.16677 11.6993 0.699887C11.2327 0.233354 10.6662 0 9.99934 0Z",
+    fill: fillColor(color)
+  }));
+});
 export const Locate = /*#__PURE__*/memo(({
   width,
   height,
@@ -7379,6 +7451,30 @@ export const Bank = /*#__PURE__*/memo(({
     fill: fillColor(color)
   }));
 });
+export const Book = /*#__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", {
+    d: "M12.8667 17.5168C13.6667 17.1223 14.457 16.8264 15.2375 16.6293C16.018 16.4319 16.8388 16.3333 17.7 16.3333C18.3222 16.3333 18.9541 16.3833 19.5958 16.4832C20.2374 16.5833 20.8166 16.7222 21.3333 16.9V6.45C20.7723 6.18333 20.182 5.98608 19.5625 5.85825C18.943 5.73058 18.3222 5.66675 17.7 5.66675C16.8388 5.66675 15.9999 5.79175 15.1833 6.04175C14.3666 6.29175 13.5944 6.65008 12.8667 7.11675V17.5168ZM12.0332 20C11.1999 19.3667 10.2944 18.8778 9.31675 18.5333C8.33892 18.1889 7.33333 18.0167 6.3 18.0167C5.42783 18.0167 4.4945 18.1862 3.5 18.525C2.5055 18.8638 1.67217 19.2722 1 19.75V5.38325C1.71117 4.94992 2.54308 4.61108 3.49575 4.36675C4.44858 4.12225 5.38333 4 6.3 4C7.32217 4 8.318 4.13608 9.2875 4.40825C10.257 4.68058 11.1722 5.0945 12.0332 5.65C12.8833 5.0945 13.7874 4.68058 14.7458 4.40825C15.7041 4.13608 16.6888 4 17.7 4C18.6167 4 19.5514 4.125 20.5042 4.375C21.4569 4.625 22.2888 4.96108 23 5.38325V19.75C22.3445 19.2612 21.5153 18.8501 20.5125 18.5167C19.5097 18.1834 18.5722 18.0167 17.7 18.0167C16.6667 18.0167 15.6722 18.1917 14.7168 18.5417C13.7611 18.8917 12.8666 19.3778 12.0332 20ZM14 9.73325V8.36675C14.55 8.13342 15.1125 7.95842 15.6875 7.84175C16.2625 7.72508 16.8667 7.66675 17.5 7.66675C17.9333 7.66675 18.3583 7.70008 18.775 7.76675C19.1917 7.83342 19.6 7.91675 20 8.01675V9.28325C19.6 9.13325 19.1958 9.02075 18.7875 8.94575C18.3792 8.87075 17.95 8.83325 17.5 8.83325C16.8667 8.83325 16.2583 8.91242 15.675 9.07075C15.0917 9.22908 14.5333 9.44992 14 9.73325ZM14 15.2332V13.85C14.55 13.6167 15.1125 13.4444 15.6875 13.3333C16.2625 13.2222 16.8667 13.1668 17.5 13.1668C17.9333 13.1668 18.3583 13.2001 18.775 13.2668C19.1917 13.3334 19.6 13.4168 20 13.5168V14.7832C19.6 14.6333 19.1958 14.5208 18.7875 14.4458C18.3792 14.3707 17.95 14.3333 17.5 14.3333C16.8667 14.3333 16.2583 14.4082 15.675 14.5582C15.0917 14.7083 14.5333 14.9332 14 15.2332ZM14 12.4832V11.1167C14.55 10.8834 15.1125 10.7084 15.6875 10.5917C16.2625 10.4751 16.8667 10.4167 17.5 10.4167C17.9333 10.4167 18.3583 10.4501 18.775 10.5167C19.1917 10.5834 19.6 10.6667 20 10.7667V12.0332C19.6 11.8832 19.1958 11.7707 18.7875 11.6957C18.3792 11.6207 17.95 11.5832 17.5 11.5832C16.8667 11.5832 16.2583 11.6624 15.675 11.8207C15.0917 11.9791 14.5333 12.1999 14 12.4832Z",
+    fill: fillColor(color)
+  })) : /*#__PURE__*/React.createElement("svg", {
+    width: width || 22,
+    height: height || 16,
+    viewBox: "0 0 22 16",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M11.8667 13.5168C12.6667 13.1223 13.457 12.8264 14.2375 12.6293C15.018 12.4319 15.8388 12.3333 16.7 12.3333C17.3222 12.3333 17.9541 12.3833 18.5958 12.4832C19.2374 12.5833 19.8166 12.7222 20.3333 12.9V2.45C19.7723 2.18333 19.182 1.98608 18.5625 1.85825C17.943 1.73058 17.3222 1.66675 16.7 1.66675C15.8388 1.66675 14.9999 1.79175 14.1833 2.04175C13.3666 2.29175 12.5944 2.65008 11.8667 3.11675V13.5168ZM11.0332 16C10.1999 15.3667 9.29442 14.8778 8.31675 14.5333C7.33892 14.1889 6.33333 14.0167 5.3 14.0167C4.42783 14.0167 3.4945 14.1862 2.5 14.525C1.5055 14.8638 0.672167 15.2722 0 15.75V1.38325C0.711167 0.949917 1.54308 0.611083 2.49575 0.36675C3.44858 0.12225 4.38333 0 5.3 0C6.32217 0 7.318 0.136084 8.2875 0.40825C9.257 0.680584 10.1722 1.0945 11.0332 1.65C11.8833 1.0945 12.7874 0.680584 13.7458 0.40825C14.7041 0.136084 15.6888 0 16.7 0C17.6167 0 18.5514 0.125 19.5042 0.375C20.4569 0.625 21.2888 0.961084 22 1.38325V15.75C21.3445 15.2612 20.5153 14.8501 19.5125 14.5167C18.5097 14.1834 17.5722 14.0167 16.7 14.0167C15.6667 14.0167 14.6722 14.1917 13.7168 14.5417C12.7611 14.8917 11.8666 15.3778 11.0332 16ZM13 5.73325V4.36675C13.55 4.13342 14.1125 3.95842 14.6875 3.84175C15.2625 3.72508 15.8667 3.66675 16.5 3.66675C16.9333 3.66675 17.3583 3.70008 17.775 3.76675C18.1917 3.83342 18.6 3.91675 19 4.01675V5.28325C18.6 5.13325 18.1958 5.02075 17.7875 4.94575C17.3792 4.87075 16.95 4.83325 16.5 4.83325C15.8667 4.83325 15.2583 4.91242 14.675 5.07075C14.0917 5.22908 13.5333 5.44992 13 5.73325ZM13 11.2332V9.85C13.55 9.61667 14.1125 9.44442 14.6875 9.33325C15.2625 9.22225 15.8667 9.16675 16.5 9.16675C16.9333 9.16675 17.3583 9.20008 17.775 9.26675C18.1917 9.33342 18.6 9.41675 19 9.51675V10.7832C18.6 10.6333 18.1958 10.5208 17.7875 10.4458C17.3792 10.3707 16.95 10.3333 16.5 10.3333C15.8667 10.3333 15.2583 10.4082 14.675 10.5582C14.0917 10.7083 13.5333 10.9332 13 11.2332ZM13 8.48325V7.11675C13.55 6.88342 14.1125 6.70842 14.6875 6.59175C15.2625 6.47508 15.8667 6.41675 16.5 6.41675C16.9333 6.41675 17.3583 6.45008 17.775 6.51675C18.1917 6.58342 18.6 6.66675 19 6.76675V8.03325C18.6 7.88325 18.1958 7.77075 17.7875 7.69575C17.3792 7.62075 16.95 7.58325 16.5 7.58325C15.8667 7.58325 15.2583 7.66242 14.675 7.82075C14.0917 7.97908 13.5333 8.19992 13 8.48325Z",
+    fill: fillColor(color)
+  }));
+});
 export const Bookmark = /*#__PURE__*/memo(({
   width,
   height,
@@ -7645,6 +7741,44 @@ export const PaperApproval = /*#__PURE__*/memo(({
     fill: fillColor(color)
   }));
 });
+export const PaperCancel = /*#__PURE__*/memo(({
+  width,
+  height,
+  color = 'system/active',
+  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: "M16 11.41L14.59 10L12 12.59L9.41 10L8 11.41L10.59 14L8 16.59L9.41 18L12 15.41L14.59 18L16 16.59L13.41 14L16 11.41Z",
+    fill: fillColor(color)
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M14 2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.89 22 5.99 22H18C19.1 22 20 21.1 20 20V8L14 2ZM18 20H6V4H13V9H18V20Z",
+    fill: fillColor(color)
+  })) : /*#__PURE__*/React.createElement("svg", {
+    width: width || 16,
+    height: height || 20,
+    viewBox: "0 0 16 20",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M12 9.41L10.59 8L8 10.59L5.41 8L4 9.41L6.59 12L4 14.59L5.41 16L8 13.41L10.59 16L12 14.59L9.41 12L12 9.41Z",
+    fill: fillColor(color)
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M10 0H2C0.9 0 0 0.9 0 2V18C0 19.1 0.89 20 1.99 20H14C15.1 20 16 19.1 16 18V6L10 0ZM14 18H2V2H9V7H14V18Z",
+    fill: fillColor(color)
+  }));
+});
 export const SaveFilled = /*#__PURE__*/memo(({
   width = 24,
   height = 25,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "diginet-core-ui",
-  "version": "1.4.54",
+  "version": "1.4.55",
   "description": "The DigiNet core ui",
   "homepage": "https://diginet.com.vn",
   "main": "index.js",

package/readme.md

@@ -42,6 +42,16 @@ npm test
 
 ## Changelog
 
+## 1.4.55
+- \[Added\]: Icon – Add IconMenu MHRM09N1401, MHRM09N1402
+- \[Added\]: Icon – Add Icon Book
+- \[Added\]: Icon – Add Icon PaperCancel, LoadingV2
+- \[Added\]: Icon – Add IconMenu MHRM21N0001
+- \[Added\]: Dropdown  - Add 'selectAll' prop to allow multiple selection
+- \[Added\]: ButtonMore  – Add new property to ButtonMore
+- \[Added\]: Dropdown  – Add support for allowing Dropdown to reselect the same value multiple times
+- \[Added\]: DateRangePicker  – Add a new mode to change the UI of DateRangePicker
+
 ## 1.4.54
 - \[Added\]: Icon – Add Icon Camera
 - \[Fixed\]: Treeview  - Fix bug Treeview keeps the search bar visible while scrolling