diginet-core-ui 1.3.90-beta.6 → 1.3.91

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

@@ -1301,8 +1301,7 @@ Attachment.defaultProps = {
     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/calendar/function.js

@@ -61,80 +61,78 @@ const generateCalendarCSS = (unique, boxShadow = true, onClickActive = true) =>
         padding: 0;
         table-layout: fixed;
         .${unique.table.data} {
-            &:not(.empty) {
-                ${cursorPointer};
-                ${positionRelative};
-                ${textCenter};
-                ${userSelectNone};
-                ${textColor('text.main')};
-                &:nth-of-type(7n - 1) {
-                    ${textColor('info8')};
-                }
-                &:nth-of-type(7n) {
-                    ${textColor('danger8')};
-                }
-                &.next_month,
-                &.previous_month,
-                &.${unique.day.limit} {
-                    opacity: 0.25;
-                }
-                &.${unique.day.limit} {
-                    ${pointerEventsNone};
-                    ${cursorDefault};
-                }
-                &:hover {
-                    span.${unique.day.day} {
-                        ${bgColor('fill.hover')};
-                    }
+            ${cursorPointer};
+            ${positionRelative};
+            ${textCenter};
+            ${userSelectNone};
+            ${textColor('text.main')};
+            &:nth-of-type(7n - 1) {
+                ${textColor('info8')};
+            }
+            &:nth-of-type(7n) {
+                ${textColor('danger8')};
+            }
+            &.next_month,
+            &.previous_month,
+            &.${unique.day.limit} {
+                opacity: 0.25;
+            }
+            &.${unique.day.limit} {
+                ${pointerEventsNone};
+                ${cursorDefault};
+            }
+            &:hover {
+                span.${unique.day.day} {
+                    ${bgColor('fill.hover')};
                 }
-                ${onClickActive && css`
-                    &:active {
-                        span.${unique.day.day} {
-                            ${bgColor('fill.pressed')};
-                        }
-                    }
-                `}
-                &.${unique.day.active} {
+            }
+            ${onClickActive && css`
+                &:active {
                     span.${unique.day.day} {
-                        ${bgColor('fill.focus')};
+                        ${bgColor('fill.pressed')};
                     }
                 }
-                &.${unique.day.today} {
-                    span {
-                        ${boxBorder};
-                        ${border(1, 'system.active')};
-                    }
+            `}
+            &.${unique.day.active} {
+                span.${unique.day.day} {
+                    ${bgColor('fill.focus')};
                 }
-                &.${unique.day.between} {
-                    opacity: 1;
-                    &::before {
-                        ${bgColor('fill.hover')};
-                    }
+            }
+            &.${unique.day.today} {
+                span {
+                    ${boxBorder};
+                    ${border(1, 'system.active')};
                 }
-                &.${unique.day.from} {
-                    opacity: 1;
-                    &::before {
-                        ${bgColor('fill.hover')};
-                        border-bottom-left-radius: 12px;
-                        border-top-left-radius: 12px;
-                        left: calc((100% - 24px) / 2);
-                    }
+            }
+            &.${unique.day.between} {
+                opacity: 1;
+                &::before {
+                    ${bgColor('fill.hover')};
                 }
-                &.${unique.day.to} {
-                    opacity: 1;
-                    &::before {
-                        ${bgColor('fill.hover')};
-                        border-bottom-right-radius: 12px;
-                        border-top-right-radius: 12px;
-                        right: calc((100% - 24px) / 2);
-                    }
+            }
+            &.${unique.day.from} {
+                opacity: 1;
+                &::before {
+                    ${bgColor('fill.hover')};
+                    border-bottom-left-radius: 12px;
+                    border-top-left-radius: 12px;
+                    left: calc((100% - 24px) / 2);
                 }
-                ::before {
-                    ${positionAbsolute};
-                    ${inset('1px -2px')};
-                    content: '';
+            }
+            &.${unique.day.to} {
+                opacity: 1;
+                &::before {
+                    ${bgColor('fill.hover')};
+                    border-bottom-right-radius: 12px;
+                    border-top-right-radius: 12px;
+                    right: calc((100% - 24px) / 2);
                 }
             }
+            ::before {
+                ${positionAbsolute};
+                ${inset('1px -2px')};
+                content: '';
+            }
         }
         .${unique.table.header} {
             ${userSelectNone};

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

@@ -7,12 +7,17 @@ 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, justifyEnd, left, mg, parseHeight, parseMaxWidth, parseMinWidth, parseWidthHeight, pd, pointerEventsNone, positionFixed, textCenter, top, userSelectNone, whiteSpaceNoWrap } from "../../../styles/general";
+import { itemsCenter, borderRadius4px, cursorPointer, displayBlock, displayNone, flexCol, flexRow, justifyEnd, parseHeight, parseMaxWidth, parseMinWidth, parseWidth, parseWidthHeight, pointerEventsNone, positionFixed, textCenter, userSelectNone, whiteSpaceNoWrap } from "../../../styles/general";
 import { useTheme } from "../../../theme";
 import { capitalizeSentenceCase, classNames, date as moment, isEqual, randomString, updatePosition } from "../../../utils";
 import { generateCalendarCSS, onUpdateNavigator, renderHeader, renderNavigator } from "../calendar/function";
 import ControlComp from "../control";
 const {
+  colors: {
+    system: {
+      white: systemWhite
+    }
+  },
   boxShadows: {
     large: boxShadowsLarge
   },
@@ -255,7 +260,7 @@ const DateRangePicker = /*#__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), 'empty')
+        className: classNames(unique.table.data, 'previous_month', isBetween(day - 1))
       }, jsx("span", {
         className: unique.day.day
       })));
@@ -295,7 +300,7 @@ const DateRangePicker = /*#__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), 'empty')
+        className: classNames(unique.table.data, 'next_month', i < 6 - weekDateLast && isBetween(day + 1))
       }, jsx("span", {
         className: unique.day.day
       })));
@@ -806,11 +811,32 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     if (ipRef.current.value !== '') {
       update(values.current);
     }
+    // if (disabled) {
+    //     iconRef.current.childNodes[0].style.pointerEvents = 'none';
+    //     closePicker();
+    // } else if (!readOnly) {
+    //     ipRef.current.addEventListener('focus', onInputFocus);
+    // } else {
+    //     iconRef.current.childNodes[0].style.pointerEvents = 'none';
+    //     closePicker();
+    // }
+
     if (isEnable) {
+      // iconRef.current.childNodes[0].style.pointerEvents = 'none';
       closePicker();
     }
     return () => {
       if (!iconRef.current || !ipRef.current) return;
+      // if (disabled) {
+      //     iconRef.current.childNodes[0].style.pointerEvents = null;
+      // } else if (!readOnly) {
+      //     ipRef.current.removeEventListener('focus', onInputFocus);
+      // } else {
+      //     iconRef.current.childNodes[0].style.pointerEvents = null;
+      // }
+      // if (isEnable) {
+      //     iconRef.current.childNodes[0].style.pointerEvents = null;
+      // }
       closePicker();
     };
   }, [actionIconAt, clearAble, controls, disabled, displayFormat, max, min, pressESCToClose, readOnly, startFromZero, unitCount, viewType]);
@@ -835,7 +861,7 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     onClick: triggerFocus,
     className: `${unique.icon} ${unique.icon}-accept`,
     viewBox: true,
-    name: 'Calendar'
+    name: 'CalendarNew'
   }), jsx(ButtonIcon, {
     viewType: 'ghost',
     onClick: onClear,
@@ -885,7 +911,7 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     className: unique.tooltip,
     ref: tooltipRef
   }, jsx(Typography, {
-    color: 'system.white',
+    color: systemWhite,
     type: 'p2'
   }));
   const pickerComp = jsx("div", {
@@ -995,6 +1021,13 @@ const buttonProps = {
   }
 };
 const IconAreaCSS = css`
+    ${flexRow};
+    ${itemsCenter};
+    ${parseWidth(24)};
+    color: inherit;
+    & span {
+        padding: 0;
+    }
     .${unique.icon} {
         ${displayNone};
         ${cursorPointer};
@@ -1008,10 +1041,9 @@ const IconAreaCSS = css`
     }
 `;
 const ControlContainerCSS = css`
-    ${displayFlex};
     ${flexRow};
     ${justifyEnd};
-    ${mg([0, 4, 4])};
+    margin: ${spacing([0, 4, 4])};
 `;
 const pickerCSS = {
   backGr: `
@@ -1020,13 +1052,11 @@ const pickerCSS = {
         position: fixed; 
         z-index: ${zIndexCORE(1)};`,
   container: css`
-        ${displayFlex};
         ${flexCol};
         ${borderRadius4px};
-        ${bgColor('system.white')};
+        background-color: ${systemWhite};
         box-shadow: ${boxShadowsLarge};
         .${unique.wrapper} {
-            ${displayFlex};
             ${flexRow};
             ${parseMinWidth(633)};
         }
@@ -1039,8 +1069,8 @@ const pickerCSS = {
             ${whiteSpaceNoWrap};
             ${parseHeight(18)};
             ${parseMinWidth(65)};
-            ${bgColor('rgba(21, 26, 48, 0.9)')};
-            ${pd([0.75, 1.5])};
+            background-color: rgba(21, 26, 48, 0.9);
+            padding: ${spacing([0.75, 1.5])};
             transition: left 0.05s ease-in, top 0.05s ease-in;
             vertical-align: middle;
             visibility: hidden;
@@ -1050,8 +1080,7 @@ const pickerCSS = {
         @media only screen and (max-width: 599px) {
             ${parseMaxWidth(400)};
             .${unique.wrapper} {
-                ${displayFlex};
-                ${flexCol};
+                flex-direction: column;
                 ${parseMinWidth(260)};
             }
             .${unique.divider} {
@@ -1067,8 +1096,8 @@ const pickerCSS = {
         ${parseWidthHeight(width, 'max-content')};
         ${parseMinWidth(window.innerWidth <= 633 ? 300 : 633)};
         ${parseMaxWidth(805)};
-        ${top(position.top)};
-        ${left(position.left)};
+        top: ${position.top}px;
+        left: ${position.left}px;
         opacity: 0;
         transform: scale(0);
         transform-origin: ${position.transformOrigin};
@@ -1109,6 +1138,8 @@ DateRangePicker.propTypes = {
   clearAble: PropTypes.bool,
   /** If `true`, the calendar will have a footer controls. */
   controls: PropTypes.bool,
+  /** The count unit when select. */
+  unitCount: PropTypes.oneOf(['day', 'night']),
   /** Default value of the component. */
   defaultValue: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.instanceOf(Date)), PropTypes.arrayOf(PropTypes.string)]),
   /** If `true`, the component is disabled. */
@@ -1127,10 +1158,10 @@ DateRangePicker.propTypes = {
   label: PropTypes.string,
   /** [Props](https://core.diginet.com.vn/ui/?path=/docs/form-control-text-label--simple) of label. */
   labelProps: PropTypes.object,
-  /** Max value of date picker. */
-  max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
   /** Min value of date picker. */
   min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
+  /** Max value of date picker. */
+  max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
   /** Callback fired when the value is changed. */
   onChange: PropTypes.func,
   /** The short hint displayed in the input before the user enters a value. */
@@ -1151,8 +1182,6 @@ DateRangePicker.propTypes = {
   style: PropTypes.object,
   /** Text align of the input. */
   textAlign: PropTypes.oneOf(['center', 'end', 'start']),
-  /** The count unit when select. */
-  unitCount: PropTypes.oneOf(['day', 'night']),
   /** The value of the input element, required for a controlled component. String must be [Date string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/Date): YYYY/MM/DD, MM/DD/YYYY,...*/
   value: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string])),
   /** The variant to use. */

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

@@ -6,18 +6,29 @@ import { getGlobal } from "../../../global";
 import PropTypes from 'prop-types';
 import { forwardRef, Fragment, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import ReactDOM, { createPortal } from 'react-dom';
-import { bgColor, bgTransparent, border, borderBottom, borderBottomColor, borderColor, borderNone, borderRadius, borderRadius4px, boxBorder, breakWord, cursorDefault, cursorNotAllowed, cursorPointer, displayBlock, displayFlex, fill, flexColReverse, flexRow, flexWrap, inset, insetX, italic, itemsCenter, justifyCenter, justifyStart, mgb, mgl, mgr, mgt, outlineNone, overflowAuto, overflowHidden, parseHeight, parseMaxHeight, parseMaxWidth, parseMinHeight, parseWidth, parseWidthHeight, pd, pdb, pdl, pdt, pdy, pointerEventsNone, positionAbsolute, positionFixed, positionRelative, textColor, userSelectNone, z } from "../../../styles/general";
+import { bgColor, bgTransparent, border, borderNone, borderRadius, borderRadius4px, boxBorder, breakWord, cursorDefault, cursorNotAllowed, cursorPointer, displayBlock, displayFlex, flexColReverse, flexRow, flexWrap, inset, insetX, itemsCenter, justifyCenter, justifyStart, mgb, mgl, mgr, mgt, outlineNone, overflowAuto, overflowHidden, parseHeight, parseMaxHeight, parseMaxWidth, parseMinHeight, parseWidth, parseWidthHeight, pd, pdb, pdl, pdt, pdy, pointerEventsNone, positionAbsolute, positionFixed, positionRelative, userSelectNone, z } from "../../../styles/general";
 import { useTheme } from "../../../theme";
 import { classNames, isMobile, mapParent, randomString, refType as ref, updatePosition } from "../../../utils";
 const {
   colors: {
     system: {
+      active: systemActive,
+      disabled: systemDisabled,
+      rest: systemRest,
       white: systemWhite
     },
+    semantic: {
+      danger: semanticDanger
+    },
     fill: {
+      hover: fillHover,
       'scrollbar-tabbar': fillScrollbar
     },
+    line: {
+      focus: lineFocus
+    },
     text: {
+      main: textMain,
       sub: textSub
     }
   },
@@ -1178,17 +1189,16 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
           return false;
         }
       }
-    }) : jsx("div", {
-      css: _DropdownInputCSS,
-      onClick: onClickInput
-    }, jsx(Typography, {
+    }) : jsx(Fragment, null, jsx(Typography, {
       ref: inputRef,
+      css: _DropdownInputCSS,
       hoverTooltip: true,
       lineClamp: multilineSelectedItem ? undefined : 1,
       type: 'p1',
       style: {
         lineHeight: multiple ? '30px' : '24px'
       },
+      onClick: onClickInput,
       tabIndex: -1
     }, textValue))), jsx("div", {
       ref: iconRef,
@@ -1246,7 +1256,7 @@ const DropdownInputCSS = (viewType, multiple, placeholder, disabled, readOnly) =
     ${paragraph1};
     ${disabled ? cursorNotAllowed : readOnly ? cursorDefault : cursorPointer};
     ${parseWidth('100%')};
-    ${textColor('text.main')};
+    color: ${textMain};
     ${pdt(0)};
     ${pdb([viewType !== 'outlined' ? 0 : 'inherit'])};
     ${pdl([viewType !== 'outlined' ? 0 : 4])};
@@ -1267,7 +1277,7 @@ const DropdownInputCSS = (viewType, multiple, placeholder, disabled, readOnly) =
             ${itemsCenter};
             ${justifyCenter};
             content: '${placeholder}';
-            ${textColor('text.sub')};
+            color: ${textSub};
         }
         &:not(:empty)::after {
             visibility: hidden;
@@ -1286,7 +1296,7 @@ const DropdownInputCSS = (viewType, multiple, placeholder, disabled, readOnly) =
         }
     }
     .DGN-UI-Typography {
-        ${disabled && textColor('system.disabled')};
+        ${disabled && `color: ${systemDisabled}`};
     }
 `;
 const IconCSS = viewType => css`
@@ -1303,24 +1313,24 @@ const DropdownFormCSS = (viewType, multiple, disabled, placeholder, DropdownInpu
               ${boxBorder};
               ${parseWidth('100%')};
               ${pdy([multiple ? 0.25 : 1])};
-              ${!disabled && css`
-                  &:not(:focus-within):hover {
-                      &::before {
-                          ${borderBottomColor('system.active')};
-                      }
-                      .css-${DropdownInputCSSName} {
-                          ${textColor('system.active')};
-                      }
-                  }
+              ${!disabled && `
+                    &:not(:focus-within):hover {
+                        &::before {
+                            border-bottom-color: ${systemActive};
+                        }
+                        .css-${DropdownInputCSSName} {
+                            color: ${systemActive};
+                        }
+                    }
               `}
               &:focus-within {
-                  ${borderBottomColor('line.focus')};
+                  border-bottom-color: ${lineFocus};
                   &::after {
-                      ${borderBottomColor('inherit')};
+                      border-bottom-color: inherit;
                       transform: scaleX(1);
                   }
                   .css-${DropdownInputCSSName} {
-                      ${textColor('system.active')};
+                      color: ${systemActive};
                   }
               }
               &.dropdown-showing {
@@ -1332,27 +1342,27 @@ const DropdownFormCSS = (viewType, multiple, disabled, placeholder, DropdownInpu
                   content: '${placeholder}';
                   ${parseHeight('100%')};
                   ${overflowHidden};
-                  ${textColor('text.sub')};
+                  color: ${textSub};
                   display: -webkit-box;
                   -webkit-line-clamp: 1;
                   -webkit-box-orient: vertical;
               }
               &::placeholder {
-                  ${textColor('text.sub')};
+                  color: ${textSub};
               }
               &::before {
                   ${positionAbsolute};
                   content: '';
                   ${insetX(0)};
                   bottom: 0;
-                  ${viewType === 'underlined' && borderBottom(1, disabled ? 'system.disabled' : 'system.rest')}
+                  ${viewType === 'underlined' && `border-bottom: 1px solid ${disabled ? systemDisabled : systemRest};`}
               }
               &::after {
                   ${positionAbsolute};
                   content: '';
                   ${insetX(0)};
                   bottom: -1px;
-                  ${borderBottom(2, 'transparent')};
+                  border-bottom: 2px solid transparent;
                   transform: scaleX(0);
                   transform-origin: center;
                   transition: all 0.2s ease;
@@ -1364,21 +1374,21 @@ const DropdownFormCSS = (viewType, multiple, disabled, placeholder, DropdownInpu
               ${positionRelative};
               ${borderRadius4px};
               ${boxBorder};
-              ${border(1, disabled ? 'system.disabled' : 'system.rest')};
+              ${border(1, disabled ? systemDisabled : systemRest)};
               ${parseWidth('100%')};
               ${parseMinHeight(40)};
               ${mgt([0.5])};
-              ${!disabled && css`
-                  &:not(:focus-within):hover {
-                      ${bgColor('fill.hover')};
-                      ${borderColor('system.active')};
-                      input {
-                          ${bgColor('fill.hover')};
-                      }
-                  }
+              ${!disabled && `
+                &:not(:focus-within):hover {
+                    ${bgColor(fillHover)};
+                    border-color: ${systemActive};
+                    input {
+                        ${bgColor(fillHover)};
+                    }
+                }
               `}
               &:focus-within {
-                  ${borderColor('line.focus')};
+                  border-color: ${lineFocus};
               }
               &.dropdown-showing {
                   .icon-dropdown {
@@ -1389,13 +1399,13 @@ const DropdownFormCSS = (viewType, multiple, disabled, placeholder, DropdownInpu
                   content: '${placeholder}';
                   ${parseHeight('100%')};
                   ${overflowHidden};
-                  ${textColor('text.sub')};
+                  color: ${textSub};
                   display: -webkit-box;
                   -webkit-line-clamp: 1;
                   -webkit-box-orient: vertical;
               }
               &::placeholder {
-                  ${textColor('text.sub')};
+                  color: ${textSub};
               }
               &::after {
                   ${positionAbsolute};
@@ -1414,7 +1424,7 @@ const DropdownListCSS = loading => css`
     ${parseWidth('100%')};
     ${parseMaxHeight(280)};
     ${loading ? overflowHidden : overflowAuto};
-    ${bgColor('system.white')};
+    ${bgColor(systemWhite)};
     box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
     ${z(1)};
     &::-webkit-scrollbar {
@@ -1444,19 +1454,19 @@ const DropdownItemCSS = (multiple, selectBox) => css`
     ${userSelectNone};
     ${parseMinHeight(40)};
     ${parseWidth('100%')};
-    ${bgColor('system.white')};
+    ${bgColor(systemWhite)};
     ${pd([2, multiple && selectBox ? 0 : 4])};
-    ${textColor('text.main')};
+    color: ${textMain};
     &.no-data {
         ${justifyCenter};
         ${cursorDefault};
-        ${italic};
+        font-style: italic;
     }
     &:not(.no-data):hover,
     &:not(.no-data):focus {
         ${outlineNone};
-        ${bgColor('fill.hover')};
-        ${textColor('system.active')};
+        ${bgColor(fillHover)};
+        color: ${systemActive};
     }
 `;
 const DropdownRootCSS = (DropdownFormCSSName, DropdownInputCSSName) => css`
@@ -1466,21 +1476,21 @@ const DropdownRootCSS = (DropdownFormCSSName, DropdownInputCSSName) => css`
     ${parseHeight('max-content')};
     &.error {
         .css-${DropdownFormCSSName} {
-            ${borderColor('semantic.danger')};
+            border-color: ${semanticDanger};
             path {
-                ${fill('semantic.danger')};
+                fill: ${semanticDanger};
             }
             &::before {
-                ${borderColor('semantic.danger')};
+                border-color: ${semanticDanger};
             }
         }
     }
     &.dgn-dropdown-loading,
     &.disabled {
         .css-${DropdownFormCSSName} {
-            ${borderColor('system.disabled')};
+            border-color: ${systemDisabled};
             &::before {
-                ${borderColor('system.disabled')};
+                border-color: ${systemDisabled};
             }
         }
     }
@@ -1497,11 +1507,10 @@ const DropdownCSS = (top, left, width, isMobile, allowSearch) => css`
     ${parseWidth(width)};
     top: ${top}px;
     left: ${left}px;
-    ${bgColor('system.white')};
+    ${bgColor(systemWhite)};
     ${z(1)};
-    ${isMobile && allowSearch && css`
+    ${isMobile && allowSearch && `
         ${parseHeight('max-content')};
-        ${displayFlex};
         ${flexColReverse};
         bottom: 0;
         top: auto;

package/components/popover/index.js

@@ -126,7 +126,6 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   height,
   marginThreshold,
   onClose,
-  onOpen,
   open,
   pressESCToClose,
   style,
@@ -154,7 +153,6 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }
   const onOpenPopover = () => {
     if (!openState) setOpenState(true);
-    onOpen && onOpen();
   };
   const onClosePopover = () => {
     if (openState) {
@@ -590,8 +588,6 @@ Popover.propTypes = {
   marginThreshold: PropTypes.number,
   /** Callback fired when the component requests to be closed. */
   onClose: PropTypes.func,
-  /** Callback fired when the component requests to be opened. */
-  onOpen: PropTypes.func,
   /** If `true`, the component is shown. */
   open: PropTypes.bool,
   /** If `true`, hitting escape will close component. */

package/package.json

@@ -1,73 +1,42 @@
 {
   "name": "diginet-core-ui",
-  "version": "1.3.90-beta.6",
-  "description": "",
+  "version": "1.3.91",
+  "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",
-    "babel-plugin-module-resolver": "^4.1.0",
     "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,16 @@ npm test
 ```
 
 ## Changelog
+## 1.3.91
+- \[Changed\]: TreeView – Optimize code
+- \[Changed\]: Popup – Add defaultProps description
+- \[Changed\]: Grid – Add sx prop handle responsive css display
+- \[Changed\]: ButtonMore – Export component ButtonMore
+- \[Changed\]: DateRangePicker – Add description for prop value
+- \[Fixed\]: Avatar – Fix bug not clear avatar when src null
+- \[Fixed\]: Typography – Add min-width to popover hover tooltip
+- \[Fixed\]: DatePicker – Fix disabled button previous month in navigator
+
 ## 1.3.90
 - \[Added\]: Breadcrumb – Add component Breadcrumb
 - \[Added\]: Icon – Question, Pause, Cake, ChatAnswer