diginet-core-ui 1.3.73-beta.3 → 1.3.73-beta.4

package/components/accordion/details.js

@@ -4,7 +4,8 @@
 import { memo, forwardRef, useRef, useMemo, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
-import { borderBox, displayBlock, overflowHidden, pointerEventsNone, positionRelative, userSelectNone } from '../../styles/general';
+import { borderBox, displayBlock, overflowHidden, parseHeight, pointerEventsNone, positionRelative, userSelectNone } from '../../styles/general';
+import { classNames } from '../../utils';
 import theme from '../../theme/settings';
 const {
   colors: {
@@ -18,16 +19,24 @@ const {
   spacing
 } = theme;
 const AccordionDetails = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  action = {},
   children,
   className,
   id,
   style
 }, reference) => {
   const ref = useRef(null);
-  useImperativeHandle(reference, () => ({
-    element: ref.current,
-    instance: {}
-  }));
+  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(() => {
     return jsx("div", {
       css: DetailsRootCSS,
@@ -36,15 +45,15 @@ const AccordionDetails = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       id: id
     }, jsx("div", {
       style: style,
-      className: ['DGN-UI-Accordion-Details-Content', className].join(' ').trim().replace(/\s+/g, ' ')
+      className: classNames('DGN-UI-Accordion-Details-Content', className)
     }, children));
-  }, [style, className, children, id]);
+  }, [children, className, id, style]);
 }));
 const DetailsRootCSS = css`
     ${displayBlock};
     ${positionRelative};
     ${overflowHidden};
-    height: 0;
+    ${parseHeight(0)};
     transition: height 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
     .DGN-UI-Accordion-Details-Content {
         ${borderBox};
@@ -52,8 +61,8 @@ const DetailsRootCSS = css`
         padding: ${spacing([0, 6, 4, 6])};
         color: ${main};
         &.disabled {
-            ${pointerEventsNone}
-            ${userSelectNone}
+            ${pointerEventsNone};
+            ${userSelectNone};
         }
     }
 `;

package/components/accordion/group.js

@@ -5,11 +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 classNames from '../../utils/classNames';
 import theme from '../../theme/settings';
 const {
   spacing
 } = theme;
 const AccordionGroup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  action = {},
   children,
   className,
   collapseOther,
@@ -30,20 +32,27 @@ const AccordionGroup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
   };
 
-  useImperativeHandle(reference, () => ({
-    element: ref.current,
-    instance: {}
-  }));
+  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(() => {
     return jsx("div", {
       css: AccordionGroupRootCSS,
       ref: ref,
       style: style,
-      className: ['DGN-UI-Accordion-Group', className].join(' ').trim().replace(/\s+/g, ' ')
+      className: classNames('DGN-UI-Accordion-Group', className)
     }, Children.map(children, child => child && /*#__PURE__*/cloneElement(child, {
       onExpand: e => onCollapseOther(e, child.props.onExpand)
     })));
-  }, [style, className, children]);
+  }, [children, className, collapseOther, style]);
 }));
 const AccordionGroupRootCSS = css`
     ${borderRadius4px};

package/components/accordion/index.js

@@ -6,7 +6,8 @@ import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import AccordionContext from './context';
 import Divider from '../divider';
-import { borderRadius4px, displayBlock, positionRelative } from '../../styles/general';
+import { borderRadius4px, displayBlock, parseWidth, positionRelative } from '../../styles/general';
+import classNames from '../../utils/classNames';
 import theme from '../../theme/settings';
 const {
   colors: {
@@ -16,6 +17,7 @@ const {
   }
 } = theme;
 const Accordion = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  action = {},
   boxShadow,
   children,
   className,
@@ -49,17 +51,24 @@ const Accordion = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     });
   };
 
