diginet-core-ui 1.3.85 → 1.3.86

package/components/rating/index.js

@@ -8,7 +8,7 @@ import { randomString } from "../../utils";
 import { hexToRGBA } from "../../styles/color-helper";
 import { color as colors } from "../../styles/colors";
 import theme from "../../theme/settings";
-import { alignCenter, border, cursorPointer, flexRow, flexRowReverse, inlineFlex, outlineNone, overflowHidden, pointerEventsNone, positionAbsolute, positionRelative } from "../../styles/general";
+import { itemsCenter, border, cursorPointer, flexRow, flexRowReverse, displayInlineFlex, outlineNone, overflowHidden, pointerEventsNone, positionAbsolute, positionRelative } from "../../styles/general";
 const {
   colors: {
     system: {
@@ -133,7 +133,7 @@ const Rating = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }, [half, color, quantity, readOnly, disabled, selector, width, height, onRating, valueState]);
 }));
 const RatingRootCSS = css`
-    ${inlineFlex};
+    ${displayInlineFlex};
     ${flexRowReverse};
     &.disabled,
     &.read-only {
@@ -188,9 +188,9 @@ const RatingItemHaftCSS = color => css`
     }
 `;
 const RatingItemCSS = (RatingItemHaftCSSName, color, half) => css`
-    ${inlineFlex};
+    ${displayInlineFlex};
     ${positionRelative};
-    ${alignCenter};
+    ${itemsCenter};
     svg {
         transition: color 0.15s linear;
     }

package/components/slider/slider-container.js

@@ -7,7 +7,7 @@ import { ButtonIcon } from '..';
 import { randomString } from "../../utils";
 import SliderItem from "./slider-item";
 import { color as colors } from "../../styles/colors";
-import { alignCenter, backgroundTransparent, borderBox, cursorPointer, displayNone, flexCol, flexRow, justifyCenter, overflowHidden, positionAbsolute, positionRelative, userSelectNone } from "../../styles/general";
+import { itemsCenter, bgTransparent, boxBorder, cursorPointer, displayNone, flexCol, flexRow, justifyCenter, overflowHidden, positionAbsolute, positionRelative, userSelectNone } from "../../styles/general";
 const {
   system: {
     active,
@@ -238,15 +238,15 @@ const SliderContainer = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 }));
 const containerCSS = IDs => css`
     * {
-        ${borderBox};
+        ${boxBorder};
         margin: 0;
         padding: 0;
     }
     ${flexCol};
-    ${alignCenter};
+    ${itemsCenter};
     ${justifyCenter};
     ${positionRelative};
-    ${backgroundTransparent};
+    ${bgTransparent};
     height: 100%;
     resize: both;
     .${IDs.icon} {
@@ -275,7 +275,7 @@ const containerCSS = IDs => css`
     .${IDs.slideContainer} {
         ${overflowHidden};
         ${positionRelative};
-        ${backgroundTransparent};
+        ${bgTransparent};
         height: 95%;
         margin: 0 auto;
         width: 100%;

package/components/status/index.js

@@ -5,7 +5,7 @@ import { Icon, Typography } from "./..";
 import OptionWrapper from "../others/option-wrapper";
 import PropTypes from 'prop-types';
 import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
-import { alignCenter, backgroundTransparent, borderBox, flexRow, parseMinHeight, parseWidth } from "../../styles/general";
+import { itemsCenter, bgTransparent, boxBorder, flexRow, parseMinHeight, parseWidth } from "../../styles/general";
 import { useTheme, useColor as colors } from "../../theme";
 import { classNames } from "../../utils";
 const {
@@ -75,9 +75,9 @@ const Status = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 }));
 const StatusRootCSS = (iconSize, color, size, outlinedPaddingSize) => css`
     ${flexRow};
-    ${alignCenter};
-    ${backgroundTransparent};
-    ${borderBox};
+    ${itemsCenter};
+    ${bgTransparent};
+    ${boxBorder};
     ${parseWidth('fit-content')};
     ${parseMinHeight(iconSize)};
     gap: ${spacing([size === 'small' ? 0.5 : 1])};

package/components/tab/tab-header.js

@@ -5,7 +5,7 @@ import { jsx, css } from '@emotion/core';
 import PropTypes from 'prop-types';
 import TabContext from "./context";
 import ButtonIcon from "../button/icon";
-import { borderBox, displayNone, flexCol, flexRow, justifyCenter, overflowHidden, parseWidth, parseWidthHeight, positionRelative, whiteSpaceNoWrap } from "../../styles/general";
+import { boxBorder, displayNone, flexCol, flexRow, justifyCenter, overflowHidden, parseWidth, parseWidthHeight, positionRelative, whiteSpaceNoWrap } from "../../styles/general";
 import { classNames, refType as ref } from "../../utils";
 import theme from "../../theme/settings";
 const {
@@ -90,7 +90,7 @@ const ContainerCSS = (centered, isVertical, width) => css`
     ${flexRow};
     ${overflowHidden};
     ${positionRelative};
