diginet-core-ui 1.3.95 → 1.3.96-beta.1

package/components/alert/notify.js

@@ -104,9 +104,9 @@ Notify.defaultProps = {
 Notify.propTypes = {
   /** Class for component. */
   className: PropTypes.string,
-  /**
-   * used to set position of Alert (is a string or an object)
-   * string is center (obligatory) as {vertical: 'center', horizontal: 'center'}
+  /**
+   * used to set position of Alert (is a string or an object)
+   * string is center (obligatory) as {vertical: 'center', horizontal: 'center'}
    */
   position: PropTypes.oneOfType([PropTypes.oneOf(['center']), PropTypes.shape({
     horizontal: PropTypes.oneOf(['center', 'left', 'right']),
@@ -116,13 +116,13 @@ Notify.propTypes = {
   style: PropTypes.object,
   /** Any [props](https://core.diginet.com.vn/ui/?path=/docs/alert--basic) of Alert */
   props: PropTypes.any
-  /**
-   * ref methods (ref.current.instance.*method*)
-   *
-   * * show(message, option): Show notify
-   *  * @param {message} - number
-   *  * @param {options} - object
-   *      * {[Props](https://core.diginet.com.vn/ui/?path=/docs/alert--basic) applied to the `Alert`.}
+  /**
+   * ref methods (ref.current.instance.*method*)
+   *
+   * * show(message, option): Show notify
+   *  * @param {message} - number
+   *  * @param {options} - object
+   *      * {[Props](https://core.diginet.com.vn/ui/?path=/docs/alert--basic) applied to the `Alert`.}
    */
 };
 

package/components/badge/index.js

@@ -201,28 +201,28 @@ Badge.propTypes = {
   name: PropTypes.string,
   /** Controls whether the badge is hidden when `content` is zero. */
   showZero: PropTypes.bool,
-  /** Size of the components.
-   *
-   * * medium (dot 8px, typography p3)
-   * * large (button 10px, typography p2)
-   * * giant (button 12px, typography p1)
+  /** Size of the components.
+   *
+   * * medium (dot 8px, typography p3)
+   * * large (button 10px, typography p2)
+   * * giant (button 12px, typography p1)
    * */
   size: PropTypes.oneOf(['medium', 'large', 'giant']),
   /** Style inline of component. */
   style: PropTypes.object
-  /**
-   * ref methods (ref.current.instance.*method*)
-   *
-   * * option(): Gets all UI component properties
-   *  * Returns value - object
-   * * option(optionName): Gets the value of a single property
-   *  * @param {optionName} - string
-   *  * Returns value - any
-   * * option(optionName, optionValue): Updates the value of a single property
-   *  * @param {optionName} - string
-   *  * @param {optionValue} - any
-   * * option(options): Updates the values of several properties
-   *  * @param {options} - object
+  /**
+   * ref methods (ref.current.instance.*method*)
+   *
+   * * option(): Gets all UI component properties
+   *  * Returns value - object
+   * * option(optionName): Gets the value of a single property
+   *  * @param {optionName} - string
+   *  * Returns value - any
+   * * option(optionName, optionValue): Updates the value of a single property
+   *  * @param {optionName} - string
+   *  * @param {optionValue} - any
+   * * option(options): Updates the values of several properties
+   *  * @param {options} - object
    */
 };
 

package/components/button/icon.js

@@ -301,14 +301,14 @@ ButtonIcon.propTypes = {
   onClick: PropTypes.func,
   /** Name of [icon](https://core.diginet.com.vn/ui/?path=/story/icon-basic). */
   name: PropTypes.string,
-  /**
-   * 	The size of the component.
-   *
-   * * tiny (button 24px, icon 16px)
-   * * small (button 32px, icon 20px)
-   * * medium (button 40px, icon 24px)
-   * * large (button 48px, icon 32px)
-   * * giant (button 56px, icon 40px)
+  /**
+   * 	The size of the component.
+   *
+   * * tiny (button 24px, icon 16px)
+   * * small (button 32px, icon 20px)
+   * * medium (button 40px, icon 24px)
+   * * large (button 48px, icon 32px)
+   * * giant (button 56px, icon 40px)
    * */
   size: PropTypes.oneOf(['tiny', 'small', 'medium', 'large', 'giant', 'extraGiant']),
   /** Style inline of component. */
@@ -319,19 +319,19 @@ ButtonIcon.propTypes = {
   viewType: PropTypes.oneOf(['text', 'outlined', 'filled', 'ghost']),
   /** Width of the component. */
   width: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
-  /**
-   * ref methods (ref.current.instance.*method*)
-   *
-   * * option(): Gets all UI component properties
-   *  * Returns value - object
-   * * option(optionName): Gets the value of a single property
-   *  * @param {optionName} - string
-   *  * Returns value - any
-   * * option(optionName, optionValue): Updates the value of a single property
-   *  * @param {optionName} - string
-   *  * @param {optionValue} - any
-   * * option(options): Updates the values of several properties
-   *  * @param {options} - object
+  /**
+   * ref methods (ref.current.instance.*method*)
+   *
+   * * option(): Gets all UI component properties
+   *  * Returns value - object
+   * * option(optionName): Gets the value of a single property
+   *  * @param {optionName} - string
+   *  * Returns value - any
+   * * option(optionName, optionValue): Updates the value of a single property
+   *  * @param {optionName} - string
+   *  * @param {optionValue} - any
+   * * option(options): Updates the values of several properties
+   *  * @param {options} - object
    */
 };
 

package/components/button/index.js

@@ -405,19 +405,19 @@ Button.propTypes = {
   urlParams: PropTypes.object,
   /** The variant to use. */
   viewType: PropTypes.oneOf(['text', 'outlined', 'filled', 'link'])
-  /**
-   * ref methods (ref.current.instance.*method*)
-   *
-   * * option(): Gets all UI component properties
-   *  * Returns value - object
-   * * option(optionName): Gets the value of a single property
-   *  * @param {optionName} - string
-   *  * Returns value - any
-   * * option(optionName, optionValue): Updates the value of a single property
-   *  * @param {optionName} - string
-   *  * @param {optionValue} - any
-   * * option(options): Updates the values of several properties
-   *  * @param {options} - object
+  /**
+   * ref methods (ref.current.instance.*method*)
+   *
+   * * option(): Gets all UI component properties
+   *  * Returns value - object
+   * * option(optionName): Gets the value of a single property
+   *  * @param {optionName} - string
+   *  * Returns value - any
+   * * option(optionName, optionValue): Updates the value of a single property
+   *  * @param {optionName} - string
+   *  * @param {optionValue} - any
+   * * option(options): Updates the values of several properties
+   *  * @param {options} - object
    */
 };
 

package/components/button/more.js

@@ -1,20 +1,12 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
-import { ButtonIcon, Icon, Popover, Typography } from "./..";
+import { 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';
 import { bgColor, borderNone, cursorPointer, displayFlex, flexCol, flexRow, gap, itemsCenter, outlineNone, parseHeight, pd, pdl } from "../../styles/general";
-import { useTheme } from "../../theme";
 import { classNames } from "../../utils";
-import OptionWrapper from "../others/option-wrapper";
-const {
-  colors: {
-    system: {
-      dark: systemDark
-    }
-  }
-} = useTheme();
 const ButtonMore = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
   anchor,
@@ -28,6 +20,7 @@ const ButtonMore = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   popoverProp,
   style
 }, reference) => {
+  if (!reference) reference = useRef(null);
   const isOptionFull = optionType === 'full';
   const ref = useRef(null);
   const [openState, setOpenState] = useState(false);
@@ -51,7 +44,7 @@ const ButtonMore = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   });
   const renderOptions = () => {
     return options.map((item, idx) => {
-      if ( /*#__PURE__*/isValidElement(item)) return item;else {
+      if (item !== null && item !== void 0 && item.hidden) return;else if ( /*#__PURE__*/isValidElement(item)) return item;else {
         const icon = item === null || item === void 0 ? void 0 : item.icon;
         const label = item === null || item === void 0 ? void 0 : item.label;
         const action = () => {
@@ -69,19 +62,21 @@ const ButtonMore = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
           name: icon,
           width: 20,
           height: 20,
-          color: systemDark
+          color: 'system/dark'
         }) : null, jsx(Typography, {
           css: !icon && iconState && ExtraPaddingCSS,
           className: 'DGN-UI-ButtonMore-Label',
           ...labelProp
-        }, label)) : jsx(ButtonIcon, {
+        }, label)) : jsx(Tooltip, {
           key: idx,
           className: 'DGN-UI-ButtonMore-Option',
+          title: label
+        }, jsx(ButtonIcon, {
           circular: true,
           name: icon,
           onClick: action,
           viewType: 'text'
-        });
+        }));
       }
     });
   };
@@ -132,6 +127,7 @@ const ButtonMore = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }, [buttonProps, className, disabled, id, options, optionType, popoverProp, style, iconState, openState]);
 }));
 const PopoverCSS = isOptionFull => css`
+    ${displayFlex};
     ${isOptionFull ? flexCol : flexRow};
     ${pd(isOptionFull ? [1, 0] : [0, 2])}
 `;
