diginet-core-ui 1.3.66 → 1.3.68

package/components/paging/page-selector2.js

@@ -4,6 +4,7 @@
 import { memo, useState, useRef, useEffect, useMemo, forwardRef, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
+import OptionWrapper from '../others/option-wrapper';
 import { getGlobal } from '../../global';
 import theme from '../../theme/settings';
 import { alignCenter, borderBox, flexRow, parseHeight } from '../../styles/general';
@@ -40,6 +41,7 @@ const PagingSelector = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   className,
   currentPage,
   hideEllipsis,
+  hideWithPage,
   id,
   itemsPerPage,
   onChangePage,
@@ -62,7 +64,11 @@ const PagingSelector = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }] = useElementSize();
   const lastPage = getLastPage(totalItemsState, itemsPerPageState);
 
-  const _onChangePage = async (page, isInit = false, e) => {
+  const _onChangePage = async ({
+    page,
+    e,
+    changeBy
+  }) => {
     let disablePrev = false;
     let disableNext = false; // If last page = 1. Disable all
 
@@ -81,16 +87,22 @@ const PagingSelector = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       disablePrev = true;
     }
 
-    if (onChangingPage && !isInit) {
+    setDisablePrevState(disablePrev);
+    setDisableNextState(disableNext);
+    if (page === currentPageState) return;
+
+    if (onChangingPage) {
       const event = { ...e,
         cancel: false,
         prevPage: currentPageState,
-        newPage: page
+        newPage: page,
+        changeBy: changeBy
       };
       await onChangingPage(event);
 
       if (event.cancel) {
         if (e !== null && e !== void 0 && e.reset) e.reset();
+        currentPageRef.current = currentPageState;
         setCurrentPageState(currentPageState);
         return;
       }
@@ -98,12 +110,11 @@ const PagingSelector = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
     currentPageRef.current = page;
     setCurrentPageState(page);
-    setDisablePrevState(disablePrev);
-    setDisableNextState(disableNext);
-    if (onChangePage && !isInit) onChangePage(page);
+    if (onChangePage) onChangePage(page);
   };
 
   const _onChangePerPage = async per => {
+    if (per === itemsPerPageState) return;
     const lastPage = getLastPage(totalItemsState, per);
     per = parseInt(per, 10);
     let disableNext = false; // If last page = 1. Disable all
@@ -125,9 +136,13 @@ const PagingSelector = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
     }
 
-    currentPageRef.current = 0;
-    setItemsPerPageState(per);
-    setCurrentPageState(0);
+    setItemsPerPageState(per); // currentPageRef.current = 0;
+    // setCurrentPageState(0);
+
+    _onChangePage({
+      page: 0
+    });
+
     setDisablePrevState(true);
     setDisableNextState(disableNext);
     if (onChangePerPage) onChangePerPage(per);
@@ -137,48 +152,43 @@ const PagingSelector = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     setTotalItemsState(totalItems);
   }, [totalItems]);
   useEffect(() => {
-    if (timer.current) {
-      clearTimeout(timer.current);
-    }
-
-    timer.current = setTimeout(() => {
-      _onChangePage(currentPageState !== null && currentPageState !== void 0 ? currentPageState : 0, true);
-    }, delayOnInput);
-  }, [totalItemsState, itemsPerPageState]);
-  useEffect(() => {
-    setItemsPerPageState(itemsPerPage);
+    _onChangePerPage(itemsPerPage);
   }, [itemsPerPage]);
   useEffect(() => {
-    setCurrentPageState(currentPage);
-
-    if (timer.current) {
-      clearTimeout(timer.current);
-    }
-
-    timer.current = setTimeout(() => {
-      _onChangePage(currentPage, true);
-    }, delayOnInput);
+    _onChangePage({
+      page: currentPage,
+      changeBy: 'currentPage'
+    });
   }, [currentPage]);
