diginet-core-ui 1.3.34 → 1.3.35

package/assets/images/menu/dhr/MHRP09N0032.svg

@@ -0,0 +1,7 @@
+<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17 23.14H8C7.37 23.14 6.86 23.65 6.86 24.28C6.86 24.91 7.37 25.43 8 25.43H17C17.63 25.43 18.14 24.91 18.14 24.28C18.14 23.65 17.63 23.14 17 23.14ZM21.71 18.57H8C7.37 18.57 6.86 19.08 6.86 19.71C6.86 20.34 7.37 20.86 8 20.86H21.71C22.34 20.86 22.85 20.34 22.85 19.71C22.85 19.08 22.34 18.57 21.71 18.57ZM21.71 14H8C7.37 14 6.86 14.51 6.86 15.14C6.86 15.77 7.37 16.29 8 16.29H21.71C22.34 16.29 22.85 15.77 22.85 15.14C22.85 14.51 22.34 14 21.71 14ZM8 16.29H21.71C22.34 16.29 22.85 15.77 22.85 15.14C22.85 14.51 22.34 14 21.71 14H8C7.37 14 6.86 14.51 6.86 15.14C6.86 15.77 7.37 16.29 8 16.29ZM21.71 18.57H8C7.37 18.57 6.86 19.08 6.86 19.71C6.86 20.34 7.37 20.86 8 20.86H21.71C22.34 20.86 22.85 20.34 22.85 19.71C22.85 19.08 22.34 18.57 21.71 18.57ZM17 23.14H8C7.37 23.14 6.86 23.65 6.86 24.28C6.86 24.91 7.37 25.43 8 25.43H17C17.63 25.43 18.14 24.91 18.14 24.28C18.14 23.65 17.63 23.14 17 23.14ZM29.56 25.16L29.46 25.28L29.39 25.36L29.41 25.38L28.64 26.23C28.22 26.69 27.82 27.12 27.42 27.52V35.57C27.42 36.2 26.91 36.71 26.28 36.71H3.43C2.8 36.71 2.29 36.2 2.29 35.57V3.43C2.29 2.8 2.8 2.29 3.43 2.29H18.28V8C18.28 9.89 19.82 11.43 21.71 11.43H27.01C27.28 11.09 27.53 10.78 27.77 10.49C28.18 9.99 28.58 9.52 28.96 9.07L20.23 0.33C20.02 0.12 19.73 0 19.42 0H3.43C1.54 0 0 1.54 0 3.43V35.57C0 37.46 1.54 39 3.43 39H26.28C28.17 39 29.71 37.46 29.71 35.57V24.99C29.67 25.05 29.62 25.1 29.56 25.16ZM20.57 3.9L25.81 9.14H21.71C21.08 9.14 20.57 8.63 20.57 8V3.9ZM21.71 14H8C7.37 14 6.86 14.51 6.86 15.14C6.86 15.77 7.37 16.29 8 16.29H21.71C22.34 16.29 22.85 15.77 22.85 15.14C22.85 14.51 22.34 14 21.71 14ZM22.85 19.71C22.85 19.08 22.34 18.57 21.71 18.57H8C7.37 18.57 6.86 19.08 6.86 19.71C6.86 20.34 7.37 20.86 8 20.86H21.71C22.34 20.86 22.85 20.34 22.85 19.71ZM8 23.14C7.37 23.14 6.86 23.65 6.86 24.28C6.86 24.91 7.37 25.43 8 25.43H17C17.63 25.43 18.14 24.91 18.14 24.28C18.14 23.65 17.63 23.14 17 23.14H8Z" fill="#2680EB"/>
+<path d="M11.61 31.37C10.73 31.43 10.2 31.99 9.70997 32.57C9.41997 32.92 9.23997 33.37 8.92997 33.7C8.76997 33.88 8.43997 33.9 8.18997 34C8.12997 33.73 7.93997 33.41 8.01997 33.21C8.50997 32.08 9.26997 31.16 10.38 30.58C11.71 29.89 12.55 30.3 12.85 31.76C12.88 31.88 12.91 32.01 12.93 32.06C13.63 31.76 14.29 31.37 15.01 31.21C16.17 30.94 17.26 31.35 18.26 31.93C18.42 32.02 18.42 32.4 18.5 32.64C18.26 32.71 17.99 32.89 17.78 32.84C17.23 32.72 16.71 32.48 16.17 32.32C15.45 32.11 14.79 32.31 14.18 32.71C13.98 32.84 13.79 32.99 13.58 33.1C12.78 33.53 12.2 33.29 11.92 32.41C11.8 32.08 11.71 31.74 11.61 31.37Z" fill="#FF8C00"/>
+<path d="M35.16 6.17998C35.31 6.27998 35.44 6.35999 35.55 6.45999C35.69 6.57999 35.8 6.56998 35.95 6.44998C36.34 6.12998 36.74 5.81998 37.15 5.51998C37.63 5.16998 38.1 5.15998 38.53 5.44998C38.94 5.72998 39.09 6.20999 38.93 6.77999C38.19 9.51999 37.01 12.07 35.66 14.55C33.77 18.03 31.54 21.27 28.99 24.3C28.9 24.4 28.82 24.5 28.7 24.63C27.17 23.58 25.65 22.53 24.09 21.46C26.72 16.65 29.91 12.28 33.79 8.37998C33.58 8.22998 33.39 8.09998 33.18 7.94998C32.89 8.23998 32.58 8.50998 32.32 8.81998C30.96 10.4 29.61 11.99 28.26 13.58C28.2 13.65 28.16 13.72 28.1 13.79C27.85 14.06 27.48 14.09 27.21 13.88C26.94 13.67 26.88 13.28 27.09 12.99C27.56 12.36 28.04 11.74 28.54 11.14C30.55 8.68999 32.7 6.38998 35.24 4.46998C35.38 4.35998 35.52 4.25998 35.67 4.15998C36 3.93998 36.37 3.98998 36.58 4.26998C36.81 4.57998 36.76 4.94998 36.43 5.19998C36.12 5.44998 35.8 5.67998 35.48 5.91998C35.38 5.98998 35.28 6.06998 35.16 6.17998Z" fill="#FF8C00"/>
+<path d="M27.9 25.55C26.35 27.25 24.74 28.83 22.93 30.19C22.84 30.25 22.66 30.3 22.59 30.26C22.02 29.89 21.46 29.49 20.9 29.11C21.21 27.64 22.66 24.04 23.54 22.55C24.99 23.55 26.43 24.55 27.9 25.55Z" fill="#FF8C00"/>
+<path d="M21.89 31.23C21.37 31.7 20.92 32.12 20.46 32.52C20.27 32.68 20.01 32.77 19.83 32.58C19.71 32.44 19.62 32.16 19.67 32C19.86 31.4 20.11 30.83 20.32 30.29C20.83 30.61 21.32 30.9 21.89 31.23Z" fill="#FF8C00"/>
+</svg>

