diginet-core-ui 1.3.24

package/components/collapse/index.js

@@ -0,0 +1,67 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+/** @jsxRuntime classic */
+
+/** @jsx jsx */
+import { memo, useEffect, useRef, forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import { jsx, css } from '@emotion/core';
+const Collapse = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  open,
+  children,
+  ...props
+}, ref) => {
+  if (!ref) {
+    ref = useRef(null);
+  }
+
+  const CollapseRoot = css`
+        display: block;
+        position: relative;
+        width: 100%;
+        height: 0;
+        transition: height 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+        overflow-y: clip;
+    `;
+  useEffect(() => {
+    if (open) {
+      const scrollHeight = ref.current.scrollHeight;
+      const duration = Math.min(scrollHeight, 1500);
+      ref.current.style.transitionDuration = duration + 'ms';
+      ref.current.style.height = scrollHeight + 'px';
+      setTimeout(() => {
+        if (ref.current) {
+          ref.current.style.height = 'auto';
+        }
+      }, duration);
+      return () => {
+        if (ref.current) {
+          ref.current.style.height = scrollHeight + 'px';
+          setTimeout(() => {
+            if (ref.current) {
+              ref.current.style.height = null;
+            }
+          }, 0);
+        }
+      };
+    }
+  }, [open]);
+  return jsx("div", _extends({
+    css: CollapseRoot,
+    ref: ref
+  }, props), children);
+}));
+Collapse.defaultProps = {
+  open: false
+};
+Collapse.propTypes = {
+  /** expand content if true */
+  open: PropTypes.bool,
+
+  /** The element to display in alert like text props (priority) */
+  children: PropTypes.node,
+
+  /** any props else */
+  props: PropTypes.any
+};
+export default Collapse;

package/components/dialogs/colors.js

@@ -0,0 +1,11 @@
+export const iconDefault = '#687799';
+export const iconHover = '#111d5e';
+export const iconDisabled = '#8f9bb3';
+export const fillHover = '#eff5ff';
+export const fillDisabled = '#e7eaf0';
+export const fillDefault = '#8f9bb3';
+export const fillPath = '#fff';
+export const uiSuccess = '#00c875';
+export const uiWarning = '#ffaa00';
+export const uiDanger = '#ff3d71';
+export const uiInfo = '#0095ff';

package/components/divider/index.js

@@ -0,0 +1,71 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+/** @jsxRuntime classic */
+
+/** @jsx jsx */
+import { memo, useMemo, useEffect, useRef, forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import { jsx, css } from '@emotion/core';
+import theme from '../../theme/settings';
+const Divider = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  children,
+  width,
+  height,
+  direction,
+  color,
+  className,
+  ...props
+}, ref) => {
+  if (!ref) {
+    ref = useRef(null);
+  }
+
+  const DividerRoot = css`
+        display: block;
+        position: relative;
+        background-color: ${theme.colors[color] || color};
+        &.vertical {
+            width: ${width ? isNaN(width) ? width : width + 'px' : '1px'};
+            height: ${height ? isNaN(height) ? height : height + 'px' : '100%'};
+            margin: auto 5px;
+        }
+        &.horizontal {
+            width: ${width ? isNaN(width) ? height : width + 'px' : '100%'};
+            height: ${height ? isNaN(height) ? height : height + 'px' : '1px'};
+            margin: 5px auto;
+        }
+    `;
+  useEffect(() => {
+    if (direction === 'vertical' && !height && ref.current && ref.current.parentNode) {
+      ref.current.style.height = ref.current.parentNode.offsetHeight + 'px';
+    }
+  }, []);
+  const DividerView = useMemo(() => jsx("div", _extends({
+    css: DividerRoot,
+    ref: ref,
+    className: ['DGN-UI-Divider', direction, className].join(' ').trim()
+  }, props), children), []);
+  return DividerView;
+}));
+Divider.defaultProps = {
+  color: theme.colors.divider,
+  direction: 'horizontal',
+  className: ''
+};
+Divider.propTypes = {
+  /** width of divider */
+  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
+  /** color of divider */
+  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
+  /** color of divider */
+  color: PropTypes.string,
+
+  /** direction of divider */
+  direction: PropTypes.oneOf(['vertical', 'horizontal']),
+
+  /** any props else */
+  props: PropTypes.object
+};
+export default Divider;

package/components/divider/style.js

@@ -0,0 +1,12 @@
+export default ((width, height) => ({
+  vertical: `
+        width: ${isNaN(width) ? width : width + 'px'};
+        height: 100%;
+        margin: auto 5px;
+    `,
+  horizontal: `
+        width: 100%;
+        height: ${isNaN(height) ? height : height + 'px'};
+        margin: 5px auto;
+    `
+}));

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

