diginet-core-ui 1.4.49 → 1.4.50-beta.2

package/assets/images/menu/dhr/MHRP39N0025.svg

@@ -0,0 +1,9 @@
+<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M31 2H26V4H31C32.1 4 33 4.9 33 6V35C33 36.1 32.1 37 31 37H8C6.9 37 6 36.1 6 35V6C6 4.9 6.9 4 8 4H13V2H8C5.8 2 4 3.8 4 6V35C4 37.2 5.8 39 8 39H31C33.2 39 35 37.2 35 35V6C35 3.8 33.2 2 31 2Z" fill="#2680EB"/>
+<path d="M26 0H13C11.9 0 11 0.9 11 2V4C11 5.1 11.9 6 13 6H26C27.1 6 28 5.1 28 4V2C28 0.9 27.1 0 26 0ZM13 4V2H26V4H13Z" fill="#2680EB"/>
+<path d="M10.5999 33.1C10.5999 32.8 10.7999 32.4 10.9999 32C11.7999 30.2 13.1999 29 14.9999 28.2C16.8999 27.4 18.8999 27.1 21.0999 27.4C22.6999 27.6 24.1999 28.1 25.4999 29C27.0999 30.1 28.0999 31.4 28.4999 33.2C28.4999 33.2 28.4999 33.3 28.4999 33.4C28.4999 33.5 28.4999 33.7 28.4999 33.9C28.2999 34.5 27.8999 34.9 27.1999 35.1C27.5999 35.1 24.7999 35.1 23.0999 35.1C18.9999 35 11.3999 35 11.7999 35C11.4999 34.9 11.0999 34.8 10.8999 34.5C10.7999 34.3 10.6999 34.2 10.5999 34C10.4999 33.8 10.4999 33.4 10.5999 33.1Z" fill="#2680EB"/>
+<path d="M19.9999 17C20.1999 17 20.4999 17.1 20.6999 17.1C22.4999 17.6 23.5999 18.8 23.7999 20.6C23.9999 22.4 23.3999 23.9 21.9999 25C20.3999 26.3 18.3999 26.2 16.7999 24.9C15.7999 24.1 15.2999 23 15.0999 21.8C14.9999 20.7 15.0999 19.8 15.6999 18.8C16.3999 17.8 17.3999 17.2 18.5999 17C19.3999 17 19.8999 17 19.9999 17Z" fill="#2680EB"/>
+<path d="M19.6998 7.09999L20.9998 9.79999L23.9998 10.2C24.1998 10.2 24.2998 10.5 24.0998 10.6L21.9998 12.8L22.4998 15.7C22.4998 15.9 22.2998 16.1 22.0998 16L19.4998 14.6L16.8998 16C16.6998 16.1 16.4998 15.9 16.4998 15.7L16.9998 12.8L14.8998 10.7C14.6998 10.6 14.7998 10.3 14.9998 10.3L17.9998 9.89999L19.2998 7.19999C19.3998 6.99999 19.5998 6.99999 19.6998 7.09999Z" fill="#FF8C00"/>
+<path d="M27.6998 10.4L28.6998 12.4L30.8998 12.7C31.0998 12.7 31.0998 12.9 30.9998 13L29.3998 14.5L29.7998 16.7C29.7998 16.9 29.6998 17 29.4998 16.9L27.4998 15.9L25.4998 16.9C25.3998 17 25.1998 16.9 25.1998 16.7L25.5998 14.5L23.9998 13C23.8998 12.9 23.8998 12.7 24.0998 12.7L26.2998 12.4L27.2998 10.4C27.3998 10.3 27.5998 10.3 27.6998 10.4Z" fill="#FF8C00"/>
+<path d="M11.6998 10.4L12.6998 12.4L14.8998 12.7C15.0998 12.7 15.0998 12.9 14.9998 13L13.3998 14.5L13.7998 16.7C13.7998 16.9 13.6998 17 13.4998 16.9L11.4998 15.9L9.49977 16.9C9.39977 17 9.19977 16.9 9.19977 16.7L9.59977 14.5L7.99977 13C7.89977 12.9 7.89977 12.7 8.09977 12.7L10.2998 12.4L11.2998 10.4C11.3998 10.3 11.5998 10.3 11.6998 10.4Z" fill="#FF8C00"/>
+</svg>

package/assets/images/menu/dhr/MHRP39N0027.svg

