diginet-core-ui 1.3.92-beta.1 → 1.3.93-beta.1

package/components/breadcrumb/index.js

@@ -1,43 +1,42 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
-import { ButtonIcon, Typography } from "./..";
-import { Icon } from "../../icons/effect";
+import { ButtonMore, Typography } from "./..";
 import OptionWrapper from "../others/option-wrapper";
+import { Icon } from "../../icons/effect";
 import PropTypes from 'prop-types';
 import React, { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
-import { displayFlex, flexWrap, itemsCenter, mg, mgx, pd, userSelectNone } from "../../styles/general";
+import { hexToRGBA } from "../../styles/color-helper";
+import { bgColor, borderRadius, cursorPointer, displayFlex, flexWrap, gap, itemsCenter, mg, pd, pdl, pdr, textColor, userSelectNone } from "../../styles/general";
+import { useTypography as typography } from "../../theme";
 import { classNames } from "../../utils";
-const insertSeparators = (items, separator) => {
-  return items.reduce((acc, current, index) => {
-    if (index < items.length - 1) {
-      acc = acc.concat(current, jsx("li", {
-        css: BreadcrumbSeparatorCSS,
-        "aria-hidden": true,
-        key: `separator-${index}`,
-        className: 'DGN-UI-Breadcrumb-separator'
-      }, separator));
-    } else {
-      acc.push(current);
-    }
-    return acc;
-  }, []);
-};
+const sizeIconMap = new Map([['tiny', 16], ['small', 18], ['medium', 20]]);
+const sizeTypographyPMap = new Map([['tiny', 'p3'], ['small', 'p2'], ['medium', 'p1']]);
+const sizeTypographyHMap = new Map([['tiny', 'h5'], ['small', 'h4'], ['medium', 'h3']]);
 const Breadcrumb = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
   children,
   className,
+  color,
   data,
   id,
   itemsAfterCollapse,
   itemsBeforeCollapse,
   maxItems,
   separator,
+  size,
   style
 }, reference) => {
   if (!reference) reference = useRef(null);
+  if (color === 'default') color = 'system.rest';
   const ref = useRef(null);
-  const [expanded, setExpanded] = React.useState(false);
+  const sizeIcon = sizeIconMap.get(size);
+  const sizeTypographyP = sizeTypographyPMap.get(size);
+  const sizeTypographyH = sizeTypographyHMap.get(size);
+
+  // const [expanded, setExpanded] = React.useState(false);
+
+  const _BreadcrumbLiCSS = BreadcrumbLiCSS(color, sizeTypographyP, sizeTypographyH);
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
     currentRef.element = ref.current;
@@ -48,39 +47,78 @@ const Breadcrumb = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     currentRef.instance = _instance;
     return currentRef;
   });
