diginet-core-ui 1.3.93-beta.4 → 1.3.94-beta.1

package/components/button/more.js

@@ -1,20 +1,12 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
-import { ButtonIcon, Icon, Popover, Typography } from "./..";
+import { ButtonIcon, Icon, Popover, Tooltip, Typography } from "./..";
+import OptionWrapper from "../others/option-wrapper";
 import PropTypes from 'prop-types';
 import React, { forwardRef, isValidElement, memo, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { bgColor, borderNone, cursorPointer, displayFlex, flexCol, flexRow, gap, itemsCenter, outlineNone, parseHeight, pd, pdl } from "../../styles/general";
-import { useTheme } from "../../theme";
 import { classNames, refType as ref } from "../../utils";
-import OptionWrapper from "../others/option-wrapper";
-const {
-  colors: {
-    system: {
-      dark: systemDark
-    }
-  }
-} = useTheme();
 const ButtonMore = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
   anchor,
@@ -69,19 +61,21 @@ const ButtonMore = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
           name: icon,
           width: 20,
           height: 20,
-          color: systemDark
+          color: 'system/dark'
         }) : null, jsx(Typography, {
           css: !icon && iconState && ExtraPaddingCSS,
           className: 'DGN-UI-ButtonMore-Label',
           ...labelProp
-        }, label)) : jsx(ButtonIcon, {
+        }, label)) : jsx(Tooltip, {
           key: idx,
           className: 'DGN-UI-ButtonMore-Option',
+          title: label
+        }, jsx(ButtonIcon, {
           circular: true,
           name: icon,
           onClick: action,
           viewType: 'text'
-        });
+        }));
       }
     });
   };
@@ -132,6 +126,7 @@ const ButtonMore = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }, [buttonProps, className, disabled, id, options, optionType, popoverProp, style, iconState, openState]);
 }));
 const PopoverCSS = isOptionFull => css`
+    ${displayFlex};
     ${isOptionFull ? flexCol : flexRow};
     ${pd(isOptionFull ? [1, 0] : [0, 2])}
 `;
@@ -145,14 +140,14 @@ const OptionFullCSS = css`
     ${parseHeight(28)};
     ${pd([0, 4])};
     ${gap([0, 1])};
-    ${bgColor('system.white')};
+    ${bgColor('system/white')};
     transition: all 0.5s ease;
     &:hover,
     &:focus {
-        ${bgColor('fill.hover')};
+        ${bgColor('fill/hover')};
     }
     &:active {
-        ${bgColor('fill.pressed')};
+        ${bgColor('fill/pressed')};
     }
 `;
 const ExtraPaddingCSS = css`
@@ -167,13 +162,13 @@ ButtonMore.defaultProps = {
   style: {}
 };
 ButtonMore.propTypes = {
-  /** [Props](https://core.diginet.com.vn/ui/?path=/docs/buttonicon) applied to the main `ButtonIcon`. */
+  /** [Props](https://core.diginet.com.vn/ui/?path=/docs/components-buttonicon) applied to the main `ButtonIcon`. */
   buttonProps: PropTypes.object,
   /** Class for component. */
   className: PropTypes.string,
   /** If `true`, the component is disabled. */
   disabled: PropTypes.bool,
-  /** [Props](https://core.diginet.com.vn/ui/?path=/docs/typography) applied to the `Typography` label. */
+  /** [Props](https://core.diginet.com.vn/ui/?path=/docs/components-typography) applied to the `Typography` label. */
   labelProp: PropTypes.object,
   /** Option(s) in popover. */
   option: PropTypes.arrayOf(PropTypes.shape({
@@ -183,25 +178,25 @@ ButtonMore.propTypes = {
   })),
   /** The variant of option's type. */
   optionType: PropTypes.oneOf(['full', 'icon']),
-  /** [Props](https://core.diginet.com.vn/ui/?path=/docs/overplay-popover) applied to the main `Popover`. */
+  /** [Props](https://core.diginet.com.vn/ui/?path=/docs/components-popover) applied to the main `Popover`. */
   popoverProp: PropTypes.object,
   /** Style inline of component. */
   style: PropTypes.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
+  /**
+   * 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
+  ref: ref
 };
 export { ButtonMore };
 export default OptionWrapper(ButtonMore);

package/components/modal/header.js

@@ -4,7 +4,7 @@ import { css, jsx } from '@emotion/core';
 import { ButtonIcon, Typography } from "./..";
 import PropTypes from 'prop-types';
 import { forwardRef, memo, useContext, useImperativeHandle, useMemo, useRef } from 'react';
-import { bgColor, boxBorder, cursorMove, flexRow, itemsCenter, justifyBetween, order, parseWidthHeight, positionRelative } from "../../styles/general";
+import { bgColor, boxBorder, cursorMove, displayFlex, flexRow, itemsCenter, justifyBetween, mgl, order, parseWidth, parseWidthHeight, positionRelative, truncate } from "../../styles/general";
 import { useTheme } from "../../theme";
 import { classNames, handleBreakpoints } from "../../utils";
 import ModalContext from "./context";
@@ -12,6 +12,9 @@ const {
   boxShadows: {
     small: smallBoxShadow
   },
+  typography: {
+    heading3
+  },
   spacing
 } = useTheme();
 export const responsivePaddingCSS = handleBreakpoints({
@@ -43,6 +46,14 @@ const ModalHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     currentRef.instance = _instance;
     return currentRef;
   });
+  const renderTitle = content => {
+    if (!content) return null;
+    return jsx(Typography, {
+      css: [truncate, parseWidth('100%')],
+      fullWidth: false,
+      type: 'h3'
+    }, content);
+  };
   return useMemo(() => {
     return jsx("div", {
       css: _ModalHeaderCSS,
@@ -51,38 +62,40 @@ const ModalHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       className: classNames('DGN-UI-Modal-Header', className),
       style: style,
       onMouseDown: modal.onMoveModal
-    }, jsx(Typography, {
-      type: 'h3',
-      style: {
-        whiteSpace: 'nowrap',
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        width: '100%'
-      }
-    }, children ? children : title), showClose ? jsx(ButtonIcon, {
+    }, typeof children === 'string' ? renderTitle(children) : children, title || showClose ? jsx("div", {
+      css: [TitleContainerCSS, title && parseWidth('100%')],
+      className: 'DGN-UI-Modal-Header-Title'
+    }, renderTitle(title), showClose ? jsx(ButtonIcon, {
+      css: mgl([children || title ? 4 : 'auto']),
       viewType: 'ghost',
       name: 'Close',
-      style: {
-        marginLeft: spacing(4)
-      },
       onClick: modal.close
-    }) : null);
+    }) : null) : null);
   }, [children, className, id, showClose, style, title]);
 }));
 const ModalHeaderCSS = modal => css`
