diginet-core-ui 1.3.83 → 1.3.84

package/components/badge/index.js

@@ -1,25 +1,28 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { memo, useRef, forwardRef, useMemo, useImperativeHandle } from 'react';
-import PropTypes from 'prop-types';
-import { jsx, css } from '@emotion/core';
+import { css, jsx } from '@emotion/core';
+import { Icon } from "./..";
 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 {
-  paragraph1,
-  paragraph2,
-  paragraph3
-} = typography;
+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";
 const {
-  system: {
-    rest,
-    white
-  }
-} = colors;
-const colorMap = new Map([['default', rest]]);
+  colors: {
+    system: {
+      rest: systemRest,
+      white: systemWhite
+    }
+  },
+  typography: {
+    paragraph1,
+    paragraph2,
+    paragraph3
+  },
+  spacing
+} = useTheme();
+const colorMap = new Map([['default', systemRest]]);
 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]]);
@@ -70,28 +73,30 @@ const calDotPos = (anchorOrigin, contentDirection, dotSize, hasContent, size) =>
 const Badge = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
   anchorOrigin,
-  contentDirection,
+  children,
+  className,
+  color,
   content,
+  contentDirection,
+  iconProps,
+  id,
+  invisible,
   max,
   name,
-  color,
+  showZero,
   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, invisible);
-  const _BadgeRootCSS = BadgeRootCSS(children, name, dotPos, _BadgeNumberCSS);
+  const _BadgeNumberCSS = BadgeNumberCSS(typographySize, children, name, dotSize, dotColor);
+  const _BadgeRootCSS = BadgeRootCSS(children, name, dotPos, _BadgeNumberCSS.name);
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
     currentRef.element = ref.current;
@@ -106,28 +111,30 @@ const Badge = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     let node = children;
     if (!node && name) {
       node = jsx(Icon, {
+        viewBox: true,
         name: name,
         width: iconSize,
         height: iconSize,
-        viewBox: true,
+        color: 'currentColor',
         ...iconProps
       });
     }
     return jsx("div", {
       css: _BadgeRootCSS,
       ref: ref,
-      className: ['DGN-UI-Badge', className].join(' ').trim().replace(/\s+/g, ' '),
+      id: id,
+      className: classNames('DGN-UI-Badge', className),
       style: style,
       ...props
     }, jsx("span", {
       className: 'DGN-UI-Badge-Children'
-    }, node), content !== undefined && jsx("span", {
+    }, node), content !== undefined && !invisible ? jsx("span", {
       css: _BadgeNumberCSS,
       className: 'DGN-UI-Badge-Dot'
-    }, max && content > max ? max + '+' : content === 0 && !showZero ? null : content));
-  }, [anchorOrigin, contentDirection, content, name, size, children, max, showZero, invisible, color, style, className, iconProps]);
+    }, 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]);
 }));
-const BadgeNumberCSS = (typographySize, children, name, dotSize, dotColor, invisible) => css`
+const BadgeNumberCSS = (typographySize, children, name, dotSize, dotColor) => css`
     ${typographySize};
     ${flexRow};
     ${alignCenter};
