diginet-core-ui 1.3.49-beta.2 → 1.3.51

package/components/alert/index.js

@@ -10,8 +10,8 @@ import ButtonIcon from '../button/icon';
 import Icon from '../../icons';
 import { hexToRGBA } from '../../styles/color-helper';
 import { typography } from '../../styles/typography';
-import { useTheme } from '../../theme';
 import { alignCenter, border, borderBox, borderRadius4px, breakWord, displayBlock, flexRow, justifyStart, positionRelative, userSelectNone } from '../../styles/general';
+import { useTheme } from '../../theme';
 const {
   heading3,
   heading4,

package/components/chip/index.js

@@ -114,7 +114,8 @@ const Chip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       className: size
     }, jsx(Typography, {
       type: size === 'small' ? 'p2' : 'p1',
-      color: 'inherit'
+      color: 'inherit',
+      lineClamp: 1
     }, renderLabel()));
   }, [label, size, startIcon, endIcon, clearAble]);
   const endIconView = useMemo(() => {

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

@@ -41,8 +41,8 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   children,
   inputProps,
   forTreeView,
-  labelProps,
   width,
+  labelProps,
   ...props
 }, reference) => {
   if (!inputRef) {

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

@@ -157,11 +157,9 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     if (!boxRef.current) {
       if (!multiple || !Array.from(inputRef.current.querySelectorAll('.DGN-UI-Chip')).some(item => item.contains(e.target))) {
         if ((renderSelectedItem || iconExpr && iconExpr !== 'none') && !multiple) {
-          var _inputRef$current$chi;
-
           inputRef.current.innerHTML = inputRef.current.textContent.trim();
           inputRef.current.contentEditable = 'plaintext-only';
-          const caret = (_inputRef$current$chi = inputRef.current.childNodes) !== null && _inputRef$current$chi !== void 0 && _inputRef$current$chi.length ? 1 : 0;
+          const caret = inputRef.current.childNodes.length ? 1 : 0;
           const range = document.createRange();
           range.setStart(inputRef.current, caret);
           range.setEnd(inputRef.current, caret);
@@ -283,6 +281,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       window.addEventListener('resize', customizeWidthDropdown);
       document.addEventListener('wheel', onWheelHandler);
       document.addEventListener('mousedown', onClickOutsideOfInput);
+      document.addEventListener('keydown', preventScroll);
       boxRef.current && boxRef.current.addEventListener('keydown', moveOnItem);
 
       if (onLoadMore && dataSource.length < total) {
@@ -307,6 +306,15 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
   };
 
+  const preventScroll = e => {
+    if (/Arrow(Up|Down)/.test(e.key)) {
+      e.preventDefault();
+      return false;
+    }
+
+    return true;
+  };
+
   const pressESCHandler = event => {
     if (event.key === 'Escape' || event.key === 'Tab') {
       closeDropdown();
@@ -331,9 +339,11 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
 
   const closeDropdown = () => {
-    const node = document.querySelector(`.DGN-Dropdown-${unique}`); // if ((renderSelectedItem || (iconExpr && iconExpr !== 'none')) && !multiple && inputRef.current && !disabled) {
-    //     inputRef.current.contentEditable = true;
-    // }
+    const node = document.querySelector(`.DGN-Dropdown-${unique}`);
+
+    if ((renderSelectedItem || iconExpr && iconExpr !== 'none') && !multiple && inputRef.current) {
+      inputRef.current.contentEditable = true;
+    }
 
     if (node) {
       node.style.pointerEvents = `none`;
@@ -349,6 +359,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       document.removeEventListener('mousedown', onClickOutsideOfInput);
       window.removeEventListener('resize', customizeWidthDropdown);
       document.removeEventListener('wheel', onWheelHandler);
+      document.removeEventListener('keydown', preventScroll);
 
       if (onLoadMore && boxRef.current) {
         boxRef.current.removeEventListener('scroll', onLoadMoreHandler);
@@ -389,14 +400,12 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
 
   const mapDropdown = (pattern, keyArr) => {
-    var _currentObjectDefault;
-
     const items = [];
     const dataSourceUsable = [...dataSource];
 
     const _DropdownItemCSS = DropdownItemCSS(multiple, selectBox);
 
-    if (currentObjectDefault[unique] && (_currentObjectDefault = currentObjectDefault[unique]) !== null && _currentObjectDefault !== void 0 && _currentObjectDefault.length) {
+    if (currentObjectDefault[unique] && currentObjectDefault[unique].length) {
       const length = currentObjectDefault[unique].length;
       let existItemQuantity = 0;
 
@@ -446,13 +455,15 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         items.push(jsx("div", {
           key: index,
           css: !itemDisabled ? _DropdownItemCSS : [DisabledCSS, _DropdownItemCSS],
-          onClick: e => {
-            if (itemDisabled) return;
-            onChangeValueWithCheckbox(e) & onChangeValue(displayText, value, icon, data, index);
+          onClick: () => {
+            if (itemDisabled) return; // onChangeValueWithCheckbox(e) & onChangeValue(displayText, value, icon, data, index);
+
+            onChangeValue(displayText, value, icon, data, index);
           },
           onKeyPress: e => {
-            if (itemDisabled) return;
-            if (e.key === 'Enter') e.currentTarget.firstChild.click();
+            if (itemDisabled) return; // if (e.key === 'Enter') e.currentTarget.firstChild.click();
+
+            if (e.key === 'Enter') onChangeValue(displayText, value, icon, data, index);
           },
           tabIndex: -1
         }, jsx(Checkbox, {
@@ -463,7 +474,8 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
             padding: '0 16px'
           },
           value: value,
-          disabled: itemDisabled
+          disabled: itemDisabled,
+          onChange: () => onChangeValue(displayText, value, icon, data, index)
         }, icon && jsx("div", {
           css: DropdownIconCSS
         }, icon), jsx("div", {
@@ -535,13 +547,13 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
 
   const loadMoreItemsDropdown = (i = 0, pattern) => {
-    var _currentObjectDefault2, _displayExpr3;
+    var _displayExpr3;
 
     const dataSourceUsable = [...dataSource]; // Nếu có load more thì đẩy đội tượng mặc định lên đầu
 
     let notExistItem = 0;
 
-    if (onLoadMore && (_currentObjectDefault2 = currentObjectDefault[unique]) !== null && _currentObjectDefault2 !== void 0 && _currentObjectDefault2.length) {
+    if (onLoadMore && currentObjectDefault[unique].length) {
       const length = currentObjectDefault[unique].length;
 
       for (let index = length - 1; index >= 0; index--) {
@@ -732,9 +744,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     const _DropdownItemCSS = DropdownItemCSS(multiple, selectBox);
 
     if (scrollHeight === Math.ceil(scrollTop) + offsetHeight && boxRef.current) {
-      var _boxRef$current$query;
-
-      const length = (_boxRef$current$query = boxRef.current.querySelectorAll(`.css-${_DropdownItemCSS.name}`)) === null || _boxRef$current$query === void 0 ? void 0 : _boxRef$current$query.length;
+      const length = boxRef.current.querySelectorAll(`.css-${_DropdownItemCSS.name}`).length;
       boxRef.current.removeEventListener('scroll', onLoadMoreHandler);
       !!onLoadMore && onLoadMore({
         skip: length,
@@ -884,15 +894,13 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     if (closeAfterSelect === true || closeAfterSelect === undefined && !multiple) {
       closeDropdown();
     }
-  };
-
-  const onChangeValueWithCheckbox = e => {
-    const firstChild = e.currentTarget.firstChild;
+  }; // const onChangeValueWithCheckbox = e => {
+  //     const firstChild = e.currentTarget.firstChild;
+  //     if (!firstChild.contains(e.target)) {
+  //         firstChild.click();
+  //     }
+  // };
 
-    if (!firstChild.contains(e.target)) {
-      firstChild.click();
-    }
-  };
 
   const onRemove = (e, value) => {
     const index = currentValue[unique].findIndex(v => JSON.stringify(v) === JSON.stringify(value));
@@ -918,7 +926,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
 
   const onClear = e => {
-    if (disabled || readOnly || loading || !clearAble) return;
+    if (disabled || readOnly || loading) return;
     currentValue[unique] = multiple ? [] : '';
 
     if (inputRef.current.tagName.toLowerCase() === 'div') {
@@ -932,7 +940,6 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     } // onChangeValue('', '');
 
 
-    setShowClear(false);
     e && e.target && e.target.blur();
     updatePositionDropdown();
     onInput === null || onInput === void 0 ? void 0 : onInput({ ...(inputRef === null || inputRef === void 0 ? void 0 : inputRef.current),
@@ -969,7 +976,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
 
     const length = dataSource.length;
-    const displayKey = displayExpr;
+    const displayKey = keyExpr || displayExpr;
 
     if (displayKey && Array.isArray(displayKey)) {
       displayExpr = displayExpr.join(' - ');
@@ -988,8 +995,6 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       currentValue[unique] = [];
       inputRef.current.innerHTML = '';
       valueArr.forEach(v => {
-        var _currentObjectDefault3;
-
         for (let i = 0; i < length; i++) {
           if (typeof dataSource[i] === 'object' && dataSource[i][valueExpr] === v || dataSource[i] === v) {
             setMultipleValueHandler(dataSource[i], v, keyArr, i);
@@ -997,7 +1002,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
           }
         }
 
-        if ((_currentObjectDefault3 = currentObjectDefault[unique]) !== null && _currentObjectDefault3 !== void 0 && _currentObjectDefault3.length) {
+        if (currentObjectDefault[unique].length) {
           const itemOfValue = currentObjectDefault[unique].find(valueObject => valueObject[valueExpr] === v || valueObject === v);
 
           if (itemOfValue) {
@@ -1006,8 +1011,6 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         }
       });
     } else {
-      var _currentObjectDefault4;
-
       currentValue[unique] = source;
 
       for (let i = 0; i < length; i++) {
@@ -1017,7 +1020,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         }
       }
 
-      if ((_currentObjectDefault4 = currentObjectDefault[unique]) !== null && _currentObjectDefault4 !== void 0 && _currentObjectDefault4.length) {
+      if (currentObjectDefault[unique].length) {
         const itemOfValue = currentObjectDefault[unique].find(valueObject => valueObject[valueExpr] === source || valueObject === source);
 
         if (itemOfValue) {
@@ -1042,7 +1045,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       });
     } else {
       const icon = getIconFromData(data);
-      const text = keyArr ? renderData(data, keyArr) : data[displayExpr];
+      const text = keyArr ? renderData(data, keyArr) : data[keyExpr || displayExpr];
       item = jsx(Chip, {
         startIcon: icon,
         label: text,
@@ -1065,7 +1068,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
 
   const setSingleValueHandler = (data, keyArr) => {
-    const text = keyArr ? renderData(data, keyArr) : data[displayExpr || valueExpr || keyExpr] || data;
+    const text = keyArr ? renderData(data, keyArr) : data[keyExpr || displayExpr] || data[valueExpr] || data;
 
     if (renderSelectedItem && typeof renderSelectedItem === 'function') {
       inputRef.current.innerHTML = '';
@@ -1283,17 +1286,15 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
 
     if (boxRef.current) {
-      var _boxRef$current$query2, _currentObjectDefault5;
-
       if (!disabled && !readOnly) {
         inputRef.current.addEventListener('input', onChangeInput);
       }
 
       const _DropdownItemCSS = DropdownItemCSS(multiple, selectBox);
 
-      const length = (_boxRef$current$query2 = boxRef.current.querySelectorAll(`.css-${_DropdownItemCSS.name}`)) === null || _boxRef$current$query2 === void 0 ? void 0 : _boxRef$current$query2.length;
+      const length = boxRef.current.querySelectorAll(`.css-${_DropdownItemCSS.name}`).length;
 
-      if (length < dataSource.length + ((_currentObjectDefault5 = currentObjectDefault[unique]) === null || _currentObjectDefault5 === void 0 ? void 0 : _currentObjectDefault5.length) && !isSearch[unique]) {
+      if (length < dataSource.length + currentObjectDefault[unique].length && !isSearch[unique]) {
         loadMoreItemsDropdown(length);
         !!onLoadMore && dataSource.length < total && boxRef.current.addEventListener('scroll', onLoadMoreHandler);
       } else {
@@ -1328,7 +1329,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
     const _DropdownFormCSS = DropdownFormCSS(viewType, multiple, placeholder, itemMultipleSize, renderSelectedItem, disabled);
 
-    const _DropdownInputCSS = DropdownInputCSS(viewType, multiple, placeholder, itemMultipleSize, renderSelectedItem, disabled);
+    const _DropdownInputCSS = DropdownInputCSS(viewType, multiple, placeholder, itemMultipleSize, renderSelectedItem);
 
     return jsx("div", {
       css: _DropdownFormCSS,
@@ -1352,7 +1353,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         return false;
       }
     }) : renderSelectedItem || iconExpr && iconExpr !== 'none' ? jsx("div", { ...inputProps,
-      contentEditable: !disabled,
+      contentEditable: true,
       style: inputStyle,
       ref: inputRef,
       css: _DropdownInputCSS,
@@ -1446,7 +1447,7 @@ const DropdownIconCSS = css`
     }
 `;
 
-const DropdownInputCSS = (viewType, multiple, placeholder, itemMultipleSize, renderSelectedItem, disabled) => css`
+const DropdownInputCSS = (viewType, multiple, placeholder, itemMultipleSize, renderSelectedItem) => css`
     ${flexRow};
     ${alignCenter};
     ${outlineNone};
@@ -1454,7 +1455,7 @@ const DropdownInputCSS = (viewType, multiple, placeholder, itemMultipleSize, ren
     ${borderNone};
     ${paragraph1};
     width: 100%;
-    color: ${disabled ? systemDisabled : main};
+    color: ${main};
     padding-top: 0;
     padding-bottom: ${viewType !== 'outlined' ? 0 : 'inherit'};
     padding-left: ${viewType !== 'outlined' ? 0 : '16px'};
@@ -1488,19 +1489,7 @@ const DropdownInputCSS = (viewType, multiple, placeholder, itemMultipleSize, ren
             padding: ${itemMultipleSize === 'medium' ? 2 : 1}px;
         }
     }
-    .DGN-UI-Typography {
-        ${disabled && `
-            color: ${systemDisabled}
-        `}
-    }
     .css-${DropdownIconCSS.name} {
-        ${disabled && `
-            svg {
-                path {
-                    fill: ${systemDisabled};
-                }
-            }
-        `}
         ${renderSelectedItem ? `
             min-height: 24px;
             min-width: 24px;
@@ -1549,9 +1538,10 @@ const DropdownFormCSS = (viewType, multiple, placeholder, itemMultipleSize, rend
                         }
                         .css-${DropdownInputCSS(viewType, multiple, placeholder, itemMultipleSize, renderSelectedItem).name} {
                             color: ${active};
-                        }
                     }
+              }
               `}
+
               &:focus-within {
                   border-bottom-color: ${focus};
                   &::after {
@@ -1576,7 +1566,7 @@ const DropdownFormCSS = (viewType, multiple, placeholder, itemMultipleSize, rend
                   left: 0;
                   right: 0;
                   bottom: 0;
-                  border-bottom: 1px solid ${disabled ? systemDisabled : rest};
+                  border-bottom: 1px solid ${rest};
               }
               &::after {
                   ${positionAbsolute};
@@ -1595,7 +1585,7 @@ const DropdownFormCSS = (viewType, multiple, placeholder, itemMultipleSize, rend
               ${positionRelative};
               ${borderRadius4px};
               ${borderBox};
-              ${border(1, disabled ? systemDisabled : rest)};
+              ${border(1, rest)};
               width: 100%;
               min-height: 40px;
               ${!disabled && `
@@ -1831,6 +1821,9 @@ Dropdown.propTypes = {
   /** the displayed value for each change */
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),
 
+  /** field name used for text display in input */
+  keyExpr: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),
+
   /** field name used for text display<br/>
    * Example: 'name', '{id} - {name}', '{age} age(s)'<br/>
    * Note: don't use 'id - name', return undefined

package/components/form-control/input-base/index.js

@@ -86,7 +86,7 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
                     padding-top: 4px;
                     &:not(:focus-within):hover {
                         &::before {
-                            border-bottom-color: ${colors.brand};
+                            ${!readOnly && `border-bottom-color: ${colors.brand}`};
                         }
                     }
                     &:focus-within {
@@ -125,11 +125,13 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
                     box-sizing: border-box;
                     background-color: ${colors.white};
                     &:not(:focus-within):hover {
-                        background-color: ${colors.hover};
-                        border-color: ${colors.brand};
-                        input {
+                        ${!readOnly && `
                             background-color: ${colors.hover};
-                        }
+                            border-color: ${colors.brand};
+                            input {
+                                background-color: ${colors.hover};
+                            }
+                        `};
                     }
                     &:focus-within {
                         ${!readOnly && `
@@ -280,11 +282,13 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
                     color: ${colors.disabled};
                 } */
                 &:hover:not(:focus-within) {
-                    border-color: ${colors.brand};
-                    color: ${colors.primary};
-                    ::placeholder {
+                    ${!readOnly && `
+                        border-color: ${colors.brand};
                         color: ${colors.primary};
-                    }
+                        ::placeholder {
+                            color: ${colors.primary};
+                        }
+                    `};
                 }
                 &:focus-within {
                     color: ${colors.primary};
@@ -316,11 +320,13 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
                         height: 24px;
                     }
                     &:not(:focus-within):hover {
-                        background-color: ${colors.hover};
-                        border-color: ${colors.brand};
-                        input {
+                        ${!readOnly && `
                             background-color: ${colors.hover};
-                        }
+                            border-color: ${colors.brand};
+                            input {
+                                background-color: ${colors.hover};
+                            }
+                        `};
                     }
                     &:focus-within {
                         ${!readOnly && `
@@ -351,17 +357,19 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
                         height: 24px;
                     }
                     &:not(:focus-within):hover {
-                        &::before {
+                        ${!readOnly && `
+                            &::before {
                             border-bottom-color: ${colors.brand};
-                        }
+                            }
+                        `};
                     }
                     &:focus-within {
                         ${!readOnly && `
-                    &::after {
-                        border-bottom-color: ${colors.info5};
-                        transform: scaleX(1);
-                    }
-                `}
+                            &::after {
+                                border-bottom-color: ${colors.info5};
+                                transform: scaleX(1);
+                            }
+                        `}
                     }
                     &::before {
                         content: '';

package/components/modal/modal.js

@@ -8,10 +8,6 @@ import { jsx, css } from '@emotion/core';
 import ModalContext from './context';
 import { animations } from '../../styles/animation';
 import { typography } from '../../styles/typography';
-import { useTheme } from '../../theme';
-const {
-  zIndex: zIndexCORE
-} = useTheme();
 import { borderBox, borderRadius4px, flexCol, flexRow, justifyCenter, parseWidth, positionFixed, positionRelative } from '../../styles/general';
 import { color as colors } from '../../styles/colors';
 const {
@@ -23,6 +19,10 @@ const {
   }
 } = colors;
 const fadeInDown = animations.fadeInDown;
+import { useTheme } from '../../theme';
+const {
+  zIndex: zIndexCORE
+} = useTheme();
 const Modal = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   open,
   moveable,

package/package.json

@@ -1,65 +1,42 @@
 {
   "name": "diginet-core-ui",
-  "version": "1.3.49-beta.2",
-  "description": "",
+  "version": "1.3.51",
+  "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"
+    "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/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",
-    "autoprefixer": "^10.3.1",
-    "babel-loader": "^8.2.2",
-    "eslint": "^8.4.1",
-    "eslint-plugin-react": "^7.27.1",
-    "husky": "^7.0.4",
-    "lint-staged": "^12.1.2",
-    "mkdirp": "^1.0.4",
-    "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",
-    "onchange": "^7.1.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,14 @@ npm test
 ```
 
 ## Changelog
+## 1.3.51
+- \[Fixed\]: THEME – Fix bug makeStyles add duplicate style tag into head tag
+- \[Fixed\]: Accordion – Change css AccordionSummary; Fix when children of AccordionGroup null
+- \[Fixed\]: InputBase – Fix disabled css
+
+## 1.3.50
+- \[Fixed\]: Dropdown – Fix dropdown onInput search
+
 ## 1.3.49
 - \[Added\]: MenuIcon – WA3F0100, WA3F1025, WA3F2000, WA3F2020, WA3F2030, WA3F2040, WA3F2100
 - \[Changed\]: Grid – Phát triển component Grid

package/styles/general.js

@@ -177,7 +177,7 @@ export const parseWidth = width => css`
 export const parseHeight = height => css`
     height: ${isNaN(height) ? height : height + 'px'};
 `;
-export const parseWidthHeight = (width, height) => css`
+export const parseWidthHeight = (width, height = width) => css`
     width: ${isNaN(width) ? width : width + 'px'};
     height: ${isNaN(height) ? height : height + 'px'};
 `;

package/utils/useDelayUnmount.js

@@ -0,0 +1,19 @@
+import { useState, useEffect } from 'react';
+
+const useDelayUnmount = (isMounted, delayTime) => {
+  const [show, setShow] = useState(false);
+  useEffect(() => {
+    let timeoutId;
+
+    if (isMounted && !show) {
+      setShow(true);
+    } else if (!isMounted && show) {
+      timeoutId = setTimeout(() => setShow(false), delayTime);
+    }
+
+    return () => clearTimeout(timeoutId);
+  }, [isMounted, delayTime, show]);
+  return show;
+};
+
+export default useDelayUnmount;