diginet-core-ui 1.3.74 → 1.3.75-beta.2

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

@@ -8,15 +8,100 @@ import ControlComp from '../control';
 import PropTypes from 'prop-types';
 import theme from '../../../theme/settings';
 import { render } from 'react-dom';
-import { randomString, updatePosition, date as moment, capitalizeSentenceCase, isEqual } from '../../../utils';
+import { randomString, updatePosition, date as moment, capitalizeSentenceCase, isEqual, classNames } from '../../../utils';
 import { getGlobal } from '../../../global';
 import { generateCalendarCSS, onUpdateNavigator, renderHeader, renderNavigator } from '../calendar/function';
 import locale from '../../../locale';
-import { useTheme } from '../../../theme';
+import { alignCenter, borderRadius4px, cursorPointer, displayBlock, displayNone, flexCol, flexRow, justifyEnd, parseWidth, pointerEventsNone, positionFixed, textCenter, userSelectNone, whiteSpaceNoWrap } from '../../../styles/general';
 const {
-  zIndex
-} = useTheme();
+  colors: {
+    system: {
+      white
+    }
+  },
+  spacing,
+  zIndex: zIndexCORE
+} = theme;
+
+const toLocalTimestamp = t => {
+  if (typeof t === 'object' && t.getTime) {
+    t = t.getTime();
+  }
+
+  if (typeof t === 'string' && !t.match(/\d{13}/)) {
+    t = Date.parse(t).getTime();
+  }
+
+  t = parseInt(t, 10) - new Date().getTimezoneOffset() * 60 * 1000;
+  return t;
+};
+
+const getDaysFrom1970 = t => {
+  return Math.floor(toLocalTimestamp(t) / 86400000);
+};
+
+const countDays = (start, end, startFromZero) => {
+  return Math.abs(getDaysFrom1970(start) - getDaysFrom1970(end)) + (startFromZero ? 0 : 1);
+};
+
+const formatValue = (value, format, utc = false) => {
+  return moment(value).format(format, utc);
+};
+
+const getDateOfWeek = date => {
+  let day = date.getDay();
+  if (day === 0) day = 7;
+  return day - 1;
+};
+
+const isValidDate = v => {
+  if (!v || v === null) return false;
+
+  if (Object.prototype.toString.call(v) === '[object Date]') {
+    return true;
+  }
+
+  if (!isNaN(Date.parse(new Date(v)))) {
+    return true;
+  }
+
+  return false;
+};
+
+const isValidValues = v => {
+  if (!v || !Array.isArray(v) || v.length !== 2) {
+    return false;
+  }
+
+  if (isValidDate(v[0]) && isValidDate(v[1]) && +moment(v[0]).diff(v[1]) <= 0) {
+    return true;
+  }
+
+  return false;
+};
+
+const isToday = day => {
+  return +moment(day).diff(new Date().setHours(0, 0, 0, 0)) === 0 ? unique.day.today : '';
+};
+
+const isLimit = (day, max, min) => {
+  return isBefore(min, day) || isAfter(max, day) ? unique.day.limit : '';
+};
+
+const isBefore = (min, time) => {
+  return min && isValidDate(min) && moment(time).diff(min) < 0;
+};
+
+const isAfter = (max, time) => {
+  return max && isValidDate(max) && moment(time).diff(max) > 0;
+};
+
+const parseDate = day => {
+  return Date.parse(new Date(day));
+};
+
 const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  action = {},
   actionIconAt,
   controls,
   clearAble,
@@ -24,7 +109,7 @@ const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   disabled,
   displayFormat,
   error,
-  errorProps,
+  helperTextProps,
   inputProps,
   inputStyle,
   label,
@@ -80,196 +165,10 @@ const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     right: useRef(null),
     content: useRef(null)
   };