-  useImperativeHandle(reference, () => {
-    const currentRef = ref.current || {};
-    const _instance = {
-      onChangePage: page => _onChangePage(page),
+  useEffect(() => {
+    _onChangePage({
+      page: totalItemsState / itemsPerPageState < currentPageState - 1 ? 0 : currentPageState,
+      changeBy: 'totalItems'
+    });
+  }, [totalItemsState]);
+  useEffect(() => {
+    _onChangePage({
+      page: totalItemsState / itemsPerPageState < currentPageState - 1 ? 0 : currentPageState,
+      changeBy: 'itemsPerPage'
+    });
+  }, [itemsPerPageState]);
+  useImperativeHandle(reference, () => ({
+    element: ref.current,
+    instance: {
+      onChangePage: page => _onChangePage({
+        page: page,
+        changeBy: 'ref'
+      }),
       onChangePerPage: per => _onChangePerPage(per),
       setTotalItems: items => setTotalItemsState(items)
-    }; // methods
-
-    _instance.__proto__ = {}; // hidden methods
-
-    currentRef.instance = _instance;
-
-    currentRef.onChangePage = page => _onChangePage(page);
-
-    currentRef.onChangePerPage = per => _onChangePerPage(per);
-
-    currentRef.setTotalItems = items => setTotalItemsState(items);
-
-    return currentRef;
-  });
+    },
+    onChangePage: page => _onChangePage({
+      page: page,
+      changeBy: 'ref'
+    }),
+    onChangePerPage: per => _onChangePerPage(per),
+    setTotalItems: items => setTotalItemsState(items)
+  }));
 
   const renderButton = (key, page, isSelected, customDisplay) => {
     if (page >= lastPage || page < 0) return;
@@ -192,17 +202,35 @@ const PagingSelector = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       style: {
         fontWeight: 'normal'
       },
-      onClick: e => page !== currentPageState && _onChangePage(page, false, e)
+      onClick: e => page !== currentPageState && _onChangePage({
+        page: page,
+        e: e
+      })
     }, customDisplay || page + 1);
   };
 