@@ -0,0 +1,18 @@
+<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2247_88)">
+<path d="M22 27.3C22 26.7 21.5 26.2 20.9 26.2H7.1C6.5 26.2 6 26.7 6 27.3C6 27.9 6.5 28.4 7.1 28.4H20.8C21.5 28.4 22 27.9 22 27.3Z" fill="#2680EB"/>
+<path d="M20.9 21.6H7.1C6.5 21.6 6 22.1 6 22.7C6 23.3 6.5 23.8 7.1 23.8H20.8C21.4 23.8 21.9 23.3 21.9 22.7C21.9 22.1 21.5 21.6 20.9 21.6Z" fill="#2680EB"/>
+<path d="M7.1 30.8C6.5 30.8 6 31.2 6 31.8C6 32.4 6.5 33 7.1 33H16.2C16.8 33 17.3 32.5 17.3 31.9C17.3 31.3 16.8 30.8 16.2 30.8H7.1Z" fill="#2680EB"/>
+<path d="M28 2H25C25 0.9 24.1 0 23 0H10C8.9 0 8 0.9 8 2H5C2.8 2 1 3.8 1 6V35C1 37.2 2.8 39 5 39H25.5C24.4 38.4 23.3 37.8 22.3 37H5C3.9 37 3 36.1 3 35V6C3 4.9 3.9 4 5 4H8C8 5.1 8.9 6 10 6H23C24.1 6 25 5.1 25 4H28C29.1 4 30 4.9 30 6V13.8C30.7 13.8 31.3 13.9 32 14.1V6C32 3.8 30.2 2 28 2ZM10 4V2H23V4H10Z" fill="#2680EB"/>
+<path d="M30 26.9C26.8 26.9 24.2 24.2 24.2 21C24.2 17.7 26.8 15.1 30.1 15.1C33.3 15.1 35.9 17.8 35.9 21.1C35.8 24.2 33.2 26.9 30 26.9Z" fill="#2680EB"/>
+<path d="M37.3 30.9C37.1 29.9 36.6 29.2 35.6 28.8C33.8 28.1 32.6 27.4 32.6 27.4L31.2 31.9L31 32.5L30.4 30.7C31.9 28.7 30.3 28.6 30 28.6C29.7 28.6 28.1 28.7 29.6 30.7L29 32.5L28.8 31.9L27.4 27.4C27.4 27.4 26.3 28.1 24.4 28.8C23.5 29.1 23.1 29.6 22.8 30.3L22.4 32.1C22.3 32.6 22.2 33.1 22.1 33.6C21.9 34.5 22.2 35.3 23 35.9C24.3 36.9 25.8 37.8 27.4 38.4C28.8 39 30.3 39.2 31.8 38.8C33.8 38.2 35.6 37.2 37.3 35.9C38 35.4 38.2 34.5 38.1 33.6C38 33 37.4 31.2 37.3 30.9Z" fill="#2680EB"/>
+<path d="M16.6998 8.09999L17.9998 10.8L20.9998 11.2C21.1998 11.2 21.2998 11.5 21.0998 11.6L18.9998 13.8L19.4998 16.7C19.4998 16.9 19.2998 17.1 19.0998 17L16.4998 15.6L13.8998 17C13.6998 17.1 13.4998 16.9 13.4998 16.7L13.9998 13.8L11.8998 11.7C11.6998 11.6 11.7998 11.3 11.9998 11.3L14.9998 10.9L16.2998 8.19999C16.3998 7.99999 16.5998 7.99999 16.6998 8.09999Z" fill="#FF8C00"/>
+<path d="M8.69977 11.4L9.69977 13.4L11.8998 13.7C12.0998 13.7 12.0998 13.9 11.9998 14L10.3998 15.5L10.7998 17.7C10.7998 17.9 10.6998 18 10.4998 17.9L8.49977 16.9L6.49977 17.9C6.39977 18 6.19977 17.9 6.19977 17.7L6.59977 15.5L4.99977 14C4.89977 13.9 4.89977 13.7 5.09977 13.7L7.29977 13.4L8.29977 11.4C8.39977 11.3 8.59977 11.3 8.69977 11.4Z" fill="#FF8C00"/>
+<path d="M27.8998 14C27.8998 14.1 27.8998 14.1 27.8998 14C26.0998 14.6 24.6998 15.8 23.7998 17.3L22.4998 18C22.3998 18.1 22.1998 18 22.1998 17.8L22.5998 15.6L21.0998 14C20.9998 13.9 21.0998 13.7 21.1998 13.7L23.3998 13.4L24.3998 11.4C24.4998 11.3 24.6998 11.3 24.6998 11.4L25.6998 13.4L27.8998 13.7C27.9998 13.8 27.9998 13.9 27.8998 14Z" fill="#FF8C00"/>
+</g>
+<defs>
+<clipPath id="clip0_2247_88">
+<rect width="39" height="39" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/assets/images/menu/dhr/MHRP39N0028.svg