@@ -145,14 +141,14 @@ const OptionFullCSS = css`
     ${parseHeight(28)};
     ${pd([0, 4])};
     ${gap([0, 1])};
-    ${bgColor('system.white')};
+    ${bgColor('system/white')};
     transition: all 0.5s ease;
     &:hover,
     &:focus {
-        ${bgColor('fill.hover')};
+        ${bgColor('fill/hover')};
     }
     &:active {
-        ${bgColor('fill.pressed')};
+        ${bgColor('fill/pressed')};
     }
 `;
 const ExtraPaddingCSS = css`
@@ -167,41 +163,27 @@ ButtonMore.defaultProps = {
   style: {}
 };
 ButtonMore.propTypes = {
-  /** [Props](https://core.diginet.com.vn/ui/?path=/docs/buttonicon) applied to the main `ButtonIcon`. */
+  /** [Props](https://core.diginet.com.vn/ui/?path=/docs/components-buttonicon) applied to the main `ButtonIcon`. */
   buttonProps: PropTypes.object,
   /** Class for component. */
   className: PropTypes.string,
   /** If `true`, the component is disabled. */
   disabled: PropTypes.bool,
-  /** [Props](https://core.diginet.com.vn/ui/?path=/docs/typography) applied to the `Typography` label. */
+  /** [Props](https://core.diginet.com.vn/ui/?path=/docs/components-typography) applied to the `Typography` label. */
   labelProp: PropTypes.object,
   /** Option(s) in popover. */
   option: PropTypes.arrayOf(PropTypes.shape({
     label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
     icon: PropTypes.string,
-    action: PropTypes.func
+    action: PropTypes.func,
+    hidden: PropTypes.bool
   })),
   /** The variant of option's type. */
   optionType: PropTypes.oneOf(['full', 'icon']),
-  /** [Props](https://core.diginet.com.vn/ui/?path=/docs/overplay-popover) applied to the main `Popover`. */
+  /** [Props](https://core.diginet.com.vn/ui/?path=/docs/components-popover) applied to the main `Popover`. */
   popoverProp: PropTypes.object,
   /** Style inline of component. */
   style: PropTypes.object
-  /**
-   * ref methods (ref.current.instance.*method*)
-   *
-   * * option(): Gets all UI component properties
-   *  * Returns value - object
-   * * option(optionName): Gets the value of a single property
-   *  * @param {optionName} - string
-   *  * Returns value - any
-   * * option(optionName, optionValue): Updates the value of a single property
-   *  * @param {optionName} - string
-   *  * @param {optionValue} - any
-   * * option(options): Updates the values of several properties
-   *  * @param {options} - object
-   */
 };
-
 export { ButtonMore };
 export default OptionWrapper(ButtonMore);

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

@@ -48,7 +48,7 @@ const icons = {
 };
 const oldAttached = [];
 const allNewAttached = new FormData();
-const attached = [];
+const attached = []; // attached = [...dataState, ...newDataState]
 const chosenItems = [];
 const getType = data => {
   if (data.type !== undefined) {
@@ -155,10 +155,10 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const [showModal, setShowModal] = useState(false);
   const [showPopup, setShowPopup] = useState(false);
   const [viewTypeState, setViewTypeState] = useState(viewType);
-  const [isEmpty, setIsEmpty] = useState(null);
   const [newDataState, setNewDataState] = useState([]);
   const [dataState, setDataState] = useState([]);
   const isEnable = !readOnly && !disabled;
+  const isEmpty = !((dataState === null || dataState === void 0 ? void 0 : dataState.length) + (newDataState === null || newDataState === void 0 ? void 0 : newDataState.length));
   const _AttachmentRootCSS = AttachmentRootCSS(isEmpty, isEnable);
 
   // Start handler
@@ -222,9 +222,11 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       attachedRef.current.appendChild(el);
     });
   };
-  const afterChangeFile = (length = 0) => {
-    setIsEmpty(!length);
-  };
+
+  // const afterChangeFile = (length = 0) => {
+  //     setIsEmpty(!length);
+  // };
+
   const onChangeFiles = async e => {
     var _e$target, _e$target$files;
     if (!isEnable) return;
@@ -253,10 +255,10 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
       const length = files.length;
       if (!lengthAttached && !length) {
-        afterChangeFile();
+        // afterChangeFile();
         return;
       }
-      afterChangeFile(lengthAttached + length);
+      // afterChangeFile(lengthAttached + length);
       if (multiple || inputProps && inputProps.multiple) {
         for (let i = 0; i < length; i++) {
           files[i].FileName = files[i].name;
@@ -281,10 +283,12 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         newAttached: files,
         allNewAttached: allNewAttached.getAll('files')
       });
-    } else if (!attached.length) {
-      afterChangeFile();
     }
+    // else if (!attached.length) {
+    //     afterChangeFile();
+    // }
   };
+
   const onProgressing = file => {
     return new Promise((resolve, reject) => {
       const reader = new FileReader();
@@ -357,28 +361,35 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
   };
   const onRemoveMultiple = () => {
+    const attachedItems = [...dataState, ...newDataState];
     const nodeList = attachedRef.current.querySelectorAll('.chosen');
     const recentRemovedAttached = [];
+    const tempDataState = [...dataState];
+    const tempNewDataState = [...newDataState];
     nodeList.forEach(itemEl => {
       const parent = itemEl.parentNode;
       const index = Array.from(attachedRef.current.children).indexOf(parent);
-      const deletedFile = attached.splice(index, 1)[0];
+      const deletedFile = attachedItems[index];
       removedAttachedRef.current.push(deletedFile);
       recentRemovedAttached.push(deletedFile);
-      if (Object.prototype.toString.call(deletedFile) === '[object File]' && newDataState !== null && newDataState !== void 0 && newDataState.length) {
-        removeFileOutInputFiles(allNewAttached.getAll('files').findIndex(attach => attach.FileName === deletedFile.FileName && attach.CreateDate === deletedFile.CreateDate));
+      if (Object.prototype.toString.call(deletedFile) === '[object File]' && tempNewDataState !== null && tempNewDataState !== void 0 && tempNewDataState.length) {
+        removeFileOutInputFiles(tempNewDataState.findIndex(attach => (attach === null || attach === void 0 ? void 0 : attach.FileName) === (deletedFile === null || deletedFile === void 0 ? void 0 : deletedFile.FileName) && (attach === null || attach === void 0 ? void 0 : attach.CreateDate) === (deletedFile === null || deletedFile === void 0 ? void 0 : deletedFile.CreateDate)));
+        tempNewDataState.splice(tempNewDataState.findIndex(attach => (attach === null || attach === void 0 ? void 0 : attach.FileName) === (deletedFile === null || deletedFile === void 0 ? void 0 : deletedFile.FileName) && (attach === null || attach === void 0 ? void 0 : attach.CreateDate) === (deletedFile === null || deletedFile === void 0 ? void 0 : deletedFile.CreateDate)), 1);
+        setNewDataState(tempNewDataState);
       } else {
-        oldAttached.splice(oldAttached.findIndex(attach => attach.FileName === deletedFile.FileName && attach.CreateDate === deletedFile.CreateDate), 1);
-        setDataState(dataState.filter(attach => attach.FileName !== deletedFile.FileName && attach.CreateDate !== deletedFile.CreateDate));
+        oldAttached.splice(oldAttached.findIndex(attach => (attach === null || attach === void 0 ? void 0 : attach.FileName) === (deletedFile === null || deletedFile === void 0 ? void 0 : deletedFile.FileName) && (attach === null || attach === void 0 ? void 0 : attach.CreateDate) === (deletedFile === null || deletedFile === void 0 ? void 0 : deletedFile.CreateDate)), 1);
+        tempDataState.splice(tempDataState.findIndex(attach => (attach === null || attach === void 0 ? void 0 : attach.FileName) === (deletedFile === null || deletedFile === void 0 ? void 0 : deletedFile.FileName) && (attach === null || attach === void 0 ? void 0 : attach.CreateDate) === (deletedFile === null || deletedFile === void 0 ? void 0 : deletedFile.CreateDate)), 1);
+        setDataState(tempDataState);
       }
     });
-    if (attached.length < 2) {
-      afterChangeFile(attached.length);
-    }
+    const tempAttachedItems = [...tempDataState, ...tempNewDataState];
+    // if (tempAttachedItems.length < 2) {
+    //     afterChangeFile(tempAttachedItems?.length || 0);
+    // }
     stripDomain();
     if (onChange) onChange({
       element: nodeList,
-      attached,
+      attached: tempAttachedItems,
       recentRemovedAttached,
       removedAttached: removedAttachedRef.current,
       oldAttached,
@@ -442,8 +453,9 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       allNewAttached.delete('files');
       files.forEach(file => allNewAttached.append('files', file));
       // newAttachedRef.current = files || [];
-      setNewDataState(files || []);
+      // setNewDataState(files || []);
     }
+
     attachmentInputRef.current.files = dt.files;
     return dt.files;
   };
@@ -735,7 +747,7 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }, [maxFile, maxSizeProp, multiple, accept]);
   useEffect(() => {
     oldAttached.length = 0;
-    afterChangeFile(((data === null || data === void 0 ? void 0 : data.length) || 0) + ((newDataState === null || newDataState === void 0 ? void 0 : newDataState.length) || 0));
+    // afterChangeFile((data?.length || 0) + (newDataState?.length || 0));
     if (data) {
       // Load files data was uploaded
       const length = data.length;
@@ -830,7 +842,7 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       uppercase: true,
       required: required,
       type: 'h5',
-      color: 'text.sub',
+      color: 'text/sub',
       ref: attachTextRef
     }, label), error ? jsx(HelperText, null, error) : null), jsx("div", {
       css: AttachmentHeaderIconCSS
@@ -868,11 +880,11 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }), isEmpty ? jsx(Typography, {
       css: userSelectNone,
       type: 'p3',
-      color: 'system.rest'
+      color: 'system/rest'
     }, hintText) : null) : isEmpty ? jsx(Typography, {
       css: userSelectNone,
       type: 'p3',
-      color: 'system.rest'
+      color: 'system/rest'
     }, getGlobal('noFileText')) : null)), allowSort && !isEmpty ? jsx(Popover, {
       ref: popoverRef,
       anchor: jsx(ButtonIcon, {
@@ -958,15 +970,15 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }, jsx(Typography, {
       className: 'username',
       type: 'p2',
-      color: 'text.sub'
+      color: 'text/sub'
     }, (item === null || item === void 0 ? void 0 : item.UserName) || item.lastModifiedDate && ownerName || ''), jsx(Typography, {
       className: 'datetime',
       type: 'p2',
-      color: 'text.sub'
+      color: 'text/sub'
     }, getDateTime(date)), jsx(Typography, {
       className: 'filesize',
       type: 'p2',
-      color: 'text.sub'
+      color: 'text/sub'
     }, calculateSize(item.FileSize || item.size))) : null, isNew ? jsx("span", {
       css: AttachedLinearCSS
     }, jsx(LinearProgress, {
@@ -1108,9 +1120,9 @@ const AttachedItemInfoIconCSS = css`
         ${positionAbsolute};
         ${borderRadius50};
         ${parseWidthHeight(4, 4)};