-    ${borderBox};
+    ${boxBorder};
     ${parseWidthHeight(width, 'auto')};
     ${centered && justifyCenter};
     flex-direction: ${isVertical ? 'column' : 'row'};

package/components/tab/tab-panel.js

@@ -4,7 +4,7 @@ import { memo, forwardRef, useContext, useRef, useEffect, useState, useImperativ
 import { jsx, css } from '@emotion/core';
 import PropTypes from 'prop-types';
 import TabContext from "./context";
-import { borderBox, displayNone, flexCol, parseWidthHeight, positionRelative } from "../../styles/general";
+import { boxBorder, displayNone, flexCol, parseWidthHeight, positionRelative } from "../../styles/general";
 import theme from "../../theme/settings";
 import { classNames, refType as ref } from "../../utils";
 const {
@@ -61,7 +61,7 @@ const TabPanel = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 }));
 const TabPanelCSS = (isVertical, isActive) => css`
     ${flexCol};
-    ${borderBox};
+    ${boxBorder};
     ${positionRelative};
     ${isActive ? flexCol : displayNone};
     ${parseWidthHeight('100%', isVertical ? 300 : '100%')}

package/components/tab/tab.js

@@ -8,7 +8,7 @@ import { color as colors } from "../../styles/colors";
 import Ripple from "../button/ripple-effect";
 import Typography from "../typography";
 import TabContext from "./context";
-import { alignCenter, backgroundTransparent, borderBox, boxShadowNone, breakWord, cursorDefault, cursorPointer, flexRow, justifyCenter, justifyStart, outlineNone, overflowHidden, pointerEventsNone, positionAbsolute, positionRelative, textCenter, whiteSpaceNoWrap } from "../../styles/general";
+import { itemsCenter, bgTransparent, boxBorder, shadowNone, breakWord, cursorDefault, cursorPointer, flexRow, justifyCenter, justifyStart, outlineNone, overflowHidden, pointerEventsNone, positionAbsolute, positionRelative, textCenter, whiteSpaceNoWrap } from "../../styles/general";
 import { classNames, refType as ref } from "../../utils";
 import theme from "../../theme/settings";
 const {
@@ -107,15 +107,15 @@ const TabItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 const TabButtonCSS = (color, isVertical) => css`
     ${flexRow};
     ${overflowHidden};
-    ${alignCenter};
+    ${itemsCenter};
     ${isVertical ? justifyStart : justifyCenter};
-    ${borderBox};
+    ${boxBorder};
     ${cursorPointer};
     ${positionRelative};
     ${outlineNone};
     ${breakWord};
     ${whiteSpaceNoWrap};
-    ${boxShadowNone};
+    ${shadowNone};
     ${!isVertical && textCenter};
     flex: 0 0 auto;
     background-color: ${white};
@@ -128,7 +128,7 @@ const TabButtonCSS = (color, isVertical) => css`
     transition: all 0.2s ease-in-out, background-color 0.2s ease-in-out;
     &.disabled {
         ${pointerEventsNone};
-        ${backgroundTransparent};
+        ${bgTransparent};
         ${cursorDefault};
         color: ${systemDisabled};
     }
@@ -162,10 +162,10 @@ const IndicatorCSS = isVertical => css`
 `;
 const ButtonIconCSS = css`
     ${flexRow};
-    ${alignCenter};
+    ${itemsCenter};
     ${justifyCenter};
     ${positionRelative};
-    ${borderBox};
+    ${boxBorder};
     max-height: 24px;
     max-width: 24px;
     margin-right: ${spacing([1])};

package/components/tooltip/index.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import { createPortal } from 'react-dom';
 import { classNames, randomString } from "../../utils";
 import { jsx, css } from '@emotion/core';
