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

package/components/avatar/index.js

@@ -27,8 +27,7 @@ const {
   zIndex: zIndexCORE
 } = useTheme();
 const existed = {},
-  urlAvatar = {},
-  popupHandler = {};
+  urlAvatar = {};
 const blurKeyframe = keyframes`
     0% { -webkit-filter: blur(4px);}
     25% { -webkit-filter: blur(3px);}
@@ -78,6 +77,7 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const ref = useRef(null);
   const inputRef = useRef(null);
   const avatarRef = useRef(null);
+  const popupRef = useRef(null);
   const [unique] = useState(randomString(6, {
     allowNumber: false,
     allowSymbol: false
@@ -109,12 +109,16 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     const reader = new FileReader();
     if (!checkFileType(file.type, matchType)) {
       input.target.value = '';
-      popupHandler[unique].show(wrongTypeError);
+      popupRef.current.instance.show({
+        description: wrongTypeError
+      });
       return;
     }
     if (+maxSize && file.size > maxSize * 1024 ** 2) {
       input.target.value = '';
-      popupHandler[unique].show(maxSizeError);
+      popupRef.current.instance.show({
+        description: maxSizeError
+      });
       return;
     }
     reader.onload = e => {
@@ -295,11 +299,8 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }, jsx("div", {
       css: MoreInfoCSS
     }, typeof data === 'function' ? data() : renderData())), !disabled && !readOnly && jsx(Popup, {
-      getPopup: func => popupHandler[unique] = func,
-      type: 'info',
-      title: maxSizeError,
-      icon: 'danger',
-      fullScreen: true
+      ref: popupRef,
+      type: 'danger'
     }));
   }, [actionIconHeight, actionIconWidth, allowEdit, clearAble, data, defaultSrc, direction, disabled, height, hoverAble, lazyLoading, matchType, maxSize, maxSizeError, outlined, readOnly, width, isInView, onLoaded, srcState, viewAvatar, viewMoreInfo]);
 }));

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/button/icon.js

@@ -11,7 +11,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, borderRadius4px, borderRadius50, cursorPointer, flexRow, inlineFlex, justifyCenter, noBorder, outlineNone, parseMinWidthHeight, parseWidthHeight, pointerEventsNone, positionRelative, userSelectNone } from "../../styles/general";
+import { alignCenter, backgroundTransparent, border, borderBox, borderNone, borderRadius4px, borderRadius50, cursorPointer, flexRow, inlineFlex, justifyCenter, outlineNone, parseMinWidthHeight, parseWidthHeight, pointerEventsNone, positionRelative, userSelectNone } from "../../styles/general";
 import { useColor as colors, useTheme } from "../../theme";
 const {
   colors: {
@@ -47,6 +47,9 @@ const sizeMap = new Map([['tiny', {
 }], ['giant', {
   buttonSize: '56px',
   iconSize: '40px'
+}], ['extraGiant', {
+  buttonSize: '96px',
+  iconSize: '56px'
 }]]);
 const iconColorMap = new Map([['Close', semanticDanger], ['Cancel', semanticDanger], ['Approval', semanticSuccess], ['Delete', semanticWarning], ['Trash', semanticWarning], ['Edit', semanticInfo], ['EditV2', semanticInfo], ['View', semanticInfo]]);
 const alphaArr = {
@@ -239,7 +242,7 @@ const ButtonRootCSS = (circular, colorHover, color, name) => css`
         }
     }
     &.text {
-        ${noBorder};
+        ${borderNone};
         ${backgroundTransparent};
         color: ${color};
         &.button-icon--loading {
@@ -266,7 +269,7 @@ const ButtonRootCSS = (circular, colorHover, color, name) => css`
     }
     &.ghost {
         ${backgroundTransparent};
-        ${noBorder};
+        ${borderNone};
         color: ${color};
         &.loading,
         &:hover,
@@ -326,7 +329,7 @@ ButtonIcon.propTypes = {
    * * large (button 48px, icon 32px)
    * * giant (button 56px, icon 40px)
    * */
-  size: PropTypes.oneOf(['tiny', 'small', 'medium', 'large', 'giant']),
+  size: PropTypes.oneOf(['tiny', 'small', 'medium', 'large', 'giant', 'extraGiant']),
   /** Style inline of component. */
   style: PropTypes.object,
   /** If `true`, icon has view box. */

package/components/button/index.js

@@ -1,17 +1,15 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
+import { CircularProgress, Icon, Typography } from "./..";
+import OptionWrapper from "../others/option-wrapper";
 import PropTypes from 'prop-types';
-import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
-import { Typography } from "../";
-import Icon from "../../icons";
+import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { detectColor, fade, hexToRGBA, hslToRgb, isColor, isColorName, rgbaToHexA, rgbToHex } from "../../styles/color-helper";
 import * as allColors from "../../styles/colors";
-import { alignCenter, backgroundTransparent, border, borderBox, borderNone, borderRadius4px, cursorPointer, flexRow, inlineFlex, justifyCenter, noBorder, noMargin, noPadding, outlineNone, overflowHidden, parseHeight, parseMinHeight, parseMinWidth, parseMinWidthHeight, parseWidthHeight, pointerEventsNone, positionRelative, userSelectNone } from "../../styles/general";
+import { alignCenter, backgroundTransparent, border, borderBox, borderNone, borderRadius4px, cursorPointer, flexRow, inlineFlex, justifyCenter, outlineNone, overflowHidden, parseHeight, parseMinHeight, parseMinWidth, parseMinWidthHeight, parseWidthHeight, pointerEventsNone, positionRelative, userSelectNone } from "../../styles/general";
 import { useColor as colors, useTheme } from "../../theme";
 import { classNames, refType as ref } from "../../utils";
-import OptionWrapper from "../others/option-wrapper";
-import CircularProgress from "../progress/circular";
 import Ripple from "./ripple-effect";
 const {
   colors: {
@@ -89,6 +87,7 @@ const Button = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   color: colorProp,
   disabled,
   endIcon,
+  href,
   id,
   label,
   labelProps,
@@ -99,12 +98,14 @@ const Button = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   stopPropagation,
   text,
   type,
+  urlParams,
   viewType,
   ...props
 }, reference) => {
   label = label || text || '';
   const ref = useRef(null);
   const rippleRef = useRef(null);
+  const [urlState, setUrlState] = useState(href);
   const iconSize = iconSizeMap.get(size);
   const paddingSize = paddingSizeMap.get(size);
   const outlinedPaddingSize = outlinedPaddingSizeMap.get(size);
@@ -114,10 +115,25 @@ const Button = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const minHeightSizeLink = minHeightSizeLinkMap.get(size);
   const color = colors[colorProp] || colorProp;
   const isViewTypeLink = viewType === 'link';
+  const TagName = href ? 'a' : 'button';
   const _ButtonRootCSS = ButtonRootCSS(color);
   const _ButtonIcon = ButtonIconCSS(endIcon, label, startIcon, iconMarginSize, iconSize);
   const _ButtonTextCSS = ButtonTextCSS(loading, iconMarginSize);
   const _ButtonSizeCSS = ButtonSizeCSS(paddingSize, minHeightSize, minHeightSizeLink, outlinedPaddingSize, iconSize);
+  const _onClick = e => {
+    if (href) e.preventDefault(); //Prevent open link when click
+    onClick && stopPropagation && e.stopPropagation();
+    if (disabled || loading) return;
+    if (!isViewTypeLink) rippleRef.current.start(e);
+    onClick && onClick(e);
+  };
+  useEffect(() => {
+    if (href) {
+      const qs = urlParams ? '?' + new URLSearchParams(urlParams).toString() : '';
+      const url = href + qs;
+      setUrlState(url);
+    }
+  }, [href, urlParams]);
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
     currentRef.element = ref.current;
@@ -171,19 +187,11 @@ const Button = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const iconLoading = () => {
     return jsx(CircularProgress, {
       className: 'DGN-UI-Button-Loading',
-      size: 'extraSmall',
       background: 'transparent',
       color: 'currentColor',
-      strokeWidth: 3,
-      width: parseInt(iconSize)
+      size: parseInt(iconSize)
     });
   };
-  const _onClick = e => {
-    onClick && stopPropagation && e.stopPropagation();
-    if (disabled || loading) return;
-    if (!isViewTypeLink) rippleRef.current.start(e);
-    onClick && onClick(e);
-  };
   return useMemo(() => {
     // 1. Có StartIcon => thay StartIcon
     // 2. Có EndIcon => thay EndIcon
@@ -203,7 +211,7 @@ const Button = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
       if (!startIcon && !endIcon) start = iconLoading();
     }
-    return jsx("button", {
+    return jsx(TagName, {
       css: [_ButtonRootCSS, _ButtonSizeCSS, disabled && ButtonDisabledCSS],
       ref: ref,
       onClick: _onClick,
@@ -211,17 +219,18 @@ const Button = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       type: type,
       disabled: disabled,
       className: classNames('DGN-UI-Button', viewType, getClassNameFromColor(colorProp), size, loading && 'button--loading', className),
+      href: urlState || null,
       ...props
     }, start, jsx(Typography, {
       css: _ButtonTextCSS,
       type: typographySize,
       className: classNames('DGN-UI-Button-Label', 'button-text'),
       ...labelProps
-    }, children || label), end && end, !disabled && !loading && !isViewTypeLink && jsx(Ripple, {
+    }, children || label), end ? end : null, !disabled && !loading && !isViewTypeLink ? jsx(Ripple, {
       ref: rippleRef,
       color: getRippleColor(colorProp, viewType, allColors)
-    }));
-  }, [children, className, colorProp, disabled, endIcon, id, label, loading, onClick, size, startIcon, stopPropagation, type, viewType]);
+    }) : null);
+  }, [children, className, colorProp, disabled, endIcon, href, id, label, loading, onClick, size, startIcon, stopPropagation, type, urlParams, viewType, urlState]);
 }));
 const ButtonIconCSS = (endIcon, label, startIcon, iconMarginSize, iconSize) => css`
     ${flexRow};
@@ -270,7 +279,7 @@ const ButtonSizeCSS = (paddingSize, minHeightSize, minHeightSizeLink, outlinedPa
         ${parseMinHeight(minHeightSizeLink)};
     }
     .no-icon {
-        ${noMargin};
+        margin: 0;
         ${parseHeight(iconSize)};
         ${parseMinWidth(0)};
     }
@@ -288,6 +297,7 @@ const ButtonRootCSS = color => css`
     ${outlineNone};
     ${userSelectNone};
     ${parseHeight('max-content')};
+    text-decoration: none;
     transition: all 0.5s;
     &.button--loading {
         ${pointerEventsNone};
@@ -347,7 +357,7 @@ const ButtonRootCSS = color => css`
     }
     &.text {
         ${backgroundTransparent};
-        ${noBorder};
+        ${borderNone};
         color: ${color};
         &.button--loading {
             background-color: ${hexToRGBA(color, alphaLoading)};
@@ -373,8 +383,8 @@ const ButtonRootCSS = color => css`
     }
     &.link {
         ${backgroundTransparent};
-        ${noBorder};
-        ${noPadding};
+        ${borderNone};
+        padding: 0;
         color: ${color};
         &.button--loading,
         &:hover,
@@ -410,6 +420,8 @@ Button.propTypes = {
   disabled: PropTypes.bool,
   /** [Icon](https://core.diginet.com.vn/ui/?path=/story/icon-basic--basic) or element placed after the children. */
   endIcon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  /** The URL to link to when the button is clicked. If defined, an `a` element will be used as the root node. */
+  href: PropTypes.string,
   /** The content of the component. */
   label: PropTypes.string,
   /** [Props](https://core.diginet.com.vn/ui/?path=/docs/typography--title) applied to the `Typography` label. */
@@ -422,6 +434,8 @@ Button.propTypes = {
   size: PropTypes.oneOf(['tiny', 'small', 'medium', 'large', 'giant']),
   /** [Icon](https://core.diginet.com.vn/ui/?path=/story/icon-basic--basic) or element placed before the children. */
   startIcon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  /** Query params pass to url. */
+  urlParams: PropTypes.object,
   /** The variant to use. */
   viewType: PropTypes.oneOf(['text', 'outlined', 'filled', 'link']),
   /**

package/components/divider/index.js

@@ -1,78 +1,79 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { memo, useMemo, useEffect, useRef, forwardRef } from 'react';
+import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
-import { jsx, css } from '@emotion/core';
-import { noBorder } from "../../styles/general";
-import { color as colors } from "../../styles/colors";
+import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
+import { noBorder, parseWidthHeight } from "../../styles/general";
+import { useColor as colors, useTheme } from "../../theme";
+import { classNames } from "../../utils";
 const {
-  system: {
-    disabled: systemDisabled
+  colors: {
+    system: {
+      disabled: systemDisabled
+    }
   }
-} = colors;
+} = useTheme();
 const Divider = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  width,
-  height,
-  direction,
-  color,
+  action = {},
   className,
+  color,
+  direction,
+  height,
+  id,
   style,
-  ...props
-}, ref) => {
-  if (!ref) {
-    ref = useRef(null);
-  }
-  if (typeof width === 'number') width = `${width}px`;
-  if (typeof height === 'number') height = `${height}px`;
-  const DividerRoot = css`
-            ${noBorder}
-            flex-shrink: 0;
-            margin: 0;
-            background-color: ${colors.semantic[color] || color};
-            &.vertical {
-                width: ${width || '1px'};
-                height: ${height || '100%'};
-                /* margin: auto 5px; */
-            }
-            &.horizontal {
-                width: ${width || '100%'};
-                height: ${height || '1px'};
-                /* margin: 5px auto; */
-            }
-        `;
-  useEffect(() => {
-    if (direction === 'vertical' && !height && ref.current && ref.current.parentNode) {
-      ref.current.style.height = ref.current.parentNode.offsetHeight + 'px';
-    }
-  }, []);
+  width
+}, reference) => {
+  if (!reference) reference = useRef(null);
+  const ref = useRef(null);
+  const _DividerRoot = DividerRoot(color, width, height);
+  useImperativeHandle(reference, () => {
+    const currentRef = ref.current || {};
+    currentRef.element = ref.current;
+    const _instance = {
+      ...action
+    }; // methods
+    _instance.__proto__ = {}; // hidden methods
+    currentRef.instance = _instance;
+    return currentRef;
+  });
   return useMemo(() => jsx("hr", {
-    css: DividerRoot,
+    css: _DividerRoot,
     ref: ref,
+    id: id,
     style: style,
-    className: ['DGN-UI-Divider', direction, className].join(' ').trim(),
-    ...props
-  }), [width, height, color, style, className]);
+    className: classNames('DGN-UI-Divider', direction, className)
+  }), [className, color, direction, height, id, style, width]);
 }));
+const DividerRoot = (color, width, height) => css`
+    ${noBorder}
+    flex-shrink: 0;
+    margin: 0;
+    background-color: ${colors[color] || color};
+    &.vertical {
+        ${parseWidthHeight(width || '1px', height || 'auto')};
+    }
+    &.horizontal {
+        ${parseWidthHeight(width || '100%', height || '1px')};
+    }
+`;
 Divider.defaultProps = {
+  className: '',
   color: systemDisabled,
   direction: 'horizontal',
-  style: {},
-  className: ''
+  style: {}
 };
 Divider.propTypes = {
-  /** width of divider */
-  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  /** color of divider */
-  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  /** color of divider */
+  /** Class for component. */
+  className: PropTypes.string,
+  /** The color of the component. */
   color: PropTypes.string,
   /** direction of divider */
   direction: PropTypes.oneOf(['vertical', 'horizontal']),
-  /** style inline of divider */
+  /** Height oof the component. */
+  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  /** Style inline of component. */
   style: PropTypes.object,
-  /** className of divider */
-  className: PropTypes.string,
-  /** any props else */
-  props: PropTypes.object
+  /** Width of the component. */
+  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 };
 export default Divider;