diginet-core-ui 1.3.80-beta.7 → 1.3.81

package/components/badge/index.js

@@ -1,28 +1,25 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
-import { Icon } from "./..";
-import OptionWrapper from "../others/option-wrapper";
+import { memo, useRef, forwardRef, useMemo, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
-import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
-import { alignCenter, borderBox, borderRadius4px, flexRow, flexWrap, inlineFlex, justifyCenter, parseMinWidthHeight, parseWidthHeight, pointerEventsNone, positionAbsolute, positionRelative } from "../../styles/general";
-import { useColor as colors, useTheme } from "../../theme";
-import { classNames, refType as ref } from "../../utils";
+import { jsx, css } from '@emotion/core';
+import OptionWrapper from "../others/option-wrapper";
+import { color as colors } from "../../styles/colors";
+import { typography } from "../../styles/typography";
+import { alignCenter, borderBox, borderRadius4px, flexRow, flexWrap, inlineFlex, justifyCenter, pointerEventsNone, positionAbsolute, positionRelative } from "../../styles/general";
+import Icon from "../../icons";
 const {
-  colors: {
-    system: {
-      rest: systemRest,
-      white: systemWhite
-    }
-  },
-  typography: {
-    paragraph1,
-    paragraph2,
-    paragraph3
-  },
-  spacing
-} = useTheme();
-const colorMap = new Map([['default', systemRest]]);
+  paragraph1,
+  paragraph2,
+  paragraph3
+} = typography;
+const {
+  system: {
+    rest,
+    white
+  }
+} = colors;
+const colorMap = new Map([['default', rest]]);
 const iconSizeMap = new Map([['medium', 24], ['large', 32], ['giant', 40]]);
 const dotSizeMap = new Map([['medium', 8], ['large', 10], ['giant', 12]]);
 const dotIndentMap = new Map([['medium', 4], ['large', 2]]);
@@ -73,30 +70,28 @@ const calDotPos = (anchorOrigin, contentDirection, dotSize, hasContent, size) =>
 const Badge = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
   anchorOrigin,
-  children,
-  className,
-  color,
-  content,
   contentDirection,
-  iconProps,
-  id,
-  invisible,
+  content,
   max,
   name,
-  showZero,
+  color,
   size,
+  className,
   style,
+  showZero,
+  invisible,
+  children,
+  iconProps,
   ...props
 }, reference) => {
-  if (!reference) reference = useRef(null);
   const ref = useRef(null);
   const typographySize = typographySizeMap.get(size);
   const iconSize = iconSizeMap.get(size);
   const dotSize = content || content === 0 && showZero ? dotSizeMap.get(size) + 8 : dotSizeMap.get(size);
   const dotColor = colors[color] || colorMap.get(color) || color;
   const dotPos = calDotPos(anchorOrigin, !children && name ? 'right' : contentDirection, dotSize, content || content === 0, size);
-  const _BadgeNumberCSS = BadgeNumberCSS(typographySize, children, name, dotSize, dotColor);
-  const _BadgeRootCSS = BadgeRootCSS(children, name, dotPos, _BadgeNumberCSS.name);
+  const _BadgeNumberCSS = BadgeNumberCSS(typographySize, children, name, dotSize, dotColor, invisible);
+  const _BadgeRootCSS = BadgeRootCSS(children, name, dotPos, _BadgeNumberCSS);
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
     currentRef.element = ref.current;
@@ -111,30 +106,28 @@ const Badge = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     let node = children;
     if (!node && name) {
       node = jsx(Icon, {
-        viewBox: true,
         name: name,
         width: iconSize,
         height: iconSize,
-        color: 'currentColor',
+        viewBox: true,
         ...iconProps
       });
     }
     return jsx("div", {
       css: _BadgeRootCSS,
       ref: ref,
-      id: id,
-      className: classNames('DGN-UI-Badge', className),
+      className: ['DGN-UI-Badge', className].join(' ').trim().replace(/\s+/g, ' '),
       style: style,
       ...props
     }, jsx("span", {
       className: 'DGN-UI-Badge-Children'
-    }, node), content !== undefined && !invisible ? jsx("span", {
+    }, node), content !== undefined && jsx("span", {
       css: _BadgeNumberCSS,
       className: 'DGN-UI-Badge-Dot'
-    }, max && content > max ? max + '+' : content === 0 && !showZero ? null : content) : null);
-  }, [anchorOrigin, children, className, color, content, contentDirection, iconProps, id, invisible, max, name, showZero, size, style, props]);
+    }, max && content > max ? max + '+' : content === 0 && !showZero ? null : content));
+  }, [anchorOrigin, contentDirection, content, name, size, children, max, showZero, invisible, color, style, className, iconProps]);
 }));
