diginet-core-ui 1.3.65-beta.1 → 1.3.66-beta.1

package/components/form-control/date-picker/index.js

@@ -55,7 +55,7 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   returnFormat,
   style,
   textAlign,
-  value,
+  value: valueProp,
   viewType,
   ...props
 }, reference) => {
@@ -86,6 +86,7 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const focusedValue = useRef(null);
   const [, setDisplayValue] = useState(Date.now());
   const [, setFocusedValue] = useState(Date.now());
+  const [value, setValue] = useState(valueProp || defaultValue);
 
   const _IconAreaCSS = IconAreaCSS(unique);
 
@@ -126,7 +127,12 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
 
   const onChangeValue = e => {
-    setInputValue(e);
+    if (valueProp) {
+      closePicker();
+    } else {
+      setValue(e.value);
+    }
+
     !!onChange && onChange({
       value: formatValue(e.value, returnFormat)
     });
@@ -436,6 +442,9 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       closePicker();
     }
   }, [value]);
+  useEffect(() => {
+    setValue(valueProp);
+  }, [valueProp]);
   useEffect(() => {
     if (!readOnly) {
       ipRef.current.addEventListener('focus', onInputFocus);

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

@@ -101,9 +101,12 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   labelProps,
   errorStyle,
   children,
-  dropdownItemStyle
+  dropdownItemStyle,
+  searchExpr,
+  searchMode
 }, reference) => {
   if (multiple && selectBox === undefined) selectBox = true;
+  if (typeof searchExpr === 'string') searchExpr = [searchExpr];
   const ref = useRef(null);
   const dropdownRef = useRef(null);
   const loadingProgressRef = useRef(null);
@@ -122,6 +125,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }));
   const [openState, setOpenState] = useState(false);
   const [showClear, setShowClear] = useState(false);
+  const [textValue, setTextValue] = useState('');
 
   const _isMobile = isMobile.any();
 