package/components/avatar/index.js

@@ -458,18 +458,18 @@ Avatar.propTypes = {
   /** source of file (http:// or https://) */
   src: PropTypes.string,
 
-  /**
-   * it is used to display the default if there is no src<br />
-   * if undefined, will display icons available in the icons store
+  /**
+   * it is used to display the default if there is no src<br />
+   * if undefined, will display icons available in the icons store
    */
   defaultSrc: PropTypes.string,
 
   /** the direction to display more info */
   direction: PropTypes.oneOf(['top', 'down', 'left', 'right']),
 
-  /**
-   * data to display when hoverAble is true<br />
-   * data is an object or function return a jsx element
+  /**
+   * data to display when hoverAble is true<br />
+   * data is an object or function return a jsx element
    */
   data: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
 
@@ -485,19 +485,19 @@ Avatar.propTypes = {
   /** any props else */
   props: PropTypes.any,
 
-  /**
-   * ref methods
-   *
-   * * 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
+  /**
+   * ref methods
+   *
+   * * 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: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: PropTypes.instanceOf(Element)

package/components/badge/index.js

@@ -1,7 +1,7 @@
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import { memo, useRef, forwardRef, useEffect, useMemo, useImperativeHandle } from 'react';
+import { memo, useRef, forwardRef, useMemo, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import OptionWrapper from '../others/option-wrapper';
@@ -16,18 +16,11 @@ const {
 } = typography;
 const {
   system: {
-    active,
     rest,
     white
-  },
-  semantic: {
-    success,
-    warning,
-    danger,
-    info
   }
 } = colors;
-const colorMap = new Map([['default', rest], ['primary', active], ['success', success], ['warning', warning], ['danger', danger], ['info', info]]);
+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]]);
@@ -41,15 +34,15 @@ const calDotPos = (anchorOrigin, contentDirection, dotSize, hasContent, size) =>
   } = anchorOrigin;
   const dotIndent = hasContent ? dotIndentMap.get(size) || 0 : 0;
   const verticalCssRight = vertical === 'bottom' ? css`
-                    bottom: ${-dotIndent}px;
-            ` : css`
-                    top: ${-dotIndent}px;
-            `;
+                  bottom: ${-dotIndent}px;
+              ` : css`
+                  top: ${-dotIndent}px;
+              `;
   const verticalCssLeft = vertical === 'bottom' ? css`
-                    bottom: ${-halfDotSize}px;
-            ` : css`
-                    top: ${-halfDotSize}px;
-            `;
+                  bottom: ${-halfDotSize}px;
+              ` : css`
+                  top: ${-halfDotSize}px;
+              `;
 
   if (contentDirection === 'right') {
     if (horizontal === 'left') {
@@ -90,7 +83,6 @@ const Badge = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   style,
   showZero,
   invisible,
-  refs,
   children,
   iconProps,
   ...props
@@ -99,45 +91,13 @@ const Badge = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   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 = colorMap.get(color) || colors[color] || color;
+  const dotColor = colors[color] || colorMap.get(color) || color;
   const dotPos = calDotPos(anchorOrigin, !children && name ? 'right' : contentDirection, dotSize, content || content === 0, size);
-  const BadgeNumber = css`
-        ${typographySize};
-        ${flexRow}
-        ${alignCenter}
-        ${justifyCenter}
-        ${flexWrap}
-        ${borderBox}
-        ${pointerEventsNone}
-        ${children || name ? positionAbsolute : positionRelative}
-        color: ${white};
-        min-height: ${dotSize}px;
-        min-width: ${dotSize}px;
-        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%);'};
-    `;
-  const BadgeRoot = css`
-        ${inlineFlex}
-        ${alignCenter}
-        ${justifyCenter}
-        ${positionRelative}
-        ${borderBox}
-        ${borderRadius4px}
-        height: max-content;
-        min-height: max-content;
-        width: max-content;
-        min-width: max-content;
-        color: ${white};
-        .css-${BadgeNumber.name} {
-            ${(children || name) && dotPos}
-        }
-    `;
-  useEffect(() => {
-    if (refs) refs(ref);
-  }, []);
+
+  const _BadgeNumberCSS = BadgeNumberCSS(typographySize, children, name, dotSize, dotColor, invisible);
+
+  const _BadgeRootCSS = BadgeRootCSS(children, name, dotPos, _BadgeNumberCSS);
+
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
     const _instance = {}; // methods
@@ -161,7 +121,7 @@ const Badge = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
 
     return jsx("div", {
-      css: BadgeRoot,
+      css: _BadgeRootCSS,
       ref: ref,
       className: ['DGN-UI-Badge', className].join(' ').trim().replace(/\s+/g, ' '),
       style: style,
@@ -169,11 +129,48 @@ const Badge = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }, jsx("span", {
       className: 'DGN-UI-Badge-Children'
     }, node), content !== undefined && jsx("span", {
-      css: BadgeNumber,
+      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]);
+  }, [anchorOrigin, contentDirection, content, name, size, children, max, showZero, invisible, color, style, className, iconProps]);
 }));
+
+const BadgeNumberCSS = (typographySize, children, name, dotSize, dotColor, invisible) => css`
+    ${typographySize};
+    ${flexRow};
+    ${alignCenter};
+    ${justifyCenter};
+    ${flexWrap};
+    ${borderBox};
+    ${pointerEventsNone};
+    ${children || name ? positionAbsolute : positionRelative};
+    color: ${white};
+    min-height: ${dotSize}px;
+    min-width: ${dotSize}px;
+    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%);'};
+`;
+
+const BadgeRootCSS = (children, name, dotPos, _BadgeNumberCSS) => 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}
+    }
+`;
+
 Badge.defaultProps = {
   color: 'default',
   size: 'medium',
@@ -213,11 +210,11 @@ Badge.propTypes = {
   /** 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 of Badge
+   *
+   * * medium (dot 8px, typography p3)
+   * * large (button 10px, typography p2)
+   * * giant (button 12px, typography p1)
    * */
   size: PropTypes.oneOf(['medium', 'large', 'giant']),
 

package/components/button/icon.js

@@ -359,14 +359,14 @@ ButtonIcon.propTypes = {
   /** custom hover color for button with color 'default' */
   colorHover: PropTypes.string,
 
-  /**
-   * size of button
-   *
-   * * tiny (button 24px, icon 16px)
-   * * small (button 32px, icon 20px)
-   * * medium (button 40px, icon 24px)
-   * * large (button 48px, icon 32px)
-   * * giant (button 56px, icon 40px)
+  /**
+   * size of button
+   *
+   * * tiny (button 24px, icon 16px)
+   * * small (button 32px, icon 20px)
+   * * medium (button 40px, icon 24px)
+   * * large (button 48px, icon 32px)
+   * * giant (button 56px, icon 40px)
    * */
   size: PropTypes.oneOf(['tiny', 'small', 'medium', 'large', 'giant']),
 
@@ -403,19 +403,19 @@ ButtonIcon.propTypes = {
   /** status loading of button */
   loading: PropTypes.bool,
 
-  /**
-   * ref methods
-   *
-   * * 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
+  /**
+   * ref methods
+   *
+   * * 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: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: PropTypes.instanceOf(Element)