+  const renderSeparator = typeof separator === 'string' ? jsx(Icon, {
+    name: separator,
+    width: sizeIcon,
+    height: sizeIcon,
+    color: color,
+    viewBox: true
+  }) : separator;
   const renderItemsBeforeAndAfter = allItems => {
-    const handleClickExpand = () => {
-      setExpanded(true);
-    };
+    // const handleClickExpand = () => {
+    //     setExpanded(true);
+    // };
+
     if (itemsBeforeCollapse + itemsAfterCollapse >= allItems.length) {
       return allItems;
     }
-    return [...allItems.slice(0, itemsBeforeCollapse), jsx(ButtonIcon, {
+    let options = [];
+    data.slice(itemsBeforeCollapse, allItems.length - itemsAfterCollapse).map(item => {
+      var _item$onClick;
+      return options = [...options, {
+        label: (item === null || item === void 0 ? void 0 : item.label) || (item === null || item === void 0 ? void 0 : item.name),
+        icon: item === null || item === void 0 ? void 0 : item.icon,
+        action: item === null || item === void 0 ? void 0 : (_item$onClick = item.onClick) === null || _item$onClick === void 0 ? void 0 : _item$onClick.call(item)
+      }];
+    });
+    return [...allItems.slice(0, itemsBeforeCollapse), jsx(ButtonMore, {
       key: "ellipsis",
-      name: 'MoreHoriz',
-      width: 24,
-      height: 16,
-      onClick: handleClickExpand
-    }), ...allItems.slice(allItems.length - itemsAfterCollapse, allItems.length)];
+      options: options,
+      anchor: jsx("li", {
+        key: "ellipsis",
+        css: _BreadcrumbLiCSS
+      }, jsx(Icon, {
+        name: 'MoreHoriz',
+        width: sizeIcon,
+        height: sizeIcon,
+        color: color
+      }), renderSeparator)
+    }),
+    // <ButtonIcon key="ellipsis" name={'MoreHoriz'} width={24} height={16} onClick={handleClickExpand} />,
+    ...allItems.slice(allItems.length - itemsAfterCollapse, allItems.length)];
   };
   const allItems = data !== null && data !== void 0 && data.length ? data.map((item, idx) => {
-    var _data$onClick;
+    var _item$onClick2;
     return jsx("li", {
+      css: _BreadcrumbLiCSS,
       className: 'DGN-UI-Breadcrumb-li',
       key: `child-${idx}`
-    }, jsx(Typography, {
-      type: (data === null || data === void 0 ? void 0 : data.length) === idx + 1 ? 'h5' : 'p3',
+    }, item !== null && item !== void 0 && item.icon ? jsx(Icon, {
+      className: 'DGN-UI-Breadcrumb-li-icon',
+      name: item === null || item === void 0 ? void 0 : item.icon,
+      color: color,
+      width: sizeIcon,
+      height: sizeIcon
+    }) : null, jsx(Typography, {
+      className: 'DGN-UI-Breadcrumb-li-label',
+      type: (data === null || data === void 0 ? void 0 : data.length) === idx + 1 ? sizeTypographyH : sizeTypographyP,
       mapping: 'a',
-      color: 'text.sub',
-      href: data === null || data === void 0 ? void 0 : data.href,
-      onClick: data === null || data === void 0 ? void 0 : (_data$onClick = data.onClick) === null || _data$onClick === void 0 ? void 0 : _data$onClick.call(data)
-    }, item === null || item === void 0 ? void 0 : item.name));
+      color: 'currentColor',
+      href: item === null || item === void 0 ? void 0 : item.href,
+      onClick: item === null || item === void 0 ? void 0 : (_item$onClick2 = item.onClick) === null || _item$onClick2 === void 0 ? void 0 : _item$onClick2.call(item)
+    }, (item === null || item === void 0 ? void 0 : item.label) || (item === null || item === void 0 ? void 0 : item.name)), (data === null || data === void 0 ? void 0 : data.length) !== idx + 1 ? renderSeparator : null);
   }) : React.Children.toArray(children).filter(child => {
     return /*#__PURE__*/React.isValidElement(child);
-  }).map((child, idx) => jsx("li", {
-    className: 'DGN-UI-Breadcrumb-li',
-    key: `child-${idx}`
-  }, child));
+  }).map((child, idx) => {
+    var _React$Children$toArr;
+    return jsx("li", {
+      css: _BreadcrumbLiCSS,
+      className: 'DGN-UI-Breadcrumb-li',
+      key: `child-${idx}`
+    }, child, ((_React$Children$toArr = React.Children.toArray(children).filter(child => {
+      return /*#__PURE__*/React.isValidElement(child);
+    })) === null || _React$Children$toArr === void 0 ? void 0 : _React$Children$toArr.length) !== idx + 1 ? renderSeparator : null);
+  });
   return useMemo(() => {
     return jsx("nav", {
       ref: ref,
@@ -88,34 +126,59 @@ const Breadcrumb = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       style: style,
       className: classNames('DGN-UI-Breadcrumb', className)
     }, jsx("ol", {
-      css: BreadcrumbOlCSS,
+      css: BreadcrumbOlCSS(color),
       className: 'DGN-UI-Breadcrumb-ol'
-    }, insertSeparators(expanded || maxItems && allItems.length <= maxItems ? allItems : renderItemsBeforeAndAfter(allItems), separator)));
-  }, [children, className, data, id, itemsAfterCollapse, itemsBeforeCollapse, maxItems, separator, style, expanded]);
+    },
+    // expanded ||
+    maxItems && allItems.length <= maxItems ? allItems : renderItemsBeforeAndAfter(allItems)));
+  }, [children, className, color, data, id, itemsAfterCollapse, itemsBeforeCollapse, maxItems, separator, size, style
+  // expanded,
+  ]);
 }));