-  useImperativeHandle(reference, () => ({
-    get: () => {
-      return ref.current;
-    }
-  }));
-  const [id] = useState(randomString(6, {
-    allowSymbol: false
-  }));
-  const unique = {
-    backGr: 'DGN-UI-Portal',
-    close: 'DGN-UI-DateRangePickerV2-close',
-    cancel: 'DGN-UI-DateRangePickerV2-cancel',
-    confirm: 'DGN-UI-DateRangePickerV2-confirm',
-    divider: 'DGN-UI-DateRangePickerV2-Divider',
-    disabled: 'DGN-UI-DateRangePickerV2-disabled',
-    error: 'DGN-UI-DateRangePickerV2-error',
-    focus: 'DGN-UI-DateRangePickerV2-focus',
-    footer: 'DGN-UI-DateRangePickerV2-Footer',
-    picker: 'DGN-UI-DateRangePickerV2-Picker-' + id,
-    wrapper: 'DGN-UI-DateRangePickerV2-Wrapper',
-    container: 'DGN-UI-DateRangePickerV2',
-    icon: 'DGN-UI-DateRangePickerV2-Icon',
-    tooltip: 'DGN-UI-DateRangePickerV2-Tooltip',
-    navigator: {
-      navigator: 'DGN-UI-DateRangePickerV2-Navigator',
-      around: 'DGN-UI-DateRangePickerV2-Navigator-Around',
-      center: 'DGN-UI-DateRangePickerV2-Navigator-Center'
-    },
-    table: {
-      container: 'DGN-UI-DateRangePickerV2-Table-Container',
-      table: 'DGN-UI-DateRangePickerV2-Table-Table',
-      header: 'DGN-UI-DateRangePickerV2-Table-Header',
-      raw: 'DGN-UI-DateRangePickerV2-Table-Raw',
-      data: 'DGN-UI-DateRangePickerV2-Table-Data'
-    },
-    day: {
-      day: 'DGN-UI-DateRangePickerV2-Day',
-      week: 'DGN-UI-DateRangePickerV2-Week',
-      today: 'DGN-UI-DateRangePickerV2-Day-today',
-      active: 'DGN-UI-DateRangePickerV2-Day-active',
-      limit: 'DGN-UI-DateRangePickerV2-Day-limit',
-      from: 'DGN-UI-DateRangePickerV2-Day-from',
-      to: 'DGN-UI-DateRangePickerV2-Day-to',
-      between: 'DGN-UI-DateRangePickerV2-Day-between'
-    }
-  };
   const closeText = getGlobal(['close']);
   const cancelText = getGlobal(['cancel']);
   const confirmText = getGlobal(['confirm']);
   const unitText = getGlobal([unitCount]);