@@ -169,6 +173,8 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
 
   const onClickInput = e => {
+    if (disabled || readOnly || loading) return;
+
     if (!dropdownListRef.current) {
       if (!multiple || !Array.from(inputRef.current.querySelectorAll('.DGN-UI-Chip')).some(item => item.contains(e === null || e === void 0 ? void 0 : e.target))) {
         if ((typeof renderSelectedItem === 'function' || iconExpr && iconExpr !== 'none') && !multiple) {
@@ -231,7 +237,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     const dropdownHeight = Math.min(Math.max(1, (itemMode === 'normal' ? dropdown.props.children : mapParent(dataSource, treeViewID, treeViewParentID)).length || 1), 7) * 40 + (multiple ? 43 : 0);
     let positionTop = top + height + 4;
 
-    if (top + height + 4 + dropdownHeight > innerHeight) {
+    if (top + height + 4 + dropdownHeight + (allowSearch ? 40 : 0) > innerHeight) {
       if (top - dropdownHeight > 0) {
         positionTop = top - dropdownHeight;
       } else {
@@ -387,6 +393,29 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
   };
 
+  const handleRenderBySearch = (data, searchValue) => {
+    let existExpr = [];
+    typeof data === 'object' ? existExpr = searchExpr.filter(value => Object.keys(data).includes(value)) : existExpr = [data];
+    return existExpr.every(key => {
+      // return searchByMode(data?.[key] || key.toString(), searchValue);
+      const _data = (data === null || data === void 0 ? void 0 : data[key]) || key.toString();
+
+      if (searchMode === 'contains') {
+        if (_data.indexOf(searchValue) !== -1) return false;
+      }
+
+      if (searchMode === 'startswith') {
+        if (_data.lastIndexOf(searchValue) === 0) return false;
+      }
+
+      if (searchMode === 'equals') {
+        if (_data == searchValue) return false;
+      }
+
+      return true;
+    });
+  };
+
   const mapDropdown = (pattern, keyArr) => {
     var _currentObjectDefault;
 
@@ -414,9 +443,16 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     const length = dataSourceUsable.length;
 
     for (let index = 0; index < length; index++) {
+      var _searchExpr;
+
       const data = dataSourceUsable[index];
+      const itemHidden = typeof data === 'object' ? data['hidden'] : false;
+      if (itemHidden) continue;
       let displayText = typeof data === 'object' ? keyArr ? renderData(data, keyArr) : data[displayExpr] || data[valueExpr] : data;
-      if (pattern && !new RegExp(pattern).test(displayText.normalize())) continue;
+
+      if (((_searchExpr = searchExpr) === null || _searchExpr === void 0 ? void 0 : _searchExpr.length) > 0 && pattern) {
+        if (handleRenderBySearch(data, pattern)) continue;
+      } else if (pattern && !new RegExp(pattern).test(displayText.normalize())) continue;
 
       if (renderItem && typeof renderItem === 'function') {
         displayText = renderItem({
@@ -785,11 +821,13 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
     if (timing[unique]) clearTimeout(timing[unique]);
     timing[unique] = setTimeout(() => {
+      var _searchExpr2;
+
       // if (timerRef.current) {
       //     clearTimeout(timerRef.current);
       //     timerRef.current = null;
       // }
-      renderDropdown(new RegExp(value.normalize(), 'gim'));
+      renderDropdown(((_searchExpr2 = searchExpr) === null || _searchExpr2 === void 0 ? void 0 : _searchExpr2.length) > 0 ? value.normalize() : new RegExp(value.normalize(), 'gim'));
     }, timeout.current || searchDelayTime);
   };
 
@@ -931,6 +969,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
     } else {
       inputRef.current.value = '';
+      setTextValue('');
     } // onChangeValue('', '');
 
 
@@ -962,6 +1001,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
           inputRef.current.innerHTML = '';
         } else if (!isSearch[unique]) {
           inputRef.current.value = '';
+          setTextValue('');
         }
 
         currentValue[unique] = '';
@@ -1093,6 +1133,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       ReactDOM.render(valueWithIcon, inputRef.current.appendChild(el));
     } else {
       inputRef.current.value = text;
+      setTextValue(text);
     }
   };
 
@@ -1325,14 +1366,26 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
           return false;
         }
       }
-    }) : jsx("input", { ...inputProps,
-      style: inputStyle,
+    }) : jsx(Fragment, null, jsx("input", { ...inputProps,
+      style: openState || !textValue ? inputStyle : { ...inputStyle,
+        visibility: 'hidden'
+      },
       ref: inputRef,
       css: _DropdownInputCSS,
       type: "text",
       placeholder: placeholder,
-      disabled: disabled || openState && allowSearch
-    })), jsx("div", {
+      disabled: disabled || allowSearch
+    }), !openState && textValue && jsx(Typography, {
+      hoverTooltip: true,
+      lineClamp: 1,
+      type: 'p1',
+      css: _DropdownInputCSS,
+      style: {
+        position: 'absolute',
+        lineHeight: '24px'
+      },
+      onClick: onClickInput
+    }, textValue))), jsx("div", {
       ref: iconRef,
       css: _IconCSS,
       className: 'DGN-UI-Dropdown-Icon'
@@ -1356,7 +1409,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       },
       disabled: disabled || readOnly
     })));