-const BreadcrumbOlCSS = css`
+
+const alphaArr = {
+  hover: 0.1,
+  focus: 0.2,
+  active: 0.3
+};
+const BreadcrumbOlCSS = color => css`
     ${displayFlex};
     ${flexWrap};
     ${itemsCenter};
     ${pd(0)};
     ${mg(0)};
     list-style: none;
+    ${textColor(color)};
 `;
-const BreadcrumbSeparatorCSS = css`
+const BreadcrumbLiCSS = (color, sizeTypographyP, sizeTypographyH) => css`
+    ${typography[sizeTypographyP]};
+    &:last-child {
+        ${typography[sizeTypographyH]};
+    }
     ${displayFlex};
+    ${itemsCenter};
+    ${gap('4px')};
+    ${pdl([1])};
+    ${borderRadius(4)};
+    ${cursorPointer};
     ${userSelectNone};
-    ${mgx([2])};
+    &:last-child {
+        ${pdr([1])};
+    }
+    ${Object.keys(alphaArr).map(key => css`
+                &: ${key} {
+                    ${bgColor(hexToRGBA(color, alphaArr[key]))};
+                }
+            `)}
 `;
 Breadcrumb.defaultProps = {
   className: '',
-  itemsBeforeCollapse: 1,
+  color: 'default',
   itemsAfterCollapse: 1,
+  itemsBeforeCollapse: 1,
   maxItems: 8,
-  separator: jsx(Icon, {
-    name: 'ArrowRight',
-    width: 16,
-    height: 16
-  }),
+  separator: 'ArrowRight',
+  size: 'medium',
   style: {}
 };
 Breadcrumb.propTypes = {
@@ -123,9 +186,11 @@ Breadcrumb.propTypes = {
   children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   /** Class for component. */
   className: PropTypes.string,
+  /** The color of the component. */
+  color: PropTypes.string,
   /** Class for component. */
   data: PropTypes.PropTypes.arrayOf(PropTypes.shape({
-    name: PropTypes.string,
+    label: PropTypes.string,
     href: PropTypes.string,
     onClick: PropTypes.func
   })),
@@ -136,7 +201,9 @@ Breadcrumb.propTypes = {
   /** Class for component. */
   maxItems: PropTypes.number,
   /**	Custom separator node. */
-  separator: PropTypes.node,
+  separator: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  /** The size of the component. */
+  size: PropTypes.oneOf(['tiny', 'small', 'medium']),
   /** Style inline of component. */
   style: PropTypes.object
 };

package/components/button/icon.js

@@ -321,14 +321,14 @@ ButtonIcon.propTypes = {
   onClick: PropTypes.func,
   /** Name of [icon](https://core.diginet.com.vn/ui/?path=/story/icon-basic). */
   name: PropTypes.string,
-  /**
-   * 	The size of the component.
-   *
-   * * 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)
+  /**
+   * 	The size of the component.
+   *
+   * * 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', 'extraGiant']),
   /** Style inline of component. */
@@ -339,19 +339,19 @@ ButtonIcon.propTypes = {
   viewType: PropTypes.oneOf(['text', 'outlined', 'filled', 'ghost']),
   /** Width of the component. */
   width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  /**
-   * 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
+  /**
+   * 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
 };

package/components/button/index.js

@@ -7,19 +7,11 @@ import PropTypes from 'prop-types';
 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 { bgColor, bgTransparent, border, borderColor, borderNone, borderRadius4px, boxBorder, cursorPointer, displayFlex, displayInlineFlex, flexRow, itemsCenter, justifyCenter, mg, mgl, mgr, outlineNone, overflowHidden, parseHeight, parseMinWidth, parseMinWidthHeight, parseWidthHeight, pd, pointerEventsNone, positionRelative, textColor, userSelectNone, whiteSpaceNoWrap } from "../../styles/general";
+import { bgColor, bgTransparent, border, borderColor, borderNone, borderRadius4px, boxBorder, cursorNotAllowed, cursorPointer, displayFlex, displayInlineFlex, flexRow, itemsCenter, justifyCenter, mg, mgl, mgr, outlineNone, overflowHidden, parseHeight, parseMinWidth, parseMinWidthHeight, parseWidthHeight, pd, pointerEventsNone, positionRelative, textColor, userSelectNone, whiteSpaceNoWrap } from "../../styles/general";
 import { useColor as colors, useTheme } from "../../theme";
 import { classNames, refType as ref } from "../../utils";
 import Ripple from "./ripple-effect";
 const {
-  colors: {
-    system: {
-      disabled: systemDisabled
-    },
-    fill: {
-      disabled: fillDisabled
-    }
-  },
   spacing
 } = useTheme();
 export const getRippleColor = (color, viewType, colors) => {
@@ -204,13 +196,13 @@ const Button = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       if (!startIcon && !endIcon) start = IconLoading;
     }
     return jsx(TagName, {
-      css: [_ButtonRootCSS, _ButtonSizeCSS, disabled && ButtonDisabledCSS],
+      css: [_ButtonRootCSS, _ButtonSizeCSS],
       ref: ref,
       onClick: _onClick,
       id: id,
       type: type,
       disabled: disabled,
-      className: classNames('DGN-UI-Button', viewType, size, loading && 'button--loading', className),
+      className: classNames('DGN-UI-Button', viewType, size, className),
       href: urlState || null,
       ...props
     }, start, jsx(Typography, {
@@ -253,21 +245,6 @@ const ButtonLabelCSS = (loading, iconMarginSize) => css`
     ${textColor('inherit')};
     ${mgl(loading ? iconMarginSize : 0)};
 `;
-const ButtonDisabledCSS = css`
-    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;
-    }
-`;
 const ButtonSizeCSS = (paddingSize, minHeightSize) => css`
     ${pd(paddingSize)};
     ${parseMinWidthHeight('max-content', minHeightSize)};
@@ -288,12 +265,10 @@ const ButtonRootCSS = (color, isColorDefault, viewType, loading) => css`
     transition: all 0.5s;
     ${loading && pointerEventsNone};
     ${viewType === 'outlined' && css`
-        ${bgColor('transparent')};
-        ${border(1, color)};
         ${textColor(color)};
-        &.button--loading {
-            ${bgColor(hexToRGBA(color, alphaLoading))};
-        }
+        ${border(1, color)};
+        ${bgColor('transparent')};
+        ${loading && bgColor(hexToRGBA(color, alphaLoading))};
         ${Object.keys(alphaArr).map(key => css`
                     &: ${key} {
                         ${bgColor(hexToRGBA(color, alphaArr[key]))};
@@ -302,29 +277,32 @@ const ButtonRootCSS = (color, isColorDefault, viewType, loading) => css`
         ${isColorDefault && css`
             ${border(1, 'system.rest')};
             ${textColor('system.rest')};
-            &.button--loading,
-            &:hover,
-            &:focus,
-            &:active {
+            ${loading && css`
                 ${textColor('system.active')};
                 ${borderColor('system.active')};
-            }
-            &.button--loading {
-                ${bgColor(hexToRGBA('system.active', alphaLoading))}
-            }
+                ${bgColor(hexToRGBA('system.active', alphaLoading))};
+            `}
             ${Object.keys(alphaArr).map(key => css`
                         &: ${key} {
+                            ${textColor('system.active')};
+                            ${borderColor('system.active')};
                             ${bgColor(hexToRGBA('system.active', alphaArr[key]))};
                         }
-                    `)}// &:hover | &:focus | &:active
+                    `)} // &:hover | &:focus | &:active
         `}
+        :disabled {
+            ${borderColor('system.disabled')};
+            ${bgColor('transparent')};
+        }
     `}
     ${viewType === 'filled' && css`
         ${borderNone};
         ${textColor('system.white')};
         ${bgColor(color)};
         font-weight: bold;
-        &.button--loading,
+        ${loading && css`
+            filter: brightness(0.85);
+        `}
         &:hover,
         &:focus {
             filter: brightness(0.85);
@@ -334,23 +312,23 @@ const ButtonRootCSS = (color, isColorDefault, viewType, loading) => css`
         }
         ${isColorDefault && css`
             ${bgColor('system.rest')};
-            &.button--loading {
-                ${bgColor('system.active')};
-            }
+            ${loading && bgColor('system.active')};
             &:hover,
             &:focus,
             &:active {
                 ${bgColor('system.active')};
             }
         `}
+        :disabled {
+            ${bgColor('fill.disabled')};
+            filter: brightness(1);
+        }
     `}
     ${viewType === 'text' && css`
         ${bgTransparent};
         ${borderNone};
         ${textColor(color)};
-        &.button--loading {
-            ${bgColor(hexToRGBA(color, alphaLoading))};
-        }
+        ${loading && bgColor(hexToRGBA(color, alphaLoading))};
         ${Object.keys(alphaArr).map(key => css`
                     &: ${key} {
                         ${bgColor(hexToRGBA(color, alphaArr[key]))};
@@ -358,27 +336,28 @@ const ButtonRootCSS = (color, isColorDefault, viewType, loading) => css`
                 `)}
         ${isColorDefault && css`
             ${textColor('system.rest')};
-            &:hover,
-            &:focus,
-            &:active {
-                ${textColor('system.active')};
-            }
-            &.button--loading {
+            ${loading && css`
                 ${textColor('system.active')};
                 ${bgColor(hexToRGBA('system.active', alphaLoading))};
-            }
+            `}
             ${Object.keys(alphaArr).map(key => css`
                         &: ${key} {
+                            ${textColor('system.active')};
                             ${bgColor(hexToRGBA('system.active', alphaArr[key]))};
                         }
                     `)}
         `}
+        :disabled {
+            ${bgColor('transparent')};
+        }
     `}
     ${viewType === 'link' && css`
         ${borderNone};
-        ${textColor(color)};
+        ${textColor(isColorDefault ? 'semantic.info' : color)};
         ${bgColor('transparent')};
-        &.button--loading,
+        ${loading && css`
+            filter: brightness(0.85);
+        `}
         &:hover,
         &:focus {
             filter: brightness(0.85);
@@ -386,10 +365,14 @@ const ButtonRootCSS = (color, isColorDefault, viewType, loading) => css`
         &:active {
             filter: brightness(0.7);
         }
-        &.default {
-            ${textColor('semantic.info')};
+        :disabled {
+            filter: brightness(1);
         }
     `}
+    :disabled {
+        ${cursorNotAllowed};
+        ${textColor('system.disabled')};
+    }
 `;
 Button.defaultProps = {
   className: '',
@@ -416,7 +399,7 @@ Button.propTypes = {
   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. */
+  /** [Props](https://core.diginet.com.vn/ui/?path=/docs/components-typography--title) applied to the `Typography` label. */
   labelProps: PropTypes.object,
   /** If `true`, the loading indicator is shown. */
   loading: PropTypes.bool,

package/components/button/more.js

@@ -2,7 +2,7 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
-import { forwardRef, isValidElement, memo, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import React, { forwardRef, isValidElement, memo, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { ButtonIcon, Icon, Popover, Typography } from "../";
 import { itemsCenter, borderNone, cursorPointer, flexCol, flexRow, outlineNone, parseHeight } from "../../styles/general";
 import { useTheme } from "../../theme";
@@ -23,6 +23,7 @@ const {
 } = useTheme();
 const ButtonMore = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
+  anchor,
   buttonProps,
   className,
   disabled,
@@ -90,6 +91,23 @@ const ButtonMore = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
     });
   };
+  const renderAnchor = () => {
+    var _anchor, _anchor2, _anchor2$props;
+    if (!((_anchor = anchor) !== null && _anchor !== void 0 && _anchor.type)) return null;
+    const AnchorTag = /*#__PURE__*/React.cloneElement(anchor, {
+      ref: ref => {
+        anchor = ref;
+      },
+      onClick: openPopover,
+      id: id,
+      style: {
+        ...style,
+        ...(((_anchor2 = anchor) === null || _anchor2 === void 0 ? void 0 : (_anchor2$props = _anchor2.props) === null || _anchor2$props === void 0 ? void 0 : _anchor2$props.style) || {})
+      },
+      className: classNames('DGN-UI-ButtonMore', className)
+    });
+    return AnchorTag;
+  };
   return useMemo(() => {
     return jsx(Popover, {
       css: _PopoverCSS,
@@ -103,7 +121,7 @@ const ButtonMore = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         vertical: 'top',
         horizontal: 'left'
       },
-      anchor: jsx(ButtonIcon, {
+      anchor: anchor ? renderAnchor() : jsx(ButtonIcon, {
         ref: ref,
         circular: true,
         name: 'more',

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

@@ -455,7 +455,7 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         // newAttachedRef.current.push(file);
         tempArr.push(file);
       }
-      setNewDataState(tempArr);
+      setNewDataState([...newDataState, ...tempArr]);
     } else if (files[0]) {
       allNewAttached.delete('files');
       allNewAttached.append('files', files[0]);

package/components/form-control/number-input/index2.js

@@ -77,13 +77,13 @@ const NumberInput = /*#__PURE__*/forwardRef(({
   }
   if (valueProps || valueProps === 0) valueProps = clamp(valueProps, min, max);
 
-  /**
-   * Convert number to format money
-   * @param vl {number} - value
-   * @type {function}
-   * @return {string}
-   * @example 1200300.123 => 1,200,300.123
-   * @example 1200300,123 => 1.200.300,123
+  /**
+   * Convert number to format money
+   * @param vl {number} - value
+   * @type {function}
+   * @return {string}
+   * @example 1200300.123 => 1,200,300.123
+   * @example 1200300,123 => 1.200.300,123
    */
   const parseNumberToMoney = useCallback((vl, isNumber) => {
     var _number, _number2, _number$, _number3;
@@ -114,13 +114,13 @@ const NumberInput = /*#__PURE__*/forwardRef(({
     return number;
   }, [decimalSymbol, max, value]);
 
-  /**
-   * Convert money to format number
-   * @param vl {string} - value
-   * @type {function}
-   * @return {number}
-   * @example 1,200,300.123 => 1200300.123
-   * @example 1.200.300,123 => 1200300.123
+  /**
+   * Convert money to format number
+   * @param vl {string} - value
+   * @type {function}
+   * @return {number}
+   * @example 1,200,300.123 => 1200300.123
+   * @example 1.200.300,123 => 1200300.123
    */
   const convertMoneyToNumber = useCallback((vl, isNumber) => {
     var _number4, _number4$toString, _number4$toString$rep, _number4$toString$rep2, _number4$toString$rep3;
@@ -414,10 +414,10 @@ NumberInput.propTypes = {
   style: PropTypes.object,
   /** Thousand separator character. */
   thousandSeparator: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['.', ','])]),
-  /** Validation value, argument can:<br/>
-   * * string: the validation rule. Example required.<br/>
-   * * object: the validation rule insist name, property, message. Example {name: 'min', compareValue: 9, message: 'Error'} or {max: 99}<br/>
-   * * array: the validation rule list, insist object/string
+  /** Validation value, argument can:<br/>
+   * * string: the validation rule. Example required.<br/>
+   * * object: the validation rule insist name, property, message. Example {name: 'min', compareValue: 9, message: 'Error'} or {max: 99}<br/>
+   * * array: the validation rule list, insist object/string
    */
   validates: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.array, PropTypes.func]),
   /** The value of the input element, required for a controlled component. */

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

@@ -191,11 +191,11 @@ Radio.propTypes = {
   className: PropTypes.string,
   /** Props for input. */
   inputProps: PropTypes.object,
-  /** Callback fired when the state is changed.
-   *
-   * @param {object} event The event source of the callback.
-   * You can pull out the new value by accessing `event.target.value` (string).
-   * You can pull out the new checked state by accessing `event.target.checked` (boolean).
+  /** Callback fired when the state is changed.
+   *
+   * @param {object} event The event source of the callback.
+   * You can pull out the new value by accessing `event.target.value` (string).
+   * You can pull out the new checked state by accessing `event.target.checked` (boolean).
    *  */
   onChange: PropTypes.func,
   /** Prevent all event if true. */

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

@@ -226,10 +226,10 @@ Toggle.propTypes = {
   lineClamp: PropTypes.number,
   /** Shows tooltip containing Label on hover */
   hoverTooltip: PropTypes.bool,
-  /** * Callback fired when the state is changed.
-   *
-   * @param {object} event The event source of the callback.
-   * You can pull out the new checked state by accessing `event.target.checked` (boolean).
+  /** * Callback fired when the state is changed.
+   *
+   * @param {object} event The event source of the callback.
+   * You can pull out the new checked state by accessing `event.target.checked` (boolean).
    */
   onChange: PropTypes.func,
   /** If `true`, the label will indicate that the checkbox is required. */

package/components/rating/index.js

@@ -243,14 +243,14 @@ Rating.propTypes = {
   className: PropTypes.string,
   /** Style inline of component. */
   style: PropTypes.object,
-  /**
-  * Callback fired when the value changes.
-  * 
-   function(event: React.SyntheticEvent, value: number) => void
-  *
-  * event: The event source of the callback.
-  * 
-  * value: The new value.
+  /**
+  * Callback fired when the value changes.
+  * 
+    function(event: React.SyntheticEvent, value: number) => void
+  *
+  * event: The event source of the callback.
+  * 
+  * value: The new value.
   */
   onRating: PropTypes.func
 };

package/components/tab/tab-container.js

@@ -93,8 +93,8 @@ TabContainer.propTypes = {
   width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   /** Any props else. */
   props: PropTypes.any,
-  /**
-   * Ref methods.
+  /**
+   * Ref methods.
    */
   reference: ref
 };

package/components/tab/tab-header.js

@@ -142,8 +142,8 @@ TabHeader.propTypes = {
   width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   /** Any props else. */
   props: PropTypes.any,
-  /**
-   * Ref methods.
+  /**
+   * Ref methods.
    */
   reference: ref
 };

package/components/tab/tab-panel.js

@@ -79,8 +79,8 @@ TabPanel.propTypes = {
   style: PropTypes.object,
   /** Any props else. */
   props: PropTypes.any,
-  /**
-   * Ref methods.
+  /**
+   * Ref methods.
    */
   reference: ref
 };

package/components/tab/tab.js

@@ -189,8 +189,8 @@ TabItem.propTypes = {
   style: PropTypes.object,
   /** Any props else. */
   props: PropTypes.any,
-  /**
-   * Ref methods.
+  /**
+   * Ref methods.
    */
   reference: ref
 };

package/components/transfer/index.js

@@ -416,9 +416,9 @@ Transfer.propTypes = {
   height: oneOfType([string, number]),
   /** field name used for icon display */
   iconExpr: string,
-  /** field name used for text display<br/>
-   * Example: 'name', '{id} - {name}', '{age} age(s)'<br/>
-   * Note: don't use 'id - name', return undefined
+  /** field name used for text display<br/>
+   * Example: 'name', '{id} - {name}', '{age} age(s)'<br/>
+   * Note: don't use 'id - name', return undefined
    */
   displayExpr: oneOfType([string, array]),
   /** display header to select all choices if true */

package/components/typography/index.js

@@ -105,7 +105,7 @@ const TextRootCSS = (color, type, lineClamp, onClick, hoverTooltip) => css`
     ${whiteSpaceBreakSpaces};
     ${textColor(colorMap.get(color) || color)};
     ${parseMaxWidth('max-content')};
-    ${typography[type]};
+    ${type !== 'inherit' && typography[type]};
     &.DGN-Typography-center {
         ${textCenter};
     }
@@ -181,6 +181,6 @@ Typography.propTypes = {
   /** Tooltip direction. */
   tooltipDirection: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
   /** Applies the theme typography styles. */
-  type: PropTypes.oneOf(arrTypeTypography)
+  type: PropTypes.oneOf([...arrTypeTypography, 'inherit'])
 };
 export default Typography;

package/icons/effect.js

@@ -5,7 +5,8 @@ import OptionWrapper from "../components/others/option-wrapper";
 import PropTypes from 'prop-types';
 import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
 import { itemsCenter, boxBorder, flexRow, justifyCenter, outlineNone, parseMinWidthHeight, parseWidthHeight, userSelectNone } from "../styles/general";
-import { useColor as colors, useTheme } from "../theme";
+import { getColor } from "../styles/utils";
+import { useTheme } from "../theme";
 import { capitalize, classNames, refType as ref } from "../utils";
 import * as Icons from "./basic";
 const {
@@ -50,7 +51,7 @@ const Icon = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       node = jsx(IconComp, {
         width: width,
         height: height,
-        color: colors[color] || color,
+        color: getColor(color),
         viewBox: viewBox
       });
     } else {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "diginet-core-ui",
-  "version": "1.3.92-beta.1",
+  "version": "1.3.93-beta.1",
   "description": "",
   "main": "index.js",
   "license": "UNLICENSED",

package/readme.md

@@ -38,6 +38,12 @@ npm test
 ```
 
 ## Changelog
+## 1.3.93
+- \[Changed\]: Dropdown – Apply multilineSelectedItem to renderSelectedItem
+- \[Fixed\]: Checkbox – Fix bug still uncheck when not set state
+- \[Fixed\]: Modal – Fix footer height
+- \[Fixed\]: DateRangePicker – Fix UI hover, focus empty days between selected range
+
 ## 1.3.92
 - \[Fixed\]: Dropdown – Fix override css selected item Typography
 - \[Fixed\]: Attachment – Fix crash when remove attached item

package/styles/utils.js

@@ -1,31 +1,31 @@
 import { color as colors } from "./colors";
 
-/**
- * Parse css value
- *
- * @param {string | number} vl
- * @returns {string | number}
+/**
+ * Parse css value
+ *
+ * @param {string | number} vl
+ * @returns {string | number}
  */
 export const parseCSSValue = vl => {
   return isNaN(vl) ? vl : vl + 'px';
 };
 
-/**
- * Parse to pixel
- *
- * @param {number} vl
- * @returns {string}
+/**
+ * Parse to pixel
+ *
+ * @param {number} vl
+ * @returns {string}
  */
 export const parseToPixel = vl => {
   if (!vl) return '1px';
   return typeof vl === 'string' ? vl : `${vl}px`;
 };
 
-/**
- * Get color from CORE colors
- *
- * @param {string} cl
- * @returns {string}
+/**
+ * Get color from CORE colors
+ *
+ * @param {string} cl
+ * @returns {string}
  */
 export const getColor = cl => {
   if (typeof cl !== 'string') return;