+    ${displayFlex};
     ${flexRow};
     ${positionRelative};
     ${justifyBetween};
     ${itemsCenter};
     ${boxBorder};
+    ${heading3};
     ${parseWidthHeight('100%', 56)};
-    ${bgColor('fill.headerbar')}
+    ${bgColor('fill/headerbar')}
     ${modal.onMoveModal && cursorMove};
     ${order(1)};
     border-radius: 4px 4px 0px 0px;
     box-shadow: ${smallBoxShadow};
     ${responsivePaddingCSS};
 `;
+const TitleContainerCSS = css`
+    ${displayFlex};
+    ${flexRow};
+    ${positionRelative};
+    ${justifyBetween};
+    ${itemsCenter};
+`;
 ModalHeader.defaultProps = {
   className: '',
   showClose: true,

package/components/tree-view/index.js

@@ -607,7 +607,6 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }, selectBox || multiple ? jsx("span", {
         className: 'TreeView-Item-Checkbox'
       }, jsx(Checkbox, {
-        forTreeView: true,
         checked: isTrue,
         value: typeof data === 'object' ? data[valueExpr] : data,
         stopPropagation: false,
@@ -627,7 +626,6 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }, selectBox || multiple ? jsx("span", {
       className: 'TreeView-Item-Checkbox'
     }, jsx(Checkbox, {
-      forTreeView: true,
       checked: isTrue,
       value: typeof data === 'object' ? data[valueExpr] : data,
       stopPropagation: false,
@@ -782,7 +780,6 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }) : null, multiple && selectAll ? jsx(Fragment, null, jsx("div", {
       className: 'TreeView-All'
     }, jsx(Checkbox, {
-      forTreeView: true,
       label: selectAllLabel,
       onChange: onSelectAll,
       inputRef: selectAllRef,

package/icons/effect.js

@@ -105,19 +105,19 @@ Icon.propTypes = {
   viewBox: PropTypes.bool,
   /** Width of the component. */
   width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  /**
-   * 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
    */
   ref: ref
 };

package/package.json

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

package/readme.md

@@ -38,6 +38,14 @@ npm test
 ```
 
 ## Changelog
+## 1.3.94
+- \[Changed\]: Breadcrumb – Update design
+- \[Changed\]: Button – Add text sentence for Button
+- \[Changed\]: Accordion – Add prop fullHeight
+- \[Changed\]: Divider – Optimize code
+- \[Changed\]: Icon – Add color default
+- \[Fixed\]: Accordion – Fix UI background color
+
 ## 1.3.93
 - \[Changed\]: Dropdown – Apply multilineSelectedItem to renderSelectedItem
 - \[Fixed\]: Checkbox – Fix bug still uncheck when not set state