diginet-core-ui 1.3.75-beta.5 → 1.3.76

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

@@ -1774,14 +1774,12 @@ Attachment.defaultProps = {
   maxFile: Infinity,
   multiple: true,
   readOnly: false,
-  style: {},
   uploadErrorInfo: {
     maxFile: getGlobal(['errorDefault', 'maxFile']),
     maxSize: getGlobal(['errorDefault', 'maxSize']),
     fileType: getGlobal(['errorDefault', 'fileType']),
     existingFile: getGlobal(['errorDefault', 'existingFile'])
-  },
-  viewType: 'detail'
+  }
 };
 Attachment.propTypes = {
   /** File types that can be accepted. */

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

@@ -8,100 +8,15 @@ 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, classNames } from '../../../utils';
+import { randomString, updatePosition, date as moment, capitalizeSentenceCase, isEqual } from '../../../utils';
 import { getGlobal } from '../../../global';
 import { generateCalendarCSS, onUpdateNavigator, renderHeader, renderNavigator } from '../calendar/function';
 import locale from '../../../locale';
-import { alignCenter, borderRadius4px, cursorPointer, displayBlock, displayNone, flexCol, flexRow, justifyEnd, parseWidth, pointerEventsNone, positionFixed, textCenter, userSelectNone, whiteSpaceNoWrap } from '../../../styles/general';
+import { useTheme } from '../../../theme';
 const {
-  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));
-};
-
+  zIndex
+} = useTheme();
 const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  action = {},
   actionIconAt,
   controls,
   clearAble,
@@ -109,7 +24,7 @@ const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   disabled,
   displayFormat,
   error,
-  helperTextProps,
+  errorProps,
   inputProps,
   inputStyle,
   label,
@@ -165,10 +80,196 @@ 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();
@@ -190,6 +291,63 @@ 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) {
@@ -204,6 +362,10 @@ 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;
@@ -212,6 +374,18 @@ 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));
@@ -273,6 +447,10 @@ 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)),
@@ -294,7 +472,7 @@ const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       tableData.push(jsx("td", {
         key: `previous_month-${prevDate - i + 1}`,
         "data-time": day - 1,
-        className: classNames(unique.table.data, 'previous_month', isBetween(day - 1))
+        className: `${[unique.table.data, 'previous_month', isBetween(day - 1)].join(' ').trim().replace(/ +(?= )/g, '')}`
       }, jsx("span", {
         className: unique.day.day
       })));