@@ -0,0 +1,1890 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+/** @jsxRuntime classic */
+
+/** @jsx jsx */
+import { memo, useMemo, useEffect, useState, useRef, forwardRef, useImperativeHandle } from 'react';
+import PropTypes from 'prop-types';
+import ReactDOM from 'react-dom';
+import { jsx, css } from '@emotion/core';
+import { success5, danger5, info5, color } from '../../../styles/colors';
+import { fontFamily, typography } from '../../../styles/typography';
+import { ModalSample, Popup, Popover, List, ListItem, ListItemIcon, ListItemText, Slider, SliderItem, ScrollBar, LinearProgress } from '../../';
+import Icon, { Pdf, Word, Sheet, Presentation, Compressed, Image, Another, Info, View, Download, Delete, Attachment as AttachmentIcon } from '../../../icons';
+import { date as moment, getFileType } from '../../../utils';
+import { getGlobal } from '../../../global';
+import { useTheme, makeStyles } from '../../../theme';
+import { Fragment } from 'react';
+const theme = useTheme();
+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)'
+            }
+          }
+        }
+      }
+    }
+  }
+});
+const classes = useStyles();
+const icons = {
+  detail: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+        <path fillRule="evenodd" clipRule="evenodd" d="M6.5 4C5.12167 4 4 5.11457 4 6.48418C4 7.85379 5.12167 8.96835 6.5 8.96835C7.87833 8.96835 9 7.85379 9 6.48418C9 5.11457 7.87833 4 6.5 4ZM12.3333 4C10.955 4 9.83333 5.11457 9.83333 6.48418C9.83333 7.85379 10.955 8.96835 12.3333 8.96835C13.7117 8.96835 14.8333 7.85379 14.8333 6.48418C14.8333 5.11457 13.7117 4 12.3333 4ZM20.6667 6.48418C20.6667 7.85379 19.545 8.96835 18.1667 8.96835C16.7883 8.96835 15.6667 7.85379 15.6667 6.48418C15.6667 5.11457 16.7883 4 18.1667 4C19.545 4 20.6667 5.11457 20.6667 6.48418ZM6.5 9.79641C5.12167 9.79641 4 10.911 4 12.2806C4 13.6502 5.12167 14.7648 6.5 14.7648C7.87833 14.7648 9 13.6502 9 12.2806C9 10.911 7.87833 9.79641 6.5 9.79641ZM9.83333 12.2806C9.83333 10.911 10.955 9.79641 12.3333 9.79641C13.7117 9.79641 14.8333 10.911 14.8333 12.2806C14.8333 13.6502 13.7117 14.7648 12.3333 14.7648C10.955 14.7648 9.83333 13.6502 9.83333 12.2806ZM18.1667 9.79641C16.7883 9.79641 15.6667 10.911 15.6667 12.2806C15.6667 13.6502 16.7883 14.7648 18.1667 14.7648C19.545 14.7648 20.6667 13.6502 20.6667 12.2806C20.6667 10.911 19.545 9.79641 18.1667 9.79641ZM4 18.077C4 16.7074 5.12167 15.5928 6.5 15.5928C7.87833 15.5928 9 16.7074 9 18.077C9 19.4466 7.87833 20.5612 6.5 20.5612C5.12167 20.5612 4 19.4466 4 18.077ZM12.3333 15.5928C10.955 15.5928 9.83333 16.7074 9.83333 18.077C9.83333 19.4466 10.955 20.5612 12.3333 20.5612C13.7117 20.5612 14.8333 19.4466 14.8333 18.077C14.8333 16.7074 13.7117 15.5928 12.3333 15.5928ZM15.6667 18.077C15.6667 16.7074 16.7883 15.5928 18.1667 15.5928C19.545 15.5928 20.6667 16.7074 20.6667 18.077C20.6667 19.4466 19.545 20.5612 18.1667 20.5612C16.7883 20.5612 15.6667 19.4466 15.6667 18.077Z" fill="currentColor"/>
+    </svg>`,
+  icon: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+        <path fillRule="evenodd" clipRule="evenodd" d="M3 7C3 6.448 3.448 6 4 6C4.552 6 5 6.448 5 7C5 7.552 4.552 8 4 8C3.448 8 3 7.552 3 7ZM3 12C3 11.448 3.448 11 4 11C4.552 11 5 11.448 5 12C5 12.552 4.552 13 4 13C3.448 13 3 12.552 3 12ZM4 16C3.448 16 3 16.448 3 17C3 17.552 3.448 18 4 18C4.552 18 5 17.552 5 17C5 16.448 4.552 16 4 16ZM7.9355 11H20.0645C20.5795 11 21.0005 11.421 21.0005 11.936V12.064C21.0005 12.579 20.5795 13 20.0645 13H7.9355C7.4205 13 7.0005 12.579 7.0005 12.064V11.936C7.0005 11.421 7.4205 11 7.9355 11ZM20.0645 16H7.9355C7.4205 16 7.0005 16.421 7.0005 16.936V17.064C7.0005 17.579 7.4205 18 7.9355 18H20.0645C20.5795 18 21.0005 17.579 21.0005 17.064V16.936C21.0005 16.421 20.5795 16 20.0645 16ZM7.9355 6H20.0645C20.5795 6 21.0005 6.421 21.0005 6.936V7.064C21.0005 7.579 20.5795 8 20.0645 8H7.9355C7.4205 8 7.0005 7.579 7.0005 7.064V6.936C7.0005 6.421 7.4205 6 7.9355 6Z" fill="currentColor"/>
+    </svg>`,
+  pdf: jsx(Pdf, {
+    width: '100%',
+    height: '100%'
+  }),
+  word: jsx(Word, {
+    width: '100%',
+    height: '100%'
+  }),
+  sheet: jsx(Sheet, {
+    width: '100%',
+    height: '100%'
+  }),
+  presentation: jsx(Presentation, {
+    width: '100%',
+    height: '100%'
+  }),
+  image: jsx(Image, {
+    width: '100%',
+    height: '100%'
+  }),
+  compressed: jsx(Compressed, {
+    width: '100%',
+    height: '100%'
+  }),
+  default: jsx(Another, {
+    width: '100%',
+    height: '100%'
+  })
+};
+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 errorDefault = getGlobal('errorDefault');
+const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  viewType,
+  label,
+  className,
+  deleteNotifyText,
+  ownerName,
+  hintText,
+  multiple,
+  disabled,
+  allowSort,
+  onRemove: onRemoveItem,
+  onView: onViewItem,
+  onDownload: onDownloadItem,
+  onChange,
+  onUploadError,
+  data,
+  maxFile,
+  maxSize: maxSizeProp,
+  unitSize,
+  accept,
+  uploadErrorInfo,
+  style,
+  inputStyle,
+  inputProps,
+  refs,
+  required,
+  error,
+  errorStyle,
+  readOnly,
+  ...props
+}, reference) => {
+  const ref = useRef(null);
+  const [open, setOpen] = useState(false);
+  const [popup, setPopup] = useState(false);
+  const [popover, setPopover] = useState(false);
+  const attachTextRef = useRef(null);
+  const attachmentHandleIconRef = useRef(null);
+  const viewAttachTypeRef = useRef(null);
+  const sortIconRef = useRef(null);
+  const attachmentImageIconRef = useRef(null);
+  const attachmentInputRef = useRef(null);
+  const attachmentImageRef = useRef(null);
+  const attachedRef = useRef(null);
+  const popupRef = useRef(null);
+  const popoverRef = useRef(null);
+  const isDeleteAll = useRef(false);
+  const ViewAttachType = css`
+        cursor: pointer;
+        height: 24px;
+        color: ${color.system.rest};
+        &:hover {
+            color: ${color.system.active};
+        }
+    `;
+  const attachmentHandleIcon = css`
+        display: none;
+        height: 24px;
+        margin-right: 10px;
+        border-right: 1px solid ${color.line.normal};
+        span {
+            margin-right: 10px;
+            color: ${color.system.rest};
+            cursor: pointer;
+            &:hover {
+                color: ${color.system.active};
+            }
+        }
+    `;
+  const AttachmentHeader = css`
+        /* position: relative; */
+        height: 48px;
+        display: flex;
+        padding: 16px 24px;
+        align-items: center;
+        /* margin-bottom: 10px; */
+        box-sizing: border-box;
+        justify-content: space-between;
+        .css-${attachmentHandleIcon.name},
+        .css-${ViewAttachType.name} {
+            z-index: 1;
+        }
+    `;
+  const AttachmentInfo = css`
+        display: flex;
+        position: relative;
+        align-items: center;
+        margin: 0;
+        &+p.attachment-error {
+            color: ${danger5};
+            font-family: ${fontFamily};
+            font-weight: 600;
+        }
+        span {
+            display: none;
+            color: ${danger5};
+            margin: 10px;
+            cursor: help;
+            opacity: 0;
+            span {
+                display: block;
+                position: absolute;
+                opacity: 1;
+                transform: scaleX(0) translateY(-50%);
+                left: 80px;
+                z-index: 4;
+                width: max-content;
+                height: max-content;
+                max-height: 72px;
+                overflow: auto;
+                border: 1px solid ${danger5};
+                border-radius: 4px;
+                padding: 5px 8px;
+                transition: transform 0.3s linear 0.3s;
+                transform-origin: left;
+                &::-webkit-scrollbar {
+                    width: 4px;
+                    background-color: white !important;
+                    border-radius: 4px;
+                }
+                &::-webkit-scrollbar-thumb{
+                        border-radius: 10px;
+                        mix-blend-mode: normal;
+                        background-color: ${danger5} !important;
+                        background-clip: content-box;
+                }
+                ul {
+                    display: contents;
+                    li {
+                        list-style: none;
+                    }
+                }
+            }
+            &:hover {
+                span {
+                    transform: scaleX(1) translateY(-50%);
+                    transition-delay: 0s;
+                }
+            }
+        }
+    `;
+  const AttachmentText = css`
+        font-family: ${fontFamily};
+        ${typography.heading5};
+        text-transform: uppercase;
+        color: ${color.text.sub};
+        user-select: none;
+    `;
+  const AttachmentHeaderIcon = css`
+        display: flex;
+        align-items: center;
+    `;
+  const AttachmentInput = css`
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+        z-index: 4;
+        display: none;
+        input {
+            position: relative;
+            opacity: 0;
+            top: -20px;
+            font-size: 0px;
+            width: 100%;
+            height: calc(100% + 20px);
+        }
+    `;
+  const AttachmentImageCenter = css`
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    `;
+  const AttachmentImageContent = css`
+        display: grid;
+        text-align: center;
+    `;
+  const AttachmentImageIcon = css`
+        margin-bottom: 0;
+        z-index: 3;
+        width: 24px;
+        height: 24px;
+        svg {
+            color: ${color.system.rest};
+        }
+        &:hover {
+            border-color: ${color.line.hover};
+            svg {
+                color: ${color.system.active};
+            }
+        }
+    `;
+  const AttachmentImageText = css`
+        display: none;
+        font-family: ${fontFamily};
+        ${typography.paragraph3};
+        color: ${color.system.rest};
+        user-select: none;
+    `;
+  const AttachmentImage = css`
+        margin-right: 10px;
+        &.hint-center {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            top: 0;
+            left: 0;
+            margin-right: 0;
+            z-index: 1;
+            .css-${AttachmentImageText.name} {
+                display: block;
+            }
+            .css-${AttachmentImageIcon.name} {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                width: 64px;
+                height: 64px;
+                margin: 0 auto 8px auto;
+                border: 1px dashed ${color.line.normal};
+                border-radius: 50%;
+                svg {
+                    width: 40px;
+                    height: 40px;
+                }
+                &:hover {
+                    border-color: ${color.line.hover};
+                    background-color: ${color.fill.hover};
+                }
+            }
+        }
+    `;
+  const AttachedItemInfo = css`
+        /* width: 40%; */
+        /* max-width: 350px; */
+        border-radius: 4px;
+        min-width: 104px;
+        display: flex;
+        align-items: center;
+        user-select: none;
+        margin-right: 10px;
+        min-width: calc(50% - 10px);
+    `;
+  const AttachedItemInfoIcon = css`
+        display: flex;
+        position: relative;
+        max-height: 16px;
+        max-width: 14px;
+        padding: 4px 5px;
+        cursor: pointer;
+        box-sizing: content-box;
+        &.new-file:after {
+            content: "";
+            position: absolute;
+            top: 4.5px;
+            left: -2px;
+            width: 4px;
+            height: 4px;
+            border-radius: 50%;
+            background: ${success5};
+        }
+    `;
+  const AttachedItemInfoName = css`
+        font-family: ${fontFamily};
+        ${typography.paragraph1};
+        color: ${color.system.dark};
+        margin-left: 12px;
+        padding-top: 1px;
+        cursor: pointer;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        box-sizing: content-box;
+    `;
+  const AttachedItemOwner = css`
+        display: flex;
+        position: relative;
+        /* max-width: 50%; */
+        height: 100%;
+        align-items: center;
+        font-family: ${fontFamily};
+        ${typography.paragraph2};
+        color: ${color.text.sub};
+        cursor: pointer;
+        user-select: none;
+        .detail-info {
+            display: flex;
+            min-width: 333px;
+            .username {
+                display: inline-block;
+                /* width: 35%; */
+                min-width: 120px;
+                max-width: 120px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+            }
+            .datetime {
+                display: inline-block;
+                /* width: 45%; */
+                min-width: max-content;
+                max-width: max-content;
+            }
+            .filesize {
+                /* width: 20%; */
+                float: right;
+                text-align: right;
+                margin-left: auto;
+            }
+        }
+    `;
+  const AttachedLinear = css`
+        position: absolute;
+        width: 100%;
+        top: 0;
+        background: #FFF;
+        height: 100%;
+        display: flex;
+        align-items: center;
+    `;
+  const AttachedItem = css`
+        height: 24px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0 8px;
+        position: relative;
+        transition: padding 0.5s ease;
+        border-radius: 4px;
+    `;
+  const Attached = css`
+        position: relative;
+        /* width: calc(100% - 10px); */
+        height: 100%;
+        max-height: 152px;
+        margin-left: 8px;
+        margin-right: 8px;
+        /* scroll-snap-type: mandatory;
+        scroll-snap-type: y mandatory;
+        scroll-snap-points-y: repeat(16px); */
+        z-index: 1;
+        /* transition: margin 0.5s ease; */
+        overflow-y: visible;
+        .attachment-row {
+            display: block;
+            margin-bottom: 8px;
+            /* scroll-snap-align: start; */
+            &:last-child {
+                margin-bottom: 0;
+            }
+            /* overflow-y: hidden; */
+        }
+        &.icon-view {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: space-between;
+            &::after {
+                content: "";
+                flex: auto;
+            }
+            /* grid-template-columns: repeat(auto-fill, minmax(136px, auto)); */
+            max-height: 200px;
+            margin-left: 0;
+            /* padding-left: 10px; */
+            /* padding-right: 10px; */
+            width: max-content;
+            max-width: calc(100% - 26px);
+            .attachment-row {
+                position: relative;
+                margin-left: 16px;
+                overflow-y: visible;
+            }
+            .css-${AttachedItem.name} {
+                display: block;
+                height: 80px;
+                width: 80px;
+                padding: 0;
+                position: initial;
+                .css-${AttachedItemInfo.name} {
+                    position: relative;
+                    display: block;
+                    width: max-content;
+                    text-align: center;
+                    max-width: 80px;
+                    overflow: hidden;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                    margin-left: auto;
+                    margin-right: auto;
+                    min-width: 70px;
+                    .css-${AttachedItemInfoIcon.name} {
+                        height: 40px;
+                        width: 40px;
+                        max-height: 40px;
+                        max-width: 40px;
+                        margin: 4px auto 2px;
+                        padding: 0;
+                        display: block;
+                        &.new-file:after {
+                            top: -1px;
+                            left: -7px;
+                            width: 8px;
+                            height: 8px;
+                        }
+                    }
+                    .css-${AttachedItemInfoName.name} {
+                        ${typography.paragraph3};
+                        margin: 0 8px;
+                        display: -webkit-box;
+                        word-break: break-word;
+                        max-width: 100%;
+                        white-space: pre-wrap;
+                        -webkit-line-clamp: 2;
+                        -webkit-box-orient: vertical;
+                        text-align: center;
+                    }
+                }
+                .css-${AttachedItemOwner.name} {
+                    position: inherit;
+                    height: auto;
+                    font-size: 12px;
+                    line-height: 14px;
+                    .detail-info {
+                        display: none;
+                    }
+                    .css-${AttachedLinear.name} {
+                        /* position: initial; */
+                        /* width: 100%; */
+                        height: auto;
+                        bottom: 0;
+                        top: unset;
+                        background: none;
+                    }
+                }
+            }
+        }
+        &:not(.icon-view) {
+            min-width: 684px;
+        }
+    `;
+  const AttachmentRoot = css`
+        border: 1px solid ${color.line.normal};
+        display: block;
+        position: relative;
+        flex-wrap: wrap;
+        min-height: 165px;
+        flex-direction: column;
+        padding-bottom: 20px;
+        justify-content: start;
+        background-color: ${color.system.white};
+        border-radius: 4px;
+        &:hover:not(.disabled) {
+            .css-${AttachmentImageIcon.name} {
+                cursor: pointer;
+            }
+        }
+        .css-${Attached.name} {
+            &:not(.disabled) {
+                .css-${AttachedItem.name} {
+                    &:hover {
+                        background-color: ${color.fill.hover};
+                        .css-${AttachedLinear.name} {
+                            background-color: ${color.fill.hover};
+                        }
+                    }
+                    &:active {
+                        background-color: ${color.fill.pressed};
+                        .css-${AttachedLinear.name} {
+                            background-color: ${color.fill.pressed};
+                        }
+                    }
+                    &.chosen {
+                        background-color: ${color.fill.focus};
+                        .css-${AttachedItemInfo.name},
+                        .css-${AttachedItemOwner.name} {
+                            background-color: ${color.fill.focus};
+                        }
+                    }
+                }
+            }
+        }
+        &.disabled {
+            .css-${AttachedItem.name} {
+                pointer-events: none;
+            }
+        }
+        @media (max-width: 716px) {
+            .css-${Attached.name}:not(.icon-view) {
+                min-width: 575px;
+            }
+            .css-${AttachedItemInfo.name} {
+                max-width: calc(40% - 10px);
+            }
+        }
+    `; // End style
+  // Start handler
+
+  const onShowSortPopover = () => {
+    setPopover(true);
+  };
+
+  const onSortElement = (e, type) => {
+    let multi = 1;
+    const currentActive = popoverRef.current.querySelector('.DGN-Active');
+
+    if (currentActive) {
+      if (e.currentTarget.classList.contains('DGN-Active')) {
+        if (e.currentTarget.classList.contains('DGN-Decrease')) {
+          e.currentTarget.classList.remove('DGN-Decrease');
+        } else {
+          multi = -1;
+          e.currentTarget.classList.add('DGN-Decrease');
+        }
+      } else {
+        currentActive.classList.remove('DGN-Decrease');
+        currentActive.classList.remove('DGN-Active');
+      }
+    }
+
+    e.currentTarget.classList.add('DGN-Active');
+    const attachedList = Array.from(attachedRef.current.querySelectorAll('.attachment-row'));
+    attachedList.sort((a, b) => {
+      let textA = a.querySelector('.' + (type === 'filesize' ? 'filename' : type)).textContent;
+      let textB = b.querySelector('.' + (type === 'filesize' ? 'filename' : type)).textContent;
+
+      if (type === 'datetime') {
+        textA = textA.replace(/.{10}/, text => moment(text, 'DD/MM/YYYY').format('YYYY/MM/DD'));
+        textB = textB.replace(/.{10}/, text => moment(text, 'DD/MM/YYYY').format('YYYY/MM/DD'));
+      } else if (type === 'filesize') {
+        const objA = attached.find(attach => attach.FileName === textA);
+        const objB = attached.find(attach => attach.FileName === textB);
+        textA = (objA.size || objA.FileSize).toString();
+        textB = (objB.size || objB.FileSize).toString();
+      }
+
+      return multi * textA.localeCompare(textB, 'en', {
+        numeric: type === 'filesize'
+      });
+    });
+    attached.sort((a, b) => {
+      let valueA, valueB;
+
+      if (type === 'filesize' || type === 'datetime') {
+        if (type === 'filesize') {
+          valueA = a.size || a.FileSize;
+          valueB = b.size || b.FileSize;
+        } else {
+          valueA = new Date(a.CreateDate).getTime();
+          valueB = new Date(b.CreateDate).getTime();
+        }
+      } else if (type === 'filetype') {
+        // filetype
+        valueA = getType(a);
+        valueB = getType(b);
+      } else {
+        valueA = a[type === 'filename' ? 'FileName' : 'UserName'] || ownerName;
+        valueB = b[type === 'filename' ? 'FileName' : 'UserName'] || ownerName;
+      }
+
+      return multi * valueA.toString().localeCompare(valueB.toString(), 'en', {
+        numeric: type === 'filesize' || type === 'datetime'
+      });
+    });
+    attachedList.forEach(el => {
+      attachedRef.current.appendChild(el);
+    });
+  };
+
+  const onChangeViewAttachType = (e, viewAttachType2) => {
+    const type = viewAttachType2 || viewAttachTypeRef.current.getAttribute('dataviewtype');
+
+    if (type === 'detail') {
+      viewAttachTypeRef.current.setAttribute('dataviewtype', 'icon');
+      viewAttachTypeRef.current.innerHTML = icons['icon'];
+      attachedRef.current.classList.add('icon-view');
+    } else {
+      viewAttachTypeRef.current.setAttribute('dataviewtype', 'detail');
+      viewAttachTypeRef.current.innerHTML = icons['detail'];
+      attachedRef.current.classList.remove('icon-view');
+    }
+  };
+
+  const afterChangeFile = (length = 0) => {
+    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) {
+      if (length > 1) {
+        sortIconRef.current.style.display = null;
+      } else {
+        sortIconRef.current.style.display = 'none';
+      }
+    }
+  };
+
+  const setError = (errorList, type) => {
+    if (errorList[type]) {
+      errorList[type]++;
+    } else {
+      errorList[type] = 1;
+    }
+  };
+
+  const notifyError = errorList => {
+    const errorInfoIcon = attachTextRef.current.parentNode.childNodes[1];
+
+    if (JSON.stringify(errorList) !== '{}') {
+      if (!errorInfoIcon.style.opacity) {
+        errorInfoIcon.style.opacity = 1;
+        errorInfoIcon.style.display = 'flex';
+      } else if (errorInfoIcon.style.color === 'rgb(0, 149, 255)') {
+        errorInfoIcon.style.color = danger5;
+      }
+
+      if (onUploadError) {
+        onUploadError(errorList);
+      }
+
+      Object.keys(errorList).forEach(key => {
+        const quantity = `${errorList[key]} file${errorList[key] > 1 ? 's' : ''}`;
+        const error = uploadErrorInfo[key] ? `${uploadErrorInfo[key]} (${quantity})` : quantity + errorDefault[key];
+        const el = document.createElement('li');
+        el.innerHTML = error;
+        attachTextRef.current.parentNode.querySelector('ul').insertAdjacentElement('afterBegin', el);
+      });
+    } else if (errorInfoIcon.style.opacity === '1') {
+      errorInfoIcon.style.color = info5;
+    }
+  };
+
+  const onChangeFiles = async e => {
+    if (readOnly || disabled) return;
+
+    if (e.target && e.target.files && e.target.files.length) {
+      let files = e.target.files;
+      const errorList = {};
+      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) {
+            setError(errorList, 'maxFile');
+          } else if (files[i].size > maxSize) {
+            setError(errorList, 'maxSize');
+          } else if (!checkAcceptFileType(files[i])) {
+            setError(errorList, 'fileType');
+          } else {
+            setError(errorList, 'existingFile');
+          }
+
+          files = removeFileOutInputFiles(i, true);
+          i--;
+        }
+
+        ;
+      }
+
+      notifyError(errorList);
+      const length = files.length;
+
+      if (!lengthAttached && !length) {
+        afterChangeFile();
+        return;
+      }
+
+      afterChangeFile(lengthAttached + length);
+
+      if (multiple || inputProps && inputProps.multiple) {
+        for (let i = 0; i < length; i++) {
+          // if (files[i].size > maxSize) continue;
+          addNewElement(files[i], lengthAttached);
+        }
+
+        for (let i = 0; i < length; i++) {
+          // if (files[i].size > maxSize) continue;
+          files[i].URL = await onProgressing(files[i]);
+          files[i].FileName = files[i].name;
+        }
+      } else if (length) {
+        attachedRef.current.innerHTML = null;
+        files[0].FileName = files[0].name;
+        addNewElement(files[0], lengthAttached);
+        files[0].URL = await onProgressing(files[0]);
+      }
+
+      insertAttached(files);
+      if (onChange) onChange({
+        element: e.target,
+        attached,
+        oldAttached,
+        newAttached: files,
+        allNewAttached: allNewAttached.getAll('files')
+      });
+    } else if (!attached.length) {
+      afterChangeFile();
+    }
+  };
+
+  const onProgressing = file => {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      let url;
+      reader.readAsDataURL(file);
+
+      reader.onload = e => {
+        url = e.target.result;
+      };
+
+      reader.onloadstart = () => {
+        // console.log(attachedRef.current.querySelector(`.css-${AttachedLinear.name}-attached`).parentNode.parentNode.querySelector('.filesize').offsetWidth);
+        attachedRef.current.querySelector(`.css-${AttachedLinear.name}-attached`).childNodes[0].style.width = '0%';
+      };
+
+      reader.onprogress = e => {
+        attachedRef.current.querySelector(`.css-${AttachedLinear.name}-attached`).childNodes[0].style.width = e.loaded / e.total * 100 + '%';
+      };
+
+      reader.onloadend = () => {
+        setTimeout(() => {
+          attachedRef.current.querySelector(`.css-${AttachedLinear.name}-attached`).parentNode.remove();
+          resolve(url);
+        }, 200);
+      };
+
+      reader.onerror = () => {
+        console.log('Upload file fail');
+        reject(false);
+      };
+    });
+  };
+
+  const addNewElement = (file, lengthAttached) => {
+    const newAttach = getItemDetailHTML(file, lengthAttached + 1);
+    attached.push(file);
+    const newElement = document.createElement('div');
+    newElement.className = 'attachment-row';
+    ReactDOM.render(newAttach, attachedRef.current.appendChild(newElement));
+  };
+
+  const getType = data => {
+    if (data.type !== undefined) {
+      var _type$match;
+
+      const pattern = /word|sheet|presentation|pdf|image|compressed/i;
+      let type = data.type;
+
+      if (!type) {
+        if (/rar/.test(data.name)) {
+          type = 'compressed';
+        }
+      }
+
+      return ((_type$match = type.match(pattern)) === null || _type$match === void 0 ? void 0 : _type$match[0]) || 'default';
+    } else {
+      var _data$FileName;
+
+      const FileExt = (_data$FileName = data.FileName) === null || _data$FileName === void 0 ? void 0 : _data$FileName.slice(data.FileName.lastIndexOf('.'));
+      return getFileType(FileExt, 'default');
+    }
+  };
+
+  const getItemDetailHTML = (data, i) => {
+    const date = new Date();
+    data.CreateDate = date.toISOString();
+    const fileType = getType(data);
+    return jsx("div", {
+      css: AttachedItem,
+      key: i,
+      onClick: e => onChooseItem(e),
+      onDoubleClick: e => onView(e.currentTarget.parentNode)
+    }, jsx("span", {
+      css: AttachedItemInfo
+    }, jsx("span", {
+      css: AttachedItemInfoIcon,
+      className: 'new-file'
+    }, icons[fileType], jsx("span", {
+      className: 'filetype',
+      style: {
+        display: 'none'
+      }
+    }, fileType)), jsx("span", {
+      css: AttachedItemInfoName,
+      className: 'filename'
+    }, data.name)), jsx("span", {
+      css: AttachedItemOwner
+    }, jsx("span", {
+      className: 'detail-info'
+    }, jsx("span", {
+      className: 'username'
+    }, ownerName), jsx("span", {
+      className: 'datetime'
+    }, getDateTime(date)), jsx("span", {
+      className: 'filesize'
+    }, calculateSize(data.size))), jsx("span", {
+      css: AttachedLinear
+    }, jsx(LinearProgress, {
+      className: `css-${AttachedLinear.name}-attached`,
+      determinate: true,
+      percent: 0
+    }))));
+  };
+
+  const getItemHTMLFromData = (data, i) => {
+    const date = new Date(data.CreateDate);
+    const type = getType(data);
+    return jsx("div", {
+      css: AttachedItem,
+      key: i,
+      onClick: e => onChooseItem(e),
+      onDoubleClick: e => onView(e.currentTarget.parentNode, data.AttachmentID)
+    }, jsx("span", {
+      css: AttachedItemInfo
+    }, jsx("span", {
+      css: AttachedItemInfoIcon,
+      className: data.lastModifiedDate ? 'new-file' : ''
+    }, icons[type], jsx("span", {
+      className: 'filetype',
+      style: {
+        display: 'none'
+      }
+    }, type)), jsx("span", {
+      css: AttachedItemInfoName,
+      className: 'filename'
+    }, data.FileName)), jsx("span", {
+      css: AttachedItemOwner
+    }, jsx("span", {
+      className: 'detail-info'
+    }, jsx("span", {
+      className: 'username'
+    }, data.UserName || (data.lastModifiedDate ? ownerName : '')), jsx("span", {
+      className: 'datetime'
+    }, getDateTime(date)), jsx("span", {
+      className: 'filesize'
+    }, calculateSize(data.FileSize || data.size)))));
+  };
+
+  const getDateTime = date => {
+    if (String(date) === 'Invalid Date') return 'unknown'; // const d = ('0' + date.getDate()).slice(-2);
+    // const m = ('0' + (date.getMonth() + 1)).slice(-2);
+    // const y = date.getFullYear();
+    // const t = date.toTimeString().slice(0, 8);
+
+    return jsx(Fragment, null, moment(date).format('DD/MM/YYYY, HH:mm:ss'), " ", jsx("span", {
+      style: {
+        display: 'none'
+      }
+    }, date.getMilliseconds()));
+  };
+
+  const calculateSize = size => {
+    if (!size && size !== 0) return 'unknown';
+    let totalSize = '';
+    let unitSizeName = '';
+
+    if (divideSize) {
+      totalSize = size / divideSize;
+      unitSizeName = unitSize.toUpperCase();
+
+      while (totalSize < 0.01 && unitSizeName !== 'B') {
+        [unitSizeName, totalSize] = getNewUnitSize(unitSizeName, totalSize, 1);
+      }
+    } else {
+      totalSize = size;
+      unitSizeName = 'B';
+
+      while (totalSize > 1024 && unitSizeName !== 'TB') {
+        [unitSizeName, totalSize] = getNewUnitSize(unitSizeName, totalSize, -1);
+      }
+    }
+
+    if (totalSize < 1000) {
+      totalSize = Math.round(totalSize * 100) / 100;
+    } else {
+      totalSize = Math.round(totalSize);
+    }
+
+    return totalSize + ' ' + unitSizeName;
+  };
+
+  const getNewUnitSize = (sizeName, totalSize, num) => {
+    if (sizeName === 'B' && num === 1 || sizeName === 'TB' && num === -1) return [sizeName, totalSize];
+    const arraySize = ['TB', 'GB', 'MB', 'KB', 'B'];
+    const index = arraySize.indexOf(sizeName);
+    const newTotalSize = totalSize * Math.pow(1024, num); // newTotalSize = Math.round(newTotalSize*100)/100;
+
+    return [arraySize[index + num], newTotalSize];
+  };
+
+  const getBit = (size, unit) => {
+    switch (true) {
+      case /^B$/i.test(unit):
+        return size * 1;
+
+      case /KB/i.test(unit):
+        return size * 1024;
+
+      case /MB/i.test(unit):
+        return size * 1024 ** 2;
+
+      case /GB/i.test(unit):
+        return size * 1024 ** 3;
+
+      case /TB/i.test(unit):
+        return size * 1024 ** 4;
+
+      default:
+        return size * 1024 * 1024;
+    }
+  };
+
+  const onShowPopup = () => {
+    setPopup(true);
+  };
+
+  const onClosePopup = () => {
+    setPopup(false);
+
+    if (isDeleteAll.current) {
+      isDeleteAll.current = false;
+      chosenItems.length = 0;
+      removeActiveChosenItem();
+    }
+  };
+
+  const onDownloadMultiple = () => {
+    const index = chosenItems[0];
+
+    if (index < oldAttached.length) {
+      onDownload(oldAttached[index].URL, oldAttached[index].FileName);
+    } else {
+      const files = allNewAttached.getAll('files');
+      onDownload(files[index - oldAttached.length].URL, files[index - oldAttached.length].name);
+    }
+  };
+
+  const onRemoveMultiple = () => {
+    const nodeList = attachedRef.current.querySelectorAll('.chosen');
+    const removedAttached = [];
+    nodeList.forEach(itemEl => {
+      const parent = itemEl.parentNode;
+      const index = Array.from(attachedRef.current.children).indexOf(parent);
+      const deletedFile = attached.splice(index, 1)[0];
+
+      if (Object.prototype.toString.call(deletedFile) === '[object File]') {
+        removeFileOutInputFiles(allNewAttached.getAll('files').findIndex(attach => attach.FileName === deletedFile.FileName && attach.CreateDate === deletedFile.CreateDate));
+      } else {
+        oldAttached.splice(oldAttached.findIndex(attach => attach.FileName === deletedFile.FileName && attach.CreateDate === deletedFile.CreateDate), 1);
+      }
+
+      removedAttached.push(deletedFile);
+      parent.remove();
+    });
+
+    if (attached.length < 2) {
+      afterChangeFile(attached.length);
+    }
+
+    if (onChange) onChange({
+      element: nodeList,
+      attached,
+      removedAttached,
+      oldAttached,
+      allNewAttached: allNewAttached.getAll('files')
+    });
+    !!onRemoveItem && onRemoveItem(removedAttached);
+    onClosePopup();
+  };
+
+  const clearAllAttached = () => {
+    const allAttachEl = attachedRef.current.querySelectorAll('.attachment-row');
+
+    if (allAttachEl && allAttachEl.length) {
+      allAttachEl.forEach(attachEl => attachEl.firstChild.classList.add('chosen'));
+      isDeleteAll.current = true;
+      onShowPopup();
+    }
+  };
+
+  const onGetViewItem = (i = 0) => {
+    const index = chosenItems[i];
+    const node = attachedRef.current.childNodes[index];
+    const AttachmentID = attached[index].AttachmentID;
+    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');
+      //     })
+      // }
+    }
+
+    const index = Array.from(attachedRef.current.children).indexOf(node);
+    if (onViewItem) onViewItem(AttachmentID, index);else {
+      setOpen(true);
+    }
+    setTimeout(() => {
+      prevent = false;
+    }, 110);
+  };
+
+  const onDownload = (url, name) => {
+    if (!url) return;
+    fetch(url).then(resp => resp.blob()).then(blob => {
+      const url = window.URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.style.display = 'none';
+      a.href = url; // the filename you want
+
+      a.download = name;
+      document.body.appendChild(a);
+      a.click();
+      window.URL.revokeObjectURL(url);
+    }).catch(() => alert('File not found'));
+    if (onDownloadItem) onDownloadItem(url);
+  }; // const onRemove = (e, AttachmentID='') => {
+  //     const parent = e.currentTarget.parentNode.parentNode.parentNode;
+  //     const index = Array.from(attachedRef.current.children).indexOf(parent);
+  //     attached.splice(index, 1);
+  //     if (index < oldAttached.length) {
+  //         oldAttached.splice(index, 1);
+  //     } else {
+  //         removeFileOutInputFiles(index - oldAttached.length);
+  //     }
+  //     parent.remove();
+  //     if (!attached.length) {
+  //         afterChangeFile();
+  //     }
+  //     if (onRemoveItem) onRemoveItem({index, element: parent, oldAttached, allNewAttached: allNewAttached.getAll('files'), AttachmentID});
+  // }
+
+
+  const removeFileOutInputFiles = (index, keeping) => {
+    const dt = new DataTransfer();
+
+    for (let file of attachmentInputRef.current.files) {
+      if (file !== attachmentInputRef.current.files[index]) {
+        dt.items.add(file);
+      }
+    }
+
+    if (!keeping) {
+      const files = allNewAttached.getAll('files');
+      files.splice(index, 1);
+      allNewAttached.delete('files');
+      files.forEach(file => allNewAttached.append('files', file));
+    }
+
+    attachmentInputRef.current.files = dt.files;
+    return dt.files;
+  };
+
+  const insertAttached = files => {
+    if (multiple || inputProps && inputProps.multiple) {
+      for (let file of files) {
+        allNewAttached.append('files', file);
+      }
+    } else if (files[0]) {
+      allNewAttached.delete('files');
+      allNewAttached.append('files', files[0]);
+    } // attachmentInputRef.current.files = allNewAttached.getAll('files');
+
+  };
+
+  const checkExistingFile = newFile => {
+    const files = allNewAttached.getAll('files');
+
+    if (files && files.length) {
+      const length = files.length;
+
+      for (let i = 0; i < length; i++) {
+        if (parseStringify(newFile) === parseStringify(files[i])) return true;
+      }
+    }
+
+    return false;
+  };
+
+  const checkAcceptFileType = newFile => {
+    if (!accept || !accept.length) return true;
+    const type = typeof accept === 'string' ? accept : accept.join('-');
+
+    if (typeof accept === 'string') {
+      const acceptType = type.replace('/*', '');
+      return newFile.type.includes(acceptType);
+    }
+
+    const extFile = newFile.name.slice(newFile.name.lastIndexOf('.') + 1);
+    return accept.join('-').includes(extFile);
+  };
+
+  const onChooseItem = e => {
+    const ctrlKey = e.ctrlKey;
+    const shiftKey = e.shiftKey;
+    const itemEl = e.currentTarget;
+    timer = setTimeout(() => {
+      if (!prevent) {
+        const index = Array.from(attachedRef.current.children).indexOf(itemEl.parentNode);
+
+        if (shiftKey && !ctrlKey) {
+          let startIndex = chosenItems[chosenItems.length - 1] || 0;
+          let endIndex = index;
+
+          if (startIndex > endIndex) {
+            endIndex = startIndex;
+            startIndex = index;
+          }
+
+          chosenItems.length = 0;
+          attachedRef.current.querySelectorAll(`.css-${AttachedItem.name}`).forEach((itemEl, indexEl) => {
+            if (startIndex <= indexEl && indexEl <= endIndex) {
+              if (!itemEl.classList.contains('chosen')) {
+                itemEl.classList.add('chosen');
+              }
+
+              chosenItems.push(indexEl);
+            } else if (itemEl.classList.contains('chosen')) {
+              itemEl.classList.remove('chosen');
+            }
+          });
+
+          if (chosenItems[chosenItems.length - 1] !== index) {
+            chosenItems.shift();
+            chosenItems.push(index);
+          }
+        } else if (!ctrlKey) {
+          chosenItems.length = 0;
+          removeActiveChosenItem();
+          chosenItems.push(index);
+          itemEl.classList.add('chosen');
+        } else if (itemEl.classList.contains('chosen')) {
+          chosenItems.splice(chosenItems.indexOf(index));
+          itemEl.classList.remove('chosen');
+
+          if (!chosenItems.length) {
+            setTimeout(() => {
+              removeAllChosenItems();
+            }, 0);
+          }
+        } else {
+          chosenItems.push(index);
+          itemEl.classList.add('chosen');
+        } // Add event listener click out of item
+
+
+        if (!existClickOutOfItem) {
+          existClickOutOfItem = true;
+          attachmentHandleIconRef.current.style.display = 'block';
+          document.addEventListener('keydown', onKeyDown);
+          document.addEventListener('click', clickOutOfItem);
+        }
+
+        checkChosenMultiple();
+      }
+
+      prevent = false;
+    }, 100);
+  };
+
+  const removeActiveChosenItem = () => {
+    attachedRef.current.querySelectorAll('.chosen').forEach(itemEl => {
+      itemEl.classList.remove('chosen');
+    });
+  };
+
+  const checkChosenMultiple = () => {
+    const actionIcons = attachmentHandleIconRef.current.childNodes;
+
+    if (chosenItems.length > 1 && actionIcons[0].style.display !== 'none') {
+      actionIcons[0].style.display = 'none';
+      actionIcons[1].style.display = 'none';
+    } else if (chosenItems.length === 1 && actionIcons[0].style.display === 'none') {
+      actionIcons[0].style.display = null;
+      actionIcons[1].style.display = null;
+    }
+  };
+
+  const onKeyDown = event => {
+    const key = event.key;
+
+    if (key === "Delete") {
+      // Press Delete key to delete item(s)
+      onShowPopup();
+    } else if (key === 'Enter') {
+      if (popupRef.current.style.display !== 'flex') {
+        onGetViewItem(chosenItems.length - 1);
+      }
+    } else if (/a/i.test(key) && event.ctrlKey) {
+      chosenItems.length = 0;
+      const allAttachEl = attachedRef.current.querySelectorAll('.attachment-row');
+
+      if (allAttachEl && allAttachEl.length) {
+        allAttachEl.forEach((attachEl, index) => chosenItems.push(index) & attachEl.firstChild.classList.add('chosen'));
+      }
+
+      event.preventDefault();
+      return false;
+    } else if (/Arrow/.test(key)) {
+      // Press Arrow key to select another item
+      event.preventDefault();
+      const itemsNode = attachedRef.current.querySelectorAll('.attachment-row');
+      const chosenItemsNode = Array.from(itemsNode).filter(el => el.firstChild.classList.contains('chosen'));
+      const length = itemsNode.length;
+      let index;
+
+      if (key === "ArrowDown" || key === "ArrowRight") {
+        for (let id = length - 1; id >= 0; id--) {
+          if (Array.from(itemsNode)[id].firstChild.classList.contains('chosen')) {
+            index = id;
+            break;
+          }
+        }
+
+        if (index === length - 1) {
+          if (chosenItemsNode.length !== 1 && !event.shiftKey) {
+            chosenItemsNode.forEach((node, i) => {
+              if (i !== index) {
+                node.firstChild.classList.remove('chosen');
+              }
+            });
+            chosenItems.length = 0;
+            chosenItems.push(index);
+            Array.from(itemsNode)[index].scrollIntoView({
+              block: 'center',
+              behavior: "smooth"
+            });
+          }
+
+          return;
+        }
+
+        Array.from(itemsNode)[index + 1].scrollIntoView({
+          block: 'center',
+          behavior: "smooth"
+        });
+
+        if (!event.shiftKey) {
+          itemsNode.forEach(node => {
+            node.firstChild.classList.remove('chosen');
+          });
+        }
+
+        itemsNode[index + 1].firstChild.classList.add('chosen');
+        chosenItems.push(index + 1);
+      } else if (key === "ArrowUp" || key === "ArrowLeft") {
+        index = Array.from(itemsNode).findIndex(el => el.firstChild.classList.contains('chosen'));
+
+        if (index === 0) {
+          if (chosenItemsNode.length !== 1 && !event.shiftKey) {
+            chosenItemsNode.forEach((node, i) => {
+              if (i !== index) {
+                node.firstChild.classList.remove('chosen');
+              }
+            });
+            chosenItems.length = 0;
+            chosenItems.push(index);
+            Array.from(itemsNode)[index].scrollIntoView({
+              block: 'center',
+              behavior: "smooth"
+            });
+          }
+
+          return;
+        }
+
+        Array.from(itemsNode)[index - 1].scrollIntoView({
+          block: 'center',
+          behavior: "smooth"
+        });
+
+        if (!event.shiftKey) {
+          chosenItemsNode.forEach(node => {
+            node.firstChild.classList.remove('chosen');
+          });
+        }
+
+        itemsNode[index - 1].firstChild.classList.add('chosen');
+        chosenItems.push(index - 1);
+      }
+
+      if (!event.shiftKey) {
+        chosenItems.length = 1;
+      }
+    }
+  };
+
+  const clickOutOfItem = e => {
+    var _popupRef$current, _popupRef$current$sty;
+
+    if (!attachedRef || !attachedRef.current) {
+      document.removeEventListener('keydown', onKeyDown);
+      document.removeEventListener('click', clickOutOfItem);
+      return;
+    }
+
+    if (!(attachedRef.current.contains(e.target) && attachedRef.current !== e.target) && !attachmentHandleIconRef.current.contains(e.target) && !isDeleteAll.current && (((_popupRef$current = popupRef.current) === null || _popupRef$current === void 0 ? void 0 : (_popupRef$current$sty = _popupRef$current.style) === null || _popupRef$current$sty === void 0 ? void 0 : _popupRef$current$sty.display) !== 'flex' || popupRef.current.querySelector('button.filled.info').contains(e.target))) {
+      removeAllChosenItems();
+      removeActiveChosenItem();
+    }
+  };
+
+  const removeAllChosenItems = () => {
+    chosenItems.length = 0;
+    existClickOutOfItem = false;
+    attachmentHandleIconRef.current.style.display = null;
+    document.removeEventListener('keydown', onKeyDown);
+    document.removeEventListener('click', clickOutOfItem);
+  };
+
+  const parseStringify = fileInfo => JSON.stringify({
+    lastModified: fileInfo.lastModified,
+    lastModifiedDate: fileInfo.lastModifiedDate,
+    name: fileInfo.name,
+    size: fileInfo.size,
+    type: fileInfo.type,
+    webkitRelativePath: fileInfo.webkitRelativePath
+  });
+
+  useEffect(() => {
+    if (refs) refs(ref);
+
+    if (attached.length) {
+      attached.length = 0;
+    }
+
+    return () => {
+      existClickOutOfItem = false;
+    };
+  }, []);
+  useEffect(() => {
+    attachTextRef.current.innerHTML = label + (required ? `<b style="color: ${theme.colors.danger}"> *</b>` : '');
+    let el = null;
+
+    if (error) {
+      attachTextRef.current.style.color = danger5;
+      ref.current.style.borderColor = errorStyle && errorStyle.borderColor || danger5;
+      el = document.createElement('p');
+      el.classList.add('attachment-error');
+      Object.assign(el.style, errorStyle);
+      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();
+      }
+    };
+  }, [required, error]);
+  useEffect(() => {
+    // viewAttachTypeRef.current.innerHTML = icons[viewType];
+    onChangeViewAttachType(null, viewType === 'icon' ? 'detail' : 'icon');
+  }, [viewType]);
+  useEffect(() => {
+    switch (true) {
+      case /^B$/i.test(unitSize):
+        divideSize = 1;
+        break;
+
+      case /KB/i.test(unitSize):
+        divideSize = 1024;
+        break;
+
+      case /MB/i.test(unitSize):
+        divideSize = 1024 ** 2;
+        break;
+
+      case /GB/i.test(unitSize):
+        divideSize = 1024 ** 3;
+        break;
+
+      case /TB/i.test(unitSize):
+        divideSize = 1024 ** 4;
+        break;
+
+      default:
+        divideSize = null;
+        break;
+    }
+
+    attachmentInputRef.current.addEventListener('change', onChangeFiles);
+    return () => {
+      attachmentInputRef.current && attachmentInputRef.current.removeEventListener('change', onChangeFiles);
+    };
+  }, [unitSize, onChange]);
+  useEffect(() => {
+    oldAttached.length = 0;
+
+    if (data) {
+      afterChangeFile(data.length); // Load files data was upload
+
+      const length = data.length;
+
+      for (let i = 0; i < length; i++) {
+        const newAttach = getItemHTMLFromData(data[i], i);
+
+        if (Object.prototype.toString.call(data[i]) === '[object File]') {
+          allNewAttached.append('files', data[i]);
+        } else {
+          oldAttached.push(data[i]);
+        }
+
+        attached.push(data[i]);
+        const newElement = document.createElement('div');
+        newElement.className = 'attachment-row';
+        ReactDOM.render(newAttach, attachedRef.current.appendChild(newElement));
+      }
+    }
+
+    return () => {
+      if (attachedRef.current) {
+        attachedRef.current.innerHTML = null;
+      }
+
+      oldAttached.length = 0;
+      attached.length = 0;
+      chosenItems.length = 0;
+      allNewAttached.delete('files');
+
+      if (attachmentInputRef.current) {
+        attachmentInputRef.current.value = '';
+      }
+    };
+  }, [data]);
+  useEffect(() => {
+    if (inputProps && Object.keys(inputProps).length) {
+      Object.keys(inputProps).forEach(name => {
+        if (typeof inputProps[name] === 'boolean') {
+          attachmentInputRef.current[name] = inputProps[name];
+        } else {
+          attachmentInputRef.current.setAttribute(name, inputProps[name]);
+        }
+      });
+      return () => {
+        if (attachmentInputRef.current) {
+          Object.keys(inputProps).forEach(name => {
+            if (typeof inputProps[name] === 'boolean') {
+              attachmentInputRef.current[name] = false;
+            } else {
+              attachmentInputRef.current.removeAttribute(name);
+            }
+          });
+        }
+      };
+    }
+  }, [inputProps]);
+  useEffect(() => {
+    if (disabled) {
+      ref.current.classList.add('disabled');
+    } else if (ref.current.classList.contains('disabled')) {
+      ref.current.classList.remove('disabled');
+    }
+
+    attachmentInputRef.current.disabled = disabled || inputProps && inputProps.disabled;
+  }, [disabled]);
+  useEffect(() => {
+    if (maxSizeProp) {
+      if (!isNaN(maxSizeProp)) {
+        maxSize = maxSizeProp * 1024 * 1024;
+      } else {
+        const numberSize = maxSizeProp.match(/\d+/g);
+        const unitMaxSize = maxSizeProp.match(/\D+/g);
+        maxSize = getBit(numberSize, unitMaxSize);
+      }
+    }
+
+    attachmentInputRef.current.multiple = multiple;
+
+    if (accept && typeof accept === 'string') {
+      attachmentInputRef.current.accept = `${accept}/*`.replace('/*/*', '/*');
+    }
+
+    attachmentInputRef.current.addEventListener('change', onChangeFiles);
+    return () => {
+      if (attachmentInputRef.current) {
+        attachmentInputRef.current.removeEventListener('change', onChangeFiles);
+        attachmentInputRef.current.accept = null;
+      }
+
+      maxSize = Infinity;
+    };
+  }, [maxFile, maxSizeProp, multiple, accept]);
+
+  const triggerClickInput = () => {
+    attachmentInputRef.current.click();
+  };
+
+  const onDragFileStart = () => {
+    attachmentInputRef.current.parentNode.style.display = 'block';
+  };
+
+  const onDropInput = () => {
+    attachmentInputRef.current.parentNode.style.display = null;
+  }; // End handler
+  // Start view
+
+
+  const AttachHeaderView = useMemo(() => jsx("div", {
+    css: AttachmentHeader
+  }, jsx("div", {
+    css: AttachmentInfo
+  }, jsx("p", {
+    css: AttachmentText,
+    ref: attachTextRef
+  }), jsx("span", null, jsx(Info, {
+    width: '18',
+    height: '18',
+    bgColor: 'currentColor'
+  }), jsx("span", null, " ", jsx("ul", null, " "), " "))), jsx("div", {
+    css: AttachmentHeaderIcon
+  }, jsx("div", {
+    css: attachmentHandleIcon,
+    ref: attachmentHandleIconRef
+  }, jsx("span", {
+    className: 'view',
+    onClick: () => onGetViewItem()
+  }, jsx(View, {
+    color: 'currentColor',
+    viewBox: true
+  })), jsx("span", {
+    className: 'download',
+    onClick: onDownloadMultiple
+  }, jsx(Download, {
+    color: 'currentColor',
+    viewBox: true
+  })), !readOnly && jsx("span", {
+    className: 'delete',
+    onClick: onShowPopup
+  }, jsx(Delete, {
+    color: 'currentColor',
+    viewBox: true
+  }))), jsx("div", {
+    css: AttachmentImage,
+    ref: attachmentImageRef
+  }, !readOnly && jsx("div", {
+    css: AttachmentImageCenter
+  }, jsx("div", {
+    css: AttachmentImageContent
+  }, jsx("span", {
+    css: AttachmentImageIcon,
+    ref: attachmentImageIconRef,
+    onClick: triggerClickInput
+  }, jsx(AttachmentIcon, {
+    viewBox: true,
+    color: 'currentColor'
+  })), jsx("span", {
+    css: AttachmentImageText
+  }, hintText || 'Kéo và thả tập tin vào đây')))), allowSort && jsx(Icon, {
+    name: 'Sort',
+    ref: sortIconRef,
+    viewBox: true,
+    style: {
+      padding: 0,
+      marginRight: 8,
+      display: 'none'
+    },
+    onClick: onShowSortPopover
+  }), jsx("div", {
+    css: ViewAttachType,
+    ref: viewAttachTypeRef,
+    onClick: onChangeViewAttachType,
+    dataviewtype: viewType
+  }))), [allowSort, readOnly]);
+  const AttachmentInputView = useMemo(() => jsx("div", {
+    css: AttachmentInput
+  }, jsx("input", _extends({}, inputProps, {
+    type: "file",
+    ref: attachmentInputRef,
+    title: "",
+    style: inputStyle,
+    onDrop: onDropInput,
+    onDragLeave: onDropInput
+  }))), [inputStyle]);
+  const AttachedView = useMemo(() => jsx(ScrollBar, {
+    style: {
+      marginRight: 5,
+      paddingTop: 0,
+      paddingBottom: 0,
+      paddingRight: 7,
+      overflowY: 'overlay'
+    }
+  }, jsx("div", {
+    css: Attached,
+    ref: attachedRef
+  })), []);
+  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,
+    ref: popupRef,
+    type: 'yes-no',
+    variant: 'warning',
+    title: deleteNotifyText,
+    fullScreen: true,
+    pressESCToClose: true,
+    autoFocusOKButton: true,
+    onClose: onClosePopup,
+    onConfirm: onRemoveMultiple,
+    onCancel: onClosePopup
+  }), [popup]);
+  const ModalView = useMemo(() => {
+    if (!chosenItems.length) return setOpen(false);
+    const index = chosenItems[0];
+    const data = attached[index]; // let data = oldAttached[index] || allNewAttached.getAll('files')[index-oldAttached.length];
+
+    return jsx(ModalSample, {
+      open: open,
+      title: data.FileName,
+      onClose: () => setOpen(false)
+    }, jsx(Slider, null, jsx(SliderItem, {
+      url: data.URL
+    })));
+  }, [open]); // End view
+
+  useImperativeHandle(reference, () => {
+    ref.current.oldAttached = oldAttached;
+    ref.current.allNewAttached = allNewAttached;
+    ref.current.attached = attached;
+    ref.current.clear = clearAllAttached;
+    return ref.current;
+  });
+  return jsx("div", _extends({}, props, {
+    css: AttachmentRoot,
+    className: ('DGN-UI-Attachment ' + className).trim(),
+    style: style,
+    ref: ref,
+    onDragEnter: onDragFileStart
+  }), AttachHeaderView, AttachmentInputView, AttachedView, PopoverView, PopupView, ModalView);
+}));
+Attachment.defaultProps = {
+  deleteNotifyText: getGlobal('deleteNotifyText'),
+  viewType: 'detail',
+  label: getGlobal('attachText'),
+  className: '',
+  allowSort: true,
+  multiple: true,
+  disabled: false,
+  readOnly: false,
+  maxFile: Infinity,
+  data: [],
+  uploadErrorInfo: {}
+};
+Attachment.propTypes = {
+  /** List attachment:<br />
+   * [{<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"AttachmentID": "ATT2U8O7YPTF1KSNCW3X",<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"URL": "https://apricot.diginet.com.vn/cdn-dev/file/8a07bee1eeff17a14eee.jpg?path=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJmaWxlUGF0aCI6Ii8yMDIwLzA4LzQ0YjNhYjQ4LTMwNGQtNDQ3NC05ZDk0LWNkNGVlMDQwOGNlMy5qcGciLCJmaWxlTmFtZSI6IjhhMDdiZWUxZWVmZjE3YTE0ZWVlLmpwZyIsImZpbGVTaXplIjoyNDg4MzcsImZpbGVUeXBlIjoiaW1hZ2UvanBlZyIsImlhdCI6MTU5ODI0NDMwMiwiZXhwIjo4Nzk5ODI0NDMwMn0.fow6O5fp2z3vieA9gom5RRwQ7xxwBx9_7X2Fe8T2YI0",<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"FileName": "8a07bee1eeff17a14eee.jpg",<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"FileSize": 248837,<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"KeyID": "W39OAD3YGLCWAQKV1D6PGEKNW4RLGVTZTUWLYEVFQ2QG8AOCXW",<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"CreateUserID": "LEMONADMIN",<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"CreateDate": "2020-08-24T11:54:04.307Z",<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"UserName": "Quản trị hệ thống"<br />
+   * }, ...]
+   */
+  data: PropTypes.array,
+
+  /** allow sort element on DOM if true */
+  allowSort: PropTypes.bool,
+
+  /** prevent all event if true */
+  disabled: PropTypes.bool,
+
+  /** prevent all event if true */
+  readOnly: PropTypes.bool,
+
+  /** At least one attachment is required */
+  required: PropTypes.bool,
+
+  /** allows to attach multiple files */
+  multiple: PropTypes.bool,
+
+  /** the type of images displayed want to see */
+  viewType: PropTypes.oneOf(['detail', 'icon']),
+
+  /** attach label to display in the upper left corner of attachment box */
+  label: PropTypes.string,
+
+  /** class of Attachment component */
+  className: PropTypes.string,
+
+  /** the name of the person who attached the file when uploading the file */
+  ownerName: PropTypes.string,
+
+  /** Suggested passage attached */
+  hintText: PropTypes.string,
+
+  /** text warning message when deleting files */
+  deleteNotifyText: PropTypes.string,
+
+  /** error of attachment */
+  error: PropTypes.string,
+
+  /** Allows what types of files to be attached */
+  accept: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
+
+  /** Maximum capacity allowed to attach */
+  maxSize: PropTypes.string,
+
+  /** Maximum quantity allowed to attach */
+  maxFile: PropTypes.number,
+
+  /** style inline of Attachment component */
+  style: PropTypes.object,
+
+  /** style inline of error in Attachment component */
+  errorStyle: PropTypes.object,
+
+  /** style inline of input in Attachment component */
+  inputStyle: PropTypes.object,
+
+  /** props of input in Attachment component */
+  inputProps: PropTypes.object,
+
+  /** errors show up when the file upload is corrupted */
+  uploadErrorInfo: PropTypes.object,
+
+  /** event when uploading file failed */
+  onUploadError: PropTypes.func,
+
+  /**
+   * event when removed file(s)<br/>
+   * return data: {<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;attached: [Files] (insist old and all new files )<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;allNewAttached: [Files]<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;oldAttached: [Files]<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;removedAttached: [Files]<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;element: [NodeList (just removed)]<br/>
+   * }
+   */
+  onRemove: PropTypes.func,
+
+  /** view attached event, if not it will use default */
+  onView: PropTypes.func,
+
+  /** download attached event, if not it will use default */
+  onDownload: PropTypes.func,
+
+  /** event when there is a change attached */
+  onChange: PropTypes.func,
+
+  /** any props else */
+  props: PropTypes.any
+};
+export default Attachment;