diginet-core-ui 1.3.59-beta.2 → 1.3.59-beta.3

package/components/accordion/css.js

@@ -1,6 +1,6 @@
 import { css } from '@emotion/core';
 import theme from '../../theme/settings';
-import { alignCenter, alignStart, backgroundTransparent, borderBox, borderRadius4px, breakWord, cursorPointer, displayInlineBlock, flexRow, flexRowReverse, inlineFlex, justifyBetween, justifyCenter, justifyEnd, parseWidthHeight, pointerEventsNone, positionAbsolute, positionRelative, userSelectNone } from '../../styles/general';
+import { alignCenter, backgroundTransparent, borderBox, borderRadius4px, breakWord, cursorPointer, displayInlineBlock, flexRow, flexRowReverse, inlineFlex, justifyBetween, justifyCenter, justifyEnd, parseWidthHeight, pointerEventsNone, positionAbsolute, positionRelative, userSelectNone } from '../../styles/general';
 const {
   colors: {
     system: {
@@ -24,13 +24,13 @@ export const SummaryRootCSS = background => css`
     ${flexRow};
     ${positionRelative};
     ${justifyBetween};
-    ${alignStart};
+    ${alignCenter};
     ${cursorPointer};
     ${borderBox};
     ${borderRadius4px};
     width: 100%;
     min-height: 56px;
-    padding: ${spacing(4)}px ${spacing(6)}px;
+    padding: ${spacing([4, 6])};
     ${background && `background-color: ${background === true ? headerbar : theme.colors[background] || background};`};
     .Accordion-Expand-Icon,
     .Accordion-Collapse-Icon {
@@ -61,7 +61,7 @@ export const SummaryRootCSS = background => css`
         ${flexRowReverse};
         ${justifyEnd};
         .Accordion-Icon.rotate-able {
-            margin-right: ${spacing(2)}px;
+            margin-right: ${spacing([2])};
             &.TreeView {
                 transform: rotateZ(-90deg);
             }
@@ -69,7 +69,7 @@ export const SummaryRootCSS = background => css`
     }
     &.end {
         .Accordion-Icon.rotate-able {
-            margin-left: ${spacing(2)}px;
+            margin-left: ${spacing([2])};
             &.TreeView {
                 transform: rotateZ(90deg);
             }
@@ -131,10 +131,10 @@ export const SummaryRootCSS = background => css`
         ${heading3};
         ${flexRow};
         ${positionRelative};
-        ${alignCenter};
         ${breakWord};
         ${userSelectNone};
         ${borderBox}
+        ${alignCenter};
         color: ${active};
         width: 100%;
         min-height: 24px;

package/components/accordion/details.js

@@ -20,19 +20,14 @@ const {
 const AccordionDetails = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   children,
   className,
-  style,
-  id
+  id,
+  style
 }, reference) => {
   const ref = useRef(null);
-  useImperativeHandle(reference, () => {
-    const currentRef = ref.current || {};
-    const _instance = {}; // methods
-
-    _instance.__proto__ = {}; // hidden methods
-
-    currentRef.instance = _instance;
-    return currentRef;
-  });
+  useImperativeHandle(reference, () => ({
+    element: ref.current,
+    instance: {}
+  }));
   return useMemo(() => {
     return jsx("div", {
       css: DetailsRootCSS,
@@ -54,7 +49,7 @@ const DetailsRootCSS = css`
     .DGN-UI-Accordion-Details-Content {
         ${borderBox};
         ${paragraph1};
-        padding: 0 ${spacing(6)}px ${spacing(4)}px ${spacing(6)}px;
+        padding: ${spacing([0, 6, 4, 6])};
         color: ${main};
         &.disabled {
             ${pointerEventsNone}
@@ -64,17 +59,17 @@ const DetailsRootCSS = css`
 `;
 AccordionDetails.defaultProps = {
   className: '',
-  style: {},
-  id: ''
+  id: '',
+  style: {}
 };
 AccordionDetails.propTypes = {
   /** The content of the component. */
   children: PropTypes.node,
 
-  /** Style inline of component. */
-  style: PropTypes.object,
-
   /** Class for component. */
-  className: PropTypes.string
+  className: PropTypes.string,
+
+  /** Style inline of component. */
+  style: PropTypes.object
 };
 export default AccordionDetails;

package/components/accordion/group.js

@@ -5,9 +5,13 @@ import { memo, useRef, forwardRef, Children, cloneElement, useMemo, useImperativ
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import { borderRadius4px } from '../../styles/general';
+import theme from '../../theme/settings';
+const {
+  spacing
+} = theme;
 const AccordionGroup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  className,
   children,
+  className,
   collapseOther,
   style
 }, reference) => {
@@ -26,15 +30,10 @@ const AccordionGroup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
   };
 
-  useImperativeHandle(reference, () => {
-    const currentRef = ref.current || {};
-    const _instance = {}; // methods
-
-    _instance.__proto__ = {}; // hidden methods
-
-    currentRef.instance = _instance;
-    return currentRef;
-  });
+  useImperativeHandle(reference, () => ({
+    element: ref.current,
+    instance: {}
+  }));
   return useMemo(() => {
     return jsx("div", {
       css: AccordionGroupRootCSS,
@@ -56,7 +55,7 @@ const AccordionGroupRootCSS = css`
             }
             &.expanding {
                 ${borderRadius4px};
-                margin: 0 0 16px 0;
+                margin: ${spacing([0, 0, 4, 0])};
                 .DGN-UI-Divider {
                     display: none !important;
                 }
@@ -69,7 +68,7 @@ const AccordionGroupRootCSS = css`
             }
             &.expanding {
                 ${borderRadius4px};
-                margin: 16px 0 0 0;
+                margin: ${spacing([4, 0, 0, 0])};
                 .DGN-UI-Accordion-Summary {
                     border-radius: 4px 4px 0px 0px;
                 }
@@ -85,7 +84,7 @@ const AccordionGroupRootCSS = css`
             }
             &.expanding {
                 ${borderRadius4px};
-                margin: 16px 0;
+                margin: ${spacing([4, 0])};
                 .DGN-UI-Accordion-Summary {
                     border-radius: 4px 4px 0px 0px;
                 }
@@ -116,13 +115,13 @@ AccordionGroup.propTypes = {
   /** The content of the component. */
   children: PropTypes.node,
 
-  /** Style inline of component. */
-  style: PropTypes.object,
-
   /** Class for component. */
   className: PropTypes.string,
 
   /** If `true`, collapse other when expand */
-  collapseOther: PropTypes.bool
+  collapseOther: PropTypes.bool,
+
+  /** Style inline of component. */
+  style: PropTypes.object
 };
 export default AccordionGroup;

package/components/accordion/index.js

@@ -16,16 +16,16 @@ const {
   }
 } = theme;
 const Accordion = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  id,
+  boxShadow,
+  children,
+  className,
   disabled,
   expand,
   expanded,
+  id,
   onClick,
-  onExpand,
   onCollapse,
-  boxShadow,
-  className,
-  children,
+  onExpand,
   style
 }, reference) => {
   const ref = useRef(null);
@@ -49,22 +49,17 @@ const Accordion = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     });
   };
 
-  useImperativeHandle(reference, () => {
-    const currentRef = ref.current || {};
-    const _instance = {}; // methods
-
-    _instance.__proto__ = {}; // hidden methods
-
-    currentRef.instance = _instance;
-    return currentRef;
-  });
+  useImperativeHandle(reference, () => ({
+    element: ref.current,
+    instance: {}
+  }));
   return useMemo(() => {
     return jsx("div", {
       id: id,
       css: AccordionRootCSS,
       ref: ref,
       style: style,
-      className: ['DGN-UI-Accordion', disabled ? 'disabled' : '', className, boxShadow === true ? 'boxShadow' : '', expandState ? 'expanding' : ''].join(' ').trim().replace(/\s+/g, ' ')
+      className: ['DGN-UI-Accordion', disabled ? 'disabled' : '', boxShadow === true ? 'boxShadow' : '', expandState ? 'expanding' : '', className].join(' ').trim().replace(/\s+/g, ' ')
     }, jsx(AccordionContext.Provider, {
       value: {
         expanded,
@@ -106,12 +101,12 @@ Accordion.defaultProps = {
   style: {}
 };
 Accordion.propTypes = {
+  /** The box-shadow of component. */
+  boxShadow: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+
   /** The content of the component (insist <AccordionSummary />, <AccordionDetails />). */
   children: PropTypes.node,
 
-  /** Style inline of component. */
-  style: PropTypes.object,
-
   /** Class for component. */
   className: PropTypes.string,
 
@@ -124,13 +119,13 @@ Accordion.propTypes = {
   /** Expand state of accordion (should use this). */
   expanded: PropTypes.bool,
 
-  /** The box-shadow of component. */
-  boxShadow: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  /** Callback fired when Accordion is collapsed. */
+  onCollapse: PropTypes.func,
 
   /** Callback fired when Accordion is expanded. */
   onExpand: PropTypes.func,
 
-  /** Callback fired when Accordion is collapsed. */
-  onCollapse: PropTypes.func
+  /** Style inline of component. */
+  style: PropTypes.object
 };
 export default Accordion;

package/components/accordion/summary.js

@@ -4,20 +4,31 @@
 import { memo, useEffect, useRef, useContext, forwardRef, useMemo, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
 import { jsx } from '@emotion/core';
-import { renderIcon } from '../../utils';
 import { SummaryRootCSS } from './css';
 import AccordionContext from './context';
+import { ButtonIcon, Typography } from '..';
+import theme from '../../theme/settings';
+const {
+  colors: {
+    system: {
+      active,
+      disabled: systemDisabled
+    }
+  },
+  spacing
+} = theme;
 const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  id,
-  expandIcon,
-  collapseIcon,
-  expandIconAt,
   background,
-  className,
-  onClick,
   children,
+  className,
+  collapseIcon,
+  expandIcon,
+  expandIconAt,
   expandIconProps,
-  style
+  id,
+  onClick,
+  style,
+  title
 }, reference) => {
   const {
     expanded,
@@ -102,15 +113,10 @@ const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       showHideDetailHandler('hide');
     }
   }, [expandState]);
-  useImperativeHandle(reference, () => {
-    const currentRef = ref.current || {};
-    const _instance = {}; // methods
-
-    _instance.__proto__ = {}; // hidden methods
-
-    currentRef.instance = _instance;
-    return currentRef;
-  });
+  useImperativeHandle(reference, () => ({
+    element: ref.current,
+    instance: {}
+  }));
   return useMemo(() => {
     return jsx("div", {
       id: id,
@@ -122,16 +128,27 @@ const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       className: ['DGN-UI-Accordion-Summary', disabled ? 'disabled' : '', expandIcon ? expandIconAt : '', expandState ? 'expanding' : '', className].join(' ').trim().replace(/\s+/g, ' ')
     }, jsx("div", {
       className: 'DGN-UI-Accordion-Summary-Content'
-    }, children), !!expandIcon && jsx("div", {
+    }, jsx(Typography, {
+      type: 'h3',
+      lineClamp: 2,
+      color: disabled ? systemDisabled : active,
+      style: {
+        marginRight: children && title ? spacing([4]) : 0
+      }
+    }, title || ''), children), !!expandIcon && jsx("div", {
       className: 'Accordion-Icon-Root'
     }, jsx("div", { ...expandIconProps,
       ref: expandIconRef,
       className: ['Accordion-Icon', collapseIcon ? '' : 'rotate-able', expandIconProps.className ? expandIconProps.className : ''].join(' ').trim().replace(/\s+/g, ' ')
-    }, typeof expandIcon === 'string' ? renderIcon(expandIcon, 'effect', {
+    }, typeof expandIcon === 'string' ? jsx(ButtonIcon, {
+      viewType: 'ghost',
+      name: expandIcon,
       className: 'Accordion-Expand-Icon'
     }) : jsx("span", {
       className: 'Accordion-Expand-Icon effect'
-    }, expandIcon), !!collapseIcon && (typeof collapseIcon === 'string' ? renderIcon(collapseIcon, 'effect', {
+    }, expandIcon), !!collapseIcon && (typeof collapseIcon === 'string' ? jsx(ButtonIcon, {
+      viewType: 'ghost',
+      name: collapseIcon,
       className: 'Accordion-Collapse-Icon'
     }) : jsx("span", {
       className: 'Accordion-Collapse-Icon effect'
@@ -139,35 +156,41 @@ const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }, [id, expandIcon, expandIconAt, className, background, children, collapseIcon, expandIconProps, style, expandState, disabled]);
 }));
 AccordionSummary.defaultProps = {
-  expandIconAt: 'start',
-  expandIconProps: {},
   className: '',
   expandIcon: 'ArrowRight',
+  expandIconAt: 'start',
+  expandIconProps: {},
   style: {}
 };
 AccordionSummary.propTypes = {
+  /** Background for label summary. */
+  background: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+
   /** The content of the component. */
   children: PropTypes.node,
 
-  /** Style inline of component. */
-  style: PropTypes.object,
-
   /** Class for component. */
   className: PropTypes.string,
 
-  /** Icon display for expand icon. */
-  expandIcon: PropTypes.any,
-
   /** Icon display for collapse icon. */
   collapseIcon: PropTypes.any,
 
+  /** Icon display for expand icon. */
+  expandIcon: PropTypes.any,
+
   /** Position to render icon. */
   expandIconAt: PropTypes.oneOf(['start', 'end']),
 
-  /** Background for label summary. */
-  background: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-
   /** Other props of icons. */
-  expandIconProps: PropTypes.any
+  expandIconProps: PropTypes.any,
+
+  /** Callback fired when the component is clicked. */
+  onClick: PropTypes.func,
+
+  /** Style inline of component. */
+  style: PropTypes.object,
+
+  /** The title of the component. */
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
 };
 export default AccordionSummary;

package/components/avatar/index.js

@@ -241,15 +241,10 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
     }
   }, [src]);
-  useImperativeHandle(reference, () => {
-    const currentRef = ref.current || {};
-    const _instance = {}; // methods
-
-    _instance.__proto__ = {}; // hidden methods
-
-    currentRef.instance = _instance;
-    return currentRef;
-  });
+  useImperativeHandle(reference, () => ({
+    element: ref.current,
+    instance: {}
+  }));
   return useMemo(() => {
     return jsx(Fragment, null, jsx("div", {
       css: _AvatarContainerCSS,
@@ -463,18 +458,18 @@ Avatar.propTypes = {
   /** source of file (http:// or https://) */
   src: PropTypes.string,
 
-  /**
-   * it is used to display the default if there is no src<br />
-   * if undefined, will display icons available in the icons store
+  /**
+   * it is used to display the default if there is no src<br />
+   * if undefined, will display icons available in the icons store
    */
   defaultSrc: PropTypes.string,
 
   /** the direction to display more info */
   direction: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
 
-  /**
-   * data to display when hoverAble is true<br />
-   * data is an object or function return a jsx element
+  /**
+   * data to display when hoverAble is true<br />
+   * data is an object or function return a jsx element
    */
   data: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
 
@@ -490,19 +485,19 @@ Avatar.propTypes = {
   /** lazy loading */
   lazyLoading: PropTypes.bool,
 
-  /**
-   * 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
+  /**
+   * 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)

package/components/badge/index.js

@@ -98,15 +98,10 @@ const Badge = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
   const _BadgeRootCSS = BadgeRootCSS(children, name, dotPos, _BadgeNumberCSS);
 
-  useImperativeHandle(reference, () => {
-    const currentRef = ref.current || {};
-    const _instance = {}; // methods
-
-    _instance.__proto__ = {}; // hidden methods
-
-    currentRef.instance = _instance;
-    return currentRef;
-  });
+  useImperativeHandle(reference, () => ({
+    element: ref.current,
+    instance: {}
+  }));
   return useMemo(() => {
     let node = children;
 
@@ -210,11 +205,11 @@ Badge.propTypes = {
   /** other icon props when use prop name */
   iconProps: PropTypes.object,
 
-  /** size of Badge
-   *
-   * * medium (dot 8px, typography p3)
-   * * large (button 10px, typography p2)
-   * * giant (button 12px, typography p1)
+  /** size of Badge
+   *
+   * * medium (dot 8px, typography p3)
+   * * large (button 10px, typography p2)
+   * * giant (button 12px, typography p1)
    * */
   size: PropTypes.oneOf(['medium', 'large', 'giant']),
 

package/components/button/icon.js

@@ -104,15 +104,10 @@ const ButtonIcon = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
   const _ButtonRootCSS = ButtonRootCSS(circular, size, width, _width, height, _height, buttonSize, iconSize, colorHover, color, _color, name);
 
-  useImperativeHandle(reference, () => {
-    const currentRef = ref.current || {};
-    const _instance = {}; // methods
-
-    _instance.__proto__ = {}; // hidden methods
-
-    currentRef.instance = _instance;
-    return currentRef;
-  });
+  useImperativeHandle(reference, () => ({
+    element: ref.current,
+    instance: {}
+  }));
 
   const _onClick = event => {
     event.persist();
@@ -370,14 +365,14 @@ ButtonIcon.propTypes = {
   /** 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']),
 
@@ -393,19 +388,19 @@ ButtonIcon.propTypes = {
   /** 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: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: PropTypes.instanceOf(Element)