diginet-core-ui 1.3.37 → 1.3.39

package/components/accordion/summary.js

@@ -1,11 +1,11 @@
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import { memo, useEffect, useRef, useContext, forwardRef } from 'react';
-import { any, oneOf, node, string, bool, oneOfType } from 'prop-types';
+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 { SummaryRoot } from './css';
+import { SummaryRootCSS } from './css';
 import AccordionContext from './context';
 const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   expandIcon,
@@ -16,12 +16,9 @@ const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   onClick,
   children,
   expandIconProps,
-  ...props
-}, ref) => {
-  if (!ref) {
-    ref = useRef(null);
-  }
-
+  style
+}, reference) => {
+  const ref = useRef(null);
   const expandIconRef = useRef(null);
   const timer = useRef(null);
   const {
@@ -81,7 +78,7 @@ const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
           }, (detailsEl.firstChild.childNodes.length || 2.5) * 100);
         }
       } else {
-        if (detailsEl) {
+        if (detailsEl && detailsEl.style.height) {
           detailsEl.style.height = detailsEl.scrollHeight + 'px';
 
           if (timer.current) {
@@ -116,59 +113,71 @@ const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       showHideDetailHandler('hide');
     }
   }, [expandState]);
-  return jsx("div", {
-    css: SummaryRoot,
-    ref: ref,
-    tabIndex: "-1",
-    ...props,
-    onClick: onClickHandler,
-    className: ['DGN-UI-Accordion-Summary', disabled ? 'disabled' : '', expandIcon ? expandIconAt : '', className, background === true ? 'background' : '', expandState ? 'expanding' : ''].join(' ').trim().replace(/\s+/g, ' ')
-  }, jsx("div", {
-    className: 'DGN-UI-Accordion-Summary-Content'
-  }, 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()
-  }, typeof expandIcon === 'string' ? renderIcon(expandIcon, 'effect', {
-    className: 'Accordion-Expand-Icon'
-  }) : jsx("span", {
-    className: 'Accordion-Expand-Icon effect'
-  }, expandIcon), !!collapseIcon && (typeof collapseIcon === 'string' ? renderIcon(collapseIcon, 'effect', {
-    className: 'Accordion-Collapse-Icon'
-  }) : jsx("span", {
-    className: 'Accordion-Collapse-Icon effect'
-  }, collapseIcon)))));
+  useImperativeHandle(reference, () => {
+    const currentRef = ref.current || {};
+    const _instance = {}; // methods
+
+    _instance.__proto__ = {}; // hidden methods
+
+    currentRef.instance = _instance;
+    return currentRef;
+  });
+  return useMemo(() => {
+    return jsx("div", {
+      css: SummaryRootCSS,
+      ref: ref,
+      tabIndex: "-1",
+      onClick: onClickHandler,
+      style: style,
+      className: ['DGN-UI-Accordion-Summary', disabled ? 'disabled' : '', expandIcon ? expandIconAt : '', className, background === true ? 'background' : '', expandState ? 'expanding' : ''].join(' ').trim().replace(/\s+/g, ' ')
+    }, jsx("div", {
+      className: 'DGN-UI-Accordion-Summary-Content'
+    }, 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()
+    }, typeof expandIcon === 'string' ? renderIcon(expandIcon, 'effect', {
+      className: 'Accordion-Expand-Icon'
+    }) : jsx("span", {
+      className: 'Accordion-Expand-Icon effect'
+    }, expandIcon), !!collapseIcon && (typeof collapseIcon === 'string' ? renderIcon(collapseIcon, 'effect', {
+      className: 'Accordion-Collapse-Icon'
+    }) : jsx("span", {
+      className: 'Accordion-Collapse-Icon effect'
+    }, collapseIcon)))));
+  }, [expandIcon, expandIconAt, className, background, children, collapseIcon, expandIconProps, expandState]);
 }));
 AccordionSummary.defaultProps = {
   expandIconAt: 'start',
   expandIconProps: {},
   className: '',
-  expandIcon: 'ArrowRight'
+  expandIcon: 'ArrowRight',
+  style: {}
 };
 AccordionSummary.propTypes = {
   /** the icon to display for expand icon */
-  expandIcon: any,
+  expandIcon: PropTypes.any,
 
   /** the icon to display for collapse icon */
-  collapseIcon: any,
+  collapseIcon: PropTypes.any,
 
   /** the position to render expand icon */
-  expandIconAt: oneOf(['start', 'end']),
+  expandIconAt: PropTypes.oneOf(['start', 'end']),
 
   /** background for label summary */
-  background: oneOfType([string, bool]),
+  background: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
 
   /** class for Summary component */
-  className: string,
+  className: PropTypes.string,
 
   /** The element to display in alert like text props (priority) */
-  children: node,
+  children: PropTypes.node,
 
   /** props of expand and collapse icons */
-  expandIconProps: any,
+  expandIconProps: PropTypes.any,
 
-  /** any props else */
-  props: any
+  /** style inline of component */
+  style: PropTypes.object
 };
 export default AccordionSummary;

package/components/alert/notify.js

