diginet-core-ui 1.4.64-beta.6 → 1.4.65-beta.1

package/components/button/more.js

@@ -1,7 +1,7 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
-import { ButtonIcon, Icon, Popover, Tooltip, Typography } from "./..";
+import { Button, ButtonIcon, Icon, Popover, Tooltip, Typography } from "./..";
 import OptionWrapper from "../others/option-wrapper";
 import PropTypes from 'prop-types';
 import React, { forwardRef, isValidElement, memo, useImperativeHandle, useMemo, useRef, useState } from 'react';
@@ -30,7 +30,8 @@ const ButtonMore = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
     optionType,
     popoverProp,
     style,
-    onClick
+    onClick,
+    label
   } = props;
   const isOptionFull = optionType === 'full';
   let anchor = anchorProp;
@@ -114,6 +115,28 @@ const ButtonMore = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
     });
     return AnchorTag;
   };
+  const renderBtnMore = () => {
+    const btnRef = {
+      ref: ref,
+      viewType: 'text',
+      id: id,
+      style: style,
+      disabled: disabled,
+      onClick: openPopover,
+      ...buttonProps
+    };
+    const btn = label ? jsx(Button, {
+      label: label,
+      className: className,
+      ...btnRef
+    }) : jsx(ButtonIcon, {
+      circular: true,
+      name: 'more',
+      className: classNames('DGN-UI-ButtonMore', className),
+      ...btnRef
+    });
+    return btn;
+  };
   return useMemo(() => {
     return jsx(Popover, {
       css: _PopoverCSS,
@@ -127,18 +150,7 @@ const ButtonMore = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
         vertical: 'top',
         horizontal: 'left'
       },
-      anchor: anchor ? renderAnchor() : jsx(ButtonIcon, {
-        ref: ref,
-        circular: true,
-        name: 'more',
-        viewType: 'text',
-        id: id,
-        style: style,
-        className: classNames('DGN-UI-ButtonMore', className),
-        disabled: disabled,
-        onClick: openPopover,
-        ...buttonProps
-      }),
+      anchor: anchor ? renderAnchor() : renderBtnMore(),
       ...popoverProp
     }, renderOptions());
   }, [buttonProps, className, disabled, id, options, optionType, popoverProp, style, iconState, openState, theme]);
@@ -195,6 +207,8 @@ ButtonMore.propTypes = {
   className: PropTypes.string,
   /** If `true`, the component is disabled. */
   disabled: PropTypes.bool,
+  /** The content of the component. */
+  label: PropTypes.string,
   /** [Props](https://core.diginet.com.vn/ui/?path=/docs/components-typography) applied to the `Typography` label. */
   labelProp: PropTypes.object,
   /** Option(s) in popover. */

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

@@ -192,7 +192,7 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
   });
   const iconComp = jsx("div", {
     css: _IconAreaCSS
-  }, clearAble && value ? jsx(ButtonIcon, {
+  }, clearAble && value && !disabled && !readOnly ? jsx(ButtonIcon, {
     disabled: disabled || readOnly,
     viewType: 'ghost',
     onClick: onClear,

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

@@ -14,6 +14,9 @@ import { getColor } from "../../../styles/utils";
 import { generateCalendarCSS, onUpdateNavigator, renderHeader, renderNavigator } from "../calendar/function";
 import ControlComp from "../control";
 import useThemeProps from "../../../theme/utils/useThemeProps";
+const SINGLE_CALENDAR_BOARD_WIDTH = 360;
+const SINGLE_CALENDAR_BOARD_HEIGHT = 295;
+const CONTROL_BOARD_HEIGHT = 56;
 const toLocalTimestamp = t => {
   if (typeof t === 'object' && t.getTime) {
     t = t.getTime();
@@ -140,6 +143,12 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
   const focusBtnRef = useRef('today');
   const loadMoreTimer = useRef(null);
   const dropdownListRef = useRef(null);
+  const anchorInputDateRef = useRef(null);
+  const singleCalendarBoardInfoRef = useRef({
+    status: false,
+    width: SINGLE_CALENDAR_BOARD_WIDTH,
+    height: controls ? SINGLE_CALENDAR_BOARD_HEIGHT + CONTROL_BOARD_HEIGHT : SINGLE_CALENDAR_BOARD_HEIGHT
+  });
   const [valueState, setValueState] = useState();
   const navigatorFromRefs = {
     doubleLeft: useRef(null),
@@ -278,8 +287,8 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
       tableData = [],
       weekDateFirst = getDateOfWeek(firstDay),
       weekDateLast = getDateOfWeek(lastDay);
-    /**
-     * days of previous month
+    /**
+     * days of previous month
      */
     for (let i = weekDateFirst; i > 0; i--) {
       const day = Date.parse(new Date(time.getFullYear(), time.getMonth(), 1));
@@ -291,8 +300,8 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
         className: unique.day.day
       })));
     }
-    /**
-     * days of current month
+    /**
+     * days of current month
      */
     for (let i = 0; i < lastDate; i++) {
       const day = new Date(time.getFullYear(), time.getMonth(), i + 1);
@@ -318,8 +327,8 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
         type: 'h6'
       }, i + 1)));
     }
