diginet-core-ui 1.3.34 → 1.3.35

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

@@ -162,450 +162,448 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const popoverRef = useRef(null);
   const isDeleteAll = useRef(false);
   const ViewAttachType = css`
-        cursor: pointer;
-        height: 24px;
-        color: ${rest};
-        &:hover {
-            color: ${active};
-        }
-    `;
+                cursor: pointer;
+                height: 24px;
+                color: ${rest};
+                &:hover {
+                    color: ${active};
+                }
+            `;
   const attachmentHandleIcon = css`
-        display: none;
-        height: 24px;
-        margin-right: 10px;
-        border-right: 1px solid ${normal};
-        span {
-            margin-right: 10px;
-            color: ${rest};
-            cursor: pointer;
-            &:hover {
-                color: ${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: ${danger};
-        }
-        span {
-            display: none;
-            color: ${danger};
-            margin: 10px;
-            cursor: help;
-            opacity: 0;
-            ${paragraph1};
-            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 ${danger};
-                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;
+                display: none;
+                height: 24px;
+                margin-right: 10px;
+                border-right: 1px solid ${normal};
+                span {
+                    margin-right: 10px;
+                    color: ${rest};
+                    cursor: pointer;
+                    &:hover {
+                        color: ${active};
+                    }
                 }
-                &::-webkit-scrollbar-thumb{
-                        border-radius: 10px;
-                        mix-blend-mode: normal;
-                        background-color: ${danger} !important;
-                        background-clip: content-box;
+            `;
+  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;
                 }
-                ul {
-                    display: contents;
-                    li {
-                        list-style: none;
-                    }
+            `;
+  const AttachmentInfo = css`
+                display: flex;
+                position: relative;
+                align-items: center;
+                margin: 0;
+                & + p.attachment-error {
+                    color: ${danger};
                 }
-            }
-            &:hover {
                 span {
-                    transform: scaleX(1) translateY(-50%);
-                    transition-delay: 0s;
+                    display: none;
+                    color: ${danger};
+                    margin: 10px;
+                    cursor: help;
+                    opacity: 0;
+                    ${paragraph1};
+                    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 ${danger};
+                        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: ${danger} !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`
-        ${heading5};
-        text-transform: uppercase;
-        color: ${sub};
-        user-select: none;
-    `;
+                ${heading5};
+                text-transform: uppercase;
+                color: ${sub};
+                user-select: none;
+            `;
   const AttachmentHeaderIcon = css`
-        display: flex;
-        align-items: center;
-    `;
+                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);
-        }
-    `;
+                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: ${rest};
-        }
-        &:hover {
-            border-color: ${lineHover};
-            svg {
-                color: ${active};
-            }
-        }
-    `;
-  const AttachmentImageText = css`
-        display: none;
-        ${paragraph3};
-        color: ${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} {
+                width: 100%;
+                height: 100%;
                 display: flex;
-                align-items: center;
                 justify-content: center;
-                width: 64px;
-                height: 64px;
-                margin: 0 auto 8px auto;
-                border: 1px dashed ${normal};
-                border-radius: 50%;
+                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 {
-                    width: 40px;
-                    height: 40px;
+                    color: ${rest};
                 }
                 &:hover {
                     border-color: ${lineHover};
-                    background-color: ${fillHover};
+                    svg {
+                        color: ${active};
+                    }
                 }
-            }
-        }
-    `;
+            `;
+  const AttachmentImageText = css`
+                display: none;
+                ${paragraph3};
+                color: ${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 ${normal};
+                        border-radius: 50%;
+                        svg {
+                            width: 40px;
+                            height: 40px;
+                        }
+                        &:hover {
+                            border-color: ${lineHover};
+                            background-color: ${fillHover};
+                        }
+                    }
+                }
+            `;
   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);
-    `;
+                /* 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: ${success};
-        }
-    `;
+                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: ${success};
+                }
+            `;
   const AttachedItemInfoName = css`
-        ${paragraph1};
-        color: ${dark};
-        margin-left: 12px;
-        padding-top: 1px;
-        cursor: pointer;
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        box-sizing: content-box;
-    `;
+                ${paragraph1};
+                color: ${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;
-        ${paragraph2};
-        color: ${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;
-            }
-        }
-    `;
+                display: flex;
+                position: relative;
+                /* max-width: 50%; */
+                height: 100%;
+                align-items: center;
+                ${paragraph2};
+                color: ${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;
-    `;
+                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;
-    `;
+                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;
+                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;
+                z-index: 1;
+                /* transition: margin 0.5s ease; */
                 overflow-y: visible;
-            }
-            .css-${AttachedItem.name} {
-                display: block;
-                height: 80px;
-                width: 80px;
-                padding: 0;
-                position: initial;
-                .css-${AttachedItemInfo.name} {
-                    position: relative;
+                .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;
-                    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;
+                    max-width: calc(100% - 26px);
+                    .attachment-row {
+                        position: relative;
+                        margin-left: 16px;
+                        overflow-y: visible;
+                    }
+                    .css-${AttachedItem.name} {
                         display: block;
-                        &.new-file:after {
-                            top: -1px;
-                            left: -7px;
-                            width: 8px;
-                            height: 8px;
+                        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} {
+                                ${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;
+                            ${paragraph3};
+                            .detail-info {
+                                display: none;
+                            }
+                            .css-${AttachedLinear.name} {
+                                /* position: initial; */
+                                /* width: 100%; */
+                                height: auto;
+                                bottom: 0;
+                                top: unset;
+                                background: none;
+                            }
                         }
-                    }
-                    .css-${AttachedItemInfoName.name} {
-                        ${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;
-                    ${paragraph3};
-                    .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;
                 }
-            }
-        }
-        &:not(.icon-view) {
-            min-width: 684px;
-        }
-    `;
+            `;
   const AttachmentRoot = css`
-        border: 1px solid ${normal};
-        display: block;
-        position: relative;
-        flex-wrap: wrap;
-        min-height: 165px;
-        flex-direction: column;
-        padding-bottom: 20px;
-        justify-content: start;
-        background-color: ${white};
-        border-radius: 4px;
-        &:hover:not(.disabled) {
-            .css-${AttachmentImageIcon.name} {
-                cursor: pointer;
-            }
-        }
-        .css-${Attached.name} {
-            &:not(.disabled) {
-                .css-${AttachedItem.name} {
-                    &:hover {
-                        background-color: ${fillHover};
-                        .css-${AttachedLinear.name} {
-                            background-color: ${fillHover};
-                        }
+                border: 1px solid ${normal};
+                display: block;
+                position: relative;
+                flex-wrap: wrap;
+                min-height: 165px;
+                flex-direction: column;
+                padding-bottom: 20px;
+                justify-content: start;
+                background-color: ${white};
+                border-radius: 4px;
+                &:hover:not(.disabled) {
+                    .css-${AttachmentImageIcon.name} {
+                        cursor: pointer;
                     }
-                    &:active {
-                        background-color: ${pressed};
-                        .css-${AttachedLinear.name} {
-                            background-color: ${pressed};
+                }
+                .css-${Attached.name} {
+                    &:not(.disabled) {
+                        .css-${AttachedItem.name} {
+                            &:hover {
+                                background-color: ${fillHover};
+                                .css-${AttachedLinear.name} {
+                                    background-color: ${fillHover};
+                                }
+                            }
+                            &:active {
+                                background-color: ${pressed};
+                                .css-${AttachedLinear.name} {
+                                    background-color: ${pressed};
+                                }
+                            }
+                            &.chosen {
+                                background-color: ${focus};
+                                .css-${AttachedItemInfo.name}, .css-${AttachedItemOwner.name} {
+                                    background-color: ${focus};
+                                }
+                            }
                         }
                     }
-                    &.chosen {
-                        background-color: ${focus};
-                        .css-${AttachedItemInfo.name},
-                        .css-${AttachedItemOwner.name} {
-                            background-color: ${focus};
-                        }
+                }
+                &.disabled {
+                    .css-${AttachedItem.name} {
+                        pointer-events: none;
                     }
                 }
-            }
-        }
-        &.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
+                @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 = () => {
@@ -767,8 +765,6 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
           files = removeFileOutInputFiles(i, true);
           i--;
         }
-
-        ;
       }
 
       notifyError(errorList);
@@ -957,7 +953,7 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     // 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", {
+    return jsx(Fragment, null, moment(date).format('DD/MM/YYYY, HH:mm:ss'), ' ', jsx("span", {
       style: {
         display: 'none'
       }
@@ -1303,7 +1299,7 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const onKeyDown = event => {
     const key = event.key;
 
-    if (key === "Delete") {
+    if (key === 'Delete') {
       // Press Delete key to delete item(s)
       onShowPopup();
     } else if (key === 'Enter') {
@@ -1328,7 +1324,7 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       const length = itemsNode.length;
       let index;
 
-      if (key === "ArrowDown" || key === "ArrowRight") {
+      if (key === 'ArrowDown' || key === 'ArrowRight') {
         for (let id = length - 1; id >= 0; id--) {
           if (Array.from(itemsNode)[id].firstChild.classList.contains('chosen')) {
             index = id;
@@ -1347,7 +1343,7 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
             chosenItems.push(index);
             Array.from(itemsNode)[index].scrollIntoView({
               block: 'center',
-              behavior: "smooth"
+              behavior: 'smooth'
             });
           }
 
@@ -1356,7 +1352,7 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
         Array.from(itemsNode)[index + 1].scrollIntoView({
           block: 'center',
-          behavior: "smooth"
+          behavior: 'smooth'
         });
 
         if (!event.shiftKey) {
@@ -1367,7 +1363,7 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
         itemsNode[index + 1].firstChild.classList.add('chosen');
         chosenItems.push(index + 1);
-      } else if (key === "ArrowUp" || key === "ArrowLeft") {
+      } else if (key === 'ArrowUp' || key === 'ArrowLeft') {
         index = Array.from(itemsNode).findIndex(el => el.firstChild.classList.contains('chosen'));
 
         if (index === 0) {
@@ -1381,7 +1377,7 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
             chosenItems.push(index);
             Array.from(itemsNode)[index].scrollIntoView({
               block: 'center',
-              behavior: "smooth"
+              behavior: 'smooth'
             });
           }
 
@@ -1390,7 +1386,7 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
         Array.from(itemsNode)[index - 1].scrollIntoView({
           block: 'center',
-          behavior: "smooth"
+          behavior: 'smooth'
         });
 
         if (!event.shiftKey) {
@@ -1666,7 +1662,7 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     width: '18',
     height: '18',
     bgColor: 'currentColor'
-  }), jsx("span", null, " ", jsx("ul", null, " "), " "))), jsx("div", {
+  }), jsx("span", null, ' ', jsx("ul", null, " "), ' '))), jsx("div", {
     css: AttachmentHeaderIcon
   }, jsx("div", {
     css: attachmentHandleIcon,
@@ -1836,17 +1832,17 @@ Attachment.defaultProps = {
   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 />
-   * }, ...]
+  /** 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,
 
@@ -1919,15 +1915,15 @@ Attachment.propTypes = {
   /** 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/>
-   * }
+  /**
+   * 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,