diginet-core-ui 1.3.87 → 1.3.88

package/components/accordion/details.js

@@ -1,4 +1,5 @@
 /** @jsxRuntime classic */
+
 /** @jsx jsx */
 import { memo, forwardRef, useRef, useMemo, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
@@ -28,10 +29,11 @@ const AccordionDetails = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
     currentRef.element = ref.current;
-    const _instance = {
-      ...action
+    const _instance = { ...action
     }; // methods
+
     _instance.__proto__ = {}; // hidden methods
+
     currentRef.instance = _instance;
     return currentRef;
   });
@@ -72,8 +74,10 @@ AccordionDetails.defaultProps = {
 AccordionDetails.propTypes = {
   /** The content of the component. */
   children: PropTypes.node,
+
   /** Class for component. */
   className: PropTypes.string,
+
   /** Style inline of component. */
   style: PropTypes.object
 };

package/components/accordion/group.js

@@ -1,4 +1,5 @@
 /** @jsxRuntime classic */
+
 /** @jsx jsx */
 import { memo, useRef, forwardRef, Children, cloneElement, useMemo, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
@@ -17,6 +18,7 @@ const AccordionGroup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   style
 }, reference) => {
   const ref = useRef(null);
+
   const onCollapseOther = (e, onExpand) => {
     if (collapseOther) {
       const accordions = ref.current.querySelectorAll('.DGN-UI-Accordion');
@@ -29,13 +31,15 @@ const AccordionGroup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       !!onExpand && onExpand(e);
     }
   };
+
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
     currentRef.element = ref.current;
-    const _instance = {
-      ...action
+    const _instance = { ...action
     }; // methods
+
     _instance.__proto__ = {}; // hidden methods
+
     currentRef.instance = _instance;
     return currentRef;
   });