-  const iconAreaCSS = css`
-                align-items: center;
-                color: inherit;
-                display: flex;
-                width: 24px;
-                & span {
-                    padding: 0;
-                }
-                .${unique.icon} {
-                    cursor: pointer;
-                    opacity: 0;
-                    transition: display 50ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
-                        opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 50ms;
-                    display: none;
-                    will-change: display, opacity;
-                }
-                .${unique.icon}-accept {
-                    opacity: 1;
-                    display: block;
-                }
-            `;
-  const hiddenStyle = {
-    opacity: 0,
-    display: 'none'
-  };
-  const activeStyle = {
-    opacity: 1,
-    pointerEvents: 'none',
-    display: 'block'
-  };
-  const controlContainerCSS = css`
-                display: flex;
-                justify-content: flex-end;
-                margin: 0 16px 16px;
-            `;
-  const buttonProps = {
-    style: {
-      display: 'none',
-      margin: '0 2px',
-      padding: '7px 8px',
-      visibility: 'hidden'
-    }
-  };
-
-  const typographyProps = className => {
-    return {
-      className,
-      color: 'inherit',
-      style: {
-        alignItems: 'center',
-        borderRadius: '50%',
-        display: 'flex',
-        height: 24,
-        justifyContent: 'center',
-        margin: 'auto',
-        pointerEvents: 'none',
-        transition: 'background-color 150ms linear',
-        width: 24
-      },
-      type: 'h6'
-    };
-  };
-
-  const dividerProps = {
-    direction: 'vertical',
-    className: unique.divider,
-    height: '100%',
-    style: {
-      height: '226px',
-      margin: '18px 2px 0px'
-    }
-  };
-  const pickerCSS = {
-    backGr: 'background-color: transparent; inset: 0px; pointer-events: auto; position: fixed; z-index: 9001;',
-    container: css`
-                    background-color: ${theme.colors.white};
-                    border-radius: ${theme.border.radius};
-                    box-shadow: ${theme.boxShadows.large};
-                    display: flex;
-                    flex-flow: column;
-                    .${unique.wrapper} {
-                        display: flex;
-                        min-width: 633px;
-                    }
-                    .${unique.tooltip} {
-                        background-color: rgba(21, 26, 48, 0.9);
-                        border-radius: ${theme.border.radius};
-                        height: 18px;
-                        min-width: 65px;
-                        padding: 3px 6px;
-                        pointer-events: none;
-                        position: fixed;
-                        text-align: center;
-                        transition: left 0.05s ease-in, top 0.05s ease-in;
-                        user-select: none;
-                        vertical-align: middle;
-                        visibility: hidden;
-                        white-space: nowrap;
-                        will-change: left top visibility;
-                        z-index: ${zIndex(3)};
-                    }
-                    @media only screen and (max-width: 599px) {
-                        max-width: 400px;
-                        .${unique.wrapper} {
-                            flex-direction: column;
-                            min-width: 260px;
-                        }
-                        .${unique.divider} {
-                            height: 1px !important;
-                            margin: 0px 16px !important;
-                            width: calc(100% - 32px) !important;
-                        }
-                    }
-                `,
-    picker: (position, width) => css`
-                    border-radius: ${theme.border.radius};
-                    height: max-content;
-                    left: ${position.left}px;
-                    max-width: 805px;
-                    min-width: ${window.innerWidth <= 633 ? 300 : 633}px;
-                    opacity: 0;
-                    position: fixed;
-                    top: ${position.top}px;
-                    transform: scale(0);
-                    transform-origin: ${position.transformOrigin};
-                    transition: opacity 120ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
-                        transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-                    width: ${width}px;
-                    z-index: ${zIndex(2)};
-                `,
-    active: {
-      opacity: 1,
-      transform: 'scale(1)'
-    },
-    remove: {
-      opacity: 0,
-      pointerEvents: 'none',
-      transform: 'scale(0)'
-    }
-  };
   const updateValues = useCallback(v => {
     values.current = v;
     setValues();
@@ -291,63 +190,6 @@ const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     setValueTo();
   }, [valueTo]);
 