-    /**
-     * days of next month
+    /**
+     * days of next month
      */
     for (let i = 0; i < 13 - weekDateLast; i++) {
       const day = Date.parse(new Date(time.getFullYear(), time.getMonth() + 1, 0));
@@ -398,21 +407,32 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
       height,
       top
     } = anchor instanceof Element ? anchor.getBoundingClientRect() : ref.current.getBoundingClientRect();
-    const pickerHeight = innerWidth < 567 ? controls ? 550 : 495 : controls ? 310 : 256;
+    const pickerHeight = innerWidth < 567 ? controls ? 550 : 495 : singleCalendarBoardInfoRef.current.height;
     let style = {};
     style.left = left;
     style.top = top + height + 4;
     style.transformOrigin = '50% 20%';
     if (style.top + pickerHeight > innerHeight) {
       if (top > pickerHeight) {
-        style.top = innerHeight - pickerHeight - 4;
+        var _anchorInputDateRef$c;
+        const anchorRef = (_anchorInputDateRef$c = anchorInputDateRef.current) !== null && _anchorInputDateRef$c !== void 0 ? _anchorInputDateRef$c : ipConRef.current;
+        const {
+          top: topInput
+        } = anchorRef.getBoundingClientRect() || {};
+        style.top = topInput - pickerHeight;
         style.transformOrigin = '50% 80%';
       } else {
         style.top = Math.round((innerHeight - pickerHeight - 16) / 2);
         style.transformOrigin = 'center';
       }
     }