@@ -119,10 +123,13 @@ AccordionGroup.defaultProps = {
 AccordionGroup.propTypes = {
   /** The content of the component. */
   children: PropTypes.node,
+
   /** Class for component. */
   className: PropTypes.string,
+
   /** If `true`, collapse other when expand */
   collapseOther: PropTypes.bool,
+
   /** Style inline of component. */
   style: PropTypes.object
 };

package/components/accordion/index.js

@@ -1,4 +1,5 @@
 /** @jsxRuntime classic */
+
 /** @jsx jsx */
 import { memo, useEffect, useRef, forwardRef, useState, useMemo, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
@@ -34,6 +35,7 @@ const Accordion = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   useEffect(() => {
     if (ref.current) {
       const previous = ref.current.previousElementSibling;
+
       if (previous) {
         expandState ? previous.classList.add('previousExpanding') : previous.classList.remove('previousExpanding');
       }
@@ -42,18 +44,21 @@ const Accordion = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   useEffect(() => {
     expanded !== undefined ? setExpandState(expanded) : setExpandState(expand);
   }, [expand, expanded]);
+
   const onClickAccordion = () => {
     !!onClick && onClick({
       target: ref.current
     });
   };
+
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
     currentRef.element = ref.current;
-    const _instance = {
-      ...action
+    const _instance = { ...action
     }; // methods
+
     _instance.__proto__ = {}; // hidden methods
+
     currentRef.instance = _instance;
     return currentRef;
   });
@@ -107,20 +112,28 @@ Accordion.defaultProps = {
 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,
+
   /** Class for component. */
   className: PropTypes.string,
+
   /** If `true`, the component is disabled. */
   disabled: PropTypes.bool,
+
   /** If `true`, expand immediate after render (shouldn't use this). */
   expand: PropTypes.bool,
+
   /** Expand state of accordion (should use this). */
   expanded: PropTypes.bool,
+
   /** Callback fired when Accordion is collapsed. */
   onCollapse: PropTypes.func,
+
   /** Callback fired when Accordion is expanded. */
   onExpand: PropTypes.func,
+
   /** Style inline of component. */
   style: PropTypes.object
 };

package/components/accordion/summary.js

@@ -1,4 +1,5 @@
 /** @jsxRuntime classic */
+
 /** @jsx jsx */
 import { memo, useEffect, useRef, useContext, forwardRef, useMemo, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
@@ -43,18 +44,23 @@ const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const ref = useRef(null);
   const expandIconRef = useRef(null);
   const timer = useRef(null);
+
   const _SummaryRootCSS = SummaryRootCSS(background);
+
   const _onClick = e => {
     if (disabled) return;
     const target = e.target;
+
     if (onClickAccordion) {
       onClickAccordion();
       return;
     }
+
     if (onClick && (!expandIconRef.current || !expandIconRef.current.contains(target))) {
       onClick(e);
       return;
     }
+
     if (expandState) {
       if (expanded === undefined) setExpandState(false);
       !!onCollapse && onCollapse(ref.current);
@@ -63,20 +69,25 @@ const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       !!onExpand && onExpand(ref.current);
     }
   };
+
   const showHideDetailHandler = type => {
     if (ref.current) {
       const detailsEl = ref.current.nextElementSibling;
+
       if (type === 'show') {
         if (detailsEl) {
           const scrollHeight = detailsEl.scrollHeight;
           const duration = Math.max(Math.min(scrollHeight, 1500), 200);
           detailsEl.style.height = scrollHeight + 'px';
+
           if (!detailsEl.style.transitionDuration) {
             detailsEl.style.transitionDuration = duration + 'ms';
           }
+
           if (timer.current) {
             clearTimeout(timer.current);
           }
+
           timer.current = setTimeout(() => {
             detailsEl.style.height = 'auto';
           }, (detailsEl.firstChild.childNodes.length || 2.5) * 100);
@@ -84,9 +95,11 @@ const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       } else {
         if (detailsEl && detailsEl.style.height) {
           detailsEl.style.height = detailsEl.scrollHeight + 'px';
+
           if (timer.current) {
             clearTimeout(timer.current);
           }
+
           timer.current = setTimeout(() => {
             detailsEl.style.height = null;
           }, 10);
@@ -94,6 +107,7 @@ const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
     }
   };
+
   useEffect(() => {
     if (expandState) {
       showHideDetailHandler('show');
@@ -104,10 +118,11 @@ const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
     currentRef.element = ref.current;
-    const _instance = {
-      ...action
+    const _instance = { ...action
     }; // methods
+
     _instance.__proto__ = {}; // hidden methods
+
     currentRef.instance = _instance;
     return currentRef;
   });
@@ -131,8 +146,7 @@ const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
     }, title || ''), children), !!expandIcon && jsx("div", {
       className: 'Accordion-Icon-Root'
-    }, jsx("div", {
-      ...expandIconProps,
+    }, jsx("div", { ...expandIconProps,
       ref: expandIconRef,
       className: classNames('Accordion-Icon', !collapseIcon && 'rotate-able', expandIconProps === null || expandIconProps === void 0 ? void 0 : expandIconProps.className)
     }, typeof expandIcon === 'string' ? jsx(ButtonIcon, {
@@ -160,22 +174,31 @@ AccordionSummary.defaultProps = {
 AccordionSummary.propTypes = {
   /** Background for label summary. */
   background: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+
   /** The content of the component. */
   children: PropTypes.node,
+
   /** Class for component. */
   className: PropTypes.string,
+
   /** 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']),
+
   /** Other props of icons. */
   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])
 };

package/components/alert/index.js

@@ -1,4 +1,5 @@
 /** @jsxRuntime classic */
+
 /** @jsx jsx */
 import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
@@ -59,16 +60,24 @@ const Alert = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const opacityColor = hexToRGBA(mainColor, 0.15);
   const iconName = iconMap.get(type);
   const iconSize = iconSizeMap.get(size);
+
   const _AlertContainerCSS = AlertContainerCSS(size);
+
   const _AlertInfoCSS = AlertInfoCSS(mainColor, opacityColor);
+
   const _AlertTextCSS = AlertTextCSS(clearAble);
+
   const _AlertPrimaryCSS = AlertPrimaryCSS(secondary, size);
+
   const _AlertSecondaryCSS = AlertSecondaryCSS(size);
+
   const _linearProgressCSS = linearProgressCSS(size);
+
   const _onClose = () => {
     setIsClose(true);
     onClose === null || onClose === void 0 ? void 0 : onClose();
   };
+
   useEffect(() => {
     setTimeout(() => {
       setPercentState(0);
@@ -85,15 +94,17 @@ const Alert = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
     currentRef.element = ref.current;
-    const _instance = {
-      ...action
+    const _instance = { ...action
     }; // methods
+
     _instance.__proto__ = {}; // hidden methods
+
     currentRef.instance = _instance;
     return currentRef;
   });
   const AlertView = useMemo(() => {
     let node = children;
+
     if (!node) {
       node = jsx(Icon, {
         name: iconName,
@@ -103,6 +114,7 @@ const Alert = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         viewBox: true
       });
     }
+
     return jsx("div", {
       css: _AlertInfoCSS,
       className: classNames('DGN-UI-Alert', className)
@@ -154,6 +166,7 @@ const Alert = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }, AlertView, LinearView) : null;
 }));
 const fadeIn = animations.fadeIn;
+
 const AlertContainerCSS = size => css`
     ${positionRelative};
     ${displayBlock};
@@ -164,6 +177,7 @@ const AlertContainerCSS = size => css`
     z-index: ${zIndexCORE(1)};
     animation: ${fadeIn} ${transitionTime}ms ease;
 `;
+
 const AlertInfoCSS = (mainColor, opacityColor) => css`
     ${flexRow};
     ${positionRelative};
@@ -179,17 +193,20 @@ const AlertInfoCSS = (mainColor, opacityColor) => css`
     padding: ${spacing([0, 1, 0, 4])};
     opacity: 1;
 `;
+
 const AlertIconCSS = css`
     display: inherit;
     margin-right: ${spacing([2.5])};
     padding: ${spacing([2, 0])};
 `;
+
 const AlertTextCSS = clearAble => css`
     ${displayBlock};
     margin-right: ${spacing([clearAble ? 2.5 : 0])};
     padding: ${spacing([2, 0])};
     align-self: center;
 `;
+
 const AlertPrimaryCSS = (secondary, size) => css`
     ${flexRow};
     ${positionRelative};
@@ -198,20 +215,24 @@ const AlertPrimaryCSS = (secondary, size) => css`
     ${userSelectNone};
     ${secondary ? primaryTypoMap.get(size) : paragraph1};
 `;
+
 const AlertSecondaryCSS = size => css`
     ${displayBlock};
     ${userSelectNone};
     ${size === 'tiny' ? paragraph3 : paragraph2};
 `;
+
 const AlertClearIconCSS = css`
     margin-left: auto;
 `;
+
 const linearProgressCSS = size => css`
     ${displayBlock};
     ${positionRelative};
     margin-top: ${spacing([size === 'medium' ? 1 : 0.5])};
     padding: ${spacing([0, 1.25])};
 `;
+
 Alert.defaultProps = {
   autoDisappear: false,
   className: '',
@@ -224,24 +245,34 @@ Alert.defaultProps = {
 Alert.propTypes = {
   /** Automatically remove the Alert component after the timer ends (milliseconds). */
   autoDisappear: PropTypes.bool,
+
   /** The element to display in alert like text props (priority). */
   children: PropTypes.node,
+
   /** Class for component. */
   className: PropTypes.string,
+
   /** If `true`, show clear icon to close alert. */
   clearAble: PropTypes.bool,
+
   /** The amount of time the alert is displayed. The unit is the milliseconds. */
   duration: PropTypes.number,
+
   /** Callback fired when the component closed. */
   onClose: PropTypes.func,
+
   /** If `true`, show linear progress in duration time.*/
   progressing: PropTypes.bool,
+
   /** The secondary text to show in alert (under primary). */
   secondary: PropTypes.string,
+
   /** The size of the component. */
   size: PropTypes.oneOf(['tiny', 'small', 'medium']),
+
   /** The text to show in alert. */
   text: PropTypes.string,
+
   /** Type of the component. */
   type: PropTypes.oneOf(['info', 'success', 'warning', 'danger'])
 };

package/components/alert/notify.js

@@ -1,4 +1,5 @@
 /** @jsxRuntime classic */
+
 /** @jsx jsx */
 import { memo, useEffect, forwardRef, useImperativeHandle, useRef, useState } from 'react';
 import ReactDOM, { createPortal } from 'react-dom';
@@ -42,24 +43,27 @@ const Notify = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const [positionState, setPositionState] = useState(position);
   const PositionVerticalCSS = positionVerticalMap.get((positionState === null || positionState === void 0 ? void 0 : positionState.vertical) || 'bottom');
   const PositionHorizontalCSS = positionHorizontalMap.get((positionState === null || positionState === void 0 ? void 0 : positionState.horizontal) || 'center');
+
   const showNotify = (message, {
     position,
     ...options
   } = {}) => {
     options = typeof options === 'object' ? options : {};
+
     if (position) {
       setPositionState(position);
     }
+
     const el = document.createElement('div');
     el.className = 'DGN-UI-Notify-Alert-Item';
-    ReactDOM.render(jsx(Alert
-    // onClose={() => el.remove()}
+    ReactDOM.render(jsx(Alert // onClose={() => el.remove()}
     , {
       secondary: message,
       ...props,
       ...options
     }), ref.current.appendChild(el));
   };
+
   useEffect(() => {
     if (getAddNotify && typeof getAddNotify === 'function') getAddNotify(showNotify);
   }, [props]);
@@ -73,7 +77,9 @@ const Notify = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       show: showNotify,
       ...action
     }; // methods
+
     _instance.__proto__ = {}; // hidden methods
+
     currentRef.instance = _instance;
     currentRef.add = showNotify;
     return currentRef;
@@ -104,25 +110,29 @@ Notify.defaultProps = {
 Notify.propTypes = {
   /** Class for component. */
   className: PropTypes.string,
-  /**
-   * 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({
     horizontal: PropTypes.oneOf(['center', 'left', 'right']),
     vertical: PropTypes.oneOf(['bottom', 'center', 'top'])
   })]),
+
   /** Style inline of component. */
   style: PropTypes.object,
+
   /** Any [props](https://core.diginet.com.vn/ui/?path=/docs/alert--basic) of Alert */
   props: PropTypes.any,
-  /**
-   * ref methods (ref.current.instance.*method*)
-   *
-   * * show(message, option): Show notify
-   *  * @param {message} - number
-   *  * @param {options} - object
-   *      * {[Props](https://core.diginet.com.vn/ui/?path=/docs/alert--basic) applied to the `Alert`.}
+
+  /**
+   * ref methods (ref.current.instance.*method*)
+   *
+   * * show(message, option): Show notify
+   *  * @param {message} - number
+   *  * @param {options} - object
+   *      * {[Props](https://core.diginet.com.vn/ui/?path=/docs/alert--basic) applied to the `Alert`.}
    */
   reference: ref
 };