diginet-core-ui 1.3.43 → 1.3.44

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

@@ -0,0 +1,12 @@
+<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M34.66 9.48L25.43 0.34C25.22 0.12 24.92 0 24.62 0H8.46C6.55 0 5 1.54 5 3.43V35.57C5 37.46 6.55 39 8.46 39H10.31H29.68H31.53C33.44 39 34.99 37.46 34.99 35.57V18.04V16.98V11.42V11.31V10.28C35 9.97 34.87 9.68 34.66 9.48ZM25.77 3.9L31.06 9.14H26.92C26.28 9.14 25.77 8.63 25.77 8V3.9ZM32.69 18.13V35.58C32.69 36.21 32.17 36.72 31.54 36.72H26.38H13.62H8.46C7.82 36.72 7.31 36.21 7.31 35.58V3.43C7.31 2.8 7.83 2.29 8.46 2.29H23.46V8C23.46 9.89 25.01 11.43 26.92 11.43H31.04C31.05 11.43 31.06 11.43 31.07 11.43H32.69V16.99V18.13V18.13Z" fill="#2680EB"/>
+<path d="M30.79 28.13C30.79 27.5 30.27 26.99 29.64 26.99H19.23C18.59 26.99 18.08 27.5 18.08 28.13C18.08 28.76 18.6 29.27 19.23 29.27H29.64C30.27 29.27 30.79 28.76 30.79 28.13Z" fill="#FF8C00"/>
+<path d="M29.64 22.41H19.23C18.59 22.41 18.08 22.92 18.08 23.55C18.08 24.18 18.6 24.69 19.23 24.69H29.64C30.28 24.69 30.79 24.18 30.79 23.55C30.79 22.92 30.27 22.41 29.64 22.41Z" fill="#FF8C00"/>
+<path d="M19.23 31.56C18.59 31.56 18.08 32.07 18.08 32.7C18.08 33.33 18.6 33.84 19.23 33.84H25.02C25.66 33.84 26.17 33.33 26.17 32.7C26.17 32.07 25.65 31.56 25.02 31.56H19.23Z" fill="#FF8C00"/>
+<path d="M10.0601 25.8101H11.2001V23.5701H10.2401V22.8501C10.8601 22.7501 11.1701 22.6401 11.5201 22.4301H12.3901V25.8201H13.3301V26.7601H10.0601V25.8101Z" fill="#FF8C00"/>
+<path d="M14.8801 25.9401C14.8801 25.4501 15.2401 25.0501 15.7801 25.0501C16.3201 25.0501 16.6801 25.4501 16.6801 25.9401C16.6801 26.4301 16.3201 26.8301 15.7801 26.8301C15.2401 26.8301 14.8801 26.4301 14.8801 25.9401Z" fill="#FF8C00"/>
+<path d="M9.91999 33.17C11.09 32.23 11.94 31.5 11.94 30.91C11.94 30.52 11.69 30.34 11.3 30.34C10.98 30.34 10.72 30.55 10.49 30.75L9.85999 30.12C10.34 29.64 10.78 29.42 11.47 29.42C12.41 29.42 13.06 29.98 13.06 30.84C13.06 31.54 12.33 32.3 11.61 32.9C11.85 32.87 12.18 32.85 12.4 32.85H13.28V33.83H9.91999V33.17Z" fill="#FF8C00"/>
+<path d="M14.88 33.03C14.88 32.54 15.24 32.14 15.78 32.14C16.32 32.14 16.68 32.54 16.68 33.03C16.68 33.52 16.32 33.92 15.78 33.92C15.24 33.92 14.88 33.53 14.88 33.03Z" fill="#FF8C00"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21.83 6.84C21.71 6.72 21.55 6.65 21.38 6.65H18.64C18.72 6.49 18.76 6.31 18.76 6.13C18.76 5.51 18.26 5 17.65 5H17.64C17.15 5.03 16.68 5.22 16.3 5.54C15.95 5.81 15.63 6.1 15.33 6.41C15.02 6.1 14.7 5.81 14.35 5.54C13.97 5.22 13.5 5.03 13.01 5C12.39 5 11.89 5.5 11.89 6.13C11.89 6.31 11.93 6.49 12.01 6.65H9.27001C8.92001 6.65 8.64001 6.94 8.64001 7.29V8.54C8.64001 8.89 8.92001 9.18 9.27001 9.18H21.38C21.73 9.18 22.01 8.89 22.01 8.54V7.29C22.01 7.12 21.94 6.96 21.83 6.84ZM12.88 6.65C12.86 6.63 12.84 6.61 12.81 6.59C12.72 6.54 12.64 6.47 12.58 6.39C12.54 6.31 12.51 6.22 12.52 6.13C12.52 6 12.57 5.88 12.66 5.78C12.75 5.69 12.88 5.64 13 5.64C13.36 5.67 13.7 5.82 13.98 6.05C14.17 6.2 14.36 6.36 14.53 6.53C14.57 6.56 14.62 6.61 14.66 6.65H12.88ZM18.07 6.39C18.01 6.47 17.93 6.54 17.84 6.59C17.81 6.61 17.79 6.63 17.77 6.65H15.99L16.11 6.53C16.29 6.36 16.47 6.2 16.67 6.06C16.95 5.82 17.29 5.68 17.64 5.64C17.77 5.64 17.9 5.69 17.99 5.79C18.08 5.88 18.13 6 18.13 6.14C18.13 6.22 18.11 6.31 18.07 6.39Z" fill="#FFAA00"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.82001 9.74V15.98C9.83001 16.54 10.27 17 10.82 17H19.83C20.09 17 20.35 16.89 20.53 16.7C20.72 16.51 20.83 16.25 20.83 15.98V9.74H9.82001ZM15.57 15.23V15.71C15.57 15.79 15.51 15.85 15.44 15.85H15.12C15.05 15.85 14.99 15.79 14.99 15.71V15.28C14.71 15.26 14.44 15.21 14.18 15.11C14.06 15.07 14 14.94 14.03 14.81L14.08 14.61C14.1 14.54 14.15 14.48 14.21 14.44C14.28 14.41 14.35 14.41 14.42 14.43C14.65 14.53 14.9 14.57 15.14 14.58C15.48 14.58 15.72 14.44 15.72 14.2C15.72 13.97 15.52 13.82 15.09 13.67C14.45 13.45 14.01 13.15 14.01 12.57C14.03 12 14.46 11.54 15.01 11.49V11.05C15.01 10.97 15.08 10.91 15.15 10.9H15.47C15.54 10.91 15.6 10.97 15.6 11.05V11.45C15.82 11.45 16.03 11.49 16.24 11.56C16.37 11.6 16.44 11.73 16.41 11.86L16.36 12.04C16.35 12.11 16.3 12.17 16.24 12.21C16.18 12.24 16.11 12.25 16.04 12.22C15.85 12.16 15.64 12.12 15.44 12.12C15.05 12.12 14.93 12.29 14.93 12.46C14.93 12.66 15.14 12.79 15.64 12.98C16.35 13.23 16.64 13.57 16.63 14.12C16.61 14.71 16.16 15.19 15.57 15.23Z" fill="#FFAA00"/>
+</svg>