@@ -309,23 +487,9 @@ const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       tableData.push(jsx("td", {
         key: `this_month-${i + 1}`,
         "data-time": Date.parse(day),
-        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))),
+        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, '')}`,
         onClick: onDayClick
-      }, 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'
+      }, jsx(Typography, { ...typographyProps(unique.day.day)
       }, i + 1)));
     }
     /**
@@ -338,7 +502,7 @@ const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       tableData.push(jsx("td", {
         key: `next_month-${i + 1}`,
         "data-time": i < 6 - weekDateLast && day + 1,
-        className: classNames(unique.table.data, 'next_month', i < 6 - weekDateLast && isBetween(day + 1))
+        className: `${[unique.table.data, 'next_month', i < 6 - weekDateLast && isBetween(day + 1)].join(' ').trim().replace(/ +(?= )/g, '')}`
       }, jsx("span", {
         className: unique.day.day
       })));
@@ -348,7 +512,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: classNames(unique.table.data, 'next_month')
+          className: `${[unique.table.data, 'next_month'].join(' ').trim().replace(/ +(?= )/g, '')}`
         }));
       }
 
@@ -405,7 +569,7 @@ const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
   };
 
-  const getPickerStyle = anchor => {
+  const getPickerStyle = () => {
     const {
       innerHeight,
       innerWidth
@@ -415,8 +579,8 @@ const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       height,
       top,
       width
-    } = anchor instanceof Element ? anchor.getBoundingClientRect() : ipConRef.current.getBoundingClientRect();
-    const pickerHeight = innerWidth < 567 ? controls ? 550 : 495 : controls ? 310 : 256;
+    } = ipConRef.current.getBoundingClientRect();
+    const pickerHeight = width < 567 ? controls ? 550 : 495 : controls ? 310 : 256;
     let style = {};
     style.left = left;
     style.top = top + height + 4;
@@ -424,7 +588,7 @@ const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
     if (style.top + pickerHeight > innerHeight) {
       if (top > pickerHeight) {
-        style.top = innerHeight - pickerHeight - 4;
+        style.top = top - pickerHeight - 4;
         style.transformOrigin = '50% 80%';
       } else {
         style.top = Math.round((innerHeight - pickerHeight - 16) / 2);
@@ -467,10 +631,10 @@ const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     return background;
   };
 
-  const createPicker = anchor => {
+  const createPicker = () => {
     const picker = document.createElement('div');
     picker.id = unique.picker;
-    picker.style.cssText = getPickerStyle(anchor);
+    picker.style.cssText = getPickerStyle();
     return picker;
   };
 
@@ -705,7 +869,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), startFromZero));
+      const dates = Math.abs(countDays(new Date(values.current), new Date(currentTime)));
       const tooltip = tooltipRef.current;
 
       if (onShowTooltip && dates > 0) {
@@ -755,9 +919,9 @@ const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     renderCalendar(valueTo.current, 'to');
   };
 
-  const openPicker = anchor => {
+  const openPicker = () => {
     const backGr = createBackground();
-    const picker = createPicker(anchor);
+    const picker = createPicker();
     render(pickerComp, backGr.appendChild(picker));
     const arr = pickerRef.current.getElementsByTagName('td');
     updateTempValues(values.current.length === 1 ? [values.current[0], values.current[0]] : values.current);
@@ -952,23 +1116,8 @@ 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',
@@ -986,7 +1135,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,
@@ -1022,7 +1171,7 @@ const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     className: unique.tooltip,
     ref: tooltipRef
   }, jsx(Typography, {
-    color: white,
+    color: theme.colors.white,
     type: 'p2'
   }));
   const pickerComp = jsx("div", {
@@ -1030,14 +1179,7 @@ const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     ref: pickerRef
   }, jsx("div", {
     className: unique.wrapper
-  }, leftCalendarComp, jsx(Divider, {
-    direction: 'vertical',
-    className: unique.divider,
-    height: '100%',
-    style: {
-      height: '226px',
-      margin: spacing([4.5, 0.5, 0])
-    }
+  }, leftCalendarComp, jsx(Divider, { ...dividerProps
   }), rightCalendarComp), tooltipComp, !!controls && footerMemo);
   return jsx(ControlComp, { ...props,
     disabled: disabled,
@@ -1067,162 +1209,10 @@ const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       className: 'non-effect allow-disabled'
     },
     endIcon: endIcon
-  }), !!error && jsx(HelperText, { ...helperTextProps,
+  }), !!error && jsx(HelperText, { ...errorProps,
     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,
@@ -1241,85 +1231,82 @@ DateRangePickerV2.defaultProps = {
   viewType: 'underlined'
 };
 DateRangePickerV2.propTypes = {
-  /** Position of action icons. */
+  /** action icons position */
   actionIconAt: PropTypes.oneOf(['end', 'start']),
 
-  /** If `true`, display the clear icon. */
+  /** display the clear icon if true */
   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']),
 
-  /** Default value of the component. */
+  /** the default value of the component */
   defaultValue: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.instanceOf(Date)), PropTypes.arrayOf(PropTypes.string)]),
 
-  /** If `true`, the component is disabled. */
+  /** if 'true' the form control will be 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 displayed below input. */
+  /** error of the form control */
   error: PropTypes.string,
 
-  /**  [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 are properties of the input element */
   inputProps: PropTypes.object,
 
-  /** Consult [InputBase's](https://core.diginet.com.vn/ui/?path=/story/form-control-input-inputbase) documents. */
+  /** inputStyle is style of input element */
   inputStyle: PropTypes.object,
 
-  /** The label of the component. */
+  /** content of the label element */
   label: PropTypes.string,
 
-  /** [Props](https://core.diginet.com.vn/ui/?path=/docs/form-control-text-label--simple) of label. */
+  /** labelProps are properties if the label element */
   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]),
 
-  /** Callback fired when the value is changed. */
+  /** a callback function when value input change */
   onChange: PropTypes.func,
 
-  /** The short hint displayed in the input before the user enters a value. */
+  /** hints for input */
   placeholder: PropTypes.string,
 
-  /** If `true`, hitting escape will close component. */
+  /** allow close Popup when press ESC */
   pressESCToClose: PropTypes.bool,
 
-  /** If `true`, the component is readOnly. */
+  /** status read only of input */
   readOnly: PropTypes.bool,
 
-  /** If `true`, the input element is required. */
+  /** required state of the form control */
   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 inline of component. */
+  /** style of the component */
   style: PropTypes.object,
 
-  /** Text align of the input. */
+  /** text align of the input */
   textAlign: PropTypes.oneOf(['center', 'end', 'start']),
 
-  /** The value of the input element, required for a controlled component. */
+  /** value of the component */
   value: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string])),
 
-  /** The variant to use. */
+  /** view type of the form control */
   viewType: PropTypes.oneOf(['outlined', 'underlined'])
 };
 export default DateRangePickerV2;

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

@@ -57,13 +57,6 @@ const checkHasValue = value => {
   return Array.isArray(value) ? value.length > 0 : value === 0 || !!value;
 };
 
-const convertData = (dt, valueExpr) => {
-  let data = dt || [];
-  let valueTemp = Array.isArray(data) ? data : [data];
-  valueTemp = valueTemp.map(i => i[valueExpr] || i);
-  return valueTemp;
-};
-
 const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   viewType,
   itemMode,
@@ -137,10 +130,10 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const [openState, setOpenState] = useState(false);
   const [showClear, setShowClear] = useState(false);
   const [textValue, setTextValue] = useState('');
-  let valueTemp = valueProp || defaultValue; // only mode multi
+  let valueTemp = valueProp || defaultValue || [];
 
-  if (multiple) {
-    valueTemp = convertData(valueTemp, valueExpr);
+  if (multiple && valueTemp && !Array.isArray(valueTemp)) {
+    valueTemp = [valueTemp];
   }
 
   const [valueMulti, setValueMulti] = useState(valueTemp);
@@ -1219,7 +1212,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
 
     if (multiple && valueProp) {
-      setValueMulti(convertData(valueProp, valueExpr));
+      setValueMulti(!Array.isArray(valueProp) ? [valueProp] : valueProp);
     } // Close dropdown treeview by children when select item
 
 
@@ -1377,18 +1370,10 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       let text = '';
 
       if (data) {
-        var _mask;
-
-        displayExpr = typeof renderSelectedItem === 'string' ? renderSelectedItem : 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 _displayExpr4;
-
-          mask = (_displayExpr4 = displayExpr) === null || _displayExpr4 === void 0 ? void 0 : _displayExpr4.replace(regexBetween, _ => data[_]);
-        }
+        var _displayExpr4;
 
-        text = (_mask = mask) === null || _mask === void 0 ? void 0 : _mask.replace(regexInclude, '');
+        const mask = (data === null || data === void 0 ? void 0 : data[displayExpr]) || ((_displayExpr4 = displayExpr) === null || _displayExpr4 === void 0 ? void 0 : _displayExpr4.replace(regexBetween, _ => data[_]));
+        text = mask === null || mask === void 0 ? void 0 : mask.replace(regexInclude, '');
       }
 
       let item = null;

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

@@ -23,16 +23,16 @@ const {
 } = useTheme();
 const Label = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
-  children,
-  className,
-  color,
   disabled,
-  hoverTooltip,
-  id,
-  lineClamp,
   readOnly,
   required,
+  className,
+  children,
   type,
+  lineClamp,
+  hoverTooltip,
+  id,
+  color,
   ...props
 }, reference) => {
   const ref = useRef(null);

package/components/popover/index.js

@@ -13,9 +13,6 @@ const {
   colors: {
     system: {
       white
-    },
-    fill: {
-      tooltip: fillTooltip
     }
   },
   typography: {
@@ -132,7 +129,6 @@ const getDirectionPopover = direction => {
   }
 };
 
-const backgroundMap = new Map([['light', white], ['dark', fillTooltip]]);
 const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
   anchor,
@@ -496,10 +492,7 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     const currentRef = ref.current || {};
     currentRef.element = ref.current;
     const _instance = {
-      show: el => {
-        if (el) setElement(el);
-        !openState && el ? updatePositionPopover(el, onOpenPopover()) : onOpenPopover();
-      },
+      show: el => !openState && el ? updatePositionPopover(el, onOpenPopover()) : onOpenPopover(),
       close: () => onClosePopover(),
       setPosition: el => updatePositionPopover(el),
       ...action
@@ -511,10 +504,7 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
     currentRef.instance = _instance;
 
-    currentRef.show = el => {
-      if (el) setElement(el);
-      !openState && el ? updatePositionPopover(el, onOpenPopover()) : onOpenPopover();
-    };
+    currentRef.show = el => !openState && el ? updatePositionPopover(el, onOpenPopover()) : onOpenPopover();
 
     currentRef.close = onClosePopover;
 
@@ -582,9 +572,8 @@ const PopoverContainerCSS = (bgColor, width, height) => css`
     transition: opacity 0.3s ease;
     pointer-events: initial;
     opacity: 0;