-  useImperativeHandle(reference, () => ({
-    element: ref.current,
-    instance: {}
-  }));
+  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(() => {
     return jsx("div", {
       id: id,
       css: AccordionRootCSS,
       ref: ref,
       style: style,
-      className: ['DGN-UI-Accordion', disabled ? 'disabled' : '', boxShadow === true ? 'boxShadow' : '', expandState ? 'expanding' : '', className].join(' ').trim().replace(/\s+/g, ' ')
+      className: classNames('DGN-UI-Accordion', disabled && 'disabled', boxShadow === true && 'boxShadow', expandState && 'expanding', className)
     }, jsx(AccordionContext.Provider, {
       value: {
         expanded,
@@ -77,13 +86,13 @@ const Accordion = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         display: 'none'
       }
     })));
-  }, [id, disabled, className, style, boxShadow, onClick, children, expanded, onExpand, onCollapse, expandState]);
+  }, [boxShadow, children, className, disabled, expanded, id, onClick, onCollapse, onExpand, style, expandState]);
 }));
 const AccordionRootCSS = css`
     ${displayBlock};
     ${positionRelative};
     ${borderRadius4px};
-    width: 100%;
+    ${parseWidth('100%')};
     transition: margin 300ms ease;
     &.boxShadow {
         box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
@@ -94,10 +103,10 @@ const AccordionRootCSS = css`
     }
 `;
 Accordion.defaultProps = {
-  expand: false,
-  disabled: false,
-  className: '',
   boxShadow: true,
+  className: '',
+  disabled: false,
+  expand: false,
   style: {}
 };
 Accordion.propTypes = {

package/components/accordion/summary.js

@@ -7,6 +7,7 @@ import { jsx } from '@emotion/core';
 import { SummaryRootCSS } from './css';
 import AccordionContext from './context';
 import { ButtonIcon, Typography } from '..';
+import { classNames } from '../../utils';
 import theme from '../../theme/settings';
 const {
   colors: {
@@ -18,6 +19,7 @@ const {
   spacing
 } = theme;
 const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  action = {},
   background,
   children,
   className,
@@ -113,10 +115,17 @@ const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       showHideDetailHandler('hide');
     }
   }, [expandState]);
-  useImperativeHandle(reference, () => ({
-    element: ref.current,
-    instance: {}
-  }));
+  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(() => {
     return jsx("div", {
       id: id,
@@ -125,7 +134,7 @@ const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       tabIndex: "-1",
       onClick: _onClick,
       style: style,
-      className: ['DGN-UI-Accordion-Summary', disabled ? 'disabled' : '', expandIcon ? expandIconAt : '', expandState ? 'expanding' : '', className].join(' ').trim().replace(/\s+/g, ' ')
+      className: classNames('DGN-UI-Accordion-Summary', disabled && 'disabled', expandIcon && expandIconAt, expandState && 'expanding', className)
     }, jsx("div", {
       className: 'DGN-UI-Accordion-Summary-Content'
     }, jsx(Typography, {
@@ -139,7 +148,7 @@ const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       className: 'Accordion-Icon-Root'
     }, jsx("div", { ...expandIconProps,
       ref: expandIconRef,
-      className: ['Accordion-Icon', collapseIcon ? '' : 'rotate-able', expandIconProps.className ? expandIconProps.className : ''].join(' ').trim().replace(/\s+/g, ' ')
+      className: classNames('Accordion-Icon', !collapseIcon && 'rotate-able', expandIconProps === null || expandIconProps === void 0 ? void 0 : expandIconProps.className)
     }, typeof expandIcon === 'string' ? jsx(ButtonIcon, {
       viewType: 'ghost',
       name: expandIcon,
@@ -153,7 +162,7 @@ const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }) : jsx("span", {
       className: 'Accordion-Collapse-Icon effect'
     }, collapseIcon)))));
-  }, [id, expandIcon, expandIconAt, className, background, children, collapseIcon, expandIconProps, style, expandState, disabled]);
+  }, [background, children, className, collapseIcon, expandIcon, expandIconAt, expandIconProps, id, onClick, style, title, disabled, expanded, expandState, onClickAccordion, onCollapse, onExpand]);
 }));
 AccordionSummary.defaultProps = {
   className: '',

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

@@ -1793,17 +1793,17 @@ Attachment.propTypes = {
   /** Class for component. */
   className: PropTypes.string,
 
-  /** List attachment:<br />
-   * [{<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"AttachmentID": "ATT2U8O7YPTF1KSNCW3X",<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"URL": "https://apricot.diginet.com.vn/cdn-dev/file/8a07bee1eeff17a14eee.jpg?path=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJmaWxlUGF0aCI6Ii8yMDIwLzA4LzQ0YjNhYjQ4LTMwNGQtNDQ3NC05ZDk0LWNkNGVlMDQwOGNlMy5qcGciLCJmaWxlTmFtZSI6IjhhMDdiZWUxZWVmZjE3YTE0ZWVlLmpwZyIsImZpbGVTaXplIjoyNDg4MzcsImZpbGVUeXBlIjoiaW1hZ2UvanBlZyIsImlhdCI6MTU5ODI0NDMwMiwiZXhwIjo4Nzk5ODI0NDMwMn0.fow6O5fp2z3vieA9gom5RRwQ7xxwBx9_7X2Fe8T2YI0",<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"FileName": "8a07bee1eeff17a14eee.jpg",<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"FileSize": 248837,<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"KeyID": "W39OAD3YGLCWAQKV1D6PGEKNW4RLGVTZTUWLYEVFQ2QG8AOCXW",<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"CreateUserID": "LEMONADMIN",<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"CreateDate": "2020-08-24T11:54:04.307Z",<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"UserName": "Quản trị hệ thống"<br />
-   * }, ...]
+  /** List attachment:<br />
+   * [{<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"AttachmentID": "ATT2U8O7YPTF1KSNCW3X",<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"URL": "https://apricot.diginet.com.vn/cdn-dev/file/8a07bee1eeff17a14eee.jpg?path=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJmaWxlUGF0aCI6Ii8yMDIwLzA4LzQ0YjNhYjQ4LTMwNGQtNDQ3NC05ZDk0LWNkNGVlMDQwOGNlMy5qcGciLCJmaWxlTmFtZSI6IjhhMDdiZWUxZWVmZjE3YTE0ZWVlLmpwZyIsImZpbGVTaXplIjoyNDg4MzcsImZpbGVUeXBlIjoiaW1hZ2UvanBlZyIsImlhdCI6MTU5ODI0NDMwMiwiZXhwIjo4Nzk5ODI0NDMwMn0.fow6O5fp2z3vieA9gom5RRwQ7xxwBx9_7X2Fe8T2YI0",<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"FileName": "8a07bee1eeff17a14eee.jpg",<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"FileSize": 248837,<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"KeyID": "W39OAD3YGLCWAQKV1D6PGEKNW4RLGVTZTUWLYEVFQ2QG8AOCXW",<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"CreateUserID": "LEMONADMIN",<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"CreateDate": "2020-08-24T11:54:04.307Z",<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"UserName": "Quản trị hệ thống"<br />
+   * }, ...]
    */
   data: PropTypes.array,
 
@@ -1846,16 +1846,16 @@ Attachment.propTypes = {
   /** Download attached event, if not it will use default. */
   onDownload: PropTypes.func,
 
-  /**
-   * event when removed file(s)
-   *
-   * return data: {<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;attached: [Files] (insist old and all new files )<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;allNewAttached: [Files]<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;oldAttached: [Files]<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;removedAttached: [Files]<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;element: [NodeList (just removed)]<br/>
-   * }
+  /**
+   * event when removed file(s)
+   *
+   * return data: {<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;attached: [Files] (insist old and all new files )<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;allNewAttached: [Files]<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;oldAttached: [Files]<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;removedAttached: [Files]<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;element: [NodeList (just removed)]<br/>
+   * }
    */
   onRemove: PropTypes.func,
 

package/components/popover/index.js

@@ -653,7 +653,7 @@ Popover.propTypes = {
   height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 
   /** Specifies how close to the edge of the window the popover can appear. */
-  marginThreshold: PropTypes.oneOfType([PropTypes.number]),
+  marginThreshold: PropTypes.number,
 
   /** Callback fired when the component requests to be closed. */
   onClose: PropTypes.func,

package/components/tab/tab-container.js

@@ -105,8 +105,8 @@ TabContainer.propTypes = {
   /** Any props else. */
   props: PropTypes.any,
 
-  /**
-   * Ref methods.
+  /**
+   * Ref methods.
    */
   reference: ref
 };

package/components/tab/tab-header.js

@@ -173,8 +173,8 @@ TabHeader.propTypes = {
   /** Any props else. */
   props: PropTypes.any,
 
-  /**
-   * Ref methods.
+  /**
+   * Ref methods.
    */
   reference: ref
 };

package/components/tab/tab-panel.js

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

package/components/tab/tab.js

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

package/package.json

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