-    const pickerWidth = window.innerWidth <= 633 ? 300 : 633;
+    const {
+      width: singleCalendarCompWidth
+    } = {
+      ...singleCalendarBoardInfoRef.current
+    };
+    const fullCalendarComp = singleCalendarCompWidth * 2;
+    const pickerWidth = window.innerWidth <= fullCalendarComp ? singleCalendarCompWidth : fullCalendarComp;
     if (left + pickerWidth > innerWidth) {
       if (innerWidth > pickerWidth) {
         style.left = (innerWidth - pickerWidth) / 2;
@@ -692,6 +712,7 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
     renderCalendar(valueTo.current, 'to');
   };
   const openPicker = anchor => {
+    if (anchor) anchorInputDateRef.current = anchor;
     const backGr = createBackground();
     const picker = createPicker(anchor);
     render(pickerComp, backGr.appendChild(picker));
@@ -1057,6 +1078,16 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
     onClick: onConfirm
   }, confirmText)));
   const leftCalendarComp = jsx("div", {
+    ...(!singleCalendarBoardInfoRef.current.status ? {
+      ref: ref => {
+        var _ref$clientWidth;
+        return singleCalendarBoardInfoRef.current = {
+          ...singleCalendarBoardInfoRef.current,
+          status: true,
+          width: (_ref$clientWidth = ref === null || ref === void 0 ? void 0 : ref.clientWidth) !== null && _ref$clientWidth !== void 0 ? _ref$clientWidth : SINGLE_CALENDAR_BOARD_WIDTH
+        };
+      }
+    } : {}),
     css: generateCalendarCSS(unique, false, false, theme)
   }, renderNavigator(unique, navigatorFromRefs, e => setPrevTime(e, 'year', valueFr.current, 'from'), e => setPrevTime(e, 'month', valueFr.current, 'from'), e => setNextTime(e, 'month', valueFr.current, 'from'), e => setNextTime(e, 'year', valueFr.current, 'from')), jsx("div", {
     className: unique.table.container
@@ -1484,21 +1515,7 @@ DateRangePicker.propTypes = {
   placeholder: PropTypes.string,
   /** If `true`, hitting escape will close component. */
   pressESCToClose: PropTypes.bool,
-  /** Options for period selector.
-   * example: {
-   *  enable: true,
-   *  dataSource: [],
-   *  displayExpr: "DisplayName",
-   *  valueFromExpr: "DateFrom",
-   *  valueToExpr: "DateTo",
-   *  valueFormat: "DD/MM/YYYY",
-   *  limit: 5,
-   *  skip: 0,
-   *  total: 100,
-   *  onLoadMore: () => {},
-   *  loading: false
-   * }
-   */
+  /** Options for period selector. */
   periodOptions: PropTypes.object,
   /** If `true`, the component is readOnly. */
   readOnly: PropTypes.bool,

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

@@ -29,7 +29,7 @@ const convertData = (dt, valueExpr) => {
 };
 const convertSearchDelayTime = searchDelayTime => {
   var _searchDelayTime$matc, _searchDelayTime$matc2;
-  if (searchDelayTime === true) return getGlobal('delayOnInput');
+  if (searchDelayTime === true) return getGlobal('delayOnSearchInput');
   const units = {
     m: 60000,
     s: 1000,
@@ -122,10 +122,10 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
   } = props;
   const selectBox = multiple && selectBoxProp === undefined ? true : selectBoxProp;
   const searchExpr = typeof searchExprProp === 'string' ? [searchExprProp] : searchExprProp;
-  const searchDelayTime = convertSearchDelayTime(searchDelayTimeProp === undefined ? getGlobal('delayOnInput') : searchDelayTimeProp);
+  const searchDelayTime = convertSearchDelayTime(searchDelayTimeProp === undefined ? getGlobal('delayOnSearchInput') : searchDelayTimeProp);
   let displayExpr = displayExprProp;
   const noDataText = noDataTextProp || getGlobal('noDataText');
-  const placeholder = placeholderProp || getGlobal('dropdownPlaceholder');
+  const placeholder = placeholderProp || !readOnly && !disabled && getGlobal('dropdownPlaceholder');
   const ref = useRef(null);
   const dropdownRef = useRef(null);
   const timer = useRef(null);
@@ -301,10 +301,10 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
     });
   };
 
-  /**
-   * So sánh text đầu vào cáo map với txtSearch
-   * @param text
-   * @return {boolean}
+  /**
+   * So sánh text đầu vào cáo map với txtSearch
+   * @param text
+   * @return {boolean}
    */
   const handleRenderBySearch = (text = '') => {
     if (text === null || text === undefined) text = '';
@@ -317,10 +317,10 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
     } else return text.toLowerCase().includes(txtSearch.toLowerCase());
   };
 
-  /**
-   * Chuyển đổi data thành giá trị cần hiện thị dựa vào displayExpr [string, string object {field} - {field}], renderSelectedItem, displayExpr, valueExpr
-   * @param data {object} rowData of dataSource
-   * @return {string}
+  /**
+   * Chuyển đổi data thành giá trị cần hiện thị dựa vào displayExpr [string, string object {field} - {field}], renderSelectedItem, displayExpr, valueExpr
+   * @param data {object} rowData of dataSource
+   * @return {string}
    */
   const displayValue = data => {
     let text = '';
@@ -1805,9 +1805,9 @@ Dropdown.propTypes = {
   defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),
   /** If `true`, the component is disabled. */
   disabled: PropTypes.bool,
-  /** The field name used for displaying text in the dropdown list.<br/>
-   * Examples: 'name', '{id} - {name}', '{age} age(s)'<br/>
-   * Note: Do not use 'id - name', as it will return undefined.
+  /** The field name used for displaying text in the dropdown list.<br/>
+   * Examples: 'name', '{id} - {name}', '{age} age(s)'<br/>
+   * Note: Do not use 'id - name', as it will return undefined.
    */
   displayExpr: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),
   /**  Inline style for dropdown items. */
@@ -1816,14 +1816,14 @@ Dropdown.propTypes = {
   error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
   /** Props applied to the [HelperText](https://core.diginet.com.vn/ui/?path=/story/form-control-text-helpertext) element. */
   helperTextProps: PropTypes.object,
-  /** The field name used for displaying icons.<br/>
-   * Example:<br/>
-   * &nbsp;&nbsp;string: 'icon'<br/>
-   * &nbsp;&nbsp;object: {<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;key: 'icon',<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;prefix: 'https://imglink.com',<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;suffix: '.jpg'<br/>
-   * &nbsp;&nbsp;}
+  /** The field name used for displaying icons.<br/>
+   * Example:<br/>
+   * &nbsp;&nbsp;string: 'icon'<br/>
+   * &nbsp;&nbsp;object: {<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;key: 'icon',<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;prefix: 'https://imglink.com',<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;suffix: '.jpg'<br/>
+   * &nbsp;&nbsp;}
    */
   iconExpr: PropTypes.oneOfType([PropTypes.string, PropTypes.shape({
     key: PropTypes.string,
@@ -1859,8 +1859,8 @@ Dropdown.propTypes = {
   onOpened: PropTypes.func,
   /** Callback function fired when the dropdown is closed. */
   onClosed: PropTypes.func,
-  /** Callback function fired when the input value changes.<br/>
-   * If undefined, the filter function will run (default behavior).
+  /** Callback function fired when the input value changes.<br/>
+   * If undefined, the filter function will run (default behavior).
    */
   onInput: PropTypes.func,
   /** Callback function fired when a key is pressed down in the input. */
@@ -1873,21 +1873,21 @@ Dropdown.propTypes = {
   placeholder: PropTypes.string,
   /** If `true`, the component is read-only. */
   readOnly: PropTypes.bool,
-  /** Function used for custom rendering of items.<br/>
-   * Example: `(data, index) => data.name + ' - ' + data.role`<br/>
-   * This can be used as an alternative to `displayExpr`
+  /** Function used for custom rendering of items.<br/>
+   * Example: `(data, index) => data.name + ' - ' + data.role`<br/>
+   * This can be used as an alternative to `displayExpr`
    */
   renderItem: PropTypes.func,
-  /** Function or field name used to display selected items.<br/>
-   * Example: `(data, index) => index + ' - ' + data.name`<br/>
+  /** Function or field name used to display selected items.<br/>
+   * Example: `(data, index) => index + ' - ' + data.name`<br/>
    */
   renderSelectedItem: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
   /** If `true`, the label will indicate that the input is required. */
   required: PropTypes.bool,
-  /**
-   * Duration to wait after entering search content before triggering a search.<br/>
-   * Example: 700 -> 700ms, '700ms' -> 700ms, '0.7s' -> 700ms, '1m' -> 60000ms
-   * If `true`, the default delayOnInput will be used.
+  /**
+   * Duration to wait after entering search content before triggering a search.<br/>
+   * Example: 700 -> 700ms, '700ms' -> 700ms, '0.7s' -> 700ms, '1m' -> 60000ms
+   * If `true`, the default delayOnInput will be used.
    */
   searchDelayTime: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]),
   /** Specifies the field name or expression used to compare values with the search string. */
@@ -1920,19 +1920,19 @@ Dropdown.propTypes = {
   viewType: PropTypes.oneOf(['underlined', 'outlined', 'none']),
   /** Custom icon to override the default arrow icon. */
   endIcon: PropTypes.string
-  /**
-   * ref methods
-   *
-   * how to get component element? ref.current
-   *
-   * how to call method? ref.current.instance.{method}
-   *
-   * * showDropdown(): Show dropdown
-   * * closeDropdown(): Close dropdown
-   * * onClear(): Clear selected value
-   * * setPreviousValue(): Set value to previous value
-   * * setValue(value): Set value of dropdown
-   *  * @param {value} - string || number || array
+  /**
+   * ref methods
+   *
+   * how to get component element? ref.current
+   *
+   * how to call method? ref.current.instance.{method}
+   *
+   * * showDropdown(): Show dropdown
+   * * closeDropdown(): Close dropdown
+   * * onClear(): Clear selected value
+   * * setPreviousValue(): Set value to previous value
+   * * setValue(value): Set value of dropdown
+   *  * @param {value} - string || number || array
    */
 };
 export default Dropdown;

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

@@ -404,13 +404,7 @@ const MoneyInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
         }
         const v = getValueWithDecimal(number.toString().replace('.', decimalSymbol));
         if (convertToWords && !decimalDigit && (disabled || readOnly)) {
-          let valueConverted = getGlobal('helperInvalid');
-          if (Number.isInteger(number)) {
-            const currentLocale = locale.get();
-            const converter = converters[currentLocale] || num2WordsVi; // fallback VN
-            valueConverted = converter.convert(number);
-          }
-          inputRef.current.value = parseValueWithFix(valueConverted);
+          inputRef.current.value = convertNumToWords(value);
         } else {
           inputRef.current.value = parseValueWithFix(thousandSeparator ? getThousandSeparator(v) : v);
         }
@@ -427,13 +421,23 @@ const MoneyInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
     const _instance = {
-      getThousandSeparator: getThousandSeparator
+      getThousandSeparator: getThousandSeparator,
+      convertNumToWords
     }; // methods
     _instance.__proto__ = {}; // hidden methods
     currentRef.instance = _instance;
     currentRef.getThousandSeparator = getThousandSeparator;
     return currentRef;
   });
+  const convertNumToWords = number => {
+    let valueConverted = getGlobal('helperInvalid');
+    if (Number.isInteger(number)) {
+      const currentLocale = locale.get();
+      const converter = converters[currentLocale] || num2WordsVi; // fallback VN
+      valueConverted = Object.hasOwn(converter, 'convert') ? converter.convert(number) : converter(number);
+    }
+    return valueConverted;
+  };
   const validateResult = validates && onValidate(value, validates, true);
   return jsx("div", {
     ref: ref,
@@ -543,6 +547,8 @@ MoneyInput.propTypes = {
   required: PropTypes.bool,
   /** Convert money from number to words when readOnly || disabled */
   convertToWords: PropTypes.bool,
+  /** Convert number to words function */
+  convertNumToWords: PropTypes.number,
   /** Add a string to first of value when convertToWords. */
   prefix: PropTypes.string,
   /** Add a string to last of value when convertToWords. */
@@ -551,10 +557,10 @@ MoneyInput.propTypes = {
   inputProps: PropTypes.object,
   /** style inline of input in MoneyInput component */
   inputStyle: PropTypes.object,
-  /** 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]),
   /** on key down function */
@@ -563,13 +569,13 @@ MoneyInput.propTypes = {
   onKeyUp: PropTypes.func,
   /** on input function */
   onInput: PropTypes.func,
-  /**
-   * on change function, return an object:<br/>
-   * {<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;value: is a number or null value<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;target.value: value of input<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;...element<br/>
-   * }
+  /**
+   * on change function, return an object:<br/>
+   * {<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;value: is a number or null value<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;target.value: value of input<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;...element<br/>
+   * }
    */
   onChange: PropTypes.func,
   /** on blur function */

package/components/popup/v2/index.js

@@ -36,6 +36,7 @@ const Popup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   type,
   width,
   yesText,
+  showFullContent,
   ...props
 }, reference) => {
   if (!reference) reference = useRef(null);
@@ -43,7 +44,7 @@ const Popup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const statusAction = useRef('');
   const [openState, setOpenState] = useState(open);
   const [custom, setCustom] = useState(null);
-  const [showMoreDescription, setShowMoreDescription] = useState(false);
+  const [showMoreDescription, setShowMoreDescription] = useState(!showFullContent);
   const [descriptionLines, setDescriptionLines] = useState(0);
   const showPopup = useDelayUnmount(openState, 200);
   const theme = useTheme();
@@ -100,7 +101,7 @@ const Popup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const onRefChange = useCallback(node => {
     if (node) {
       setDescriptionLines(Math.round((node === null || node === void 0 ? void 0 : node.offsetHeight) / 18)); //18 is line-height of Typography p2
-      setShowMoreDescription(false);
+      setShowMoreDescription(!showFullContent);
     }
   }, []);
   useEffect(() => {
@@ -175,7 +176,7 @@ const Popup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       ref: onRefChange,
       type: 'p2',
       className: 'DGN-UI-Popup-Body-Detail'
-    }, description), subtitle && descriptionLines > 1 || descriptionLines > 3 ? jsx("span", {
+    }, description), (subtitle && descriptionLines > 1 || descriptionLines > 3) && showFullContent ? jsx("span", {
       className: 'DGN-More-Action',
       onClick: () => setShowMoreDescription(!showMoreDescription)
     }, getGlobal(showMoreDescription ? 'showLess' : 'showMore')) : null)));
@@ -343,7 +344,8 @@ Popup.defaultProps = {
   style: {},
   top: 56,
   type: 'info',
-  width: 480
+  width: 480,
+  showFullContent: true
 };
 Popup.propTypes = {
   /** If `true`, the component is shown. */
@@ -379,20 +381,22 @@ Popup.propTypes = {
   /** Width of the component. */
   width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   /** Label of confirm button. */
-  yesText: PropTypes.string
-  /**
-   * ref methods
-   *
-   * how to get component element? ref.current
-   *
-   * how to call method? ref.current.instance.{method}
-   *
-   * * show(options, callback): Show popup
-   *  * @param {options} - object
-   *      * {type, title, icon, yesNo, description, confirmProps, cancelProps, onCancel, onConfirm}
-   *  * @param {callback} - func
-   *      * Callback fired after click on button (callback(true) with confirm Button and callback(false) with cancel Button). Alternate both onCancel, onConfirm methods of options
-   * * close(): Close popup
+  yesText: PropTypes.string,
+  /** If `true`, show full content in popup */
+  showFullContent: PropTypes.bool
+  /**
+   * ref methods
+   *
+   * how to get component element? ref.current
+   *
+   * how to call method? ref.current.instance.{method}
+   *
+   * * show(options, callback): Show popup
+   *  * @param {options} - object
+   *      * {type, title, icon, yesNo, description, confirmProps, cancelProps, onCancel, onConfirm}
+   *  * @param {callback} - func
+   *      * Callback fired after click on button (callback(true) with confirm Button and callback(false) with cancel Button). Alternate both onCancel, onConfirm methods of options
+   * * close(): Close popup
    */
 };
 export default Popup;

package/global/index.js

@@ -245,7 +245,8 @@ const globalObject = {
     dropdownPlaceholder: '请选择'
   },
   //Global variable
-  delayOnInput: 1200,
+  delayOnInput: 500,
+  delayOnSearchInput: 1200,
   maxSizeUpload: Infinity
 };
 export const getGlobal = (key, language = locale.get()) => {

package/icons/basic.js

@@ -7312,6 +7312,44 @@ export const Inheritance = /*#__PURE__*/memo(({
     fill: fillColor(color)
   }));
 });
+export const Import = /*#__PURE__*/memo(({
+  width,
+  height,
+  color = 'system/rest',
+  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: "M13 8.62059L8.28283 3.2307V6.41849L7.94949 6.39752L7.47475 6.36606C6.12121 6.28217 4.9697 5.97807 3.94949 5.43279C2.89899 4.87703 2 4.08008 1.23232 3L1 3.09438C1.41414 5.03432 2.24242 7.18398 3.85859 8.75691C4.81818 9.70067 6.07071 10.4452 7.68687 10.8122L7.86869 10.8541L8.28283 10.9485V14L13 8.62059Z",
+    fill: fillColor(color)
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M5 11.4316V19C5 20.1046 5.89543 21 7 21H19C20.1046 21 21 20.1046 21 19V7C21 5.89543 20.1046 5 19 5H11.9165L13.6738 7H19V19H7V12.2796C6.54269 12.2796 5 11.5 5 11.4316Z",
+    fill: fillColor(color)
+  })) : /*#__PURE__*/React.createElement("svg", {
+    width: width || 20,
+    height: height || 18,
+    viewBox: "0 0 20 18",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M12 5.62059L7.28283 0.230696V3.41849L6.94949 3.39752L6.47475 3.36606C5.12121 3.28217 3.9697 2.97807 2.94949 2.43279C1.89899 1.87703 1 1.08008 0.232323 0L0 0.0943766C0.414141 2.03432 1.24242 4.18398 2.85859 5.75691C3.81818 6.70067 5.07071 7.44519 6.68687 7.8122L6.86869 7.85415L7.28283 7.94852V11L12 5.62059Z",
+    fill: fillColor(color)
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M4 8.43156V16C4 17.1046 4.89543 18 6 18H18C19.1046 18 20 17.1046 20 16V4C20 2.89543 19.1046 2 18 2H10.9165L12.6738 4H18V16H6V9.27963C5.54269 9.27963 4 8.5 4 8.43156Z",
+    fill: fillColor(color)
+  }));
+});
 export const Warning = /*#__PURE__*/memo(({
   width,
   height,

package/package.json

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

package/readme.md

@@ -41,6 +41,19 @@ npm test
 ```
 
 ## Changelog
+## 1.4.65
+- \[Added\]: Icon – Add Icon OpenNew
+- \[Added\]: Icon – Add IconMenu WEO53TR001, WEO53APP01
+- \[Added\]: Icon – Add IconMenu MHRM09N1404
+- \[Added\]: Icon – Add IconMenu MHRP25N0010
+- \[Added\]: Icon – Add IconMenu D95F3090, D95F3093, D06-2, D06-4, D95F3094, W102F1000, W103F1000, W104F1000, W105F1000, W106F1000, W107F1000, W108F1000
+- \[Changed\]: ButtonMore - Allow custom ButtonMore
+- \[Changed\]: Setting - Adjust the debounce/wait time when entering employee search information from 0.7s to 1.2s
+- \[Changed\]: DatePicker, Dropdown - Adjust the behavior so that when DatePicker or Dropdown is in ReadOnly or Disabled state, the "Select" placeholder text and the clear (X) icon are still displayed
+- \[Fixed\]: DateRangePicker - Display a popup for DateRangePicker
+- \[Changed\]: MoneyInput - Add support for converting numbers into currency words/text in MoneyInput
+- \[Changed\]: Popup - Add the showFullContent prop for Popup
+
 ## 1.4.64
 - \[Added\]: Icon – Add Icon BloodMinus
 - \[Changed\]: DatePicker - Allow manual input for the DatePicker (default value shows "Invalid Date" when typing) + add a "delayOnChange" prop.

package/theme/settings.js

@@ -436,7 +436,7 @@ const settings = {
         openOnClickAt: 'icon',
         viewType: 'underlined',
         inputProps: {},
-        delayOnInput: 1200
+        delayOnInput: 700
       }
     },
     Grid: {