-        ${bgColor('semantic.success')};
+        ${bgColor('semantic/success')};
         ${top(4.5)};
-        ${left(-2)}
+        ${left(-2)};
     }
 `;
 const AttachedItemOwnerCSS = css`
@@ -1119,7 +1131,7 @@ const AttachedItemOwnerCSS = css`
     ${itemsCenter};
     ${userSelectNone};
     ${parseHeight('100%')};
-    ${textColor('text.sub')};
+    ${textColor('text/sub')};
 `;
 const DetailInfoCSS = css`
     ${displayFlex};
@@ -1145,7 +1157,7 @@ const AttachedLinearCSS = css`
     ${displayFlex};
     ${positionAbsolute};
     ${itemsCenter};
-    ${bgColor('system.white')};
+    ${bgColor('system/white')};
     ${parseWidthHeight('100%')};
     ${top(0)};
 `;
@@ -1242,27 +1254,27 @@ const AttachmentRootCSS = (isEmpty, isEnable) => css`
     ${positionRelative};
     ${borderRadius4px};
     ${boxBorder};
-    ${border(1, 'line.normal')};
+    ${border(1, 'line/normal')};
     ${parseHeight(isEmpty && !isEnable ? 120 : 280)};
-    ${bgColor('system.white')};
+    ${bgColor('system/white')};
     .css-${AttachedCSS.name} {
         .css-${AttachedItemCSS.name} {
             &:hover {
-                ${bgColor('fill.hover')};
+                ${bgColor('fill/hover')};
                 .css-${AttachedLinearCSS.name} {
-                    ${bgColor('fill.hover')};
+                    ${bgColor('fill/hover')};
                 }
             }
             &:active {
-                ${bgColor('fill.pressed')};
+                ${bgColor('fill/pressed')};
                 .css-${AttachedLinearCSS.name} {
-                    ${bgColor('fill.pressed')};
+                    ${bgColor('fill/pressed')};
                 }
             }
             &.chosen {
-                ${bgColor('fill.focus')};
+                ${bgColor('fill/focus')};
                 .css-${AttachedItemInfoCSS.name}, .css-${AttachedItemOwnerCSS.name} {
-                    ${bgColor('fill.focus')};
+                    ${bgColor('fill/focus')};
                 }
             }
         }
@@ -1277,22 +1289,18 @@ const AttachmentRootCSS = (isEmpty, isEnable) => css`
     }
 `;
 Attachment.defaultProps = {
-  allowSort: true,
-  className: '',
-  data: [],
   deleteNotifyText: getGlobal('deleteNotifyText'),
-  disabled: false,
   hintText: getGlobal('dropFileHere'),
   label: getGlobal('attachText'),
-  maxFile: Infinity,
-  multiple: true,
-  style: {},
+  maxSize: getGlobal('maxSizeUpload'),
   uploadErrorInfo: {
     maxFile: getGlobal(['errorDefault', 'maxFile']),
     maxSize: getGlobal(['errorDefault', 'maxSize']),
     fileType: getGlobal(['errorDefault', 'fileType']),
     existingFile: getGlobal(['errorDefault', 'existingFile'])
-  }
+  },
+  viewType: 'detail',
+  ...getGlobal(['components', 'attachment', 'defaultProps'])
 };
 Attachment.propTypes = {
   /** File types that can be accepted. */
@@ -1333,7 +1341,7 @@ Attachment.propTypes = {
   /** Limit the number of uploaded files. */
   maxFile: PropTypes.number,
   /** Limit the size of uploaded files. */
-  maxSize: PropTypes.string,
+  maxSize: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   /** Allows to attach multiple files. */
   multiple: PropTypes.bool,
   /** Callback fired when the files attached is changed. */