-const BadgeNumberCSS = (typographySize, children, name, dotSize, dotColor) => css`
+const BadgeNumberCSS = (typographySize, children, name, dotSize, dotColor, invisible) => css`
     ${typographySize};
     ${flexRow};
     ${alignCenter};
@@ -143,88 +136,84 @@ const BadgeNumberCSS = (typographySize, children, name, dotSize, dotColor) => cs
     ${borderBox};
     ${pointerEventsNone};
     ${children || name ? positionAbsolute : positionRelative};
-    color: ${systemWhite};
-    ${parseMinWidthHeight(dotSize)};
+    color: ${white};
+    min-height: ${dotSize}px;
+    min-width: ${dotSize}px;
     background-color: ${dotColor};
     border-radius: ${dotSize / 2}px;
-    padding: ${spacing([0, 1])};
+    padding: 0 4px;
+    transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+    ${invisible && 'transform: scale(0) translate(50%, -50%);'};
 `;
-const BadgeRootCSS = (children, name, dotPos, BadgeNumberCSSName) => css`
+const BadgeRootCSS = (children, name, dotPos, _BadgeNumberCSS) => css`
     ${inlineFlex};
     ${alignCenter};
     ${justifyCenter};
     ${positionRelative};
     ${borderBox};
     ${borderRadius4px};
-    ${parseWidthHeight('max-content')};
-    ${parseMinWidthHeight('max-content')};
-    .css-${BadgeNumberCSSName} {
-        ${(children || name) && dotPos};
+    color: ${white};
+    height: max-content;
+    min-height: max-content;
+    width: max-content;
+    min-width: max-content;
+    .css-${_BadgeNumberCSS.name} {
+        ${(children || name) && dotPos}
     }
 `;
 Badge.defaultProps = {
+  color: 'default',
+  size: 'medium',
   anchorOrigin: {
     vertical: 'top',
     horizontal: 'right'
   },
-  className: '',
-  color: 'default',
   content: null,
-  contentDirection: 'left',
-  invisible: false,
   max: 99,
+  contentDirection: 'left',
   showZero: false,
-  size: 'medium',
+  invisible: false,
+  className: '',
   style: {}
 };
 Badge.propTypes = {
-  /** The anchor of the badge. */
   anchorOrigin: PropTypes.shape({
     horizontal: PropTypes.oneOf(['left', 'right']),
     vertical: PropTypes.oneOf(['top', 'bottom'])
   }),
-  /** The badge will be added relative to this node. */
-  children: PropTypes.node,
-  /** Class for component. */
-  className: PropTypes.string,
-  /** The color of the component. */
-  color: PropTypes.oneOfType([PropTypes.oneOf(['default', 'primary', 'info', 'success', 'warning', 'danger']), PropTypes.string]),
-  /** The content rendered within the badge. */
+  /** the quantity is shown on the badge */
   content: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  /** Direction of content within the badge */
-  contentDirection: PropTypes.oneOf(['left', 'right']),
-  /** If `true`, the badge is invisible */
-  invisible: PropTypes.bool,
-  /** Max count to show. */
+  /** the largest number is displayed on the badge */
   max: PropTypes.number,
-  /** Prop name of [ButtonIcon](https://core.diginet.com.vn/ui/?path=/docs/buttonicon) components.  */
+  /** used to fill background for button */
+  contentDirection: PropTypes.oneOf(['left', 'right']),
+  /** background color of badge */
+  color: PropTypes.oneOfType([PropTypes.oneOf(['default', 'primary', 'info', 'success', 'warning', 'danger']), PropTypes.string]),
+  /** use name will replace children with ButtonIcon */
   name: PropTypes.string,
-  /** Controls whether the badge is hidden when `content` is zero. */
-  showZero: PropTypes.bool,
-  /** Size of the components.
+  /** other icon props when use prop name */
+  iconProps: PropTypes.object,
+  /** size of Badge
    *
    * * medium (dot 8px, typography p3)
    * * large (button 10px, typography p2)
    * * giant (button 12px, typography p1)
    * */
   size: PropTypes.oneOf(['medium', 'large', 'giant']),
-  /** Style inline of component. */
+  /** Controls whether the badge is hidden when content is zero */
+  showZero: PropTypes.bool,
+  /** If true, the badge is invisible */
+  invisible: PropTypes.bool,
+  /** className of component */
+  className: PropTypes.string,
+  /** style inline of component */
   style: PropTypes.object,
-  /**
-   * ref methods (ref.current.instance.*method*)
-   *
-   * * option(): Gets all UI component properties
-   *  * Returns value - object
-   * * option(optionName): Gets the value of a single property
-   *  * @param {optionName} - string
-   *  * Returns value - any
-   * * option(optionName, optionValue): Updates the value of a single property
-   *  * @param {optionName} - string
-   *  * @param {optionValue} - any
-   * * option(options): Updates the values of several properties
-   *  * @param {options} - object
-   */
-  reference: ref
+  /** the function get ref */
+  refs: PropTypes.func,
+  /** the content displayed under the number of the badge */
+  children: PropTypes.node,
+  /** any props else */
+  props: PropTypes.any
 };
 export { Badge };
 export default OptionWrapper(Badge);

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