-    background-color: ${backgroundMap.get(bgColor) || bgColor};
+    background-color: ${bgColor};
     box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-    ${bgColor === 'dark' && `color: ${white};`}
 `;
 
 const PopoverArrowCSS = bgColor => css`
@@ -593,7 +582,7 @@ const PopoverArrowCSS = bgColor => css`
     ${parseWidthHeight(0)};
     border-left: 6px solid transparent;
     border-right: 6px solid transparent;
-    border-bottom: 6px solid ${backgroundMap.get(bgColor) || bgColor};
+    border-bottom: 6px solid ${bgColor};
 `;
 
 Popover.defaultProps = {
@@ -602,7 +591,7 @@ Popover.defaultProps = {
     horizontal: 'center'
   },
   arrow: false,
-  bgColor: 'light',
+  bgColor: white,
   className: '',
   clickOutsideToClose: true,
   fullScreen: false,
@@ -641,7 +630,7 @@ Popover.propTypes = {
   arrow: PropTypes.bool,
 
   /** Background color of the component. */
-  bgColor: PropTypes.oneOfType([PropTypes.oneOf(['light', 'dark']), PropTypes.string]),
+  bgColor: PropTypes.string,
 
   /** The content of the component. */
   children: PropTypes.node,

package/components/tab/tab-container.js

@@ -107,8 +107,8 @@ TabContainer.propTypes = {
   /** Any props else. */
   props: PropTypes.any,
 
-  /**
-   * Ref methods.
+  /**
+   * Ref methods.
    */
   reference: ref
 };

package/components/tab/tab-header.js

@@ -169,8 +169,8 @@ TabHeader.propTypes = {
   /** Any props else. */
   props: PropTypes.any,
 
-  /**
-   * Ref methods.
+  /**
+   * Ref methods.
    */
   reference: ref
 };

package/components/tab/tab-panel.js

@@ -98,8 +98,8 @@ TabPanel.propTypes = {
   /** Any props else. */
   props: PropTypes.any,
 
-  /**
-   * Ref methods.
+  /**
+   * Ref methods.
    */
   reference: ref
 };

package/components/tab/tab.js

@@ -111,7 +111,7 @@ const TabItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       css: _IndicatorCSS,
       className: 'Indicator'
     }));