-  }, [viewType, inputProps, inputStyle, multiple, clearAble, onChange, disabled, readOnly, loading, renderSelectedItem, placeholder, itemMultipleSize, openState, showClear]);
+  }, [viewType, inputProps, inputStyle, multiple, clearAble, onChange, disabled, readOnly, loading, renderSelectedItem, placeholder, itemMultipleSize, openState, showClear, textValue]);
   const ErrorView = useMemo(() => error && jsx(HelperText, {
     disabled: disabled,
     style: {
@@ -1382,6 +1435,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
 const InputCSS = (multiple, renderSelectedItem) => css`
     ${flexRow};
+    ${positionRelative};
     width: 100%;
     ${!multiple && renderSelectedItem ? `width: calc(100% - 34px)` : ''}
 `;
@@ -1757,7 +1811,8 @@ Dropdown.defaultProps = {
   inputProps: {},
   formStyle: {},
   dataSource: [],
-  onInput: null
+  onInput: null,
+  searchMode: 'contains'
 };
 Dropdown.propTypes = {
   /**The variant to use. */
@@ -1928,6 +1983,12 @@ Dropdown.propTypes = {
   /** The contents in Dropdown box (Exp: TreeView). */
   children: PropTypes.node,
 
+  /** Specifies a data object's field name or an expression whose value is compared to the search string. */
+  searchExpr: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
+
+  /** Specifies a comparison operation used to search items. */
+  searchMode: PropTypes.oneOf(['contains', 'startswith', 'equals']),
+
   /**
    * ref methods
    *

package/components/form-control/input-base/index.js

@@ -1,17 +1,17 @@
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import { memo, useEffect, useRef, forwardRef, useImperativeHandle } from 'react';
+import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
 import useInput from '../../../utils/useInput';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
-import { renderIcon } from '../../../utils';
 import theme from '../../../theme/settings';
 import { typography } from '../../../styles/typography';
 const {
   colors
 } = theme;
 import { getGlobal } from '../../../global';
+import Icon from '../../../icons';
 const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   type,
   viewType,
@@ -588,26 +588,46 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     onFocus: onFocus,
     ...bind
   }));
+  const StartIcon = useMemo(() => {
+    let node = startIcon;
+
+    if (typeof node === 'string') {
+      node = jsx(Icon, {
+        name: startIcon,
+        style: iconStyle
+      });
+    }
+
+    return jsx("div", {
+      css: inputBaseIconCSS,
+      ...startIconProps,
+      className: ['start-icon', startIconProps.className ? startIconProps.className : ''].join(' ').trim()
+    }, node);
+  }, [startIcon]);
+  const EndIcon = useMemo(() => {
+    let node = endIcon;
+
+    if (typeof node === 'string') {
+      node = jsx(Icon, {
+        name: endIcon,
+        style: iconStyle
+      });
+    }
+
+    return jsx("div", {
+      css: inputBaseIconCSS,
+      ...endIconProps,
+      className: ['end-icon', endIconProps.className ? endIconProps.className : ''].join(' ').trim()
+    }, ' ', node, ' ');
+  }, [endIcon]);
   const InputComp = jsx("div", {
     css: inputBaseRoot,
     ref: ref,
     ...props,
     className: ['DGN-UI-InputBase', newClass, className, status].join(' ').trim()
-  }, jsx("div", {
+  }, startIcon && StartIcon, jsx("div", {
     css: inputBaseCSS
-  }, !!startIcon && jsx("div", {
-    css: inputBaseIconCSS,
-    ...startIconProps,
-    className: 'start-icon ' + (startIconProps.className ? startIconProps.className : '')
-  }, renderIcon(startIcon, typeof startIcon === 'string' && startIcon.length < 20 ? 'effect' : null, {
-    onClick: startIconProps.onClick ? null : () => inputBaseRef.current.focus(),
-    style: {
-      padding: 0,
-      minHeight: '24px',
-      ...iconStyle
-    },
-    viewBox: true
-  })), jsx("input", {
+  }, jsx("input", {
     type: type,
     autoComplete: autoComplete,
     placeholder: isEnabled ? placeholder : '',
@@ -627,18 +647,7 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     onBlur: onBlur,
     onFocus: onFocus,
     ...bind
-  })), !!endIcon && jsx("div", {
-    css: inputBaseIconCSS,
-    ...endIconProps,
-    className: 'end-icon ' + (endIconProps.className ? endIconProps.className : '')
-  }, renderIcon(endIcon, null, {
-    style: {
-      padding: 0,
-      minHeight: '24px',
-      ...iconStyle
-    },
-    viewBox: true
-  })));
+  })), endIcon && EndIcon);
   const InputBaseComp = multiline ? MultipleInputComp : InputComp;
   /* End component */
 
@@ -724,10 +733,10 @@ InputBase.propTypes = {
   required: PropTypes.bool,
 
   /** icon element display in the left of input */
-  startIcon: PropTypes.any,
+  startIcon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
 
   /** icon element display in the right of input */
-  endIcon: PropTypes.any,
+  endIcon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
 
   /** props of input in InputBase component */
   inputProps: PropTypes.object,

package/components/form-control/text-input/index.js

@@ -7,24 +7,6 @@ import { jsx, css } from '@emotion/core';
 import { ButtonIcon, CircularProgress as Circular, HelperText, InputBase, Label } from '../../';
 import { renderIcon, onValidate } from '../../../utils';
 import { cursorNotAllowed, displayBlock, flexRow, positionRelative } from '../../../styles/general';
-const icons = {
-  default: `<svg width="20" height="19" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path fillRule="evenodd" clipRule="evenodd" d="M15.5616 19.0007C15.4036 19.0007 15.2446 18.9637 15.0986 18.8877L9.99962 16.2237L4.90162 18.8877C4.56362 19.0627 4.15562 19.0327 3.84962 18.8087C3.54162 18.5847 3.38862 18.2057 3.45362 17.8307L4.42462 12.2027L0.304623 8.21765C0.030623 7.95265 -0.068377 7.55465 0.048623 7.19065C0.165623 6.82865 0.478623 6.56365 0.856623 6.50965L6.55662 5.68165L9.10462 0.555654C9.44262 -0.124346 10.5576 -0.124346 10.8956 0.555654L13.4436 5.68165L19.1436 6.50965C19.5216 6.56365 19.8346 6.82865 19.9516 7.19065C20.0686 7.55465 19.9696 7.95265 19.6956 8.21765L15.5756 12.2027L16.5466 17.8307C16.6116 18.2057 16.4576 18.5847 16.1506 18.8087C15.9766 18.9367 15.7696 19.0007 15.5616 19.0007Z" fill="#7F828E"/>
-    </svg>`,
-  success: `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path fillRule="evenodd" clipRule="evenodd" d="M18.997 8.974H19C19.551 8.974 19.999 9.42 20 9.971C20.008 12.642 18.975 15.157 17.091 17.051C15.208 18.945 12.7 19.992 10.029 20H10C7.33905 20 4.83605 18.968 2.94905 17.091C1.05505 15.208 0.00804612 12.7 4.61203e-05 10.029C-0.00795388 7.357 1.02505 4.843 2.90905 2.949C4.79205 1.055 7.30005 0.008 9.97105 0C10.766 0.012 11.576 0.092 12.352 0.278C12.888 0.408 13.219 0.948 13.089 1.485C12.96 2.021 12.417 2.351 11.883 2.223C11.262 2.073 10.603 2.01 9.97705 2C7.84005 2.006 5.83305 2.844 4.32705 4.359C2.82005 5.874 1.99405 7.886 2.00005 10.023C2.00605 12.16 2.84405 14.166 4.35905 15.673C5.86905 17.174 7.87105 18 10 18H10.023C12.16 17.994 14.167 17.156 15.673 15.641C17.18 14.125 18.006 12.114 18 9.977C17.999 9.425 18.445 8.975 18.997 8.974ZM6.29305 9.2929C6.68405 8.9019 7.31605 8.9019 7.70705 9.2929L9.95105 11.5369L16.248 4.3409C16.612 3.9279 17.243 3.8839 17.659 4.2479C18.074 4.6109 18.116 5.2429 17.752 5.6589L10.752 13.6589C10.57 13.8669 10.31 13.9899 10.033 13.9999H10C9.73505 13.9999 9.48105 13.8949 9.29305 13.7069L6.29305 10.7069C5.90205 10.3159 5.90205 9.6839 6.29305 9.2929Z" fill="#00C875"/>
-    </svg>`,
-  warning: `<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path fillRule="evenodd" clipRule="evenodd" d="M14.7736 2.56003C14.4236 3.00003 14.5036 3.63003 14.9336 3.97003C16.6136 5.29003 17.6836 7.18003 17.9336 9.31003C18.1936 11.43 17.6036 13.53 16.2836 15.21L16.2736 15.23C14.9536 16.9 13.0636 17.96 10.9536 18.21C8.83361 18.46 6.73361 17.88 5.05361 16.56C3.37361 15.24 2.30361 13.34 2.05361 11.22C1.79361 9.09003 2.38361 7.00003 3.70361 5.32003C4.10361 4.84003 4.55361 4.36003 5.06361 3.96003C5.49361 3.62003 5.57361 2.99003 5.23361 2.56003C4.89361 2.13003 4.26361 2.05003 3.83361 2.39003C3.19361 2.88003 2.63361 3.47003 2.13361 4.08003C0.48361 6.18003 -0.246391 8.80003 0.0736095 11.45C0.393609 14.1 1.72361 16.47 3.82361 18.12C5.92361 19.77 8.54361 20.5 11.1936 20.18C13.8336 19.86 16.1936 18.54 17.8436 16.45L17.8636 16.43C19.5136 14.33 20.2436 11.71 19.9236 9.06003C19.6036 6.41003 18.2736 4.04003 16.1736 2.39003C15.7436 2.05003 15.1136 2.13003 14.7736 2.56003Z" fill="#FFAA00"/>
-        <path d="M12.0835 15.01C12.0535 16.17 11.0935 17.08 9.9335 17.05C8.8235 17.02 7.9235 16.13 7.8935 15.01V14.96C7.9235 13.8 8.8835 12.89 10.0435 12.92C11.1535 12.95 12.0535 13.84 12.0835 14.96V15.01ZM12.1335 1.23L11.0935 10.27C11.0935 10.88 10.6035 11.37 9.9935 11.37C9.3835 11.37 8.8935 10.88 8.8935 10.27L7.8535 1.23C7.7235 0.69 8.0535 0.16 8.5935 0.03C8.6735 0.01 8.7435 0 8.8135 0H11.1635C11.7235 0.01 12.1635 0.47 12.1535 1.02C12.1635 1.09 12.1535 1.16 12.1335 1.23Z" fill="#FFAA00"/>
-    </svg>`,
-  none: `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path fillRule="evenodd" clipRule="evenodd" d="M2 10C2 8.154 2.635 6.458 3.688 5.103L14.897 16.312C13.542 17.366 11.846 18 10 18C5.589 18 2 14.411 2 10ZM18 10C18 11.846 17.365 13.542 16.312 14.897L5.103 3.688C6.458 2.634 8.154 2 10 2C14.411 2 18 5.589 18 10ZM10 0C4.486 0 0 4.486 0 10C0 15.514 4.486 20 10 20C15.514 20 20 15.514 20 10C20 4.486 15.514 0 10 0Z" fill="#FF3D71"/>
-    </svg>`,
-  danger: `<svg width="16" height="22" style="max-height:20px" viewBox="0 0 16 22" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path fillRule="evenodd" clipRule="evenodd" d="M7.11087 22.0002C6.99687 22.0002 6.88187 21.9802 6.76887 21.9392C6.33687 21.7822 6.06687 21.3502 6.11687 20.8932L6.88487 13.8002H0.999871C0.630871 13.8002 0.291871 13.5972 0.117871 13.2712C-0.056129 12.9452 -0.036129 12.5512 0.168871 12.2442L8.05687 0.444182C8.31287 0.0611818 8.79687 -0.0978183 9.22987 0.0611817C9.66287 0.218182 9.93187 0.650182 9.88187 1.10718L9.11387 8.20018H14.9999C15.3689 8.20018 15.7079 8.40318 15.8819 8.72918C16.0549 9.05518 16.0359 9.44918 15.8309 9.75618L7.94187 21.5562C7.75287 21.8402 7.43687 22.0002 7.11087 22.0002Z" fill="#FF3D71"/>
-    </svg>`
-};
 const TextInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   type,
   viewType,
@@ -48,7 +30,6 @@ const TextInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   readOnly,
   multiline,
   onConfirm,
-  refs,
   rows,
   maxRows,
   style,
@@ -184,7 +165,6 @@ const TextInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     setValue(valueProp);
   }, [valueProp]);
   useEffect(() => {
-    !!refs && refs(ref);
     currentValue = defaultValue || '';
   }, []);
   useEffect(() => {
@@ -206,22 +186,6 @@ const TextInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
     };
   }, [type, multiline]);
-  useEffect(() => {
-    if (/inform/i.test(type) && !multiline) {
-      const regexp = /(success)|(warning)|(danger)/gi;
-      const existedClass = ref.current.classList.value.match(regexp);
-
-      if (existedClass) {
-        ref.current.classList.remove(existedClass[0]);
-      }
-
-      ref.current.classList.add(status);
-
-      if (!icon) {
-        iconRef.current.innerHTML = icons[status];
-      }
-    }
-  }, [status]);
   useEffect(() => {
     if (error && !value && value !== 0) {
       ref.current.classList.add('danger');
@@ -289,7 +253,10 @@ const TextInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }, [loading]);
   /* End handler */
 
-  useImperativeHandle(reference, () => ref.current);
+  useImperativeHandle(reference, () => ({
+    element: ref.current,
+    instance: {}
+  }));
   const validateResult = validates && onValidate(value, validates, true);
   const startIconCustom = icon && type !== 'inform' ? icon : startIcon;
   const endIconCustom = /^inform$/i.test(type) ? jsx("div", {
@@ -352,7 +319,7 @@ const TextInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     autoWidth: autoWidth,
     rows: rows,
     maxRows: maxRows,
-    status: isError || validateResult ? 'danger' : 'default',
+    status: isError || validateResult ? 'danger' : status,
     inputProps: inputProps,
     inputStyle: inputStyle,
     startIcon: startIconCustom,
@@ -475,9 +442,6 @@ TextInput.propTypes = {
   /** any props of label in TextInput component */
   labelProps: PropTypes.object,
 
-  /** The function to get ref of Dropdown component */
-  refs: PropTypes.func,
-
   /** on key down function */
   onKeyDown: PropTypes.func,
 
@@ -496,10 +460,10 @@ TextInput.propTypes = {
   /** on focus function */
   onFocus: PropTypes.func,
 
-  /** validation value, argument can:<br/>
-   * * string: the validation rule. Example required.<br/>
-   * * object: the validation rule insist name, property, message. Example {name: 'min', compareValue: 9, message: 'Error'} or {max: 99}<br/>
-   * * array: the validation rule list, insist object/string
+  /** validation value, argument can:<br/>
+   * * string: the validation rule. Example required.<br/>
+   * * object: the validation rule insist name, property, message. Example {name: 'min', compareValue: 9, message: 'Error'} or {max: 99}<br/>
+   * * array: the validation rule list, insist object/string
    */
   validates: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.array, PropTypes.func]),
 

package/components/grid/Container.js

@@ -0,0 +1,110 @@
+/** @jsxRuntime classic */
+
+/** @jsx jsx */
+import PropTypes from 'prop-types';
+import { jsx } from '@emotion/core';
+import Grid from '.';
+
+const checkChildren = children => {
+  if (!children) return false;
+
+  if (Array.isArray(children)) {
+    return !children.every(v => v === false);
+  }
+
+  return true;
+};
+
+const Container = props => {
+  const {
+    className,
+    children
+  } = props;
+  return checkChildren(children) ? jsx(Grid, { ...props,
+    className: ['DGN-UI-Container', className].join(' ').trim().replace(/\s+/g, ' '),
+    container: true
+  }) : null;
+};
+
+Container.defaultProps = {
+  style: {},
+  className: '',
+  columns: 12,
+  lg: false,
+  md: false,
+  sm: false,
+  xl: false,
+  xs: false,
+  zeroMinWidth: false,
+  spacing: 0,
+  direction: 'row',
+  wrap: 'wrap',
+  columnSpacing: {
+    xs: 4,
+    sm: 4,
+    md: 4,
+    lg: 4,
+    xl: 6
+  },
+  rowSpacing: {
+    xs: 4,
+    sm: 4,
+    md: 4,
+    lg: 4,
+    xl: 4
+  },
+  topSpacing: {
+    xs: 2,
+    sm: 2,
+    md: 2,
+    lg: 2,
+    xl: 2
+  }
+};
+Container.propTypes = {
+  /** The content of the component. */
+  children: PropTypes.node,
+
+  /** Style inline of component. */
+  style: PropTypes.object,
+
+  /** Class for component. */
+  className: PropTypes.string,
+
+  /** The number of columns. */
+  columns: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number, PropTypes.object]),
+
+  /** Defines the horizontal space between the type `Col` components. It overrides the value of the `spacing` prop. */
+  columnSpacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
+
+  /** Defines the `flex-direction` style property. It is applied for all screen sizes. */
+  direction: PropTypes.oneOfType([PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), PropTypes.arrayOf(PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), PropTypes.object]),
+
+  /** If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for the `lg` breakpoint and wider screens if not overridden. */
+  lg: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
+
+  /** If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for the `md` breakpoint and wider screens if not overridden. */
+  md: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
+
+  /** Defines the vertical space between the type `Col` components. It overrides the value of the `spacing` prop. */
+  rowSpacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
+
+  /** If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for the `sm` breakpoint and wider screens if not overridden. */
+  sm: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
+
+  /** Defines the space between the type `Col` components */
+  spacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
+
+  /** Defines the flex-wrap style property. It's applied for all screen sizes. */
+  wrap: PropTypes.oneOf(['nowrap', 'wrap-reverse', 'wrap']),
+
+  /** If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for the `xl` breakpoint and wider screens if not overridden. */
+  xl: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
+
+  /** If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for all the screen sizes with the lowest priority. */
+  xs: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
+
+  /** If `true`, it sets `min-width: 0` on the item. Refer to the limitations section of the documentation to better understand the use case. */
+  zeroMinWidth: PropTypes.bool
+};
+export default Container;

package/components/grid/Row.js

@@ -51,7 +51,7 @@ Row.defaultProps = {
     sm: 4,
     md: 4,
     lg: 4,
-    xl: 6
+    xl: 4
   }
 };
 Row.propTypes = {

package/components/grid/index.js

@@ -22,11 +22,13 @@ const Grid = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   container,
   direction,
   item,
+  leftSpacing: leftSpacingProp,
   lg,
   md,
   rowSpacing: rowSpacingProp,
   sm,
   spacing,
+  topSpacing: topSpacingProp,
   wrap,
   xl,
   xs,
@@ -36,11 +38,13 @@ const Grid = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const rowSpacing = rowSpacingProp || spacing;
   const columnSpacing = columnSpacingProp || spacing;
   const columns = container ? columnsProp : columnsContext;
+  const topSpacing = topSpacingProp || rowSpacing;
+  const leftSpacing = leftSpacingProp || columnSpacing;
   const ref = useRef(null);
 
   const _GridCSS = GridCSS(direction, zeroMinWidth, container, item, wrap);
 
-  const _GridSpacingCSS = GridSpacingCSS(rowSpacing, columnSpacing);
+  const _GridSpacingCSS = GridSpacingCSS(rowSpacing, columnSpacing, topSpacing, leftSpacing);
 
   const _HandleGridCSS = HandleGridCSS([xs, sm, md, lg, xl], columns);
 
@@ -63,7 +67,7 @@ const Grid = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }, jsx(GridContext.Provider, {
       value: columns
     }, children));
-  }, [id, container, item, direction, wrap, rowSpacing, columnSpacing, xs, sm, md, lg, xl, spacing, zeroMinWidth, className, columns, children]);
+  }, [id, container, item, direction, leftSpacing, wrap, rowSpacing, columnSpacing, xs, sm, md, lg, xl, spacing, topSpacing, zeroMinWidth, className, columns, children]);
 }));
 
 const getOffset = val => {
@@ -151,19 +155,40 @@ const GridCSS = (direction, zeroMinWidth, container, item, wrap) => css`
 })};
 `;
 
-const GridSpacingCSS = (rowSpacing, columnSpacing) => css`
-    ${rowSpacing && handleBreakpoints(rowSpacing, propValue => {
+const GridSpacingCSS = (rowSpacing, columnSpacing, topSpacing, leftSpacing) => css`
+    ${topSpacing && handleBreakpoints(topSpacing, propValue => {
   const spacing = typeof propValue === 'number' ? themeSpacing(propValue) : propValue;
 
   if (spacing !== '0px') {
     return `
             margin-top: -${getOffset(spacing)};
+            `;
+  }
+
+  return '';
+})};
+    ${rowSpacing && handleBreakpoints(rowSpacing, propValue => {
+  const spacing = typeof propValue === 'number' ? themeSpacing(propValue) : propValue;
+
+  if (spacing !== '0px') {
+    return `
             & > .DGN-UI-Grid-item {
                 padding-top: ${getOffset(spacing)};
             }
             `;
   }
 
+  return '';
+})};
+    ${leftSpacing && handleBreakpoints(leftSpacing, propValue => {
+  const spacing = typeof propValue === 'number' ? themeSpacing(propValue) : propValue;
+
+  if (spacing !== '0px') {
+    return `
+                margin-left: -${getOffset(spacing)};
+                `;
+  }
+
   return '';
 })};
     ${columnSpacing && handleBreakpoints(columnSpacing, propValue => {
@@ -172,7 +197,6 @@ const GridSpacingCSS = (rowSpacing, columnSpacing) => css`
   if (spacing !== '0px') {
     return `
                 width: calc(100% + ${getOffset(spacing)});
-                margin-left: -${getOffset(spacing)};
                 & > .DGN-UI-Grid-item {
                 padding-left: ${getOffset(spacing)};
             }
@@ -230,6 +254,9 @@ Grid.propTypes = {
   /** If `true`, the component will have the flex *item* behavior. You should be wrapping *items* with a *container*. */
   item: PropTypes.bool,
 
+  /** Defines the horizontal space of `container` components. */
+  leftSpacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
+
   /** If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for the `lg` breakpoint and wider screens if not overridden. */
   lg: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
 
@@ -245,6 +272,9 @@ Grid.propTypes = {
   /** Defines the space between the type `item` components. It can only be used on a type `container` component. */
   spacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
 
+  /** Defines the vertical space of `container` components. */
+  topSpacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
+
   /** Defines the flex-wrap style property. It's applied for all screen sizes. */
   wrap: PropTypes.oneOf(['nowrap', 'wrap-reverse', 'wrap']),
 

package/components/index.js

@@ -57,7 +57,8 @@ export { default as Toggle } from './form-control/toggle'; // Grid
 
 export { default as Grid } from './grid';
 export { default as Row } from './grid/Row';
-export { default as Col } from './grid/Col'; //Icon
+export { default as Col } from './grid/Col';
+export { default as Container } from './grid/Container'; //Icon
 
 export { default as Icon } from '../icons/index'; // List
 
@@ -78,7 +79,10 @@ export { default as PagingSelector } from './paging/page-selector2'; // PAPER
 
 export { default as Paper } from './paper'; // POPOVER
 
-export { default as Popover } from './popover'; // POPUP
+export { default as Popover } from './popover';
+export { default as PopoverHeader } from './popover/header';
+export { default as PopoverBody } from './popover/body';
+export { default as PopoverFooter } from './popover/footer'; // POPUP
 
 export { default as Popup } from './popup';
 export { default as PopupV2 } from './popup/v2';

package/components/tooltip/index.js

@@ -57,6 +57,7 @@ const Tooltip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   backgroundColor,
   children,
   color,
+  disableInteractive,
   direction,
   distance,
   size,
@@ -462,7 +463,8 @@ const Tooltip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const renderTooltip = useMemo(() => {
     if (open && title) {
       const node = jsx("div", {
-        className: 'DGN-UI-Portal DGN-Tooltip'
+        className: 'DGN-UI-Portal DGN-Tooltip',
+        onMouseEnter: () => disableInteractive ? onHideTooltip() : null
       }, jsx("span", {
         className: IDs.arrow,
         css: ArrowCSS,
@@ -480,7 +482,7 @@ const Tooltip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
 
     return null;
-  }, [open, title, backgroundColor, color, size, padding, textAlign]);
+  }, [open, title, backgroundColor, color, size, padding, textAlign, disableInteractive]);
   return jsx(TagCreatedName, {
     ref: ref,
     css: ContainerCSS,
@@ -533,6 +535,7 @@ Tooltip.defaultProps = {
   arrowSize: 6,
   backgroundColor: fillTooltip,
   color: white,
+  disableInteractive: false,
   direction: 'down',
   size: 'medium',
   forceDirection: false,
@@ -570,6 +573,9 @@ Tooltip.propTypes = {
   /** If `true`, the component is disabled. */
   disabled: PropTypes.bool,
 
+  /** If `true`, makes a tooltip not interactive, i.e. it will close when the user hovers over the tooltip. */
+  disableInteractive: PropTypes.bool,
+
   /** distance between the tooltip and the children */
   distance: PropTypes.number,
 

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,
@@ -4276,6 +4304,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,

package/package.json

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

package/readme.md

@@ -38,6 +38,21 @@ npm test
 ```
 
 ## Changelog
+## 1.3.66
+- \[Changed\]: THEME – Update makestyles
+- \[Changed\]: THEME – Refactoring makeStyles
+- \[Changed\]: Popover – Update Popover with new design
+- \[Changed\]: Status – Update Status with new design
+- \[Changed\]: Popover – Add prop clickOutsideToClose
+- \[Changed\]: TextInput – Add cursor not-allow when disabled
+- \[Changed\]: Tooltip – Add prop disabled
+- \[Changed\]: InputBase – Allow startIcon, endIcon as node
+- \[Fixed\]: TECH – Fix eslint, remove unused code
+- \[Fixed\]: Popover – Fix css children height and overflow
+- \[Fixed\]: Dropdown – Fix css disabled
+- \[Fixed\]: Label – Fix not show required when label too long
+- \[Fixed\]: Dropdown – Fix bug not reset search text when rerender
+
 ## 1.3.65
 - \[Changed\]: Dropdown – Add viewType none