@@ -152,28 +152,28 @@ AlertNotify.defaultProps = {
   }
 };
 AlertNotify.propTypes = {
-  /**
-   * used to set position of Alert (is a string or an object)
-   * string is center (obligatory) as {vertical: 'center', horizontal: 'center'}
+  /**
+   * used to set position of Alert (is a string or an object)
+   * string is center (obligatory) as {vertical: 'center', horizontal: 'center'}
    */
   position: PropTypes.oneOfType([PropTypes.oneOf(['center']), PropTypes.shape({
     vertical: PropTypes.oneOf(['top', 'center', 'bottom']).isRequired,
     horizontal: PropTypes.oneOf(['left', 'center', 'right']).isRequired
   })]),
 
-  /**
-   * get the function used to add a new alert<br />
-   * 2 parameters:<br />
-   * + message: message for notify<br />
-   * + options: is an object insist {<br />
-   *      position: position other than the default (if necessary)<br />
-   *      duration: new duration,<br />
-   *      color: new color,<br />
-   *      progressing: new progressing value,<br />
-   *      autoDisappear: new autoDisappear value,<br />
-   *      size: new autoDisappear,<br />
-   *      and any props else in Alert component <br />
-   * }
+  /**
+   * get the function used to add a new alert<br />
+   * 2 parameters:<br />
+   * + message: message for notify<br />
+   * + options: is an object insist {<br />
+   *      position: position other than the default (if necessary)<br />
+   *      duration: new duration,<br />
+   *      color: new color,<br />
+   *      progressing: new progressing value,<br />
+   *      autoDisappear: new autoDisappear value,<br />
+   *      size: new autoDisappear,<br />
+   *      and any props else in Alert component <br />
+   * }
    */
   getAddNotify: PropTypes.func.isRequired,
 

package/components/avatar/index.js

@@ -498,18 +498,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', 'down', '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]),
 
@@ -525,19 +525,19 @@ Avatar.propTypes = {
   /** any props else */
   props: PropTypes.any,
 
-  /**
-   * 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

@@ -210,11 +210,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

@@ -359,14 +359,14 @@ ButtonIcon.propTypes = {
   /** custom hover color for button with color 'default' */
   colorHover: PropTypes.string,
 
-  /**
-   * size of button
-   *
-   * * 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 of button
+   *
+   * * 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']),
 
@@ -403,19 +403,19 @@ ButtonIcon.propTypes = {
   /** status loading of button */
   loading: 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/button/index.js

@@ -484,19 +484,19 @@ Button.propTypes = {
   /** status loading of button */
   loading: 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/chart/Pie/Sector.js

@@ -111,8 +111,8 @@ Sector.propTypes = {
   onTouchEnd: PropTypes.func,
   onTouchStart: PropTypes.func,
 
-  /** function displays selected items by custom, example:<br/>
-   * renderItem={(data, index) => index + ' - ' + data.name}<br/>
+  /** function displays selected items by custom, example:<br/>
+   * renderItem={(data, index) => index + ' - ' + data.name}<br/>
    */
   renderSelectedItem: PropTypes.func,
   path: PropTypes.string.isRequired,

package/components/chart/Pie-v2/Sector.js

@@ -97,8 +97,8 @@ Sector.propTypes = {
   onTouchEnd: PropTypes.func,
   onTouchStart: PropTypes.func,
 
-  /** function displays selected items by custom, example:<br/>
-   * renderItem={(data, index) => index + ' - ' + data.name}<br/>
+  /** function displays selected items by custom, example:<br/>
+   * renderItem={(data, index) => index + ' - ' + data.name}<br/>
    */
   renderSelectedItem: PropTypes.func,
   path: PropTypes.string.isRequired,

package/components/chip/attach.js

@@ -156,11 +156,11 @@ const AttachChip = /*#__PURE__*/memo(({
   }))), attachView);
 });
 AttachChip.propTypes = {
-  /** the file info, such as:<br/>
-   * {<br/>
-   *  URL: https://url.com/pathname,<br/>
-   *  FileName: file.name,<br/>
-   * }
+  /** the file info, such as:<br/>
+   * {<br/>
+   *  URL: https://url.com/pathname,<br/>
+   *  FileName: file.name,<br/>
+   * }
    */
   file: PropTypes.shape({
     URL: PropTypes.string.isRequired,

package/components/divider/index.js

@@ -24,22 +24,24 @@ const Divider = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     ref = useRef(null);
   }
 
+  if (typeof width === 'number') width = `${width}px`;
+  if (typeof height === 'number') height = `${height}px`;
   const DividerRoot = css`
-        ${noBorder}
-        flex-shrink: 0;
-        margin: 0;
-        background-color: ${colors.semantic[color] || color};
-        &.vertical {
-            width: ${width ? isNaN(width) ? width : width + 'px' : '1px'};
-            height: ${height ? isNaN(height) ? height : height + 'px' : '100%'};
-            /* margin: auto 5px; */
-        }
-        &.horizontal {
-            width: ${width ? isNaN(width) ? height : width + 'px' : '100%'};
-            height: ${height ? isNaN(height) ? height : height + 'px' : '1px'};
-            /* margin: 5px auto; */
-        }
-    `;
+            ${noBorder}
+            flex-shrink: 0;
+            margin: 0;
+            background-color: ${colors.semantic[color] || color};
+            &.vertical {
+                width: ${width || '1px'};
+                height: ${height || '100%'};
+                /* margin: auto 5px; */
+            }
+            &.horizontal {
+                width: ${width || '100%'};
+                height: ${height || '1px'};
+                /* margin: 5px auto; */
+            }
+        `;
   useEffect(() => {
     if (direction === 'vertical' && !height && ref.current && ref.current.parentNode) {
       ref.current.style.height = ref.current.parentNode.offsetHeight + 'px';

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

@@ -1881,17 +1881,17 @@ Attachment.defaultProps = {
   uploadErrorInfo: {}
 };
 Attachment.propTypes = {
-  /** 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,
 
@@ -1964,15 +1964,15 @@ Attachment.propTypes = {
   /** event when uploading file failed */
   onUploadError: PropTypes.func,
 
-  /**
-   * event when removed file(s)<br/>
-   * 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)<br/>
+   * 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,