package/components/button/icon.js

@@ -31,7 +31,6 @@ const {
     disabled: fillDisabled
   }
 } = colors;
-const colorMap = new Map([['primary', active], ['success', success], ['warning', warning], ['danger', danger], ['info', info]]);
 const sizeMap = new Map([['tiny', {
   buttonSize: '24px',
   iconSize: '16px'
@@ -61,8 +60,17 @@ const alphaLoading = 0.2; // customIconSize calculated based on design size
 
 const customIconSize = width => width <= 24 ? width - 8 : width <= 32 ? width - 12 : width - 16;
 
+const renderIconLoading = iconSize => {
+  return jsx(CircularProgress, {
+    size: 'extraSmall',
+    background: 'transparent',
+    color: 'currentColor',
+    strokeWidth: 3,
+    width: parseInt(iconSize)
+  });
+};
+
 const ButtonIcon = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  type,
   viewType,
   color,
   size,
@@ -75,12 +83,10 @@ const ButtonIcon = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   disabled,
   style,
   onClick,
-  icon,
   children,
-  refs,
   loading,
   colorHover,
-  ...props
+  id
 }, reference) => {
   var _sizeMap$get, _sizeMap$get2;
 
@@ -93,194 +99,11 @@ const ButtonIcon = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
   const _height = isNaN(height) ? height : height + 'px';
 
-  colorHover = colorMap.get(colorHover) || colorHover;
-  const ButtonRoot = css`
-                ${inlineFlex}
-                ${positionRelative}
-        ${justifyCenter}
-        ${alignCenter}
-        ${outlineNone}
-        ${borderBox}
-        ${cursorPointer}
-        ${userSelectNone}
-        padding: 0;
-                border-radius: ${circular ? '50%' : '4px'};
-                transition: background-color 0.5s, filter 0.5s;
-                .DGN-UI-ButtonIcon-Icon {
-                    ${flexRow}
-                    ${positionRelative}
-            ${borderBox}
-            ${justifyCenter}
-            ${alignCenter}
-                }
-                &.button-icon--disabled {
-                    cursor: not-allowed !important;
-                    color: ${systemDisabled} !important;
-                    &.outlined {
-                        border-color: ${systemDisabled} !important;
-                        background-color: transparent !important;
-                    }
-                    &.filled {
-                        background-color: ${fillDisabled} !important;
-                        filter: brightness(1) !important;
-                    }
-                    &.text {
-                        background-color: transparent !important;
-                    }
-                }
-                &.button-icon--loading {
-                    ${pointerEventsNone}
-                }
-                &.${size} {
-                    width: ${width ? _width : buttonSize};
-                    min-width: ${width ? _width : buttonSize};
-                    height: ${height ? _height : buttonSize};
-                    min-height: ${height ? _height : buttonSize};
-                    .DGN-UI-ButtonIcon-Icon {
-                        height: ${iconSize};
-                        min-height: ${iconSize};
-                        width: ${iconSize};
-                        min-width: ${iconSize};
-                    }
-                }
-                &.outlined {
-                    ${backgroundTransparent}
-                    &.default {
-                        ${border(1, rest)}
-                        color: ${rest};
-                        &.button-icon--loading,
-                        &:hover,
-                        &:focus,
-                        &:active {
-                            color: ${colorHover};
-                            border-color: ${colorHover};
-                        }
-                        &.button-icon--loading {
-                            background-color: ${hexToRGBA(colorHover, alphaLoading)};
-                        }
-                        ${Object.keys(alphaArr).map(key => `&:${key} {
-                        background-color: ${hexToRGBA(colorHover, alphaArr[key])};
-                    }`)}// &:hover | &:focus | &:active
-                    }
-                    &.${color} {
-                        ${color !== 'default' && border(1, colorMap.get(color))}
-                        color: ${colorMap.get(color)};
-                        &.button-icon--loading {
-                            background-color: ${hexToRGBA(colorMap.get(color), alphaLoading)};
-                        }
-                        ${Object.keys(alphaArr).map(key => `&:${key} {
-                        background-color: ${hexToRGBA(colorMap.get(color), alphaArr[key])};
-                    }`)}
-                    }
-                    &.custom-color {
-                        ${border(1, color)}
-                        color: ${color};
-                        &.button-icon--loading {
-                            background-color: ${hexToRGBA(color, alphaLoading)};
-                        }
-                        ${Object.keys(alphaArr).map(key => `&:${key} {
-                        background-color: ${hexToRGBA(color, alphaArr[key])};
-                    }`)}
-                    }
-                }
-                &.filled {
-                    ${borderNone}
-                    color: ${white};
-                    font-weight: bold;
-                    &.button-icon--loading,
-                    &:hover,
-                    &:focus {
-                        filter: brightness(0.85);
-                    }
-                    &:active {
-                        filter: brightness(0.7);
-                    }
-                    &.default {
-                        background-color: ${rest};
-                        &.button-icon--loading,
-                        &:hover,
-                        &:focus,
-                        &:active {
-                            background-color: ${colorHover};
-                        }
-                    }
-                    &.${color} {
-                        background-color: ${colorMap.get(color)};
-                    }
-                    &.custom-color {
-                        background-color: ${color};
-                    }
-                }
-                &.text {
-                    ${noBorder}
-                    ${backgroundTransparent}
-            &.default {
-                        color: ${rest};
-                        &:hover,
-                        &:focus,
-                        &:active {
-                            color: ${colorHover};
-                        }
-                        &.button-icon--loading {
-                            color: ${active};
-                            background-color: ${hexToRGBA(colorHover, alphaLoading)};
-                        }
-                        ${Object.keys(alphaArr).map(key => `&:${key} {
-                        background-color: ${hexToRGBA(colorHover, alphaArr[key])};
-                    }`)}
-                    }
-                    &.${color} {
-                        color: ${colorMap.get(color)};
-                        &.button-icon--loading {
-                            background-color: ${hexToRGBA(colorMap.get(color), alphaLoading)};
-                        }
-                        ${Object.keys(alphaArr).map(key => `&:${key} {
-                        background-color: ${hexToRGBA(colorMap.get(color), alphaArr[key])};
-                    }`)}
-                    }
-                    &.custom-color {
-                        color: ${color};
-                        &.button-icon--loading {
-                            background-color: ${hexToRGBA(color, alphaLoading)};
-                        }
-                        ${Object.keys(alphaArr).map(key => `&:${key} {
-                        background-color: ${hexToRGBA(color, alphaArr[key])};
-                    }`)}
-                    }
-                }
-                &.ghost {
-                    ${backgroundTransparent}
-                    ${noBorder}
-            color: ${rest};
-                    &.${size} {
-                        height: ${height ? _height : iconSize};
-                        min-height: ${height ? _height : iconSize};
-                        width: ${width ? _width : iconSize};
-                        min-width: ${width ? _width : iconSize};
-                    }
-                    &.loading,
-                    &:hover,
-                    &:focus {
-                        filter: brightness(0.85);
-                    }
-                    &:active {
-                        filter: brightness(0.7);
-                    }
-                    &.default {
-                        &:hover,
-                        &:focus,
-                        &:active {
-                            color: ${iconColorMap.get(capitalize(name)) || colorHover};
-                        }
-                    }
-                    &.${color} {
-                        color: ${colorMap.get(color)};
-                    }
-                    &.custom-color {
-                        color: ${color};
-                    }
-                }
-            `;
+  const _color = colors[color];
+  colorHover = colors[colorHover] || colorHover;
+
+  const _ButtonRootCSS = ButtonRootCSS(circular, size, width, _width, height, _height, buttonSize, iconSize, colorHover, color, _color, name);
+
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
     const _instance = {}; // methods
@@ -291,16 +114,6 @@ const ButtonIcon = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     return currentRef;
   });
 
-  const iconLoading = () => {
-    return jsx(CircularProgress, {
-      size: 'extraSmall',
-      background: 'transparent',
-      color: 'currentColor',
-      strokeWidth: 3,
-      width: parseInt(iconSize)
-    });
-  };
-
   const _onClick = event => {
     onClick && event.stopPropagation();
     if (disabled || loading) return;
@@ -320,22 +133,210 @@ const ButtonIcon = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       });
     }
 
