diginet-core-ui 1.3.80 → 1.3.81

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

@@ -1,77 +1,44 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { memo, useMemo, useEffect, useState, useRef, forwardRef, useImperativeHandle, Fragment } from 'react';
+import { css, jsx } from '@emotion/core';
+import { ButtonIcon, HelperText, Label, LinearProgress, List, ListItem, ListItemText, ModalSample, Notify, Popover, Popup, ScrollBar, Slider, SliderItem, Typography } from "../..";
+import { getGlobal } from "../../../global";
+import { Another, Compressed, Image, Pdf, Presentation, Sheet, Word } from "../../../icons";
 import PropTypes from 'prop-types';
+import { forwardRef, Fragment, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
-import { jsx, css } from '@emotion/core';
-import { ModalSample, Popup, Popover, List, ListItem, ListItemText, Slider, SliderItem, ScrollBar, LinearProgress, ButtonIcon, Notify } from "../../";
-import { Pdf, Word, Sheet, Presentation, Compressed, Image, Another, View, Download, Delete, Attachment as AttachmentIcon } from "../../../icons";
+import { alignCenter, border, borderBox, borderRadius4px, borderRadius50, breakWord, cursorPointer, displayBlock, displayInlineBlock, displayNone, ellipsis, flexCol, flexRow, flexWrap, justifyBetween, justifyCenter, justifyStart, parseHeight, parseMaxHeight, parseMaxWidth, parseMaxWidthHeight, parseMinHeight, parseMinWidth, parseWidth, parseWidthHeight, pointerEventsNone, positionAbsolute, positionRelative, textCenter, userSelectNone } from "../../../styles/general";
+import { useTheme } from "../../../theme";
 import { classNames, date as moment, getFileType } from "../../../utils";
-import { getGlobal } from "../../../global";
-import { useTheme, makeStyles } from "../../../theme";
-import { alignCenter, border, borderBox, borderRadius4px, breakWord, cursorPointer, displayBlock, displayInlineBlock, displayNone, ellipsis, flexCol, flexRow, flexWrap, justifyBetween, justifyCenter, justifyStart, parseHeight, parseWidthHeight, pointerEventsNone, positionAbsolute, positionRelative, textCenter, textUppercase, userSelectNone } from "../../../styles/general";
-const theme = useTheme();
 const {
   colors: {
     system: {
-      active,
-      rest,
-      white,
-      dark
+      rest: systemRest,
+      white: systemWhite,
+      dark: systemDark
     },
     semantic: {
-      success,
-      danger
+      success: semanticSuccess
     },
     fill: {
       hover: fillHover,
-      pressed,
-      focus
+      pressed: fillPressed,
+      focus: fillFocus
     },
     line: {
-      normal,
-      hover: lineHover
+      normal: lineNormal
     },
     text: {
-      sub
+      sub: textSub
     }
   },
   typography: {
-    heading5,
     paragraph1,
     paragraph2,
     paragraph3
   },
   spacing
-} = theme;
-const useStyles = makeStyles({
-  listItem: {
-    '&.DGN-UI-List-Item': {
-      '.DGN-UI-List-Item-Icon': {
-        minWidth: '28px',
-        svg: {
-          visibility: 'hidden',
-          transform: 'rotate(-90deg)'
-        }
-      },
-      '&.DGN-Active': {
-        '.DGN-UI-List-Item-Icon': {
-          svg: {
-            visibility: 'visible',
-            transform: 'rotate(90deg)'
-          }
-        },
-        '&.DGN-Decrease': {
-          '.DGN-UI-List-Item-Icon': {
-            svg: {
-              transform: 'rotate(-90deg)'
-            }
-          }
-        }
-      }
-    }
-  }
-});
+} = useTheme();
 const icons = {
   pdf: jsx(Pdf, {
     width: '100%',
@@ -106,11 +73,6 @@ const oldAttached = [];
 const allNewAttached = new FormData();
 const attached = [];
 const chosenItems = [];
-let timer = null;
-let prevent = false;
-let existClickOutOfItem = false;
-let maxSize = Infinity;
-let divideSize = null;
 const getType = data => {
   if (data.type !== undefined) {
     var _type$match;
@@ -193,30 +155,28 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   uploadErrorInfo,
   viewType
 }, reference) => {
-  const classes = useStyles();
   const ref = useRef(null);
-  const [open, setOpen] = useState(false);
-  const [popup, setPopup] = useState(false);
-  const [popover, setPopover] = useState(false);
-  const [viewTypeState, setViewTypeState] = useState(viewType);
   const attachTextRef = useRef(null);
   const attachmentHandleIconRef = useRef(null);
-  const sortIconRef = useRef(null);
-  const attachmentImageIconRef = useRef(null);
   const attachmentInputRef = useRef(null);
-  const attachmentImageRef = useRef(null);
   const attachedRef = useRef(null);
   const newAttachedRef = useRef([]);
   const popupRef = useRef(null);
   const popoverRef = useRef(null);
   const isDeleteAll = useRef(false);
-  const PushNotify = useRef(null);
+  const notifyRef = useRef(null);
   const removedAttachedRef = useRef([]);
+  const prevent = useRef(null);
+  const existClickOutOfItem = useRef(null);
+  const divideSize = useRef(null);
+  const maxSize = useRef(Infinity);
+  const timer = useRef(null);
+  const [showModal, setShowModal] = useState(false);
+  const [showPopup, setShowPopup] = useState(false);
+  const [viewTypeState, setViewTypeState] = useState(viewType);
+  const [isEmpty, setIsEmpty] = useState(null);
 
   // Start handler
-  const onShowSortPopover = () => {
-    setPopover(true);
-  };
   const onSortElement = (e, type) => {
     let multi = 1;
     const currentActive = popoverRef.current.querySelector('.DGN-Active');
@@ -276,24 +236,9 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     attachedList.forEach(el => {
       attachedRef.current.appendChild(el);
     });
-    setPopover(false);
   };
   const afterChangeFile = (length = 0) => {
-    var _sortIconRef$current;
-    if (!length) {
-      if (!attachmentImageRef.current.classList.contains('hint-center')) {
-        attachmentImageRef.current.classList.add('hint-center');
-      }
-    } else {
-      attachmentImageRef.current.classList.remove('hint-center');
-    }
-    if ((_sortIconRef$current = sortIconRef.current) !== null && _sortIconRef$current !== void 0 && _sortIconRef$current.element) {
-      if (length > 1) {
-        sortIconRef.current.element.style.display = null;
-      } else {
-        sortIconRef.current.element.style.display = 'none';
-      }
-    }
+    setIsEmpty(!length);
   };
   const onChangeFiles = async e => {
     if (readOnly || disabled) return;
@@ -301,19 +246,19 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       let files = e.target.files;
       const lengthAttached = attached.length;
       for (let i = 0; i < files.length; i++) {
-        if (i + 1 > maxFile - lengthAttached || files[i].size > maxSize || checkExistingFile(files[i]) || !checkAcceptFileType(files[i])) {
+        if (i + 1 > maxFile - lengthAttached || files[i].size > maxSize.current || checkExistingFile(files[i]) || !checkAcceptFileType(files[i])) {
           if (i + 1 > maxFile - lengthAttached) {
             var _files$i;
-            PushNotify.current(`${(_files$i = files[i]) === null || _files$i === void 0 ? void 0 : _files$i.name} - ${uploadErrorInfo['maxFile']}`);
-          } else if (files[i].size > maxSize) {
+            notifyRef.current.instance.show(`${(_files$i = files[i]) === null || _files$i === void 0 ? void 0 : _files$i.name} - ${uploadErrorInfo['maxFile']}`);
+          } else if (files[i].size > maxSize.current) {
             var _files$i2;
-            PushNotify.current(`${(_files$i2 = files[i]) === null || _files$i2 === void 0 ? void 0 : _files$i2.name} - ${uploadErrorInfo['maxSize']}`);
+            notifyRef.current.instance.show(`${(_files$i2 = files[i]) === null || _files$i2 === void 0 ? void 0 : _files$i2.name} - ${uploadErrorInfo['maxSize']}`);
           } else if (!checkAcceptFileType(files[i])) {
             var _files$i3;
-            PushNotify.current(`${(_files$i3 = files[i]) === null || _files$i3 === void 0 ? void 0 : _files$i3.name} - ${uploadErrorInfo['fileType']}`);
+            notifyRef.current.instance.show(`${(_files$i3 = files[i]) === null || _files$i3 === void 0 ? void 0 : _files$i3.name} - ${uploadErrorInfo['fileType']}`);
           } else {
             var _files$i4;
-            PushNotify.current(`${(_files$i4 = files[i]) === null || _files$i4 === void 0 ? void 0 : _files$i4.name} - ${uploadErrorInfo['existingFile']}`);
+            notifyRef.current.instance.show(`${(_files$i4 = files[i]) === null || _files$i4 === void 0 ? void 0 : _files$i4.name} - ${uploadErrorInfo['existingFile']}`);
           }
           files = removeFileOutInputFiles(i, true);
           i--;
@@ -465,8 +410,8 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     if (!size && size !== 0) return 'unknown';
     let totalSize;
     let unitSizeName;
-    if (divideSize) {
-      totalSize = size / divideSize;
+    if (divideSize.current) {
+      totalSize = size / divideSize.current;
       unitSizeName = unitSize.toUpperCase();
       while (totalSize < 0.01 && unitSizeName !== 'B') {
         [unitSizeName, totalSize] = getNewUnitSize(unitSizeName, totalSize, 1);
@@ -486,10 +431,10 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     return totalSize + ' ' + unitSizeName;
   };
   const onShowPopup = () => {
-    setPopup(true);
+    setShowPopup(true);
   };
   const onClosePopup = () => {
-    setPopup(false);
+    setShowPopup(false);
     if (isDeleteAll.current) {
       isDeleteAll.current = false;
       chosenItems.length = 0;
@@ -554,23 +499,16 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     onView(node, AttachmentID);
   };
   const onView = (node, AttachmentID) => {
-    if (timer) {
-      prevent = true;
-      clearTimeout(timer);
-      // if (existClickOutOfItem) {
-      //     removeAllChosenItems();
-      //     attachedRef.current.querySelectorAll('.chosen').forEach(itemEl => {
-      //         itemEl.classList.remove('chosen');
-      //     })
-      // }
+    if (timer.current) {
+      prevent.current = true;
+      clearTimeout(timer.current);
     }
-
     const index = Array.from(attachedRef.current.children).indexOf(node);
     if (onViewProp) onViewProp(AttachmentID, index);else {
-      setOpen(true);
+      setShowModal(true);
     }
     setTimeout(() => {
-      prevent = false;
+      prevent.current = false;
     }, 110);
   };
   const onDownload = (url, name) => {
@@ -646,16 +584,21 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
     return false;
   };
-  const checkExistingFileInData = newFile => {
-    const files = data;
-    if (files && files.length) {
-      const length = files.length;
-      for (let i = 0; i < length; i++) {
-        if (parseStringify2(newFile) === parseStringify2(files[i], true)) return true;
-      }
-    }
-    return false;
-  };
+
+  // const checkExistingFileInData = newFile => {
+  //     const files = data;
+
+  //     if (files && files.length) {
+  //         const length = files.length;
+
+  //         for (let i = 0; i < length; i++) {
+  //             if (parseStringify2(newFile) === parseStringify2(files[i], true)) return true;
+  //         }
+  //     }
+
+  //     return false;
+  // };
+
   const checkAcceptFileType = newFile => {
     if (!accept || !accept.length) return true;
     const type = typeof accept === 'string' ? accept : accept.join('-');
@@ -670,8 +613,8 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     const ctrlKey = e.ctrlKey;
     const shiftKey = e.shiftKey;
     const itemEl = e.currentTarget;
-    timer = setTimeout(() => {
-      if (!prevent) {
+    timer.current = setTimeout(() => {
+      if (!prevent.current) {
         const index = Array.from(attachedRef.current.children).indexOf(itemEl.parentNode);
         if (shiftKey && !ctrlKey) {
           let startIndex = chosenItems[chosenItems.length - 1] || 0;
@@ -713,15 +656,15 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
           itemEl.classList.add('chosen');
         }
         // Add event listener click out of item
-        if (!existClickOutOfItem) {
-          existClickOutOfItem = true;
+        if (!existClickOutOfItem.current) {
+          existClickOutOfItem.current = true;
           attachmentHandleIconRef.current.style.display = 'block';
           document.addEventListener('keydown', onKeyDown);
           document.addEventListener('click', clickOutOfItem);
         }
         checkChosenMultiple();
       }
-      prevent = false;
+      prevent.current = false;
     }, 100);
   };
   const removeActiveChosenItem = () => {
@@ -846,7 +789,7 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
   const removeAllChosenItems = () => {
     chosenItems.length = 0;
-    existClickOutOfItem = false;
+    existClickOutOfItem.current = false;
     attachmentHandleIconRef.current.style.display = null;
     document.removeEventListener('keydown', onKeyDown);
     document.removeEventListener('click', clickOutOfItem);
@@ -859,10 +802,13 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     type: fileInfo.type,
     webkitRelativePath: fileInfo.webkitRelativePath
   });
-  const parseStringify2 = (fileInfo, inData) => JSON.stringify({
-    name: fileInfo === null || fileInfo === void 0 ? void 0 : fileInfo[inData ? 'FileName' : 'name'],
-    size: fileInfo === null || fileInfo === void 0 ? void 0 : fileInfo[inData ? 'FileSize' : 'size']
-  });
+
+  // const parseStringify2 = (fileInfo, inData) =>
+  //     JSON.stringify({
+  //         name: fileInfo?.[inData ? 'FileName' : 'name'],
+  //         size: fileInfo?.[inData ? 'FileSize' : 'size'],
+  //     });
+
   const mountDomain = item => {
     if (!item) return item;
     const cloneItem = JSON.parse(JSON.stringify(item));
@@ -894,29 +840,9 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       attached.length = 0;
     }
     return () => {
-      existClickOutOfItem = false;
+      existClickOutOfItem.current = false;
     };
   }, []);
-  useEffect(() => {
-    let el = null;
-    if (error) {
-      attachTextRef.current.style.color = danger;
-      ref.current.style.borderColor = danger;
-      el = document.createElement('p');
-      el.classList.add('attachment-error');
-      el.innerHTML = error;
-      attachTextRef.current.parentNode.insertAdjacentElement('afterend', el);
-    }
-    return () => {
-      if (attachTextRef.current && ref.current) {
-        attachTextRef.current.style.color = null;
-        ref.current.style.borderColor = null;
-      }
-      if (el) {
-        el.remove();
-      }
-    };
-  }, [error]);
   useEffect(() => {
     setViewTypeState(viewType);
   }, [viewType]);
@@ -929,22 +855,22 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   useEffect(() => {
     switch (true) {
       case /^B$/i.test(unitSize):
-        divideSize = 1;
+        divideSize.current = 1;
         break;
       case /KB/i.test(unitSize):
-        divideSize = 1024;
+        divideSize.current = 1024;
         break;
       case /MB/i.test(unitSize):
-        divideSize = 1024 ** 2;
+        divideSize.current = 1024 ** 2;
         break;
       case /GB/i.test(unitSize):
-        divideSize = 1024 ** 3;
+        divideSize.current = 1024 ** 3;
         break;
       case /TB/i.test(unitSize):
-        divideSize = 1024 ** 4;
+        divideSize.current = 1024 ** 4;
         break;
       default:
-        divideSize = null;
+        divideSize.current = null;
         break;
     }
     attachmentInputRef.current.addEventListener('change', onChangeFiles);
@@ -955,11 +881,11 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   useEffect(() => {
     if (maxSizeProp) {
       if (!isNaN(maxSizeProp)) {
-        maxSize = maxSizeProp * 1024 * 1024;
+        maxSize.current = maxSizeProp * 1024 * 1024;
       } else {
         const numberSize = maxSizeProp.match(/\d+/g);
         const unitMaxSize = maxSizeProp.match(/\D+/g);
-        maxSize = getBit(numberSize, unitMaxSize);
+        maxSize.current = getBit(numberSize, unitMaxSize);
       }
     }
     attachmentInputRef.current.multiple = multiple;
@@ -972,7 +898,7 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         attachmentInputRef.current.removeEventListener('change', onChangeFiles);
         attachmentInputRef.current.accept = null;
       }
-      maxSize = Infinity;
+      maxSize.current = Infinity;
     };
   }, [maxFile, maxSizeProp, multiple, accept]);
   useEffect(() => {
@@ -983,36 +909,38 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       // Load files data was uploaded
       const length = data.length;
       for (let i = 0; i < length; i++) {
-        const item = mountDomain(data[i]);
-        const newAttach = getItemHTMLFromData(item, i);
-        if (Object.prototype.toString.call(item) === '[object File]') {
-          allNewAttached.append('files', item);
-          newAttachedRef.current.push(item);
+        const newAttach = getItemHTMLFromData(data[i], i);
+        if (Object.prototype.toString.call(data[i]) === '[object File]') {
+          allNewAttached.append('files', data[i]);
+          newAttachedRef.current.push(data[i]);
+          attached.push(data[i]);
         } else {
+          const item = mountDomain(data[i]);
           oldAttached.push(item);
+          attached.push(item);
         }
-        attached.push(item);
         const newElement = document.createElement('div');
         newElement.className = 'attachment-row';
         ReactDOM.render(newAttach, attachedRef.current.appendChild(newElement));
       }
     }
-    if (newAttachedRef.current) {
-      const length = newAttachedRef.current.length;
-      for (let i = length - 1; i >= 0; i--) {
-        const item = newAttachedRef.current[i];
-        if (checkExistingFileInData(item)) {
-          newAttachedRef.current.splice(i, 1);
-        } else {
-          const newAttach = getItemHTMLFromData(item, i);
-          allNewAttached.append('files', item);
-          attached.push(item);
-          const newElement = document.createElement('div');
-          newElement.className = 'attachment-row';
-          ReactDOM.render(newAttach, attachedRef.current.appendChild(newElement));
-        }
-      }
-    }
+    // if (newAttachedRef.current) {
+    //     const length = newAttachedRef.current.length;
+
+    //     for (let i = length - 1; i >= 0; i--) {
+    //         const item = newAttachedRef.current[i];
+    //         if (checkExistingFileInData(item)) {
+    //             newAttachedRef.current.splice(i, 1);
+    //         } else {
+    //             const newAttach = getItemHTMLFromData(item, i);
+    //             allNewAttached.append('files', item);
+    //             attached.push(item);
+    //             const newElement = document.createElement('div');
+    //             newElement.className = 'attachment-row';
+    //             ReactDOM.render(newAttach, attachedRef.current.appendChild(newElement));
+    //         }
+    //     }
+    // }
     return () => {
       if (attachedRef.current) {
         attachedRef.current.innerHTML = null;
@@ -1065,66 +993,82 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     className: 'DGN-UI-Attachment-Header'
   }, jsx("div", {
     css: AttachmentInfoCSS
-  }, jsx("p", {
-    css: AttachmentTextCSS,
+  }, jsx(Label, {
+    uppercase: true,
+    required: required,
+    disabled: disabled,
+    type: 'h5',
+    color: textSub,
     ref: attachTextRef
-  }, label, required && jsx("span", {
-    style: {
-      color: danger
-    }
-  }, " *"))), jsx("div", {
+  }, label), error ? jsx(HelperText, null, error) : null), jsx("div", {
     css: AttachmentHeaderIconCSS
   }, jsx("div", {
     css: AttachmentHandleIconCSS,
     ref: attachmentHandleIconRef
-  }, jsx("span", {
+  }, jsx(ButtonIcon, {
+    viewType: 'ghost',
     className: 'view',
+    name: 'view',
     onClick: () => onGetViewItem()
-  }, jsx(View, {
-    color: 'currentColor',
-    viewBox: true
-  })), jsx("span", {
+  }), jsx(ButtonIcon, {
+    viewType: 'ghost',
     className: 'download',
+    name: 'download',
     onClick: onDownloadMultiple
-  }, jsx(Download, {
-    color: 'currentColor',
-    viewBox: true
-  })), !readOnly && jsx("span", {
+  }), !readOnly ? jsx(ButtonIcon, {
+    viewType: 'ghost',
     className: 'delete',
+    name: 'delete',
     onClick: onShowPopup
-  }, jsx(Delete, {
-    color: 'currentColor',
-    viewBox: true
-  }))), jsx("div", {
-    css: AttachmentImageCSS,
-    ref: attachmentImageRef
-  }, !(readOnly || disabled) && jsx("div", {
+  }) : null), jsx("div", {
+    css: isEmpty ? AttachmentImageEmptyCSS : AttachmentImageCSS
+  }, !(readOnly || disabled) ? jsx("div", {
     css: AttachmentImageCenterCSS
-  }, jsx("div", {
-    css: AttachmentImageContentCSS
-  }, jsx("span", {
-    css: AttachmentImageIconCSS,
-    ref: attachmentImageIconRef,
+  }, jsx(ButtonIcon, {
+    css: isEmpty && ButtonAttachmentCSS,
+    circular: isEmpty,
+    viewType: isEmpty ? 'text' : 'ghost',
+    name: 'Attachment',
+    size: isEmpty ? 'extraGiant' : 'medium',
     onClick: triggerClickInput
-  }, jsx(AttachmentIcon, {
-    viewBox: true,
-    color: 'currentColor'
-  })), jsx("span", {
-    css: AttachmentImageTextCSS
-  }, hintText)))), allowSort && jsx(ButtonIcon, {
-    viewType: 'ghost',
-    name: 'Sort',
-    ref: sortIconRef,
-    style: {
-      marginRight: 8,
-      display: 'none'
+  }), isEmpty ? jsx(Typography, {
+    css: userSelectNone,
+    type: 'p3',
+    color: systemRest
+  }, hintText) : null) : null), allowSort && !isEmpty ? jsx(Popover, {
+    ref: popoverRef,
+    anchor: jsx(ButtonIcon, {
+      viewType: 'ghost',
+      name: 'Sort',
+      style: {
+        marginRight: 8
+      }
+    }),
+    width: 'max-content',
+    removeAfterClose: false,
+    anchorOrigin: {
+      vertical: 'bottom',
+      horizontal: 'right'
     },
-    onClick: onShowSortPopover
-  }), jsx(ButtonIcon, {
+    transformOrigin: {
+      vertical: 'top',
+      horizontal: 'right'
+    }
+  }, jsx(List, null, jsx(ListItem, {
+    onClick: e => onSortElement(e, 'filename')
+  }, jsx(ListItemText, null, "By name")), jsx(ListItem, {
+    onClick: e => onSortElement(e, 'filetype')
+  }, jsx(ListItemText, null, "By type")), jsx(ListItem, {
+    onClick: e => onSortElement(e, 'filesize')
+  }, jsx(ListItemText, null, "By size")), jsx(ListItem, {
+    onClick: e => onSortElement(e, 'datetime')
+  }, jsx(ListItemText, null, "By date")), jsx(ListItem, {
+    onClick: e => onSortElement(e, 'username')
+  }, jsx(ListItemText, null, "By owner")))) : null, !isEmpty ? jsx(ButtonIcon, {
     viewType: 'ghost',
     name: viewTypeState === 'detail' ? 'IconView' : 'ListView',
     onClick: () => setViewTypeState(viewTypeState === 'icon' ? 'detail' : 'icon')
-  }))), [allowSort, disabled, readOnly, label, required, hintText, viewTypeState]);
+  }) : null)), [error, allowSort, disabled, readOnly, label, required, hintText, domain, viewTypeState, isEmpty]);
   const AttachmentInputView = useMemo(() => jsx("div", {
     css: AttachmentInputCSS,
     className: 'DGN-UI-Attachment-Input'
@@ -1137,83 +1081,36 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     ...inputProps
   })), [inputProps]);
   const AttachedView = useMemo(() => jsx(ScrollBar, {
-    className: 'DGN-UI-Attachment-List',
-    style: {
-      marginRight: 5,
-      paddingTop: 0,
-      paddingBottom: 0,
-      paddingRight: 7,
-      overflowY: 'overlay'
-    }
+    css: AttachmentListCSS,
+    className: 'DGN-UI-Attachment-List'
   }, jsx("div", {
     css: AttachedCSS,
     ref: attachedRef,
     className: viewTypeState === 'icon' ? 'icon-view' : ''
   })), [viewTypeState]);
-  const PopoverView = useMemo(() => {
-    return jsx(Popover, {
-      open: popover,
-      ref: popoverRef,
-      anchor: sortIconRef,
-      width: 'max-content',
-      removeAfterClose: false,
-      anchorOrigin: {
-        vertical: 'bottom',
-        horizontal: 'right'
-      },
-      transformOrigin: {
-        vertical: 'top',
-        horizontal: 'right'
-      },
-      onClose: () => setPopover(false)
-    }, jsx(List, null, jsx(ListItem, {
-      className: classes.listItem,
-      button: true,
-      onClick: e => onSortElement(e, 'filename')
-    }, jsx(ListItemText, null, "By name")), jsx(ListItem, {
-      className: classes.listItem,
-      button: true,
-      onClick: e => onSortElement(e, 'filetype')
-    }, jsx(ListItemText, null, "By type")), jsx(ListItem, {
-      className: classes.listItem,
-      button: true,
-      onClick: e => onSortElement(e, 'filesize')
-    }, jsx(ListItemText, null, "By size")), jsx(ListItem, {
-      className: classes.listItem,
-      button: true,
-      onClick: e => onSortElement(e, 'datetime')
-    }, jsx(ListItemText, null, "By date")), jsx(ListItem, {
-      className: classes.listItem,
-      button: true,
-      onClick: e => onSortElement(e, 'username')
-    }, jsx(ListItemText, null, "By owner"))));
-  }, [popover]);
   const PopupView = useMemo(() => jsx(Popup, {
-    open: popup,
+    open: showPopup,
     ref: popupRef,
-    type: 'yes-no',
-    variant: 'warning',
-    title: deleteNotifyText,
-    fullScreen: true,
+    type: 'yesno',
+    description: deleteNotifyText,
     pressESCToClose: true,
-    autoFocusOKButton: true,
     onClose: onClosePopup,
     onConfirm: onRemoveMultiple,
     onCancel: onClosePopup
-  }), [deleteNotifyText, onChange, onRemoveProp, popup]);
+  }), [deleteNotifyText, onChange, onRemoveProp, showPopup]);
   const ModalView = useMemo(() => {
-    if (!chosenItems.length) return setOpen(false);
+    if (!chosenItems.length) return setShowModal(false);
     const index = chosenItems[0];
     const data = mountDomain(attached[index]);
     // let data = oldAttached[index] || allNewAttached.getAll('files')[index-oldAttached.length];
     return jsx(ModalSample, {
-      open: open,
+      open: showModal,
       title: data.FileName,
-      onClose: () => setOpen(false)
+      onClose: () => setShowModal(false)
     }, jsx(Slider, null, jsx(SliderItem, {
       url: data.URL
     })));
-  }, [domain, open]);
+  }, [domain, showModal]);
   // End view
 
   useImperativeHandle(reference, () => {
@@ -1243,37 +1140,20 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     className: classNames('DGN-UI-Attachment', disabled && 'disabled', className),
     style: style,
     onDragEnter: onDragFileStart
-  }, AttachHeaderView, AttachmentInputView, AttachedView, PopoverView, PopupView, ModalView, jsx(Notify, {
-    getAddNotify: func => PushNotify.current = func,
+  }, AttachHeaderView, AttachmentInputView, AttachedView, PopupView, ModalView, jsx(Notify, {
+    ref: notifyRef,
     progressing: true,
     autoDisappear: true,
-    position: {
-      vertical: 'bottom',
-      horizontal: 'center'
-    },
     color: 'danger'
   }));
 }));
-const ViewAttachTypeCSS = css`
-    ${cursorPointer};
-    ${parseHeight(24)};
-    color: ${rest};
-    &:hover {
-        color: ${active};
-    }
-`;
 const AttachmentHandleIconCSS = css`
     ${displayNone};
     ${parseHeight(24)};
-    margin-right: ${spacing([2.5])};
-    border-right: 1px solid ${normal};
-    span {
-        ${cursorPointer};
-        margin-right: ${spacing([2.5])};
-        color: ${rest};
-        &:hover {
-            color: ${active};
-        }
+    margin-right: ${spacing([2])};
+    border-right: 1px solid ${lineNormal};
+    button {
+        margin-right: ${spacing([2])};
     }
 `;
 const AttachmentHeaderCSS = css`
@@ -1281,26 +1161,12 @@ const AttachmentHeaderCSS = css`
     ${alignCenter};
     ${justifyBetween};
     ${borderBox};
-    ${parseHeight(48)};
+    ${parseWidth('100%')};
     padding: ${spacing([4, 4])};
-    .css-${AttachmentHandleIconCSS.name}, .css-${ViewAttachTypeCSS.name} {
-        z-index: 1;
-    }
 `;
 const AttachmentInfoCSS = css`
     ${flexRow};
-    ${positionRelative};
-    ${alignCenter};
-    margin: 0;
-    & + p.attachment-error {
-        color: ${danger};
-    }
-`;
-const AttachmentTextCSS = css`
-    ${userSelectNone};
-    ${textUppercase};
-    ${heading5};
-    color: ${sub};
+    gap: ${spacing([2])};
 `;
 const AttachmentHeaderIconCSS = css`
     ${flexRow};
@@ -1312,106 +1178,59 @@ const AttachmentInputCSS = css`
     ${parseWidthHeight('100%', '100%')};
     top: 0;
     left: 0;
-    z-index: 4;
     input {
         ${positionRelative};
         ${parseWidthHeight('100%', 'calc(100% + 20px)')};
         opacity: 0;
-        top: ${spacing([-5])};
-        font-size: 0px;
     }
 `;
 const AttachmentImageCenterCSS = css`
-    ${flexRow};
+    ${flexCol};
     ${justifyCenter};
     ${alignCenter};
     ${parseWidthHeight('100%', '100%')};
 `;
-const AttachmentImageContentCSS = css`
-    ${textCenter};
-    display: grid;
-`;
-const AttachmentImageIconCSS = css`
-    ${parseWidthHeight(24, 24)};
-    margin-bottom: 0;
-    z-index: 3;
-    svg {
-        color: ${rest};
-    }
-    &:hover {
-        border-color: ${lineHover};
-        svg {
-            color: ${active};
-        }
-    }
-`;
-const AttachmentImageTextCSS = css`
-    ${displayNone};
-    ${userSelectNone};
-    ${paragraph3};
-    color: ${rest};
+const ButtonAttachmentCSS = css`
+    border: 1px dashed ${lineNormal} !important;
+    margin: ${spacing([0, 'auto', 4])};
 `;
 const AttachmentImageCSS = css`
-    margin-right: 10px;
-    &.hint-center {
-        ${positionAbsolute};
-        ${parseWidthHeight('100%', '100%')};
-        top: 0;
-        left: 0;
-        margin-right: 0;
-        z-index: 1;
-        .css-${AttachmentImageTextCSS.name} {
-            ${displayBlock};
-        }
-        .css-${AttachmentImageIconCSS.name} {
-            ${flexRow};
-            ${justifyCenter};
-            ${alignCenter};
-            ${parseWidthHeight(64, 64)};
-            margin: 0 auto 8px auto;
-            border: 1px dashed ${normal};
-            border-radius: 50%;
-            svg {
-                ${parseWidthHeight(40, 40)};
-            }
-            &:hover {
-                border-color: ${lineHover};
-                background-color: ${fillHover};
-            }
-        }
-    }
+    margin-right: ${spacing([2])};
+`;
+const AttachmentImageEmptyCSS = css`
+    ${positionAbsolute};
+    ${parseWidthHeight('100%', '100%')};
+    top: 0;
+    left: 0;
 `;
 const AttachedItemInfoCSS = css`
     ${flexRow};
     ${alignCenter};
     ${borderRadius4px};
     ${userSelectNone};
+    ${parseMinWidth('calc(50% - 10px)')};
     margin-right: ${spacing([2])};
-    min-width: calc(50% - 10px);
 `;
 const AttachedItemInfoIconCSS = css`
     ${flexRow};
     ${positionRelative};
-    ${cursorPointer};
-    max-height: 16px;
-    max-width: 14px;
+    ${parseMaxWidthHeight(14, 16)};
     padding: ${spacing([1, 1.25])};
     box-sizing: content-box;
     &.new-file:after {
         content: '';
         ${positionAbsolute};
-        ${parseWidthHeight(4, 4)}
+        ${borderRadius50};
+        ${parseWidthHeight(4, 4)};
         top: 4.5px;
         left: -2px;
-        border-radius: 50%;
-        background: ${success};
+        background: ${semanticSuccess};
     }
 `;
 const AttachedItemInfoNameCSS = css`
     ${paragraph1};
-    ${cursorPointer};
     ${ellipsis};
-    color: ${dark};
+    color: ${systemDark};
     margin-left: ${spacing([3])};
     padding-top: ${spacing([0.25])};
     box-sizing: content-box;
@@ -1421,23 +1240,22 @@ const AttachedItemOwnerCSS = css`
     ${flexRow};
     ${positionRelative};
     ${alignCenter};
-    ${cursorPointer};
     ${userSelectNone};
-    height: 100%;
-    color: ${sub};
+    ${parseHeight('100%')};
+    color: ${textSub};
     .detail-info {
         ${flexRow};
-        min-width: 333px;
+        ${parseMinWidth(333)};
         .username {
             ${displayInlineBlock};
             ${ellipsis};
-            min-width: 120px;
-            max-width: 120px;
+            ${parseMinWidth(120)};
+            ${parseMaxWidth(120)};
         }
         .datetime {
             ${displayInlineBlock};
-            min-width: max-content;
-            max-width: max-content;
+            ${parseMinWidth('max-content')};
+            ${parseMaxWidth('max-content')};
         }
         .filesize {
             float: right;
@@ -1452,22 +1270,22 @@ const AttachedLinearCSS = css`
     ${alignCenter};
     ${parseWidthHeight('100%', '100%')};
     top: 0;
-    background: ${white};
+    background: ${systemWhite};
 `;
 const AttachedItemCSS = css`
     ${flexRow};
     ${justifyBetween};
-    ${alignCenter};
     ${positionRelative};
     ${borderRadius4px};
+    ${cursorPointer};
     ${parseHeight(24)};
     padding: ${spacing([0, 2])};
     transition: padding 0.5s ease;
 `;
 const AttachedCSS = css`
     ${positionRelative};
-    height: 100%;
-    max-height: 152px;
+    ${parseHeight('100%')};
+    ${parseMaxHeight(152)};
     margin-left: ${spacing([2])};
     margin-right: ${spacing([2])};
     z-index: 1;
@@ -1487,10 +1305,10 @@ const AttachedCSS = css`
             content: '';
             flex: auto;
         }
-        max-height: 200px;
+        ${parseMaxHeight(200)};
+        ${parseWidth('max-content')};
+        ${parseMaxWidth('calc(100% - 26px)')};
         margin-left: 0;
-        width: max-content;
-        max-width: calc(100% - 26px);
         .attachment-row {
             ${positionRelative};
             margin-left: ${spacing([4])};
@@ -1506,17 +1324,16 @@ const AttachedCSS = css`
                 ${positionRelative};
                 ${textCenter};
                 ${ellipsis};
-                width: max-content;
-                max-width: 80px;
+                ${parseWidth('max-content')};
+                ${parseMaxWidth(80)};
+                ${parseMinWidth(70)};
                 margin-left: auto;
                 margin-right: auto;
-                min-width: 70px;
                 .css-${AttachedItemInfoIconCSS.name} {
                     ${displayBlock};
                     ${parseWidthHeight(40, 40)};
-                    max-height: 40px;
-                    max-width: 40px;
-                    margin: 4px auto 2px;
+                    ${parseMaxWidthHeight(40, 40)};
+                    margin: ${spacing([1, 'auto', 0.5])};
                     padding: 0;
                     &.new-file:after {
                         ${parseWidthHeight(8, 8)};
@@ -1528,9 +1345,9 @@ const AttachedCSS = css`
                     ${paragraph3};
                     ${textCenter};
                     ${breakWord};
+                    ${parseMaxWidth('100%')};
                     margin: ${spacing([0, 2])};
                     display: -webkit-box;
-                    max-width: 100%;
                     white-space: pre-wrap;
                     -webkit-line-clamp: 2;
                     -webkit-box-orient: vertical;
@@ -1556,21 +1373,22 @@ const AttachedCSS = css`
         min-width: 684px;
     }
 `;
+const AttachmentListCSS = css`
+    ${borderBox};
+    margin-right: ${spacing([1.25])};
+    padding: ${spacing([0, 1.75, 0])};
+    overflow-y: overlay;
+`;
 const AttachmentRootCSS = css`
     ${flexCol};
     ${flexWrap};
     ${justifyStart};
     ${positionRelative};
     ${borderRadius4px};
-    ${border(1, normal)};
-    min-height: 165px;
-    padding-bottom: ${spacing([5])};
-    background-color: ${white};
-    &:hover:not(.disabled) {
-        .css-${AttachmentImageIconCSS.name} {
-            ${cursorPointer};
-        }
-    }
+    ${borderBox};
+    ${border(1, lineNormal)};
+    ${parseMinHeight(280)};
+    background-color: ${systemWhite};
     .css-${AttachedCSS.name} {
         &:not(.disabled) {
             .css-${AttachedItemCSS.name} {
@@ -1581,15 +1399,15 @@ const AttachmentRootCSS = css`
                     }
                 }
                 &:active {
-                    background-color: ${pressed};
+                    background-color: ${fillPressed};
                     .css-${AttachedLinearCSS.name} {
-                        background-color: ${pressed};
+                        background-color: ${fillPressed};
                     }
                 }
                 &.chosen {
-                    background-color: ${focus};
+                    background-color: ${fillFocus};
                     .css-${AttachedItemInfoCSS.name}, .css-${AttachedItemOwnerCSS.name} {
-                        background-color: ${focus};
+                        background-color: ${fillFocus};
                     }
                 }
             }
@@ -1602,10 +1420,10 @@ const AttachmentRootCSS = css`
     }
     @media (max-width: 716px) {
         .css-${AttachedCSS.name}:not(.icon-view) {
-            min-width: 575px;
+            ${parseMinWidth(575)};
         }
         .css-${AttachedItemInfoCSS.name} {
-            max-width: calc(40% - 10px);
+            ${parseMaxWidth('calc(40% - 10px)')};
         }
     }
 `;