-  const toLocalTimestamp = t => {
-    if (typeof t === 'object' && t.getTime) {
-      t = t.getTime();
-    }
-
-    if (typeof t === 'string' && !t.match(/\d{13}/)) {
-      t = Date.parse(t).getTime();
-    }
-
-    t = parseInt(t, 10) - new Date().getTimezoneOffset() * 60 * 1000;
-    return t;
-  };
-
-  const getDaysFrom1970 = t => {
-    return Math.floor(toLocalTimestamp(t) / 86400000);
-  };
-
-  const countDays = (start, end) => {
-    return Math.abs(getDaysFrom1970(start) - getDaysFrom1970(end)) + (startFromZero ? 0 : 1);
-  };
-
-  const formatValue = (value, format, utc = false) => {
-    return moment(value).format(format, utc);
-  };
-
-  const getDateOfWeek = date => {
-    let day = date.getDay();
-    if (day === 0) day = 7;
-    return day - 1;
-  };
-
-  const isValidDate = v => {
-    if (!v || v === null) return false;
-
-    if (Object.prototype.toString.call(v) === '[object Date]') {
-      return true;
-    }
-
-    if (!isNaN(Date.parse(new Date(v)))) {
-      return true;
-    }
-
-    return false;
-  };
-
-  const isValidValues = v => {
-    if (!v || !Array.isArray(v) || v.length !== 2) {
-      return false;
-    }
-
-    if (isValidDate(v[0]) && isValidDate(v[1]) && +moment(v[0]).diff(v[1]) <= 0) {
-      return true;
-    }
-
-    return false;
-  };
-
   const isActive = day => {
     if (values.current[0] && +moment(values.current[0]).diff(day) === 0) {
       if (values.current[1] && +moment(values.current[0]).diff(values.current[1]) < 0) {
@@ -362,10 +204,6 @@ const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     return '';
   };
 
-  const isToday = day => {
-    return +moment(day).diff(new Date().setHours(0, 0, 0, 0)) === 0 ? unique.day.today : '';
-  };
-
   const isBetween = dayParsed => {
     if (values.current[0] && values.current[1] && parseDate(values.current[0]) < dayParsed && dayParsed < parseDate(values.current[1])) {
       return unique.day.between;
@@ -374,18 +212,6 @@ const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     return '';
   };
 
-  const isLimit = (day, max, min) => {
-    return isBefore(min, day) || isAfter(max, day) ? unique.day.limit : '';
-  };
-
-  const isBefore = (min, time) => {
-    return min && isValidDate(min) && moment(time).diff(min) < 0;
-  };
-
-  const isAfter = (max, time) => {
-    return max && isValidDate(max) && moment(time).diff(max) > 0;
-  };
-
   const countDay = v => {
     if (v && Array.isArray(v) && v.length === 2) {
       return Number(+moment(v[1]).diff(v[0]) + (startFromZero ? 0 : 1));
@@ -447,10 +273,6 @@ const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
   };
 
-  const parseDate = day => {
-    return Date.parse(new Date(day));
-  };
-
   const renderCalendar = (time, type) => {
     time = new Date(time);
     const firstDay = new Date(new Date(time).setDate(1)),
@@ -472,7 +294,7 @@ const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       tableData.push(jsx("td", {
         key: `previous_month-${prevDate - i + 1}`,
         "data-time": day - 1,
-        className: `${[unique.table.data, 'previous_month', isBetween(day - 1)].join(' ').trim().replace(/ +(?= )/g, '')}`
+        className: classNames(unique.table.data, 'previous_month', isBetween(day - 1))
       }, jsx("span", {
         className: unique.day.day
       })));
@@ -487,9 +309,23 @@ const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       tableData.push(jsx("td", {
         key: `this_month-${i + 1}`,
         "data-time": Date.parse(day),
-        className: `${[unique.table.data, 'this_month', isToday(day), isActive(day), (max && max !== undefined || min && min !== undefined) && isLimit(day, new Date(max).setHours(0, 0, 0, 0), new Date(min).setHours(0, 0, 0, 0)), isBetween(Date.parse(day))].join(' ').trim().replace(/ +(?= )/g, '')}`,
+        className: classNames(unique.table.data, 'this_month', isToday(day), isActive(day), (max && max !== undefined || min && min !== undefined) && isLimit(day, new Date(max).setHours(0, 0, 0, 0), new Date(min).setHours(0, 0, 0, 0)), isBetween(Date.parse(day))),
         onClick: onDayClick
-      }, jsx(Typography, { ...typographyProps(unique.day.day)
+      }, jsx(Typography, {
+        className: unique.day.day,
+        color: 'inherit',
+        style: {
+          alignItems: 'center',
+          borderRadius: '50%',
+          display: 'flex',
+          height: 24,
+          justifyContent: 'center',
+          margin: 'auto',
+          pointerEvents: 'none',
+          transition: 'background-color 150ms linear',
+          width: 24
+        },
+        type: 'h6'
       }, i + 1)));
     }
     /**
@@ -502,7 +338,7 @@ const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       tableData.push(jsx("td", {
         key: `next_month-${i + 1}`,
         "data-time": i < 6 - weekDateLast && day + 1,
-        className: `${[unique.table.data, 'next_month', i < 6 - weekDateLast && isBetween(day + 1)].join(' ').trim().replace(/ +(?= )/g, '')}`
+        className: classNames(unique.table.data, 'next_month', i < 6 - weekDateLast && isBetween(day + 1))
       }, jsx("span", {
         className: unique.day.day
       })));
@@ -512,7 +348,7 @@ const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       for (let j = 0; j < 7; j++) {
         tableRaw.push(tableData[7 * i + j] || jsx("td", {
           key: 7 * i + j,
-          className: `${[unique.table.data, 'next_month'].join(' ').trim().replace(/ +(?= )/g, '')}`
+          className: classNames(unique.table.data, 'next_month')
         }));
       }
 
@@ -569,7 +405,7 @@ const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
   };
 
-  const getPickerStyle = () => {
+  const getPickerStyle = anchor => {
     const {
       innerHeight,
       innerWidth
@@ -579,8 +415,8 @@ const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       height,
       top,
       width
-    } = ipConRef.current.getBoundingClientRect();
-    const pickerHeight = width < 567 ? controls ? 550 : 495 : controls ? 310 : 256;
+    } = anchor instanceof Element ? anchor.getBoundingClientRect() : ipConRef.current.getBoundingClientRect();
+    const pickerHeight = innerWidth < 567 ? controls ? 550 : 495 : controls ? 310 : 256;
     let style = {};
     style.left = left;
     style.top = top + height + 4;
@@ -588,7 +424,7 @@ const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
     if (style.top + pickerHeight > innerHeight) {
       if (top > pickerHeight) {
-        style.top = top - pickerHeight - 4;
+        style.top = innerHeight - pickerHeight - 4;
         style.transformOrigin = '50% 80%';
       } else {
         style.top = Math.round((innerHeight - pickerHeight - 16) / 2);
@@ -631,10 +467,10 @@ const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     return background;
   };
 
-  const createPicker = () => {
+  const createPicker = anchor => {
     const picker = document.createElement('div');
     picker.id = unique.picker;
-    picker.style.cssText = getPickerStyle();
+    picker.style.cssText = getPickerStyle(anchor);
     return picker;
   };
 
@@ -869,7 +705,7 @@ const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
 
     if (values.current[0] && !values.current[1]) {
-      const dates = Math.abs(countDays(new Date(values.current), new Date(currentTime)));
+      const dates = Math.abs(countDays(new Date(values.current), new Date(currentTime), startFromZero));
       const tooltip = tooltipRef.current;
 
       if (onShowTooltip && dates > 0) {
@@ -919,9 +755,9 @@ const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     renderCalendar(valueTo.current, 'to');
   };
 
-  const openPicker = () => {
+  const openPicker = anchor => {
     const backGr = createBackground();
-    const picker = createPicker();
+    const picker = createPicker(anchor);
     render(pickerComp, backGr.appendChild(picker));
     const arr = pickerRef.current.getElementsByTagName('td');
     updateTempValues(values.current.length === 1 ? [values.current[0], values.current[0]] : values.current);
@@ -1116,8 +952,23 @@ const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       closePicker();
     };
   }, [actionIconAt, clearAble, controls, disabled, displayFormat, max, min, pressESCToClose, readOnly, startFromZero, unitCount, viewType]);
+  useImperativeHandle(reference, () => {
+    const currentRef = ref.current || {};
+    currentRef.element = ref.current;
+    currentRef.get = ref.current;
+    const _instance = {
+      show: el => openPicker(el),
+      close: closePicker,
+      ...action
+    }; // methods
+
+    _instance.__proto__ = {}; // hidden methods
+
+    currentRef.instance = _instance;
+    return currentRef;
+  });
   const iconComp = jsx("div", {
-    css: iconAreaCSS,
+    css: IconAreaCSS,
     ref: iconRef
   }, jsx(ButtonIcon, {
     viewType: 'ghost',
@@ -1135,7 +986,7 @@ const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const endIcon = actionIconAt === 'end' && iconComp;
   const startIcon = actionIconAt === 'start' && iconComp;
   const footerMemo = jsx("div", {
-    css: controlContainerCSS,
+    css: ControlContainerCSS,
     className: unique.footer,
     ref: footerRef
   }, jsx(Button, { ...buttonProps,
@@ -1171,7 +1022,7 @@ const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     className: unique.tooltip,
     ref: tooltipRef
   }, jsx(Typography, {
-    color: theme.colors.white,
+    color: white,
     type: 'p2'
   }));
   const pickerComp = jsx("div", {
@@ -1179,7 +1030,14 @@ const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     ref: pickerRef
   }, jsx("div", {
     className: unique.wrapper
-  }, leftCalendarComp, jsx(Divider, { ...dividerProps
+  }, leftCalendarComp, jsx(Divider, {
+    direction: 'vertical',
+    className: unique.divider,
+    height: '100%',
+    style: {
+      height: '226px',
+      margin: spacing([4.5, 0.5, 0])
+    }
   }), rightCalendarComp), tooltipComp, !!controls && footerMemo);
   return jsx(ControlComp, { ...props,
     disabled: disabled,
@@ -1209,10 +1067,162 @@ const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       className: 'non-effect allow-disabled'
     },
     endIcon: endIcon
-  }), !!error && jsx(HelperText, { ...errorProps,
+  }), !!error && jsx(HelperText, { ...helperTextProps,
     disabled: disabled
   }, error));
 }));
+const unique = {
+  backGr: 'DGN-UI-Portal',
+  close: 'DGN-UI-DateRangePickerV2-close',
+  cancel: 'DGN-UI-DateRangePickerV2-cancel',
+  confirm: 'DGN-UI-DateRangePickerV2-confirm',
+  divider: 'DGN-UI-DateRangePickerV2-Divider',
+  disabled: 'DGN-UI-DateRangePickerV2-disabled',
+  error: 'DGN-UI-DateRangePickerV2-error',
+  focus: 'DGN-UI-DateRangePickerV2-focus',
+  footer: 'DGN-UI-DateRangePickerV2-Footer',
+  picker: 'DGN-UI-DateRangePickerV2-Picker-' + randomString(6, {
+    allowSymbol: false
+  }),
+  wrapper: 'DGN-UI-DateRangePickerV2-Wrapper',
+  container: 'DGN-UI-DateRangePickerV2',
+  icon: 'DGN-UI-DateRangePickerV2-Icon',
+  tooltip: 'DGN-UI-DateRangePickerV2-Tooltip',
+  navigator: {
+    navigator: 'DGN-UI-DateRangePickerV2-Navigator',
+    around: 'DGN-UI-DateRangePickerV2-Navigator-Around',
+    center: 'DGN-UI-DateRangePickerV2-Navigator-Center'
+  },
+  table: {
+    container: 'DGN-UI-DateRangePickerV2-Table-Container',
+    table: 'DGN-UI-DateRangePickerV2-Table-Table',
+    header: 'DGN-UI-DateRangePickerV2-Table-Header',
+    raw: 'DGN-UI-DateRangePickerV2-Table-Raw',
+    data: 'DGN-UI-DateRangePickerV2-Table-Data'
+  },
+  day: {
+    day: 'DGN-UI-DateRangePickerV2-Day',
+    week: 'DGN-UI-DateRangePickerV2-Week',
+    today: 'DGN-UI-DateRangePickerV2-Day-today',
+    active: 'DGN-UI-DateRangePickerV2-Day-active',
+    limit: 'DGN-UI-DateRangePickerV2-Day-limit',
+    from: 'DGN-UI-DateRangePickerV2-Day-from',
+    to: 'DGN-UI-DateRangePickerV2-Day-to',
+    between: 'DGN-UI-DateRangePickerV2-Day-between'
+  }
+};
+const hiddenStyle = {
+  opacity: 0,
+  display: 'none'
+};
+const activeStyle = {
+  opacity: 1,
+  pointerEvents: 'none',
+  display: 'block'
+};
+const buttonProps = {
+  style: {
+    display: 'none',
+    margin: spacing([0, 0.5]),
+    padding: spacing([1.75, 2]),
+    visibility: 'hidden'
+  }
+};
+const IconAreaCSS = css`
+    ${flexRow};
+    ${alignCenter};
+    ${parseWidth(24)};
+    color: inherit;
+    & span {
+        padding: 0;
+    }
+    .${unique.icon} {
+        ${displayNone};
+        ${cursorPointer};
+        opacity: 0;
+        transition: display 50ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 50ms;
+        will-change: display, opacity;
+    }
+    .${unique.icon}-accept {
+        ${displayBlock};
+        opacity: 1;
+    }
+`;
+const ControlContainerCSS = css`
+    ${flexRow};
+    ${justifyEnd};
+    margin: ${spacing([0, 4, 4])};
+`;
+const pickerCSS = {
+  backGr: `
+        background-color: transparent; 
+        inset: 0px; pointer-events: auto; 
+        position: fixed; 
+        z-index: ${zIndexCORE(1)};`,
+  container: css`
+        ${flexCol};
+        ${borderRadius4px};
+        background-color: ${white};
+        box-shadow: ${theme.boxShadows.large};
+        .${unique.wrapper} {
+            ${flexRow};
+            min-width: 633px;
+        }
+        .${unique.tooltip} {
+            ${borderRadius4px};
+            ${pointerEventsNone};
+            ${positionFixed};
+            ${textCenter};
+            ${userSelectNone};
+            ${whiteSpaceNoWrap};
+            background-color: rgba(21, 26, 48, 0.9);
+            height: 18px;
+            min-width: 65px;
+            padding: ${spacing([0.75, 1.5])};
+            transition: left 0.05s ease-in, top 0.05s ease-in;
+            vertical-align: middle;
+            visibility: hidden;
+            will-change: left top visibility;
+            z-index: ${zIndexCORE(3)};
+        }
+        @media only screen and (max-width: 599px) {
+            max-width: 400px;
+            .${unique.wrapper} {
+                flex-direction: column;
+                min-width: 260px;
+            }
+            .${unique.divider} {
+                height: 1px !important;
+                margin: ${spacing([0, 4])} !important;
+                width: calc(100% - 32px) !important;
+            }
+        }
+    `,
+  picker: (position, width) => css`
+        ${borderRadius4px};
+        ${positionFixed};
+        ${parseWidth(width)};
+        height: max-content;
+        left: ${position.left}px;
+        max-width: 805px;
+        min-width: ${window.innerWidth <= 633 ? 300 : 633}px;
+        opacity: 0;
+        top: ${position.top}px;
+        transform: scale(0);
+        transform-origin: ${position.transformOrigin};
+        transition: opacity 120ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+        z-index: ${zIndexCORE(2)};
+    `,
+  active: {
+    opacity: 1,
+    transform: 'scale(1)'
+  },
+  remove: {
+    opacity: 0,
+    pointerEvents: 'none',
+    transform: 'scale(0)'
+  }
+};
 DateRangePickerV2.defaultProps = {
   actionIconAt: 'end',
   clearAble: false,
@@ -1231,82 +1241,85 @@ DateRangePickerV2.defaultProps = {
   viewType: 'underlined'
 };
 DateRangePickerV2.propTypes = {
-  /** action icons position */
+  /** Position of action icons. */
   actionIconAt: PropTypes.oneOf(['end', 'start']),
 
-  /** display the clear icon if true */
+  /** If `true`, display the clear icon. */
   clearAble: PropTypes.bool,
 
-  /** if 'true' the calendar will have a footer controls */
+  /** If `true`, the calendar will have a footer controls. */
   controls: PropTypes.bool,
 
-  /** the count unit when select */
+  /** The count unit when select. */
   unitCount: PropTypes.oneOf(['day', 'night']),
 
-  /** the default value of the component */
+  /** Default value of the component. */
   defaultValue: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.instanceOf(Date)), PropTypes.arrayOf(PropTypes.string)]),
 
-  /** if 'true' the form control will be disabled */
+  /** If `true`, the component is disabled. */
   disabled: PropTypes.bool,
 
-  /** format to display value   */
+  /** Format to display value. */
   displayFormat: PropTypes.oneOfType([PropTypes.oneOf(['DD/MM/YYYY', 'MM/DD/YYYY', 'YYYY/MM/DD', 'DD-MM-YYYY', 'MM-DD-YYYY', 'YYYY-MM-DD']), PropTypes.string]),
 
-  /** error of the form control */
+  /** Error displayed below input. */
   error: PropTypes.string,
 
-  /** inputProps are properties of the input element */
+  /**  [Props](https://core.diginet.com.vn/ui/?path=/story/form-control-text-helpertext) of helper text. */
+  helperTextProps: PropTypes.object,
+
+  /** [Props](https://core.diginet.com.vn/ui/?path=/story/form-control-input-inputbase) of input base */
   inputProps: PropTypes.object,
 
-  /** inputStyle is style of input element */
+  /** Consult [InputBase's](https://core.diginet.com.vn/ui/?path=/story/form-control-input-inputbase) documents. */
   inputStyle: PropTypes.object,
 
-  /** content of the label element */
+  /** The label of the component. */
   label: PropTypes.string,
 
-  /** labelProps are properties if the label element */
+  /** [Props](https://core.diginet.com.vn/ui/?path=/docs/form-control-text-label--simple) of label. */
   labelProps: PropTypes.object,
 
-  /** min value of date picker */
+  /** Min value of date picker. */
   min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
 
-  /** max value of date picker */
+  /** Max value of date picker. */
   max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
 
-  /** a callback function when value input change */
+  /** Callback fired when the value is changed. */
   onChange: PropTypes.func,
 
-  /** hints for input */
+  /** The short hint displayed in the input before the user enters a value. */
   placeholder: PropTypes.string,
 
-  /** allow close Popup when press ESC */
+  /** If `true`, hitting escape will close component. */
   pressESCToClose: PropTypes.bool,
 
-  /** status read only of input */
+  /** If `true`, the component is readOnly. */
   readOnly: PropTypes.bool,
 
-  /** required state of the form control */
+  /** If `true`, the input element is required. */
   required: PropTypes.bool,
 
-  /** format of the returned value   */
+  /** Format of the returned value. */
   returnFormat: PropTypes.oneOfType([PropTypes.oneOf(['DD/MM/YYYY', 'MM/DD/YYYY', 'YYYY/MM/DD', 'DD-MM-YYYY', 'MM-DD-YYYY', 'YYYY-MM-DD']), PropTypes.string]),
 
   /** If `true`, show unit count. */
   showUnitCount: PropTypes.bool,
 
-  /** counter with start with 0 or 1 */
+  /** Counter with start with 0 or 1. */
   startFromZero: PropTypes.bool,
 
-  /** style of the component */
+  /** Style inline of component. */
   style: PropTypes.object,
 
-  /** text align of the input */
+  /** Text align of the input. */
   textAlign: PropTypes.oneOf(['center', 'end', 'start']),
 
-  /** value of the component */
+  /** The value of the input element, required for a controlled component. */
   value: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string])),
 
-  /** view type of the form control */
+  /** The variant to use. */
   viewType: PropTypes.oneOf(['outlined', 'underlined'])
 };
 export default DateRangePickerV2;