+  const checkShowSelector = () => {
+    switch (hideWithPage) {
+      case 'empty':
+        return totalItemsState !== 0;
+
+      case 'single':
+        return totalItemsState / itemsPerPageState > 1;
+
+      case 'none':
+      default:
+        return true;
+    }
+  };
+
   return useMemo(() => {
     const count = componentWidth >= 368 ? 10 : componentWidth >= 208 ? 5 : 1;
-    const pageArr = Array.from(Array(count).keys());
+    const pageArr = [...Array(count).keys()];
     const halfArrLength = Math.floor(count / 2);
     const quarterArrLength = Math.floor(count / 2.5);
     const showEllipsis = !hideEllipsis && count !== lastPage && count >= 5;
-    return jsx("div", {
+    const showSelector = checkShowSelector();
+    return showSelector && jsx("div", {
       css: PageSelectorCSS,
       ref: node => {
         ref.current = node;
@@ -218,14 +246,17 @@ const PagingSelector = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       name: 'ArrowLeft',
       disabled: disablePrevState,
       onClick: e => {
-        currentPageRef.current = currentPageRef.current - 1;
+        currentPageRef.current = currentPageRef.current === 0 ? 0 : currentPageRef.current - 1;
 
         if (timer.current) {
           clearTimeout(timer.current);
         }
 
         timer.current = setTimeout(() => {
-          _onChangePage(currentPageRef.current, false, e);
+          _onChangePage({
+            page: currentPageRef.current,
+            e: e
+          });
         }, delayOnInput);
       }
     }), pageArr.map((_, idx) => {
@@ -278,18 +309,21 @@ const PagingSelector = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       name: 'ArrowRight',
       disabled: disableNextState,
       onClick: e => {
-        currentPageRef.current = currentPageRef.current + 1;
+        currentPageRef.current = currentPageRef.current === lastPage ? lastPage : currentPageRef.current + 1;
 
         if (timer.current) {
           clearTimeout(timer.current);
         }
 
         timer.current = setTimeout(() => {
-          _onChangePage(currentPageRef.current, false, e);
+          _onChangePage({
+            page: currentPageRef.current,
+            e: e
+          });
         }, delayOnInput);
       }
     }));
-  }, [id, style, className, hideEllipsis, totalItemsState, itemsPerPageState, currentPageState, disablePrevState, disableNextState, componentWidth]);
+  }, [id, style, className, hideEllipsis, hideWithPage, totalItemsState, itemsPerPageState, currentPageState, disablePrevState, disableNextState, componentWidth]);
 }));
 const PageSelectorCSS = css`
     ${flexRow};
@@ -309,7 +343,8 @@ PagingSelector.defaultProps = {
   className: '',
   totalItems: 0,
   currentPage: 0,
-  hideEllipsis: false
+  hideEllipsis: false,
+  hideWithPage: 'none'
 };
 PagingSelector.propTypes = {
   /** Class for component. */
@@ -321,6 +356,9 @@ PagingSelector.propTypes = {
   /** If `true`, hide ellipsis. */
   hideEllipsis: PropTypes.bool,
 
+  /** Hidden mode for page selector. */
+  hideWithPage: PropTypes.oneOf(['none', 'empty', 'single']),
+
   /** The quantity of items per page. */
   itemsPerPage: PropTypes.number,
 
@@ -370,4 +408,5 @@ PagingSelector.propTypes = {
     current: PropTypes.instanceOf(Element)
   })])
 };
-export default PagingSelector;
+export { PagingSelector };
+export default OptionWrapper(PagingSelector);

package/components/popover/index.js

@@ -209,8 +209,10 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
 
     if (element || anchor) {
-      if (element) anchor = element;else if (anchor.current) {
-        anchor = anchor.current;
+      if (element) anchor = element;else if (anchor && !(anchor instanceof Element)) {
+        var _anchor4, _anchor$current;
+
+        anchor = ((_anchor4 = anchor) === null || _anchor4 === void 0 ? void 0 : _anchor4.element) || ((_anchor$current = anchor.current) === null || _anchor$current === void 0 ? void 0 : _anchor$current.element) || anchor.current;
       }
 
       if (anchorOrigin === 'center') {
@@ -322,9 +324,9 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     };
   }, []);
   useEffect(() => {
-    var _anchor4, _anchor5;
+    var _anchor5, _anchor6;
 
-    const anchorEl = ((_anchor4 = anchor) === null || _anchor4 === void 0 ? void 0 : _anchor4.element) || ((_anchor5 = anchor) === null || _anchor5 === void 0 ? void 0 : _anchor5.current) || anchor;
+    const anchorEl = ((_anchor5 = anchor) === null || _anchor5 === void 0 ? void 0 : _anchor5.element) || ((_anchor6 = anchor) === null || _anchor6 === void 0 ? void 0 : _anchor6.current) || anchor;
     const eventArr = eventMap.get(trigger) || [];
 
     if (anchorEl && open === undefined && (eventArr === null || eventArr === void 0 ? void 0 : eventArr.length) > 0) {
@@ -378,9 +380,9 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }));
 
   const renderAnchor = () => {
-    var _anchor6;
+    var _anchor7;
 
-    if (!((_anchor6 = anchor) !== null && _anchor6 !== void 0 && _anchor6.type)) return null;
+    if (!((_anchor7 = anchor) !== null && _anchor7 !== void 0 && _anchor7.type)) return null;
     const AnchorTag = /*#__PURE__*/React.cloneElement(anchor, {
       // onClick: () => {
       //     setOpenState(true);

package/components/progress/circular.js

@@ -65,8 +65,8 @@ const getDimension = size => {
     strokeWidth
   };
 };
-/**
- * Determinate circular progress
+/**
+ * Determinate circular progress
  */
 
 
@@ -115,8 +115,8 @@ const Determinate = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
     return angle;
   };
-  /**
-   * style
+  /**
+   * style
    */
 
 
@@ -218,8 +218,8 @@ Determinate.propTypes = {
   width: PropTypes.number
 };
 export const DeterminateCircularProgress = Determinate;
-/**
- * Indeterminate circular progress
+/**
+ * Indeterminate circular progress
  */
 
 const Indeterminate = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
@@ -256,8 +256,8 @@ const Indeterminate = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
             stroke-dashoffset: -${r * 124 / 200};
         }
     `;
-  /**
-   * style
+  /**
+   * style
    */
 
 