-    return jsx("button", {
-      css: ButtonRoot,
+    return jsx("div", {
+      css: _ButtonRootCSS,
       style: style,
       ref: ref,
-      type: type,
       onClick: _onClick,
       className: ['DGN-UI-ButtonIcon', viewType, getClassNameFromColor(color), size, loading && 'button-icon--loading', disabled && 'button-icon--disabled', className].join(' ').trim().replace(/\s+/g, ' '),
-      ...props
-    }, loading && iconLoading(), !loading && jsx("span", {
+      id: id
+    }, loading && renderIconLoading(iconSize), !loading && jsx("span", {
       className: 'DGN-UI-ButtonIcon-Icon'
     }, " ", node, " "), !disabled && !loading && viewType !== 'ghost' && jsx(Ripple, {
       color: getRippleColor(color, viewType, allColors),
-      circular: true
+      circular: circular
     }));
-  }, [size, viewType, color, colorHover, disabled, name, children, onClick, loading, circular, viewBox, width, height]);
+  }, [style, className, size, viewType, color, colorHover, disabled, name, children, onClick, loading, circular, viewBox, width, height]);
 }));
+
+const ButtonRootCSS = (circular, size, width, _width, height, _height, buttonSize, iconSize, colorHover, color, _color, name) => css`
+    ${inlineFlex};
+    ${positionRelative};
+    ${justifyCenter};
+    ${alignCenter};
+    ${outlineNone};
+    ${borderBox};
+    ${cursorPointer};
+    ${userSelectNone};
+    padding: 0;
+    border-radius: ${circular ? '50%' : '4px'};
+    transition: background-color 0.5s, filter 0.5s;
+    .DGN-UI-ButtonIcon-Icon {
+        ${flexRow};
+        ${positionRelative};
+        ${borderBox};
+        ${justifyCenter};
+        ${alignCenter};
+    }
+    &.button-icon--disabled {
+        cursor: not-allowed !important;
+        color: ${systemDisabled} !important;
+        &.outlined {
+            border-color: ${systemDisabled} !important;
+            background-color: transparent !important;
+        }
+        &.filled {
+            background-color: ${fillDisabled} !important;
+            filter: brightness(1) !important;
+        }
+        &.text {
+            background-color: transparent !important;
+        }
+    }
+    &.button-icon--loading {
+        ${pointerEventsNone};
+    }
+    &.${size} {
+        width: ${width ? _width : buttonSize};
+        min-width: ${width ? _width : buttonSize};
+        height: ${height ? _height : buttonSize};
+        min-height: ${height ? _height : buttonSize};
+        .DGN-UI-ButtonIcon-Icon {
+            height: ${iconSize};
+            min-height: ${iconSize};
+            width: ${iconSize};
+            min-width: ${iconSize};
+        }
+    }
+    &.outlined {
+        ${backgroundTransparent};
+        &.default {
+            ${border(1, rest)}
+            color: ${rest};
+            &.button-icon--loading,
+            &:hover,
+            &:focus,
+            &:active {
+                color: ${colorHover};
+                border-color: ${colorHover};
+            }
+            &.button-icon--loading {
+                background-color: ${hexToRGBA(colorHover, alphaLoading)};
+            }
+            ${Object.keys(alphaArr).map(key => `&:${key} {
+                        background-color: ${hexToRGBA(colorHover, alphaArr[key])};
+                    }`)}// &:hover | &:focus | &:active
+        }
+        &.${color} {
+            ${color !== 'default' && border(1, _color)}
+            color: ${_color};
+            &.button-icon--loading {
+                background-color: ${hexToRGBA(_color, alphaLoading)};
+            }
+            ${Object.keys(alphaArr).map(key => `&:${key} {
+                        background-color: ${hexToRGBA(_color, alphaArr[key])};
+                    }`)}
+        }
+        &.custom-color {
+            ${border(1, color)}
+            color: ${color};
+            &.button-icon--loading {
+                background-color: ${hexToRGBA(color, alphaLoading)};
+            }
+            ${Object.keys(alphaArr).map(key => `&:${key} {
+                        background-color: ${hexToRGBA(color, alphaArr[key])};
+                    }`)}
+        }
+    }
+    &.filled {
+        ${borderNone};
+        color: ${color === white ? rest : white};
+        font-weight: bold;
+        &.button-icon--loading,
+        &:hover,
+        &:focus {
+            filter: brightness(0.85);
+        }
+        &:active {
+            filter: brightness(0.7);
+        }
+        &.default {
+            background-color: ${rest};
+            &.button-icon--loading,
+            &:hover,
+            &:focus,
+            &:active {
+                background-color: ${colorHover};
+            }
+        }
+        &.${color} {
+            background-color: ${_color};
+        }
+        &.custom-color {
+            background-color: ${color};
+        }
+    }
+    &.text {
+        ${noBorder};
+        ${backgroundTransparent};
+        &.default {
+            color: ${rest};
+            &:hover,
+            &:focus,
+            &:active {
+                color: ${colorHover};
+            }
+            &.button-icon--loading {
+                color: ${active};
+                background-color: ${hexToRGBA(colorHover, alphaLoading)};
+            }
+            ${Object.keys(alphaArr).map(key => `&:${key} {
+                        background-color: ${hexToRGBA(colorHover, alphaArr[key])};
+                    }`)}
+        }
+        &.${color} {
+            color: ${_color};
+            &.button-icon--loading {
+                background-color: ${hexToRGBA(_color, alphaLoading)};
+            }
+            ${Object.keys(alphaArr).map(key => `&:${key} {
+                        background-color: ${hexToRGBA(_color, alphaArr[key])};
+                    }`)}
+        }
+        &.custom-color {
+            color: ${color};
+            &.button-icon--loading {
+                background-color: ${hexToRGBA(color, alphaLoading)};
+            }
+            ${Object.keys(alphaArr).map(key => `&:${key} {
+                        background-color: ${hexToRGBA(color, alphaArr[key])};
+                    }`)}
+        }
+    }
+    &.ghost {
+        ${backgroundTransparent};
+        ${noBorder};
+        color: ${rest};
+        &.${size} {
+            height: ${height ? _height : iconSize};
+            min-height: ${height ? _height : iconSize};
+            width: ${width ? _width : iconSize};
+            min-width: ${width ? _width : iconSize};
+        }
+        &.loading,
+        &:hover,
+        &:focus {
+            filter: brightness(0.85);
+        }
+        &:active {
+            filter: brightness(0.7);
+        }
+        &.default {
+            &:hover,
+            &:focus,
+            &:active {
+                color: ${iconColorMap.get(capitalize(name)) || colorHover};
+            }
+        }
+        &.${color} {
+            color: ${_color};
+        }
+        &.custom-color {
+            color: ${color};
+        }
+    }
+`;
+
 ButtonIcon.defaultProps = {
   viewType: 'outlined',
   color: 'default',
@@ -347,9 +348,6 @@ ButtonIcon.defaultProps = {
   viewBox: true
 };
 ButtonIcon.propTypes = {
-  /** The type attribute specifies the type of tag button */
-  type: PropTypes.oneOf(['button', 'submit', 'reset']),
-
   /** used to fill background for button */
   viewType: PropTypes.oneOf(['text', 'outlined', 'filled', 'ghost']),
 
@@ -397,9 +395,6 @@ ButtonIcon.propTypes = {
   /** element to display in button */
   children: PropTypes.node,
 
-  /** any props else */
-  props: PropTypes.any,
-
   /** status loading of button */
   loading: PropTypes.bool,
 

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

@@ -316,11 +316,11 @@ Checkbox.propTypes = {
   /** The function will run to return a true or false value of Radio Component */
   onChange: PropTypes.func,
 
-  /**
-   * ref methods
-   *
-   * * setChecked: Set check for input
-   * * getChecked: Get check of input
+  /**
+   * ref methods
+   *
+   * * setChecked: Set check for input
+   * * getChecked: Get check of input
    */
   ref: PropTypes.any
 };