@@ -0,0 +1,18 @@
+<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2247_110)">
+<path d="M27 2H22V4H27C28.1 4 29 4.9 29 6V18C29.7 18 30.3 18.1 31 18.2V6C31 3.8 29.2 2 27 2ZM4 37C2.9 37 2 36.1 2 35V6C2 4.9 2.9 4 4 4H9V2H4C1.8 2 0 3.8 0 6V35C0 37.2 1.8 39 4 39H24.4C23.3 38.5 22.3 37.8 21.4 37H4Z" fill="#2680EB"/>
+<path d="M22 0H9C7.9 0 7 0.9 7 2V4C7 5.1 7.9 6 9 6H22C23.1 6 24 5.1 24 4V2C24 0.9 23.1 0 22 0ZM9 4V2H22V4H9Z" fill="#2680EB"/>
+<path d="M18.4 26.2C18.2 26.9 18.1 27.5999 18 28.3999H6.2C5.6 28.3999 5 27.8999 5 27.2999C5 26.6999 5.5 26.2 6.2 26.2L18.4 26.2Z" fill="#2680EB"/>
+<path d="M20.6 21.9C20.1 22.5 19.6 23.2 19.3 23.9H6.2C5.6 23.9 5 23.3999 5 22.7999C5 22.1999 5.5 21.7 6.2 21.7H19.9C20.0625 21.7 20.4 21.7 20.6 21.9Z" fill="#2680EB"/>
+<path d="M6.1 30.7999C5.5 30.7999 5 31.1999 5 31.7999C5 32.3999 5.5 33 6.1 33H15.2C15.8 33 16.3 32.5 16.3 31.9C16.3 31.3 15.8 30.7999 15.2 30.7999H6.1Z" fill="#2680EB"/>
+<path d="M34.4 20.6C32.8 19.6 31 19 29 19C28.5 19 28.1 19 27.7 19.1C26.9 19.2 26 19.4 25.3 19.7C24.9 19.9 24.4 20.1 24 20.3C22 21.4 20.5 23.2 19.7 25.3C19.2 26.5 19 27.7 19 29C19 34.5 23.5 39 29 39C34.5 39 39 34.5 39 29C39 25.5 37.1 22.3 34.4 20.6ZM35.2 25.8L29.3 33.8C29 34.3 28.4 34.6 27.8 34.6H27.7C27.2 34.6 26.6 34.4 26.3 34L22.8 30.2C22.3 29.6 22.3 28.7 22.9 28.1C23.2 27.8 23.5 27.7 23.9 27.7C24.3 27.7 24.7 27.9 25 28.2L27.5 30.9L27.6 31C27.7 31 27.7 31 27.7 30.9L32.7 24.1C33 23.7 33.4 23.5 33.9 23.5C34.2 23.5 34.5 23.6 34.8 23.8C35.6 24.2 35.7 25.1 35.2 25.8Z" fill="#1CA261"/>
+<path d="M15.6998 8.09999L16.9998 10.8L19.9998 11.2C20.1998 11.2 20.2998 11.5 20.0998 11.6L17.9998 13.8L18.4998 16.7C18.4998 16.9 18.2998 17.1 18.0998 17L15.4998 15.6L12.8998 17C12.6998 17.1 12.4998 16.9 12.4998 16.7L12.9998 13.8L10.8998 11.7C10.6998 11.6 10.7998 11.3 10.9998 11.3L13.9998 10.9L15.2998 8.19999C15.3998 7.99999 15.5998 7.99999 15.6998 8.09999Z" fill="#FF8C00"/>
+<path d="M23.6998 11.4L24.6998 13.4L26.8998 13.7C27.0998 13.7 27.0998 13.9 26.9998 14L25.3998 15.5L25.7998 17.7C25.7998 17.9 25.6998 18 25.4998 17.9L23.4998 16.9L21.4998 17.9C21.3998 18 21.1998 17.9 21.1998 17.7L21.5998 15.5L19.9998 14C19.8998 13.9 19.8998 13.7 20.0998 13.7L22.2998 13.4L23.2998 11.4C23.3998 11.3 23.5998 11.3 23.6998 11.4Z" fill="#FF8C00"/>
+<path d="M7.69977 11.4L8.69977 13.4L10.8998 13.7C11.0998 13.7 11.0998 13.9 10.9998 14L9.39977 15.5L9.79977 17.7C9.79977 17.9 9.69977 18 9.49977 17.9L7.49977 16.9L5.49977 17.9C5.39977 18 5.19977 17.9 5.19977 17.7L5.59977 15.5L3.99977 14C3.89977 13.9 3.89977 13.7 4.09977 13.7L6.29977 13.4L7.29977 11.4C7.39977 11.3 7.59977 11.3 7.69977 11.4Z" fill="#FF8C00"/>
+</g>
+<defs>
+<clipPath id="clip0_2247_110">
+<rect width="39" height="39" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/components/form-control/calendar/function.js