@@ -288,8 +288,8 @@ const Indeterminate = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
             stroke-linecap: round;
             stroke-width: ${circleStrokeW};
         `;
-  /**
-   * component
+  /**
+   * component
    */
 
   const CircleBackgroundMemo = useMemo(() => jsx("circle", {
@@ -332,8 +332,8 @@ Indeterminate.propTypes = {
   width: PropTypes.number
 };
 export const IndeterminateCircularProgress = Indeterminate;
-/**
- * Circular progress
+/**
+ * Circular progress
  */
 
 const CircularProgress = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({

package/components/transfer/index.js

@@ -456,9 +456,9 @@ Transfer.propTypes = {
   /** field name used for icon display */
   iconExpr: string,
 
-  /** field name used for text display<br/>
-   * Example: 'name', '{id} - {name}', '{age} age(s)'<br/>
-   * Note: don't use 'id - name', return undefined
+  /** field name used for text display<br/>
+   * Example: 'name', '{id} - {name}', '{age} age(s)'<br/>
+   * Note: don't use 'id - name', return undefined
    */
   displayExpr: oneOfType([string, array]),
 

package/components/tree-view/index.js

@@ -227,8 +227,8 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         el.classList[isChecked ? 'add' : 'remove']('disabled');
 
         if (el.classList.contains('DGN-UI-Accordion')) {
-          el.firstChild.firstChild.firstChild.firstChild.firstChild.firstChild.classList[isChecked ? 'add' : 'remove']('disabled');
-          el.firstChild.firstChild.firstChild.firstChild.firstChild.firstChild.disabled = isChecked;
+          el.firstChild.firstChild.lastChild.firstChild.firstChild.firstChild.classList[isChecked ? 'add' : 'remove']('disabled');
+          el.firstChild.firstChild.lastChild.firstChild.firstChild.firstChild.disabled = isChecked;
           Array.from(el.childNodes).forEach(e => {
             e.classList[isChecked ? 'add' : 'remove']('treeview-disabled');
           });
@@ -248,7 +248,7 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       if (node.classList.contains('DGN-UI-Accordion') && node.firstChild.classList.contains('DGN-UI-Accordion-Summary')) {
         var _node$querySelectorAl;
 
-        const checkbox = node.firstChild.firstChild.firstChild.firstChild.firstChild.firstChild; // Trường hợp phải set về false để xét các input đã check không bao gồm node này
+        const checkbox = node.firstChild.firstChild.lastChild.firstChild.firstChild.firstChild; // Trường hợp phải set về false để xét các input đã check không bao gồm node này
 
         checkbox.firstChild.checked = isChecked;
         const mustDisabled = !!((_node$querySelectorAl = node.querySelectorAll('input:checked')) !== null && _node$querySelectorAl !== void 0 && _node$querySelectorAl.length); // Nếu có ít nhất một input con được check thì phải checked cho input này
@@ -299,14 +299,18 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
 
   const setValueIntoInput = data => {
+    var _clearIconRef$current2;
+
     if (!data || !(data !== null && data !== void 0 && data.length)) {
+      var _clearIconRef$current;
+
       inputValueRef.current.value = '';
-      clearIconRef.current.style.opacity = 0;
+      if ((_clearIconRef$current = clearIconRef.current) !== null && _clearIconRef$current !== void 0 && _clearIconRef$current.element) clearIconRef.current.element.style.opacity = 0;
       return;
     }
 
-    if (clearIconRef.current.style.opacity === '0') {
-      clearIconRef.current.style.opacity = null;
+    if ((_clearIconRef$current2 = clearIconRef.current) !== null && _clearIconRef$current2 !== void 0 && _clearIconRef$current2.element && clearIconRef.current.element.style.opacity === '0') {
+      clearIconRef.current.element.style.opacity = null;
     }
 
     let result = '';

package/icons/basic.js

@@ -2915,6 +2915,34 @@ export const List = /*#__PURE__*/memo(({
     fill: colors[color] || color
   }));
 });
+export const ListAlt = /*#__PURE__*/memo(({
+  width,
+  height,
+  color = '#7F828E',
+  viewBox = false
+}) => {
+  return viewBox ? /*#__PURE__*/React.createElement("svg", {
+    width: width || 24,
+    height: height || 24,
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M20.1 3H3.9C3.4 3 3 3.4 3 3.9V20.1C3 20.5 3.4 21 3.9 21H20.1C20.5 21 21 20.5 21 20.1V3.9C21 3.4 20.5 3 20.1 3ZM9 7H7V9H9V7ZM17 7H11V9H17V7ZM17 11H11V13H17V11ZM11 15H17V17H11V15ZM7 11H9V13H7V11ZM9 15H7V17H9V15ZM5 19H19V5H5V19Z",
+    fill: colors[color] || color
+  })) : /*#__PURE__*/React.createElement("svg", {
+    width: width || 18,
+    height: height || 18,
+    viewBox: "0 0 18 18",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M17.1 0H0.9C0.4 0 0 0.4 0 0.9V17.1C0 17.5 0.4 18 0.9 18H17.1C17.5 18 18 17.5 18 17.1V0.9C18 0.4 17.5 0 17.1 0ZM6 4H4V6H6V4ZM14 4H8V6H14V4ZM14 8H8V10H14V8ZM8 12H14V14H8V12ZM4 8H6V10H4V8ZM6 12H4V14H6V12ZM2 16H16V2H2V16Z",
+    fill: colors[color] || color
+  }));
+});
 export const ListApproval = /*#__PURE__*/memo(({
   width,
   height,
@@ -3720,6 +3748,30 @@ export const NotificationV2 = /*#__PURE__*/memo(({
     fill: colors[color] || color
   }));
 });
+export const Undo = /*#__PURE__*/memo(({
+  width,
+  height,
+  color = '#7F828E',
+  viewBox = false
+}) => {
+  return viewBox ? /*#__PURE__*/React.createElement("svg", {
+    width: width || 24,
+    height: height || 24,
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M12.5 8C9.85 8 7.45 8.99 5.6 10.6L2 7V16H11L7.38 12.38C8.77 11.22 10.54 10.5 12.5 10.5C16.04 10.5 19.05 12.81 20.1 16L22.47 15.22C21.08 11.03 17.15 8 12.5 8Z",
+    fill: colors[color] || color
+  })) : /*#__PURE__*/React.createElement("svg", {
+    width: width || 21,
+    height: height || 9,
+    viewBox: "0 0 21 9",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M10.5 1C7.85 1 5.45 1.99 3.6 3.6L0 0V9H9L5.38 5.38C6.77 4.22 8.54 3.5 10.5 3.5C14.04 3.5 17.05 5.81 18.1 9L20.47 8.22C19.08 4.03 15.15 1 10.5 1Z",
+    fill: colors[color] || color
+  }));
+});
 export const Unlock = /*#__PURE__*/memo(({
   width,
   height,
@@ -4276,6 +4328,46 @@ export const PersonRate = /*#__PURE__*/memo(({
     fill: colors[color] || color
   }));
 });
+export const PersonSetting = /*#__PURE__*/memo(({
+  width,
+  height,
+  color = '#7F828E',
+  viewBox = false
+}) => {
+  return viewBox ? /*#__PURE__*/React.createElement("svg", {
+    width: width || 24,
+    height: height || 24,
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M11 11C13.21 11 15 9.21 15 7C15 4.79 13.21 3 11 3C8.79 3 7 4.79 7 7C7 9.21 8.79 11 11 11Z",
+    fill: colors[color] || color
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M11 13C8.33 13 3 14.34 3 17V19H12.8027C12.2922 18.1175 12 17.0929 12 16C12 14.9646 12.2623 13.9904 12.724 13.1403C12.0912 13.0468 11.4991 13 11 13Z",
+    fill: colors[color] || color
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M21.0851 16C21.0851 16.136 21.0727 16.264 21.0563 16.392L21.924 17.052C22.0021 17.112 22.0227 17.22 21.9733 17.308L21.1509 18.692C21.1015 18.78 20.9946 18.816 20.9 18.78L19.8761 18.38C19.6622 18.536 19.432 18.672 19.1811 18.772L19.0248 19.832C19.0125 19.928 18.9262 20 18.8234 20H17.1785C17.0757 20 16.9893 19.928 16.977 19.832L16.8207 18.772C16.5699 18.672 16.3396 18.54 16.1257 18.38L15.1018 18.78C15.0113 18.812 14.9003 18.78 14.851 18.692L14.0285 17.308C13.9792 17.22 13.9997 17.112 14.0779 17.052L14.9455 16.392C14.9291 16.264 14.9167 16.132 14.9167 16C14.9167 15.868 14.9291 15.736 14.9455 15.608L14.0779 14.948C13.9997 14.888 13.9751 14.78 14.0285 14.692L14.851 13.308C14.9003 13.22 15.0072 13.184 15.1018 13.22L16.1257 13.62C16.3396 13.464 16.5699 13.328 16.8207 13.228L16.977 12.168C16.9893 12.072 17.0757 12 17.1785 12H18.8234C18.9262 12 19.0125 12.072 19.0248 12.168L19.1811 13.228C19.432 13.328 19.6622 13.46 19.8761 13.62L20.9 13.22C20.9905 13.188 21.1015 13.22 21.1509 13.308L21.9733 14.692C22.0227 14.78 22.0021 14.888 21.924 14.948L21.0563 15.608C21.0727 15.736 21.0851 15.864 21.0851 16ZM16.5616 16C16.5616 16.772 17.2073 17.4 18.0009 17.4C18.7946 17.4 19.4402 16.772 19.4402 16C19.4402 15.228 18.7946 14.6 18.0009 14.6C17.2073 14.6 16.5616 15.228 16.5616 16Z",
+    fill: colors[color] || color
+  })) : /*#__PURE__*/React.createElement("svg", {
+    width: width || 19,
+    height: height || 17,
+    viewBox: "0 0 19 17",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M8 8C10.21 8 12 6.21 12 4C12 1.79 10.21 0 8 0C5.79 0 4 1.79 4 4C4 6.21 5.79 8 8 8Z",
+    fill: colors[color] || color
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M8 10C5.33 10 0 11.34 0 14V16H9.80269C9.29218 15.1175 9 14.0929 9 13C9 11.9646 9.26227 10.9904 9.724 10.1403C9.09118 10.0468 8.49911 10 8 10Z",
+    fill: colors[color] || color
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M18.0851 13C18.0851 13.136 18.0727 13.264 18.0563 13.392L18.924 14.052C19.0021 14.112 19.0227 14.22 18.9733 14.308L18.1509 15.692C18.1015 15.78 17.9946 15.816 17.9 15.78L16.8761 15.38C16.6622 15.536 16.432 15.672 16.1811 15.772L16.0248 16.832C16.0125 16.928 15.9262 17 15.8234 17H14.1785C14.0757 17 13.9893 16.928 13.977 16.832L13.8207 15.772C13.5699 15.672 13.3396 15.54 13.1257 15.38L12.1018 15.78C12.0113 15.812 11.9003 15.78 11.851 15.692L11.0285 14.308C10.9792 14.22 10.9997 14.112 11.0779 14.052L11.9455 13.392C11.9291 13.264 11.9167 13.132 11.9167 13C11.9167 12.868 11.9291 12.736 11.9455 12.608L11.0779 11.948C10.9997 11.888 10.9751 11.78 11.0285 11.692L11.851 10.308C11.9003 10.22 12.0072 10.184 12.1018 10.22L13.1257 10.62C13.3396 10.464 13.5699 10.328 13.8207 10.228L13.977 9.168C13.9893 9.072 14.0757 9 14.1785 9H15.8234C15.9262 9 16.0125 9.072 16.0248 9.168L16.1811 10.228C16.432 10.328 16.6622 10.46 16.8761 10.62L17.9 10.22C17.9905 10.188 18.1015 10.22 18.1509 10.308L18.9733 11.692C19.0227 11.78 19.0021 11.888 18.924 11.948L18.0563 12.608C18.0727 12.736 18.0851 12.864 18.0851 13ZM13.5616 13C13.5616 13.772 14.2073 14.4 15.0009 14.4C15.7946 14.4 16.4402 13.772 16.4402 13C16.4402 12.228 15.7946 11.6 15.0009 11.6C14.2073 11.6 13.5616 12.228 13.5616 13Z",
+    fill: colors[color] || color
+  }));
+});
 export const PersonSync = /*#__PURE__*/memo(({
   width,
   height,
@@ -5547,6 +5639,34 @@ export const View = /*#__PURE__*/memo(({
     fill: colors[color] || color
   }));
 });
+export const ViewHeadline = /*#__PURE__*/memo(({
+  width,
+  height,
+  color = '#7F828E',
+  viewBox = false
+}) => {
+  return viewBox ? /*#__PURE__*/React.createElement("svg", {
+    width: width || 24,
+    height: height || 24,
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M4 7V5H20V7H4ZM4 11H20V9H4V11ZM20 15H4V13H20V15ZM20 19H4V17H20V19Z",
+    fill: colors[color] || color
+  })) : /*#__PURE__*/React.createElement("svg", {
+    width: width || 16,
+    height: height || 14,
+    viewBox: "0 0 16 14",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M0 2V0H16V2H0ZM0 6H16V4H0V6ZM16 10H0V8H16V10ZM16 14H0V12H16V14Z",
+    fill: colors[color] || color
+  }));
+});
 export const UnView = /*#__PURE__*/memo(({
   width,
   height,

package/icons/effect.js

@@ -45,15 +45,10 @@ const Icon = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
             height: ${width ? isNaN(width) ? width : width + 'px' : '24px'};
             border: 1px dashed ${rest};
         `;
-  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(() => {
     if (!name) return null;
     let node = null;
@@ -94,8 +89,8 @@ Icon.propTypes = {
   /** name of icon in icons store */
   name: PropTypes.string.isRequired,
 
-  /** color of icon<br />
-   * default: #7F828E
+  /** color of icon<br />
+   * default: #7F828E
    */
   color: PropTypes.string,
 
@@ -117,19 +112,19 @@ Icon.propTypes = {
   /** have view box if true */
   onClick: PropTypes.func,
 
-  /**
-   * 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "diginet-core-ui",
-  "version": "1.3.66",
+  "version": "1.3.68",
   "description": "The DigiNet core ui",
   "homepage": "https://diginet.com.vn",
   "main": "index.js",