diginet-core-ui 1.3.33 → 1.3.34

package/components/button/icon.js

@@ -13,7 +13,7 @@ import Icon from '../../icons';
 import Ripple from './ripple-effect';
 import { getClassNameFromColor, getRippleColor } from '.';
 import CircularProgress from '../progress/circular';
-import { alignCenter, backgroundTransparent, border, borderBox, borderNone, cursorPointer, flexRow, inlineFlex, justifyCenter, noBorder, outlineNone, overflowHidden, pointerEventsNone, positionRelative, userSelectNone } from '../../styles/general';
+import { alignCenter, backgroundTransparent, border, borderBox, borderNone, cursorPointer, flexRow, inlineFlex, justifyCenter, noBorder, outlineNone, pointerEventsNone, positionRelative, userSelectNone } from '../../styles/general';
 const {
   system: {
     active,
@@ -87,189 +87,200 @@ const ButtonIcon = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const ref = useRef(null);
   const buttonSize = ((_sizeMap$get = sizeMap.get(size)) === null || _sizeMap$get === void 0 ? void 0 : _sizeMap$get.buttonSize) || '40px';
   const iconSize = width ? isNaN(width) ? '60%' : customIconSize(parseInt(width)) + 'px' : ((_sizeMap$get2 = sizeMap.get(size)) === null || _sizeMap$get2 === void 0 ? void 0 : _sizeMap$get2.iconSize) || '24px';
+  const isViewTypeGhost = viewType === 'ghost';
+
+  const _width = isNaN(width) ? width : width + 'px';
+
+  const _height = isNaN(height) ? height : height + 'px';
+
   colorHover = colorMap.get(colorHover) || colorHover;
   const ButtonRoot = css`
-        ${inlineFlex}
-        ${positionRelative}
+                ${inlineFlex}
+                ${positionRelative}
         ${justifyCenter}
         ${alignCenter}
         ${outlineNone}
         ${borderBox}
-        ${overflowHidden}
         ${cursorPointer}
         ${userSelectNone}
         padding: 0;
-        border-radius: ${circular ? '50%' : '4px'};
-        transition: background-color 0.5s, filter 0.5s;
-        .DGN-UI-ButtonIcon-Icon {
-            ${flexRow}
-            ${positionRelative}
+                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 ? isNaN(width) ? width : width + 'px' : buttonSize};
-            height: ${height ? isNaN(height) ? height : height + 'px' : buttonSize};
-            .DGN-UI-ButtonIcon-Icon {
-                height: ${iconSize};
-                width: ${iconSize};
-            }
-        }
-        &.outlined {
-            ${backgroundTransparent}
-            &.default {
-                ${border(1, rest)}
-                color: ${rest};
-                &.button-icon--loading,
-                &:hover,
-                &:focus,
-                &:active {
-                    color: ${colorHover};
-                    border-color: ${colorHover};
+                }
+                &.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 {
-                    background-color: ${hexToRGBA(colorHover, alphaLoading)};
+                    ${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};
+                    }
                 }
-                ${Object.keys(alphaArr).map(key => `&:${key} {
+                &.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} {
+                    }
+                    &.${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} {
+                    }
+                    &.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};
+                &.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};
+                    }
                 }
-                &.button-icon--loading {
-                    color: ${active};
-                    background-color: ${hexToRGBA(colorHover, alphaLoading)};
-                }
-                ${Object.keys(alphaArr).map(key => `&:${key} {
+                &.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} {
+                    }
+                    &.${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} {
+                    }
+                    &.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: ${iconSize};
-                width: ${iconSize};
-            }
-            &.default {
-                &:hover,
-                &:focus,
-                &:active {
-                    color: ${iconColorMap.get(capitalize(name)) || colorHover};
+                    }
                 }
-            }
-            &.${color} {
-                &:hover,
-                &:focus,
-                &:active {
-                    color: ${colorMap.get(color)};
-                }
-            }
-            &.custom-color {
-                &:hover,
-                &:focus,
-                &:active {
-                    color: ${color};
+                &.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};
+                    }
                 }
-            }
-        }
-    `;
+            `;
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
     const _instance = {}; // methods
@@ -302,10 +313,10 @@ const ButtonIcon = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     if (!node) {
       node = jsx(Icon, {
         name: name,
-        width: iconSize,
-        height: iconSize,
+        width: isViewTypeGhost ? width ? _width : iconSize : iconSize,
+        height: isViewTypeGhost ? height ? _height : iconSize : iconSize,
         color: 'currentColor',
-        viewBox: true
+        viewBox: viewBox
       });
     }
 
@@ -320,7 +331,8 @@ const ButtonIcon = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }, loading && iconLoading(), !loading && jsx("span", {
       className: 'DGN-UI-ButtonIcon-Icon'
     }, " ", node, " "), !disabled && !loading && viewType !== 'ghost' && jsx(Ripple, {
-      color: getRippleColor(color, viewType, allColors)
+      color: getRippleColor(color, viewType, allColors),
+      circular: true
     }));
   }, [size, viewType, color, colorHover, disabled, name, children, onClick, loading, circular, viewBox, width, height]);
 }));
@@ -347,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']),
 
@@ -391,12 +403,23 @@ ButtonIcon.propTypes = {
   /** status loading of button */
   loading: PropTypes.bool,
 
-  /**
-   * ref methods
-   * 
-   * * onClick
+  /**
+   * 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.func
+  reference: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.instanceOf(Element)
+  })])
 };
 export { ButtonIcon };
 export default OptionWrapper(ButtonIcon);

package/components/button/index.js

@@ -485,15 +485,22 @@ Button.propTypes = {
   loading: PropTypes.bool,
 
   /**
-  * ref methods
-  * 
-  * * onClick(): Call onClick function
-  * * option(): Gets all UI component properties
-  * * option(optionName): Gets the value of a single property.
-  * * option(optionName, optionValue): Updates the value of a single property
-  * * option(options): Updates the values of several properties
-  */
-  ref: 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
+   */
+  reference: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.instanceOf(Element)
+  })])
 };
 export { Button };
 export default OptionWrapper(Button);

package/components/button/ripple-effect.js

@@ -18,6 +18,7 @@ const useDebouncedRippleCleanUp = (rippleCount, duration, cleanUpFunction) => {
 const Ripple = ({
   duration = 850,
   color = '#fff',
+  circular = false,
   ...props
 }) => {
   const [rippleArray, setRippleArray] = useState([]);
@@ -31,6 +32,7 @@ const Ripple = ({
     right: 0;
     bottom: 0;
     left: 0;
+    ${circular && 'border-radius: 50%;'}
 
     span {
       transform: scale(0);