@@ -652,7 +652,7 @@ const renderNavigator = (className, refs, dbLeftFn, leftFn, rightFn, dbRightFn,
     color: 'primary',
     type: 'h3',
     ref: refs.content,
-    format: ['lowercase']
+    format: ['sentence']
   }))), jsx("div", {
     className: className.navigator.around
   }, jsx(ButtonIcon, {

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

@@ -226,7 +226,7 @@ const Calendar = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference)
    * START EFFECT
    */
   useEffect(() => {
-    if (defaultValue && defaultValue !== '' && isValidDate(defaultValue)) {
+    if (defaultValue && defaultValue !== '' && isValidDate(defaultValue) && !value) {
       if (isBeforeLimit(min, defaultValue)) {
         onUpdate(min);
       } else if (isAfterLimit(max, defaultValue)) {

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

@@ -7,7 +7,7 @@ import { getGlobal } from "../../../global";
 import PropTypes from 'prop-types';
 import { Fragment, forwardRef, memo, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
-import { animation, bgColor, border, borderBottom, borderBottomColor, borderColor, borderNone, borderRadius, bottom, boxBorder, breakWord, cursorDefault, cursorNotAllowed, cursorPointer, displayBlock, displayFlex, fill, flexRow, flexWrap, inset, insetX, invisible, italic, itemsCenter, justifyCenter, justifyStart, outlineNone, overflowXScroll, overflowHidden, parseHeight, parseMaxHeight, parseMaxWidth, parseMinHeight, parseWidth, parseWidthHeight, pointerEventsNone, positionAbsolute, positionRelative, textColor, top, userSelectNone, z } from "../../../styles/general";
+import { animation, bgColor, border, borderBottom, borderBottomColor, borderColor, borderNone, borderRadius, bottom, boxBorder, breakWord, cursorDefault, cursorNotAllowed, cursorPointer, displayBlock, displayFlex, fill, flexRow, flexWrap, inset, insetX, invisible, italic, itemsCenter, justifyCenter, justifyStart, outlineNone, overflowYScroll, overflowHidden, parseHeight, parseMaxHeight, parseMaxWidth, parseMinHeight, parseWidth, parseWidthHeight, pointerEventsNone, positionAbsolute, positionRelative, textColor, top, userSelectNone, z } from "../../../styles/general";
 import { useTheme } from "../../../theme";
 import useThemeProps from "../../../theme/utils/useThemeProps";
 import { classNames, getProp, isMobile, randomString } from "../../../utils";
@@ -77,6 +77,7 @@ const Dropdown = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference)
     inputStyle,
     itemMode,
     isInGrid,
+    isPaging,
     label,
     labelProps,
     limit,
@@ -135,6 +136,7 @@ const Dropdown = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference)
     skip: skip || 0,
     limit: limit || 50
   });
+  const txtSearchRef = useRef(false);
   const [unique] = useState(randomString(6, {
     allowNumber: false,
     allowSymbol: false
@@ -170,7 +172,7 @@ const Dropdown = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference)
   const _IconCSS = IconCSS(viewType, theme);
   const _DropdownFormCSS = viewType === 'outlined' ? DropdownFormOutlinedCSS(disabled, readOnly, placeholder, theme) : DropdownFormCSS(viewType, multiple, disabled, readOnly, placeholder, _DropdownInputCSS.name, theme);
   const _DropdownListCSS = DropdownListCSS(theme);
-  const _DropdownBoxCSS = DropdownBoxCSS(loadingState, theme);
+  const _DropdownBoxCSS = DropdownBoxCSS(loadingState, theme, itemMode, isPaging);
   const _DropdownItemCSS = DropdownItemCSS(multiple, selectBox, theme);
   const _DropdownRootCSS = DropdownRootCSS(_DropdownFormCSS.name, _DropdownInputCSS.name, theme);
   const _CheckBoxCSS = CheckBoxCSS(theme);
@@ -674,6 +676,7 @@ const Dropdown = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference)
     var _e$target$value;
     if (!dropdownRef.current) return; // Kiểm tra nếu dropdown đóng trước searchDelayTime thì không chạy
     setTxtSearch((_e$target$value = e.target.value) !== null && _e$target$value !== void 0 ? _e$target$value : '');
+    txtSearchRef.current = !!e.target.value;
     if (onInput) {
       onInput(e);
     }
@@ -938,6 +941,13 @@ const Dropdown = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference)
     return () => {
       allValue[unique] = null;
       closeDropdown(null, 'cleanup');
+      if (onInput && txtSearchRef.current) {
+        onInput({
+          target: {
+            value: ''
+          }
+        });
+      }
     };
   }, []);
   useEffect(() => {
@@ -1554,8 +1564,8 @@ const DropdownListCSS = ({
 `;
 const DropdownBoxCSS = (loading, {
   colors
-}) => css`
-    ${loading ? overflowHidden : overflowXScroll};
+}, itemMode, isPaging) => css`
+    ${loading || itemMode === 'treeview' || isPaging ? overflowHidden : overflowYScroll};
     ${parseMaxHeight(280)};
     &::-webkit-scrollbar {
         ${borderRadius(4)};

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

@@ -1,13 +1,15 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
-import { ButtonIcon, InputBase, Label, Popover, PopoverBody } from "../..";
+import { ButtonIcon, InputBase, Label, Popover, PopoverBody, HelperText } from "../..";
 import PropTypes from 'prop-types';
-import { Fragment, forwardRef, memo, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from 'react';
+import { Fragment, forwardRef, memo, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState, useMemo } from 'react';
 import { animation, borderColor, displayBlock, overflowHidden, parseHeight, parseMinWidth, positionRelative, scaleX } from "../../../styles/general";
 import { useTheme } from "../../../theme";
 import useThemeProps from "../../../theme/utils/useThemeProps";
 import { classNames, getProp } from "../../../utils";
+const regexBetween = /[^{}]+(?=})/g;
+const regexInclude = /{|}/g;
 const DropdownBox = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
   if (!reference) reference = useRef(null);
   const theme = useTheme();
@@ -22,10 +24,14 @@ const DropdownBox = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, referenc
   });
   const {
     action = {},
+    allowInput,
     bgColor: bgColorProp,
     children,
     className,
     delayOnInput,
+    disabled,
+    displayExpr: displayExprProp,
+    error,
     endIcon,
     inputProps,
     inputRef,
@@ -39,10 +45,19 @@ const DropdownBox = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, referenc
     placeholder,
     startIcon,
     style,
-    value,
-    viewType
+    value: valueProps,
+    valueExpr,
+    viewType,
+    helperTextProps
   } = props;
+  let displayExpr = displayExprProp;
   const bgColor = typeof bgColorProp === 'string' ? getProp(colors, bgColorProp, bgColorProp) : bgColorProp;
+  const ErrorView = useMemo(() => {
+    return error ? jsx(HelperText, {
+      ...helperTextProps,
+      disabled: disabled
+    }, error) : null;
+  }, [disabled, error, helperTextProps]);
   const ref = useRef(null);
   const dropdownBoxRef = useRef(null);
   const timer = useRef(null);
@@ -85,6 +100,28 @@ const DropdownBox = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, referenc
       onClosed === null || onClosed === void 0 ? void 0 : onClosed();
     }
   };
+
+  /**
+   * 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 = '';
+    if (data || data === 0) {
+      displayExpr = displayExpr || valueExpr;
+      let mask = data === null || data === void 0 ? void 0 : data[displayExpr];
+      // convert {id} - {name} to {<data[id]>} - {<data[name]>}
+      if (!mask && regexBetween.test(displayExpr)) {
+        var _displayExpr;
+        mask = (_displayExpr = displayExpr) === null || _displayExpr === void 0 ? void 0 : _displayExpr.replace(regexBetween, _ => (data === null || data === void 0 ? void 0 : data[_]) || '');
+      } else if (!mask) {
+        mask = typeof data !== 'object' ? data : '';
+      }
+      text = mask.toString().replace(regexInclude, '');
+    }
+    return text;
+  };
   useLayoutEffect(() => {
     if (ref.current) {
       const {
@@ -130,15 +167,17 @@ const DropdownBox = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, referenc
       onClick: openOnClickAt === 'icon' ? onTriggerDropdown : null
     }) : null;
   };
+  const value = displayValue(valueProps);
   return jsx(Fragment, null, jsx("div", {
     ref: ref,
     css: _DropdownBoxRootCSS,
-    className: classNames('DGN-UI-Dropdown-Box', className),
+    className: classNames('DGN-UI-Dropdown-Box', className, error && 'error'),
     style: style
   }, label ? jsx(Label, {
     ...labelProps
   }, label) : null, jsx(InputBase, {
     ...inputProps,
+    readOnly: !allowInput,
     style: inputStyle,
     viewType: viewType,
     inputRef: inputRef,
@@ -157,7 +196,7 @@ const DropdownBox = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, referenc
     anchor: ref.current,
     width: popoverWidth,
     onClose: closeDropdownBox
-  }, jsx(PopoverBody, null, children)));
+  }, jsx(PopoverBody, null, children)), ErrorView);
 }));
 const DropdownBoxRootCSS = (bgColorProp, {
   colors
@@ -166,6 +205,17 @@ const DropdownBoxRootCSS = (bgColorProp, {
     ${positionRelative};
     ${parseMinWidth(150)};
     ${parseHeight('max-content')};
+    &.error {
+        .DGN-UI-InputBase {
+            ${borderColor(getProp(colors, 'semantic/danger'))};
+            &::before {
+                ${borderColor(getProp(colors, 'semantic/danger'))};
+            }
+            &::after {
+                ${borderColor(getProp(colors, 'semantic/danger'))};
+            }
+        }
+    }
     .DGN-UI-InputBase {
         background: ${bgColorProp ? bgColorProp === true ? getProp(colors, 'fill/disabled') : bgColorProp : 'inherit'} !important;
         ${openState && css`
@@ -183,20 +233,6 @@ const DropdownBoxCSS = ({
     margin-top: ${spacing([1])};
     ${overflowHidden};
 `;
-
-// DropdownBox.defaultProps = {
-//     className: '',
-//     label: '',
-//     placeholder: '',
-//     startIcon: 'Search',
-//     endIcon: 'ArrowDown',
-//     openOnClickAt: 'icon',
-//     viewType: 'underlined',
-//     inputProps: {},
-//     delayOnInput: 700,
-//     zIndex: zIndexCORE(1),
-// };
-
 DropdownBox.propTypes = {
   /** class for dropdown */
   className: PropTypes.string,
@@ -233,6 +269,12 @@ DropdownBox.propTypes = {
   /** the function will run after open */
   onOpened: PropTypes.func,
   /** the function will run after close */
-  onClosed: PropTypes.func
+  onClosed: PropTypes.func,
+  /** Error message displayed below the input. */
+  error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+  /** If `true`, the component is disabled. */
+  disabled: PropTypes.bool,
+  /** If `true`, the input is enable. */
+  allowInput: PropTypes.bool
 };
 export default DropdownBox;

package/components/form-control/number-input/index2.js

@@ -49,7 +49,7 @@ const NumberInput = /*#__PURE__*/forwardRef((inProps, reference) => {
     labelProps,
     max: maxProp,
     maxDigit,
-    min,
+    min: minProp,
     nonStyle,
     onBlur,
     onChange,
@@ -69,9 +69,12 @@ const NumberInput = /*#__PURE__*/forwardRef((inProps, reference) => {
     viewType
   } = props;
   let max = maxProp;
+  let min = minProp;
   let thousandSymbol = thousandSeparator;
   let decimalSymbol = decimalSymbolProp;
   let valueProps = valueProp;
+  if (!min && min !== 0) min = -Infinity;
+  if (!max && max !== 0) max = Infinity;
   const pos = useRef(null);
   const ref = useRef(null);
   const globalRef = useRef({});

package/components/paging/page-info.js

@@ -398,6 +398,7 @@ const PagingInfo = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(({
       height: 24,
       color: 'line/category'
     }) : getGlobal('lineNumber'), jsx(Dropdown, {
+      isPaging: true,
       allowSearch: false,
       viewType: 'underlined',
       dataSource: listPerPageData,

package/components/popover/index.js

@@ -202,7 +202,7 @@ const Popover = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) =
     }
   };
   const updatePositionPopover = (el = null, cb) => {
-    var _window, _window2, _anchor6, _anchorRect, _anchorRect2, _anchor7, _anchorRect3, _anchorRect4, _anchorRect5, _anchorRect6, _anchorRect7, _anchorRect8, _anchorRect9, _anchorRect10, _anchorRect11, _anchorRect12, _newDirectionObject, _newDirectionObject$t, _transformOrigin, _newDirectionObject2, _newDirectionObject2$, _transformOrigin2;
+    var _window, _window2, _anchor6, _anchorRect, _anchorRect2, _anchor7, _anchorRect3, _anchorRect4, _anchorRect5, _anchorRect6, _anchorRect7, _anchorRect8, _anchorRect9, _anchorRect0, _anchorRect1, _anchorRect10, _newDirectionObject, _newDirectionObject$t, _transformOrigin, _newDirectionObject2, _newDirectionObject2$, _transformOrigin2;
     if (el instanceof Element) setElement(el);
     if (!ref.current) {
       window.removeEventListener('resize', updatePositionPopover);
@@ -336,36 +336,36 @@ const Popover = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) =
 
     // Valid mean popover not at top-left, top-right, bottom-left, bottom-right
     const validVerticalArrow = left >= ((_anchorRect5 = anchorRect) === null || _anchorRect5 === void 0 ? void 0 : _anchorRect5.left) + ((_anchorRect6 = anchorRect) === null || _anchorRect6 === void 0 ? void 0 : _anchorRect6.width) / 2 - popoverWidth && left <= ((_anchorRect7 = anchorRect) === null || _anchorRect7 === void 0 ? void 0 : _anchorRect7.right) - ((_anchorRect8 = anchorRect) === null || _anchorRect8 === void 0 ? void 0 : _anchorRect8.width) / 2 + popoverWidth;
-    const validHorizontalArrow = top >= ((_anchorRect9 = anchorRect) === null || _anchorRect9 === void 0 ? void 0 : _anchorRect9.top) + ((_anchorRect10 = anchorRect) === null || _anchorRect10 === void 0 ? void 0 : _anchorRect10.height) / 2 - popoverHeight && top <= ((_anchorRect11 = anchorRect) === null || _anchorRect11 === void 0 ? void 0 : _anchorRect11.bottom) - ((_anchorRect12 = anchorRect) === null || _anchorRect12 === void 0 ? void 0 : _anchorRect12.height) / 2;
+    const validHorizontalArrow = top >= ((_anchorRect9 = anchorRect) === null || _anchorRect9 === void 0 ? void 0 : _anchorRect9.top) + ((_anchorRect0 = anchorRect) === null || _anchorRect0 === void 0 ? void 0 : _anchorRect0.height) / 2 - popoverHeight && top <= ((_anchorRect1 = anchorRect) === null || _anchorRect1 === void 0 ? void 0 : _anchorRect1.bottom) - ((_anchorRect10 = anchorRect) === null || _anchorRect10 === void 0 ? void 0 : _anchorRect10.height) / 2;
 
     // Get arrow's position
     if (arrow && translate) {
       switch (aPosition) {
         case 'top':
           if (validVerticalArrow) {
-            var _anchorRect13, _anchorRect14;
-            arrowPosition.left = ((_anchorRect13 = anchorRect) === null || _anchorRect13 === void 0 ? void 0 : _anchorRect13.width) / 2 + ((_anchorRect14 = anchorRect) === null || _anchorRect14 === void 0 ? void 0 : _anchorRect14.left) - arrowSize + 'px';
+            var _anchorRect11, _anchorRect12;
+            arrowPosition.left = ((_anchorRect11 = anchorRect) === null || _anchorRect11 === void 0 ? void 0 : _anchorRect11.width) / 2 + ((_anchorRect12 = anchorRect) === null || _anchorRect12 === void 0 ? void 0 : _anchorRect12.left) - arrowSize + 'px';
             arrowPosition.top = Math.round(top) - arrowSize + 'px';
           }
           break;
         case 'bottom':
           if (validVerticalArrow) {
-            var _anchorRect15, _anchorRect16;
-            arrowPosition.left = ((_anchorRect15 = anchorRect) === null || _anchorRect15 === void 0 ? void 0 : _anchorRect15.width) / 2 + ((_anchorRect16 = anchorRect) === null || _anchorRect16 === void 0 ? void 0 : _anchorRect16.left) - arrowSize + 'px';
+            var _anchorRect13, _anchorRect14;
+            arrowPosition.left = ((_anchorRect13 = anchorRect) === null || _anchorRect13 === void 0 ? void 0 : _anchorRect13.width) / 2 + ((_anchorRect14 = anchorRect) === null || _anchorRect14 === void 0 ? void 0 : _anchorRect14.left) - arrowSize + 'px';
             arrowPosition.top = Math.round(top) + popoverHeight + 'px';
           }
           break;
         case 'left':
           if (validHorizontalArrow) {
-            var _anchorRect17, _anchorRect18;
-            arrowPosition.top = ((_anchorRect17 = anchorRect) === null || _anchorRect17 === void 0 ? void 0 : _anchorRect17.height) / 2 + ((_anchorRect18 = anchorRect) === null || _anchorRect18 === void 0 ? void 0 : _anchorRect18.top) - arrowSize / 2 + 'px';
+            var _anchorRect15, _anchorRect16;
+            arrowPosition.top = ((_anchorRect15 = anchorRect) === null || _anchorRect15 === void 0 ? void 0 : _anchorRect15.height) / 2 + ((_anchorRect16 = anchorRect) === null || _anchorRect16 === void 0 ? void 0 : _anchorRect16.top) - arrowSize / 2 + 'px';
             arrowPosition.left = Math.round(left) - 1.5 * arrowSize + 'px';
           }
           break;
         case 'right':
           if (validHorizontalArrow) {
-            var _anchorRect19, _anchorRect20;
-            arrowPosition.top = ((_anchorRect19 = anchorRect) === null || _anchorRect19 === void 0 ? void 0 : _anchorRect19.height) / 2 + ((_anchorRect20 = anchorRect) === null || _anchorRect20 === void 0 ? void 0 : _anchorRect20.top) - arrowSize / 2 + 'px';
+            var _anchorRect17, _anchorRect18;
+            arrowPosition.top = ((_anchorRect17 = anchorRect) === null || _anchorRect17 === void 0 ? void 0 : _anchorRect17.height) / 2 + ((_anchorRect18 = anchorRect) === null || _anchorRect18 === void 0 ? void 0 : _anchorRect18.top) - arrowSize / 2 + 'px';
             arrowPosition.left = Math.round(left) + popoverWidth - arrowSize / 2 + 'px';
           }
           break;
@@ -495,15 +495,15 @@ const Popover = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) =
     return currentRef;
   });
   const renderAnchor = () => {
-    var _anchor10, _anchor11, _anchor11$props;
-    if (!((_anchor10 = anchor) !== null && _anchor10 !== void 0 && _anchor10.type)) return null;
+    var _anchor0, _anchor1, _anchor1$props;
+    if (!((_anchor0 = anchor) !== null && _anchor0 !== void 0 && _anchor0.type)) return null;
     const AnchorTag = /*#__PURE__*/React.cloneElement(anchor, {
       ref: ref => {
         anchor = ref;
       },
       style: {
         cursor: 'pointer',
-        ...(((_anchor11 = anchor) === null || _anchor11 === void 0 ? void 0 : (_anchor11$props = _anchor11.props) === null || _anchor11$props === void 0 ? void 0 : _anchor11$props.style) || {})
+        ...(((_anchor1 = anchor) === null || _anchor1 === void 0 ? void 0 : (_anchor1$props = _anchor1.props) === null || _anchor1$props === void 0 ? void 0 : _anchor1$props.style) || {})
       }
     });
     return AnchorTag;

package/components/tree-view/index.js

@@ -6,7 +6,7 @@ import { getGlobal } from "../../global";
 import PropTypes from 'prop-types';
 import { Fragment, forwardRef, memo, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { render } from 'react-dom';
-import { bgColor, borderRadius, boxBorder, cursorNotAllowed, cursorPointer, displayBlock, displayFlex, displayInlineBlock, flexRow, itemsCenter, parseHeight, parseMinHeight, parseWidth, positionRelative, textColor, textLeft } from "../../styles/general";
+import { bgColor, border, borderRadius, boxBorder, cursorNotAllowed, cursorPointer, displayBlock, displayFlex, displayInlineBlock, flexRow, itemsCenter, parseHeight, parseMaxHeight, parseMinHeight, parseWidth, positionRelative, textColor, textLeft, overflowYScroll } from "../../styles/general";
 import { useTheme } from "../../theme";
 import useThemeProps from "../../theme/utils/useThemeProps";
 import { classNames, getProp, mapParent, randomString, removeUnicode } from "../../utils";
@@ -833,6 +833,20 @@ const TreeViewRootCSS = ({
     .TreeView-Content {
         ${displayBlock};
         ${positionRelative};
+        ${parseMaxHeight(240)};
+        ${overflowYScroll};
+        &::-webkit-scrollbar {
+            ${borderRadius(4)};
+            ${parseWidth(24)};
+        }
+        &::-webkit-scrollbar-thumb {
+            ${parseMinHeight(40)};
+            ${borderRadius(24)};
+            ${border(8, 'transparent')};
+            ${bgColor(getProp(colors, 'fill/scrollbar_rest'))};
+            mix-blend-mode: normal;
+            background-clip: content-box;
+        }
         .DGN-UI-Accordion {
             margin-bottom: 0px;
         }

package/package.json

@@ -1,44 +1,78 @@
-{
-  "name": "diginet-core-ui",
-  "version": "1.4.49",
-  "description": "The DigiNet core ui",
-  "homepage": "https://diginet.com.vn",
-  "main": "index.js",
-  "scripts": {
-    "start-js": "react-scripts start --max_old_space_size=4096",
-    "start": "npx npm-run-all -p start-js",
-    "build": "GENERATE_SOURCEMAP=false && react-scripts build --env=production --max_old_space_size=8192",
-    "eject": "react-scripts eject",
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "dependencies": {
-    "@emotion/core": "^10.0.35",
-    "prop-types": "^15.7.2",
-    "@emotion/css": "^11.11.0",
-    "@emotion/react": "^11.10.6"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://diginetvn@bitbucket.org/diginetvn/diginet-core-ui.git"
-  },
-  "keywords": [
-    "core ui",
-    "diginet"
-  ],
-  "author": "rocachien",
-  "contributors": [
-    {
-      "name": "Chien Do",
-      "email": "rocachien@gmail.com"
-    },
-    {
-      "name": "Nhat Tran",
-      "email": "tranminhnhat1005@gmail.com"
-    },
-    {
-      "name": "Thuan Nguyen",
-      "email": "nt.thuan.hutech@gmail.com"
-    }
-  ],
-  "license": "MIT"
-}
+{
+  "name": "diginet-core-ui",
+  "version": "1.4.50-beta.2",
+  "description": "",
+  "main": "index.js",
+  "license": "UNLICENSED",
+  "scripts": {
+    "start": "npm-run-all --parallel start-sb eslint-test",
+    "start-sb": "start-storybook -p 9050",
+    "build-storybook": "build-storybook -c .storybook -s src",
+    "build": "run-script-os",
+    "build:windows": "rimraf dist && mkdirp dist/components && npm run compile && sass --style=compressed src/scss:dist/css && xcopy src\\\\assets dist\\\\assets\\ /e /y",
+    "build:darwin:linux:default": "rm -rf dist && npm run compile && sass --style=compressed src/scss:dist/css && cp -rf src/assets dist/assets",
+    "compile": "babel src --out-dir dist --ignore **/*.stories.js",
+    "pack": "npm run build && cp *.md dist/ && npm run version:bump --silent && npm run version:add --silent && cd dist && npm pack",
+    "production-keep-version": "npm run build && cp *.md dist/ && cp package.json dist/ && cd dist && npm publish",
+    "beta": "npm run build && cp *.md dist/ && cp package.json dist/ && cd dist && npm publish --tag beta",
+    "production": "npm run build && cp *.md dist/ && npm run version:bump --silent && npm run version:add --silent && cd dist && npm publish",
+    "version:add": "run-script-os",
+    "version:add:windows": "cat package.json.tmp | sed \"s/0.0.0/%npm_package_version%/g\" > dist/package.json",
+    "version:add:darwin:linux:default": "VERSION=$(npm run version:extract --silent) && cat package.json.tmp | sed \"s/0.0.0/${VERSION}/g\" > dist/package.json",
+    "version:bump": "npm version patch --no-git-tag-version --silent",
+    "version:extract": "cat package.json | grep version | head -1 | awk -F: '{ print $2 }' | sed 's/[\",]//g' | tr -d '[[:space:]]'",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "lint": "eslint --fix --config .eslintrc.js \"**/*.js\"",
+    "eslint-test": "onchange \"src/**/*.{js,jsx,json}\" -- eslint . --fix",
+    "freshtall": "npm cache clean --force && rm -rf node_modules && rm -f package-lock.json && npm install",
+    "test-storybook": "test-storybook --url http://localhost:9050",
+    "preinstall": "echo {} > package-lock.json"
+  },
+  "dependencies": {
+    "@emotion/core": "^10.0.35",
+    "@emotion/css": "^11.11.0",
+    "@emotion/react": "^11.10.6",
+    "babel-plugin-module-resolver": "^4.1.0",
+    "date-fns": "^2.30.0",
+    "prop-types": "^15.7.2"
+  },
+  "lint-staged": {
+    "*/**/*.{js,jsx,json}": [
+      "prettier --write",
+      "git add"
+    ]
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.14.3",
+    "@babel/plugin-proposal-class-properties": "^7.13.0",
+    "@babel/plugin-proposal-logical-assignment-operators": "^7.16.0",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.0",
+    "@babel/plugin-proposal-optional-chaining": "^7.14.2",
+    "@babel/plugin-proposal-private-methods": "^7.18.6",
+    "@babel/plugin-proposal-private-property-in-object": "^7.18.6",
+    "@babel/preset-react": "^7.13.13",
+    "@storybook/addon-actions": "6.2.9",
+    "@storybook/addon-essentials": "6.2.9",
+    "@storybook/addon-links": "6.2.9",
+    "@storybook/addon-postcss": "^2.0.0",
+    "@storybook/react": "6.2.9",
+    "@storybook/test-runner": "^0.7.1",
+    "autoprefixer": "^10.3.1",
+    "babel-loader": "^8.2.2",
+    "eslint": "^8.4.1",
+    "eslint-plugin-react": "^7.27.1",
+    "eslint-plugin-regex": "^1.10.0",
+    "husky": "^7.0.4",
+    "jest": "^27.5.1",
+    "lint-staged": "^12.1.2",
+    "mkdirp": "^1.0.4",
+    "npm-run-all": "^4.1.5",
+    "onchange": "^7.1.0",
+    "postcss-flexbugs-fixes": "^5.0.2",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "rimraf": "^3.0.2",
+    "run-script-os": "^1.1.6",
+    "sass": "1.58.3"
+  }
+}

package/readme.md

@@ -42,6 +42,11 @@ npm test
 
 ## Changelog
 
+## 1.4.50
+- \[Added\]: Icon – Add IconMenu MHRP39N0025, MHRP39N0027, MHRP39N0028 
+- \[Added\]: Attachment – Add HEIF support to getFileType in Attachment
+- \[Fixed\]: Dropdown – Dropdown Treeview keep the search input fixed while scrolling through the list
+
 ## 1.4.49
 - \[Added\]: Icon – Add Icon Fire 
 - \[Added\]: Dropdown – Add allowInput to the multiple-select dropdown.

package/utils/getFileType.js

@@ -4,7 +4,7 @@ const getFileType = (FileExt, defaultValue = 'another', onlyExt = true) => {
     FileExt = FileExt.slice(FileExt.lastIndexOf('.') + 1);
   }
   switch (true) {
-    case /jpg|png|jpeg|gif|bmp|tiff|svg|image/i.test(FileExt):
+    case /jpg|png|jpeg|gif|bmp|tiff|svg|image|heif/i.test(FileExt):
       return 'image';
     case /doc|word/i.test(FileExt):
       return 'word';