@@ -1438,14 +1438,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/input-base/index.js

@@ -94,7 +94,7 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const widthInit = useRef(null);
   const isEnabled = !readOnly && !disabled;
   const _InputBaseCSS = InputBaseCSS(readOnly, status);
-  const _SingleLineCSS = SingleLineCSS(autoWidth, readOnly);
+  const _SingleLineCSS = SingleLineCSS(autoWidth);
   const _InputCSS = InputCSS(autoWidth, isEnabled, hoverTooltip);
   const _TypoCSS = TypoCSS(disabled);
   const _TextAreaCSS = TextAreaCSS(resize, readOnly);
@@ -410,18 +410,16 @@ const InputBaseCSS = (readOnly, status) => css`
         top: 100%;
     }
 `;
-const SingleLineCSS = (autoWidth, readOnly) => css`
+const SingleLineCSS = autoWidth => css`
     ${parseWidthHeight(autoWidth ? 'max-content' : 'auto', 'max-content')}
     ${alignCenter};
     flex: 1 1 auto;
     &:focus-within {
-        ${!readOnly && `
-            border-bottom-color: ${semanticInfo};
-            &::after {
-                border-bottom-color: inherit;
-                transform: scaleX(1);
-            }
-        `}
+        border-bottom-color: ${semanticInfo};
+        &::after {
+            border-bottom-color: inherit;
+            transform: scaleX(1);
+        }
     }
     &.outlined {
         ${parseHeight(40)};

package/components/tab/tab.js

@@ -102,7 +102,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`
     ${flexRow};

package/package.json

@@ -1,73 +1,42 @@
 {
   "name": "diginet-core-ui",
-  "version": "1.3.80-beta.7",
-  "description": "",
+  "version": "1.3.81",
+  "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.81
+- \[Added\]: Icon – Feedback, Newspaper
+- \[Changed\]: Button – Add prop href, urlParams
+- \[Changed\]: Divider – Allow using CORE colors
+- \[Fixed\]: Attachment – Fix callback return attached items not file type; Optimize code
+- \[Fixed\]: PopupV2 – Fix warning prop description
+- \[Fixed\]: Popover – Fix backdrop scroll when show popover
+- \[Fixed\]: DateRangePicker – Fix cannot click end icon
+- \[Fixed\]: CircularProgress – Temporary fix transform rotate inside flex column
+
 ## 1.3.80
 - \[Changed\]: ButtonMore – Update Button More with new design
 - \[Changed\]: BABEL – Add babel-plugin-module-resolver