-import { borderBox, borderRadius4px, breakWord, displayInlineBlock, parseWidthHeight, positionAbsolute, userSelectNone } from "../../styles/general";
+import { boxBorder, borderRadius4px, breakWord, displayInlineBlock, parseWidthHeight, positionAbsolute, userSelectNone } from "../../styles/general";
 import { useColor as colors, useTheme } from "../../theme";
 const {
   colors: {
@@ -453,7 +453,7 @@ const ArrowCSS = css`
 `;
 const MainCSS = (backgroundColor, color, size, padding, textAlign) => css`
     ${displayInlineBlock};
-    ${borderBox};
+    ${boxBorder};
     ${positionAbsolute};
     ${userSelectNone};
     ${borderRadius4px};

package/components/tree-view/css.js

@@ -1,5 +1,5 @@
 import { css } from '@emotion/core';
-import { alignCenter, borderBox, cursorPointer, displayBlock, displayInlineBlock, flexRow, positionRelative } from "../../styles/general";
+import { itemsCenter, boxBorder, cursorPointer, displayBlock, displayInlineBlock, flexRow, positionRelative } from "../../styles/general";
 import theme from "../../theme/settings";
 const {
   colors: {
@@ -16,7 +16,7 @@ export const TreeViewRootCSS = css`
     .DGN-UI-Accordion {
         box-shadow: none !important;
         .DGN-UI-Accordion-Summary {
-            ${alignCenter};
+            ${itemsCenter};
             min-height: 40px;
             padding: 0;
             border-radius: 0;
@@ -61,8 +61,8 @@ export const TreeViewRootCSS = css`
     .TreeView-Item {
         ${flexRow};
         ${positionRelative};
-        ${alignCenter};
-        ${borderBox};
+        ${itemsCenter};
+        ${boxBorder};
         min-height: 40px;
         text-align: left;
         color: ${theme.colors.text.main};

package/components/tree-view/index.js

@@ -7,7 +7,7 @@ import { jsx, css } from '@emotion/core';
 import { Accordion, AccordionSummary, AccordionDetails, Typography, Checkbox, Divider, InputBase, ButtonIcon } from '..';
 import { classNames, mapParent, randomString, removeUnicode } from "../../utils";
 import { getGlobal } from "../../global";
-import { alignCenter, borderBox, cursorPointer, displayBlock, displayInlineBlock, flexRow, positionRelative } from "../../styles/general";
+import { itemsCenter, boxBorder, cursorPointer, displayBlock, displayInlineBlock, flexRow, positionRelative } from "../../styles/general";
 import theme from "../../theme/settings";
 const {
   colors: {
@@ -801,7 +801,7 @@ const TreeViewRootCSS = css`
     .DGN-UI-Accordion {
         box-shadow: none !important;
         .DGN-UI-Accordion-Summary {
-            ${alignCenter};
+            ${itemsCenter};
             min-height: 40px;
             padding: 0;
             border-radius: 0;
@@ -846,8 +846,8 @@ const TreeViewRootCSS = css`
     .TreeView-Item {
         ${flexRow};
         ${positionRelative};
-        ${alignCenter};
-        ${borderBox};
+        ${itemsCenter};
+        ${boxBorder};
         min-height: 40px;
         text-align: left;
         color: ${textMain};

package/global/index.js

@@ -19,6 +19,12 @@ const globalObject = {
     dropFileHere: 'Kéo và thả tập tin đính kèm vào đây',
     deleteNotifyText: 'Bạn có chắc muốn xóa (những) đính kèm này?',
     attachText: 'Đính kèm',
+    noFileText: 'Không có file đính kèm',
+    byName: 'Theo tên',
+    byType: 'Theo loại',
+    bySize: 'Theo kích thước',
+    byDate: 'Theo ngày',
+    byOwner: 'Theo người tạo',
     errorDefault: {
       maxFile: ' vượt quá số lượng cho phép!',
       maxSize: ' quá dung lượng cho phép!',
@@ -85,6 +91,12 @@ const globalObject = {
     dropFileHere: 'Drop files here',
     deleteNotifyText: 'Are you sure you want to delete this attachment(s)?',
     attachText: 'Attachment',
+    noFileText: 'No attachments',
+    byName: 'By name',
+    byType: 'By type',
+    bySize: 'By size',
+    byDate: 'By date',
+    byOwner: 'By owner',
     errorDefault: {
       maxFile: ' exceeded the allowed number!',
       maxSize: ' is/are too large to allow!',

package/icons/effect.js

@@ -1,50 +1,37 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { memo, useRef, useMemo, forwardRef, useImperativeHandle } from 'react';
-import PropTypes from 'prop-types';
-import { jsx, css } from '@emotion/core';
+import { css, jsx } from '@emotion/core';
 import OptionWrapper from "../components/others/option-wrapper";
-import { color as colors } from "../styles/colors";
+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 { capitalize, classNames, refType as ref } from "../utils";
 import * as Icons from "./basic";
-import { capitalize } from "../utils";
-import { alignCenter, borderBox, flexRow, justifyCenter, outlineNone, userSelectNone } from "../styles/general";
 const {
-  system: {
-    rest
+  colors: {
+    system: {
+      rest: systemRest
+    }
   }
-} = colors;
+} = useTheme();
 const Icon = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
-  name,
   className,
-  style,
   color,
-  width,
   height,
-  viewBox,
+  id,
+  name,
   onClick,
+  style,
+  viewBox,
+  width,
   ...props
 }, reference) => {
+  if (!reference) reference = useRef(null);
   const ref = useRef(null);
-  const IconCss = css`
-                ${flexRow};
-                ${justifyCenter};
-                ${alignCenter};
-                ${borderBox};
-                ${outlineNone};
-                ${userSelectNone};
-                width: max-content;
-                height: max-content;
-                min-width: ${width ? isNaN(width) ? width : width + 'px' : '24px'};
-                min-height: ${width ? isNaN(height) ? height : height + 'px' : '24px'};
-            `;
-  const NotFoundIcon = css`
-                ${flexRow};
-                ${borderBox};
-                width: ${width ? isNaN(width) ? width : width + 'px' : '24px'};
-                height: ${width ? isNaN(width) ? width : width + 'px' : '24px'};
-                border: 1px dashed ${rest};
-            `;
+  const _IconCSS = IconCSS(width, height);
+  const _NotFoundIconCSS = NotFoundIconCSS(width);
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
     currentRef.element = ref.current;
@@ -68,48 +55,61 @@ const Icon = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       });
     } else {
       node = jsx("span", {
-        css: NotFoundIcon
+        css: _NotFoundIconCSS
       });
     }
     return jsx("span", {
-      className: 'DGN-UI-Icon ' + className,
-      style: style,
-      css: IconCss,
+      css: _IconCSS,
       ref: ref,
+      id: id,
+      className: classNames('DGN-UI-Icon', className),
+      style: style,
       onClick: onClick,
       ...props
     }, node);
-  }, [name, color, width, height, className, style, viewBox, onClick]);
+  }, [className, color, height, id, name, onClick, style, viewBox, width, props]);
 }));
+const IconCSS = (width = 24, height = 24) => css`
+    ${flexRow};
+    ${justifyCenter};
+    ${itemsCenter};
+    ${boxBorder};
+    ${outlineNone};
+    ${userSelectNone};
+    ${parseWidthHeight('max-content')};
+    ${parseMinWidthHeight(width, height)};
+`;
+const NotFoundIconCSS = (width = 24) => css`
+    ${flexRow};
+    ${boxBorder};
+    ${parseWidthHeight(width)};
+    border: 1px dashed ${systemRest};
+`;
 Icon.defaultProps = {
   className: '',
-  style: {},
   color: 'dark6',
+  height: 24,
+  style: {},
   viewBox: true,
-  width: 24,
-  height: 24
+  width: 24
 };
 Icon.propTypes = {
-  /** name of icon in icons store */
-  name: PropTypes.string.isRequired,
-  /** color of icon<br />
-   * default: #7F828E
-   */
-  color: PropTypes.string,
-  /** className of icon in icons store */
+  /** Class for component. */
   className: PropTypes.string,
-  /** style of icon in icons store */
-  style: PropTypes.object,
-  /** the width of icon */
-  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  /** the height of icon */
+  /** The color of the component. */
+  color: PropTypes.string,
+  /** Height of the component. */
   height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  /** have view box if true */
+  /** Name of icon in [Basic Icon](https://core.diginet.com.vn/ui/?path=/story/icon-basic) */
+  name: PropTypes.string.isRequired,
+  /** Style inline of component. */
+  style: PropTypes.object,
+  /** If `true`, component have view box. */
   viewBox: PropTypes.bool,
-  /** have view box if true */
-  onClick: PropTypes.func,
+  /** Width of the component. */
+  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   /**
-   * ref methods
+   * ref methods (ref.current.instance.*method*)
    *
    * * option(): Gets all UI component properties
    *  * Returns value - object
@@ -122,9 +122,7 @@ Icon.propTypes = {
    * * option(options): Updates the values of several properties
    *  * @param {options} - object
    */
-  reference: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.instanceOf(Element)
-  })])
+  reference: ref
 };
 export { Icon };
 export default OptionWrapper(Icon);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "diginet-core-ui",
-  "version": "1.3.85",
+  "version": "1.3.86",
   "description": "The DigiNet core ui",
   "homepage": "https://diginet.com.vn",
   "main": "index.js",

package/readme.md

@@ -38,6 +38,12 @@ npm test
 ```
 
 ## Changelog
+## 1.3.86
+- \[Changed\]: Icon – Optimize code
+- \[Fixed\]: Dropdown – Fix bug cannot select multiple after search
+- \[Fixed\]: InputBase – Fix endIconProps not work when endIcon is string
+- \[Fixed\]: Attachment – Fix not show Button Attachment when disabled, readOnly; Update design
+
 ## 1.3.85
 - \[Fixed\]: Attachment – Fix not fire onChange when select same file
 - \[Fixed\]: PagingInfo – Fix responsive auto hide element wrong