@@ -136,84 +143,88 @@ const BadgeNumberCSS = (typographySize, children, name, dotSize, dotColor, invis
     ${borderBox};
     ${pointerEventsNone};
     ${children || name ? positionAbsolute : positionRelative};
-    color: ${white};
-    min-height: ${dotSize}px;
-    min-width: ${dotSize}px;
+    color: ${systemWhite};
+    ${parseMinWidthHeight(dotSize)};
     background-color: ${dotColor};
     border-radius: ${dotSize / 2}px;
-    padding: 0 4px;
-    transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-    ${invisible && 'transform: scale(0) translate(50%, -50%);'};
+    padding: ${spacing([0, 1])};
 `;
-const BadgeRootCSS = (children, name, dotPos, _BadgeNumberCSS) => css`
+const BadgeRootCSS = (children, name, dotPos, BadgeNumberCSSName) => css`
     ${inlineFlex};
     ${alignCenter};
     ${justifyCenter};
     ${positionRelative};
     ${borderBox};
     ${borderRadius4px};
-    color: ${white};
-    height: max-content;
-    min-height: max-content;
-    width: max-content;
-    min-width: max-content;
-    .css-${_BadgeNumberCSS.name} {
-        ${(children || name) && dotPos}
+    ${parseWidthHeight('max-content')};
+    ${parseMinWidthHeight('max-content')};
+    .css-${BadgeNumberCSSName} {
+        ${(children || name) && dotPos};
     }
 `;
 Badge.defaultProps = {
-  color: 'default',
-  size: 'medium',
   anchorOrigin: {
     vertical: 'top',
     horizontal: 'right'
   },
+  className: '',
+  color: 'default',
   content: null,
-  max: 99,
   contentDirection: 'left',
-  showZero: false,
   invisible: false,
-  className: '',
+  max: 99,
+  showZero: false,
+  size: 'medium',
   style: {}
 };
 Badge.propTypes = {
+  /** The anchor of the badge. */
   anchorOrigin: PropTypes.shape({
     horizontal: PropTypes.oneOf(['left', 'right']),
     vertical: PropTypes.oneOf(['top', 'bottom'])
   }),
-  /** the quantity is shown on the badge */
+  /** 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. */
   content: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  /** the largest number is displayed on the badge */
-  max: PropTypes.number,
-  /** used to fill background for button */
+  /** Direction of content within the badge */
   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 */
+  /** If `true`, the badge is invisible */
+  invisible: PropTypes.bool,
+  /** Max count to show. */
+  max: PropTypes.number,
+  /** Prop name of [ButtonIcon](https://core.diginet.com.vn/ui/?path=/docs/buttonicon) components.  */
   name: PropTypes.string,
-  /** other icon props when use prop name */
-  iconProps: PropTypes.object,
-  /** size of Badge
+  /** Controls whether the badge is hidden when `content` is zero. */
+  showZero: PropTypes.bool,
+  /** Size of the components.
    *
    * * medium (dot 8px, typography p3)
    * * large (button 10px, typography p2)
    * * giant (button 12px, typography p1)
    * */
   size: PropTypes.oneOf(['medium', 'large', 'giant']),
-  /** 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 inline of component. */
   style: PropTypes.object,
-  /** 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
+  /**
+   * 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
 };
 export { Badge };
 export default OptionWrapper(Badge);

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

@@ -1,15 +1,13 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
-import useInput from "../../../utils/useInput";
-import PropTypes from 'prop-types';
-import { jsx, css } from '@emotion/core';
+import { css, jsx } from '@emotion/core';
+import { Icon, Typography } from "../..";
 import { getGlobal } from "../../../global";
-import Icon from "../../../icons";
-import { Typography } from "../..";
-import { useTheme, useColor as colors } from "../../../theme";
-import { classNames, refType as ref } from "../../../utils";
-import { alignCenter, border, borderBox, borderNone, borderRadius4px, displayBlock, flexRow, outlineNone, parseHeight, parseWidth, parseWidthHeight, pointerEventsNone, positionAbsolute, positionRelative } from "../../../styles/general";
+import PropTypes from 'prop-types';
+import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
+import { alignCenter, backgroundTransparent, border, borderBox, borderNone, borderRadius4px, displayBlock, flexRow, outlineNone, parseHeight, parseMinHeight, parseMinWidthHeight, parseWidth, parseWidthHeight, pointerEventsNone, positionAbsolute, positionRelative } from "../../../styles/general";
+import { useColor as colors, useTheme } from "../../../theme";
+import { classNames, refType as ref, useInput } from "../../../utils";
 const {
   colors: {
     system: {
@@ -77,6 +75,7 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   viewType,
   ...props
 }, reference) => {
+  if (!reference) reference = useRef(null);
   if (!autoWidth && inputProps !== null && inputProps !== void 0 && inputProps.autoWidth) autoWidth = inputProps.autoWidth;
   const _onChange = e => {
     onChange && onChange(e);
@@ -94,7 +93,7 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const widthInit = useRef(null);
   const isEnabled = !readOnly && !disabled;
   const _InputBaseCSS = InputBaseCSS(readOnly, status);
-  const _SingleLineCSS = SingleLineCSS(autoWidth);
+  const _SingleLineCSS = SingleLineCSS(autoWidth, readOnly);
   const _InputCSS = InputCSS(autoWidth, isEnabled, hoverTooltip);
   const _TypoCSS = TypoCSS(disabled);
   const _TextAreaCSS = TextAreaCSS(resize, readOnly);
@@ -406,20 +405,22 @@ const InputBaseCSS = (readOnly, status) => css`
     }`}
     & + .DGN-UI-HelperText {
         ${positionAbsolute};
-        min-height: 16px;
+        ${parseMinHeight(16)};
         top: 100%;
     }
 `;
-const SingleLineCSS = autoWidth => css`
+const SingleLineCSS = (autoWidth, readOnly) => css`
     ${parseWidthHeight(autoWidth ? 'max-content' : 'auto', 'max-content')}
     ${alignCenter};
     flex: 1 1 auto;
     &:focus-within {
-        border-bottom-color: ${semanticInfo};
-        &::after {
-            border-bottom-color: inherit;
-            transform: scaleX(1);
-        }
+        ${!readOnly && `
+            border-bottom-color: ${semanticInfo};
+            &::after {
+                border-bottom-color: inherit;
+                transform: scaleX(1);
+            }
+        `}
     }
     &.outlined {
         ${parseHeight(40)};
@@ -432,7 +433,7 @@ const InputCSS = (autoWidth, isEnabled, hoverTooltip) => css`
     ${outlineNone};
     transition: all 0.1s;
     color: ${textMain};
-    background-color: transparent;
+    ${backgroundTransparent};
     padding-top: 0;
     padding-bottom: 0;
     ${paragraph1};
@@ -493,9 +494,8 @@ const TextAreaCSS = (resize, readOnly) => css`
     ${positionRelative};
     ${borderBox};
     ${parseWidth('100%')};
+    ${parseMinWidthHeight('max-content')};
     color: ${textMain};
-    min-height: max-content;
-    min-width: max-content;
     background-color: transparent;
     padding: ${spacing(0.5, 0)};
     overflow-y: auto;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "diginet-core-ui",
-  "version": "1.3.83",
+  "version": "1.3.84",
   "description": "The DigiNet core ui",
   "homepage": "https://diginet.com.vn",
   "main": "index.js",

package/readme.md

@@ -38,6 +38,10 @@ npm test
 ```
 
 ## Changelog
+## 1.3.84
+- \[Fixed\]: Badge – Remove animation, conditional rendering with prop invisible
+- \[Fixed\]: InputBase – Fix css focus when readOnly
+
 ## 1.3.83
 - \[Changed\]: IconMenu – Add prop className, style
 - \[Changed\]: Grid – Add prop verticalAlign