-  }, [children, className, color, disabled, endIcon, index, label, labelProps, level, onClick, props, startIcon, style, isVertical, tabIndexState]);
+  }, [children, className, color, disabled, endIcon, index, label, level, onClick, props, startIcon, style, isVertical, tabIndexState]);
 }));
 
 const TabButtonCSS = (color, isVertical) => css`
@@ -229,8 +229,8 @@ TabItem.propTypes = {
   /** Any props else. */
   props: PropTypes.any,
 
-  /**
-   * Ref methods.
+  /**
+   * Ref methods.
    */
   reference: ref
 };

package/package.json

@@ -1,72 +1,42 @@
 {
   "name": "diginet-core-ui",
-  "version": "1.3.75-beta.5",
-  "description": "",
+  "version": "1.3.76",
+  "description": "The DigiNet core ui",
+  "homepage": "https://diginet.com.vn",
   "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",
-    "test-storybook": "test-storybook --url http://localhost:9050"
+    "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"
   },
-  "lint-staged": {
-    "*/**/*.{js,jsx,json}": [
-      "prettier --write",
-      "git add"
-    ]
+  "repository": {
+    "type": "git",
+    "url": "git+https://diginetvn@bitbucket.org/diginetvn/diginet-core-ui.git"
   },
-  "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.37.0"
-  }
+  "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"
 }

package/readme.md

@@ -38,6 +38,17 @@ npm test
 ```
 
 ## Changelog
+## 1.3.76
+- \[Fixed\]: Checkbox – Fix bug not return e.target.value
+- \[Fixed\]: NumberInput – Fix e.target in onChange is not element
+- \[Changed\]: Tab – Add useMemo in TabContainer, TabHeader, TabItem, TabPanel
+- \[Changed\]: CircularProgress – Allow prop color, percentColor use CUI colors
+- \[Fixed\]: Tooltip – Fix tooltip container width height
+- \[Fixed\]: Datepicker – Fix width related Tooltip
+- \[Fixed\]: InputBase – Fix not receive new value state
+- \[Fixed\]: HelperText – Fix margin top not match design
+- \[Fixed\]: Dropdown – Fix placeholder show multiline
+
 ## 1.3.75
 - \[Fixed\]: Typography – Fix word-break css