diginet-core-ui 1.3.91 → 1.3.92

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

@@ -6,28 +6,13 @@ import { getGlobal } from "../../../global";
 import { Another, Compressed, Image, Pdf, Presentation, Sheet, Word } from "../../../icons";
 import PropTypes from 'prop-types';
 import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { bgColor, border, borderRadius4px, borderRadius50, boxBorder, boxContent, cursorPointer, displayBlock, displayFlex, displayInlineBlock, displayNone, flexCol, flexRow, flexWrap, floatRight, gap, itemsCenter, justifyBetween, justifyCenter, justifyEnd, justifyStart, mg, mgb, mgl, mgr, mgx, parseHeight, parseMaxWidth, parseMaxWidthHeight, parseMinWidth, parseWidth, parseWidthHeight, pd, positionAbsolute, positionRelative, textCenter, textRight, truncate, userSelectNone } from "../../../styles/general";
+import { bgColor, border, borderRadius4px, borderRadius50, bottom, boxBorder, boxContent, cursorPointer, displayBlock, displayFlex, displayInlineBlock, displayNone, flexCol, flexRow, flexWrap, floatRight, gap, itemsCenter, justifyBetween, justifyCenter, justifyEnd, justifyStart, left, mg, mgb, mgl, mgr, mgx, parseHeight, parseMaxWidth, parseMaxWidthHeight, parseMinWidth, parseWidth, parseWidthHeight, pd, positionAbsolute, positionRelative, textCenter, textColor, textRight, top, truncate, userSelectNone } from "../../../styles/general";
 import { useTheme } from "../../../theme";
 import { classNames, date as moment, getFileType } from "../../../utils";
 const {
   colors: {
-    system: {
-      rest: systemRest,
-      white: systemWhite
-    },
-    semantic: {
-      success: semanticSuccess
-    },
-    fill: {
-      hover: fillHover,
-      pressed: fillPressed,
-      focus: fillFocus
-    },
     line: {
       normal: lineNormal
-    },
-    text: {
-      sub: textSub
     }
   }
 } = useTheme();
@@ -157,7 +142,7 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const attachmentHandleIconRef = useRef(null);
   const attachmentInputRef = useRef(null);
   const attachedRef = useRef(null);
-  const newAttachedRef = useRef([]);
+  // const newAttachedRef = useRef([]);
   const popupRef = useRef(null);
   const popoverRef = useRef(null);
   const isDeleteAll = useRef(false);
@@ -172,6 +157,7 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const [viewTypeState, setViewTypeState] = useState(viewType);
   const [isEmpty, setIsEmpty] = useState(null);
   const [newDataState, setNewDataState] = useState([]);
+  const [dataState, setDataState] = useState([]);
   const isEnable = !readOnly && !disabled;
   const _AttachmentRootCSS = AttachmentRootCSS(isEmpty, isEnable);
 
@@ -377,14 +363,14 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       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]') {
+      removedAttachedRef.current.push(deletedFile);
+      recentRemovedAttached.push(deletedFile);
+      if (Object.prototype.toString.call(deletedFile) === '[object File]' && newDataState !== null && newDataState !== void 0 && newDataState.length) {
         removeFileOutInputFiles(allNewAttached.getAll('files').findIndex(attach => attach.FileName === deletedFile.FileName && attach.CreateDate === deletedFile.CreateDate));
       } else {
         oldAttached.splice(oldAttached.findIndex(attach => attach.FileName === deletedFile.FileName && attach.CreateDate === deletedFile.CreateDate), 1);
+        setDataState(dataState.filter(attach => attach.FileName !== deletedFile.FileName && attach.CreateDate !== deletedFile.CreateDate));
       }
-      removedAttachedRef.current.push(deletedFile);
-      recentRemovedAttached.push(deletedFile);
-      parent.remove();
     });
     if (attached.length < 2) {
       afterChangeFile(attached.length);
@@ -455,21 +441,26 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       files.splice(index, 1);
       allNewAttached.delete('files');
       files.forEach(file => allNewAttached.append('files', file));
-      newAttachedRef.current = files || [];
+      // newAttachedRef.current = files || [];
+      setNewDataState(files || []);
     }
     attachmentInputRef.current.files = dt.files;
     return dt.files;
   };
   const insertAttached = files => {
     if (multiple || inputProps && inputProps.multiple) {
+      let tempArr = [];
       for (let file of files) {
         allNewAttached.append('files', file);
-        newAttachedRef.current.push(file);
+        // newAttachedRef.current.push(file);
+        tempArr.push(file);
       }
+      setNewDataState(tempArr);
     } else if (files[0]) {
       allNewAttached.delete('files');
       allNewAttached.append('files', files[0]);
-      newAttachedRef.current = [files[0]];
+      // newAttachedRef.current = [files[0]];
+      setNewDataState([files[0]]);
     }
     // attachmentInputRef.current.files = allNewAttached.getAll('files');
   };
@@ -714,7 +705,7 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
   };
   useEffect(() => {
-    if (attached.length) {
+    if (attached !== null && attached !== void 0 && attached.length) {
       attached.length = 0;
     }
     return () => {
@@ -743,16 +734,15 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     };
   }, [maxFile, maxSizeProp, multiple, accept]);
   useEffect(() => {
-    var _newAttachedRef$curre;
     oldAttached.length = 0;
-    afterChangeFile(((data === null || data === void 0 ? void 0 : data.length) || 0) + (((_newAttachedRef$curre = newAttachedRef.current) === null || _newAttachedRef$curre === void 0 ? void 0 : _newAttachedRef$curre.length) || 0));
+    afterChangeFile(((data === null || data === void 0 ? void 0 : data.length) || 0) + ((newDataState === null || newDataState === void 0 ? void 0 : newDataState.length) || 0));
     if (data) {
       // Load files data was uploaded
       const length = data.length;
       for (let i = 0; i < length; i++) {
         if (Object.prototype.toString.call(data[i]) === '[object File]') {
           allNewAttached.append('files', data[i]);
-          newAttachedRef.current.push(data[i]);
+          // newAttachedRef.current.push(data[i]);
           attached.push(data[i]);
         } else {
           const item = mountDomain(data[i]);
@@ -760,12 +750,12 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
           attached.push(item);
         }
       }
+      setDataState(data);
     }
     return () => {
       // if (attachedRef.current) {
       //     attachedRef.current.innerHTML = null;
       // }
-      setNewDataState([]);
       oldAttached.length = 0;
       attached.length = 0;
       chosenItems.length = 0;
@@ -840,7 +830,7 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       uppercase: true,
       required: required,
       type: 'h5',
-      color: textSub,
+      color: 'text.sub',
       ref: attachTextRef
     }, label), error ? jsx(HelperText, null, error) : null), jsx("div", {
       css: AttachmentHeaderIconCSS
@@ -878,11 +868,11 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }), isEmpty ? jsx(Typography, {
       css: userSelectNone,
       type: 'p3',
-      color: systemRest
+      color: 'system.rest'
     }, hintText) : null) : isEmpty ? jsx(Typography, {
       css: userSelectNone,
       type: 'p3',
-      color: systemRest
+      color: 'system.rest'
     }, getGlobal('noFileText')) : null)), allowSort && !isEmpty ? jsx(Popover, {
       ref: popoverRef,
       anchor: jsx(ButtonIcon, {
@@ -968,15 +958,15 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }, jsx(Typography, {
       className: 'username',
       type: 'p2',
-      color: textSub
+      color: 'text.sub'
     }, (item === null || item === void 0 ? void 0 : item.UserName) || item.lastModifiedDate && ownerName || ''), jsx(Typography, {
       className: 'datetime',
       type: 'p2',
-      color: textSub
+      color: 'text.sub'
     }, getDateTime(date)), jsx(Typography, {
       className: 'filesize',
       type: 'p2',
-      color: textSub
+      color: 'text.sub'
     }, calculateSize(item.FileSize || item.size))) : null, isNew ? jsx("span", {
       css: AttachedLinearCSS
     }, jsx(LinearProgress, {
@@ -994,12 +984,12 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       css: AttachedCSS,
       ref: attachedRef,
       className: classNames(isViewTypeIcon && 'icon-view')
-    }, data.map((item, idx) => {
+    }, dataState.map((item, idx) => {
       return renderAttachmentItem(item, idx);
     }), newDataState.map((item, idx) => {
       return renderAttachmentItem(item, (data === null || data === void 0 ? void 0 : data.length) + idx, true);
     })));
-  }, [data, onViewProp, unitSize, newDataState, viewTypeState]);
+  }, [data, onViewProp, unitSize, dataState, newDataState, viewTypeState]);
   const PopupView = useMemo(() => {
     return jsx(Popup, {
       open: showPopup,
@@ -1070,8 +1060,8 @@ const AttachmentInputCSS = css`
     ${displayNone};
     ${positionAbsolute};
     ${parseWidthHeight('100%')};
-    top: 0;
-    left: 0;
+    ${top(0)};
+    ${left(0)};
     input {
         ${positionRelative};
         ${parseWidthHeight('100%', 'calc(100% + 20px)')};
@@ -1095,8 +1085,8 @@ const AttachmentImageCSS = css`
 const AttachmentImageEmptyCSS = css`
     ${positionAbsolute};
     ${parseWidthHeight('100%')};
-    top: 0;
-    left: 0;
+    ${top(0)};
+    ${left(0)};
 `;
 const AttachedItemInfoCSS = css`
     ${displayFlex};
@@ -1107,6 +1097,7 @@ const AttachedItemInfoCSS = css`
     ${mgr([2])};
 `;
 const AttachedItemInfoIconCSS = css`
+    ${displayFlex};
     ${flexRow};
     ${positionRelative};
     ${boxContent};
@@ -1117,9 +1108,9 @@ const AttachedItemInfoIconCSS = css`
         ${positionAbsolute};
         ${borderRadius50};
         ${parseWidthHeight(4, 4)};
-        ${bgColor(semanticSuccess)};
-        top: 4.5px;
-        left: -2px;
+        ${bgColor('semantic.success')};
+        ${top(4.5)};
+        ${left(-2)}
     }
 `;
 const AttachedItemOwnerCSS = css`
@@ -1128,7 +1119,7 @@ const AttachedItemOwnerCSS = css`
     ${itemsCenter};
     ${userSelectNone};
     ${parseHeight('100%')};
-    color: ${textSub};
+    ${textColor('text.sub')};
 `;
 const DetailInfoCSS = css`
     ${displayFlex};
@@ -1154,9 +1145,9 @@ const AttachedLinearCSS = css`
     ${displayFlex};
     ${positionAbsolute};
     ${itemsCenter};
-    ${bgColor(systemWhite)};
+    ${bgColor('system.white')};
     ${parseWidthHeight('100%')};
-    top: 0;
+    ${top(0)};
 `;
 const AttachedItemCSS = css`
     ${displayFlex};
@@ -1217,8 +1208,8 @@ const AttachedCSS = css`
                     ${pd(0)};
                     &.new-file:after {
                         ${parseWidthHeight(8)};
-                        top: -1px;
-                        left: -7px;
+                        ${top(-1)};
+                        ${left(-7)};
                     }
                 }
             }
@@ -1227,7 +1218,7 @@ const AttachedCSS = css`
                 position: inherit;
                 .css-${AttachedLinearCSS.name} {
                     ${parseHeight('auto')};
-                    bottom: 0;
+                    ${bottom(0)};
                     top: unset;
                     background: none;
                 }
@@ -1251,27 +1242,27 @@ const AttachmentRootCSS = (isEmpty, isEnable) => css`
     ${positionRelative};
     ${borderRadius4px};
     ${boxBorder};
-    ${border(1, lineNormal)};
+    ${border(1, 'line.normal')};
     ${parseHeight(isEmpty && !isEnable ? 120 : 280)};
-    ${bgColor(systemWhite)};
+    ${bgColor('system.white')};
     .css-${AttachedCSS.name} {
         .css-${AttachedItemCSS.name} {
             &:hover {
-                ${bgColor(fillHover)};
+                ${bgColor('fill.hover')};
                 .css-${AttachedLinearCSS.name} {
-                    ${bgColor(fillHover)};
+                    ${bgColor('fill.hover')};
                 }
             }
             &:active {
-                ${bgColor(fillPressed)};
+                ${bgColor('fill.pressed')};
                 .css-${AttachedLinearCSS.name} {
-                    ${bgColor(fillPressed)};
+                    ${bgColor('fill.pressed')};
                 }
             }
             &.chosen {
-                ${bgColor(fillFocus)};
+                ${bgColor('fill.focus')};
                 .css-${AttachedItemInfoCSS.name}, .css-${AttachedItemOwnerCSS.name} {
-                    ${bgColor(fillFocus)};
+                    ${bgColor('fill.focus')};
                 }
             }
         }

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

@@ -6,29 +6,18 @@ import { getGlobal } from "../../../global";
 import PropTypes from 'prop-types';
 import { forwardRef, Fragment, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import ReactDOM, { createPortal } from 'react-dom';
-import { bgColor, bgTransparent, border, borderNone, borderRadius, borderRadius4px, boxBorder, breakWord, cursorDefault, cursorNotAllowed, cursorPointer, displayBlock, displayFlex, flexColReverse, flexRow, flexWrap, inset, insetX, itemsCenter, justifyCenter, justifyStart, mgb, mgl, mgr, mgt, outlineNone, overflowAuto, overflowHidden, parseHeight, parseMaxHeight, parseMaxWidth, parseMinHeight, parseWidth, parseWidthHeight, pd, pdb, pdl, pdt, pdy, pointerEventsNone, positionAbsolute, positionFixed, positionRelative, userSelectNone, z } from "../../../styles/general";
+import { bgColor, bgTransparent, border, borderBottom, borderBottomColor, borderColor, borderNone, borderRadius, borderRadius4px, boxBorder, breakWord, cursorDefault, cursorNotAllowed, cursorPointer, displayBlock, displayFlex, fill, flexColReverse, flexRow, flexWrap, inset, insetX, italic, itemsCenter, justifyCenter, justifyStart, mgb, mgl, mgr, mgt, outlineNone, overflowAuto, overflowHidden, parseHeight, parseMaxHeight, parseMaxWidth, parseMinHeight, parseWidth, parseWidthHeight, pd, pdb, pdl, pdt, pdy, pointerEventsNone, positionAbsolute, positionFixed, positionRelative, textColor, userSelectNone, z } from "../../../styles/general";
 import { useTheme } from "../../../theme";
 import { classNames, isMobile, mapParent, randomString, refType as ref, updatePosition } from "../../../utils";
 const {
   colors: {
     system: {
-      active: systemActive,
-      disabled: systemDisabled,
-      rest: systemRest,
       white: systemWhite
     },
-    semantic: {
-      danger: semanticDanger
-    },
     fill: {
-      hover: fillHover,
       'scrollbar-tabbar': fillScrollbar
     },
-    line: {
-      focus: lineFocus
-    },
     text: {
-      main: textMain,
       sub: textSub
     }
   },
@@ -1189,16 +1178,17 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
           return false;
         }
       }
-    }) : jsx(Fragment, null, jsx(Typography, {
-      ref: inputRef,
+    }) : jsx("div", {
       css: _DropdownInputCSS,
+      onClick: onClickInput
+    }, jsx(Typography, {
+      ref: inputRef,
       hoverTooltip: true,
       lineClamp: multilineSelectedItem ? undefined : 1,
       type: 'p1',
       style: {
         lineHeight: multiple ? '30px' : '24px'
       },
-      onClick: onClickInput,
       tabIndex: -1
     }, textValue))), jsx("div", {
       ref: iconRef,
@@ -1256,7 +1246,7 @@ const DropdownInputCSS = (viewType, multiple, placeholder, disabled, readOnly) =
     ${paragraph1};
     ${disabled ? cursorNotAllowed : readOnly ? cursorDefault : cursorPointer};
     ${parseWidth('100%')};
-    color: ${textMain};
+    ${textColor('text.main')};
     ${pdt(0)};
     ${pdb([viewType !== 'outlined' ? 0 : 'inherit'])};
     ${pdl([viewType !== 'outlined' ? 0 : 4])};
@@ -1277,7 +1267,7 @@ const DropdownInputCSS = (viewType, multiple, placeholder, disabled, readOnly) =
             ${itemsCenter};
             ${justifyCenter};
             content: '${placeholder}';
-            color: ${textSub};
+            ${textColor('text.sub')};
         }
         &:not(:empty)::after {
             visibility: hidden;
@@ -1296,7 +1286,7 @@ const DropdownInputCSS = (viewType, multiple, placeholder, disabled, readOnly) =
         }
     }
     .DGN-UI-Typography {
-        ${disabled && `color: ${systemDisabled}`};
+        ${disabled && textColor('system.disabled')};
     }
 `;
 const IconCSS = viewType => css`
@@ -1313,24 +1303,24 @@ const DropdownFormCSS = (viewType, multiple, disabled, placeholder, DropdownInpu
               ${boxBorder};
               ${parseWidth('100%')};
               ${pdy([multiple ? 0.25 : 1])};
-              ${!disabled && `
-                    &:not(:focus-within):hover {
-                        &::before {
-                            border-bottom-color: ${systemActive};
-                        }
-                        .css-${DropdownInputCSSName} {
-                            color: ${systemActive};
-                        }
-                    }
+              ${!disabled && css`
+                  &:not(:focus-within):hover {
+                      &::before {
+                          ${borderBottomColor('system.active')};
+                      }
+                      .css-${DropdownInputCSSName} {
+                          ${textColor('system.active')};
+                      }
+                  }
               `}
               &:focus-within {
-                  border-bottom-color: ${lineFocus};
+                  ${borderBottomColor('line.focus')};
                   &::after {
-                      border-bottom-color: inherit;
+                      ${borderBottomColor('inherit')};
                       transform: scaleX(1);
                   }
                   .css-${DropdownInputCSSName} {
-                      color: ${systemActive};
+                      ${textColor('system.active')};
                   }
               }
               &.dropdown-showing {
@@ -1342,27 +1332,27 @@ const DropdownFormCSS = (viewType, multiple, disabled, placeholder, DropdownInpu
                   content: '${placeholder}';
                   ${parseHeight('100%')};
                   ${overflowHidden};
-                  color: ${textSub};
+                  ${textColor('text.sub')};
                   display: -webkit-box;
                   -webkit-line-clamp: 1;
                   -webkit-box-orient: vertical;
               }
               &::placeholder {
-                  color: ${textSub};
+                  ${textColor('text.sub')};
               }
               &::before {
                   ${positionAbsolute};
                   content: '';
                   ${insetX(0)};
                   bottom: 0;
-                  ${viewType === 'underlined' && `border-bottom: 1px solid ${disabled ? systemDisabled : systemRest};`}
+                  ${viewType === 'underlined' && borderBottom(1, disabled ? 'system.disabled' : 'system.rest')}
               }
               &::after {
                   ${positionAbsolute};
                   content: '';
                   ${insetX(0)};
                   bottom: -1px;
-                  border-bottom: 2px solid transparent;
+                  ${borderBottom(2, 'transparent')};
                   transform: scaleX(0);
                   transform-origin: center;
                   transition: all 0.2s ease;
@@ -1374,21 +1364,21 @@ const DropdownFormCSS = (viewType, multiple, disabled, placeholder, DropdownInpu
               ${positionRelative};
               ${borderRadius4px};
               ${boxBorder};
-              ${border(1, disabled ? systemDisabled : systemRest)};
+              ${border(1, disabled ? 'system.disabled' : 'system.rest')};
               ${parseWidth('100%')};
               ${parseMinHeight(40)};
               ${mgt([0.5])};
-              ${!disabled && `
-                &:not(:focus-within):hover {
-                    ${bgColor(fillHover)};
-                    border-color: ${systemActive};
-                    input {
-                        ${bgColor(fillHover)};
-                    }
-                }
+              ${!disabled && css`
+                  &:not(:focus-within):hover {
+                      ${bgColor('fill.hover')};
+                      ${borderColor('system.active')};
+                      input {
+                          ${bgColor('fill.hover')};
+                      }
+                  }
               `}
               &:focus-within {
-                  border-color: ${lineFocus};
+                  ${borderColor('line.focus')};
               }
               &.dropdown-showing {
                   .icon-dropdown {
@@ -1399,13 +1389,13 @@ const DropdownFormCSS = (viewType, multiple, disabled, placeholder, DropdownInpu
                   content: '${placeholder}';
                   ${parseHeight('100%')};
                   ${overflowHidden};
-                  color: ${textSub};
+                  ${textColor('text.sub')};
                   display: -webkit-box;
                   -webkit-line-clamp: 1;
                   -webkit-box-orient: vertical;
               }
               &::placeholder {
-                  color: ${textSub};
+                  ${textColor('text.sub')};
               }
               &::after {
                   ${positionAbsolute};
@@ -1424,7 +1414,7 @@ const DropdownListCSS = loading => css`
     ${parseWidth('100%')};
     ${parseMaxHeight(280)};
     ${loading ? overflowHidden : overflowAuto};
-    ${bgColor(systemWhite)};
+    ${bgColor('system.white')};
     box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
     ${z(1)};
     &::-webkit-scrollbar {
@@ -1454,19 +1444,19 @@ const DropdownItemCSS = (multiple, selectBox) => css`
     ${userSelectNone};
     ${parseMinHeight(40)};
     ${parseWidth('100%')};
-    ${bgColor(systemWhite)};
+    ${bgColor('system.white')};
     ${pd([2, multiple && selectBox ? 0 : 4])};
-    color: ${textMain};
+    ${textColor('text.main')};
     &.no-data {
         ${justifyCenter};
         ${cursorDefault};
-        font-style: italic;
+        ${italic};
     }
     &:not(.no-data):hover,
     &:not(.no-data):focus {
         ${outlineNone};
-        ${bgColor(fillHover)};
-        color: ${systemActive};
+        ${bgColor('fill.hover')};
+        ${textColor('system.active')};
     }
 `;
 const DropdownRootCSS = (DropdownFormCSSName, DropdownInputCSSName) => css`
@@ -1476,21 +1466,21 @@ const DropdownRootCSS = (DropdownFormCSSName, DropdownInputCSSName) => css`
     ${parseHeight('max-content')};
     &.error {
         .css-${DropdownFormCSSName} {
-            border-color: ${semanticDanger};
+            ${borderColor('semantic.danger')};
             path {
-                fill: ${semanticDanger};
+                ${fill('semantic.danger')};
             }
             &::before {
-                border-color: ${semanticDanger};
+                ${borderColor('semantic.danger')};
             }
         }
     }
     &.dgn-dropdown-loading,
     &.disabled {
         .css-${DropdownFormCSSName} {
-            border-color: ${systemDisabled};
+            ${borderColor('system.disabled')};
             &::before {
-                border-color: ${systemDisabled};
+                ${borderColor('system.disabled')};
             }
         }
     }
@@ -1507,10 +1497,11 @@ const DropdownCSS = (top, left, width, isMobile, allowSearch) => css`
     ${parseWidth(width)};
     top: ${top}px;
     left: ${left}px;
-    ${bgColor(systemWhite)};
+    ${bgColor('system.white')};
     ${z(1)};
-    ${isMobile && allowSearch && `
+    ${isMobile && allowSearch && css`
         ${parseHeight('max-content')};
+        ${displayFlex};
         ${flexColReverse};
         bottom: 0;
         top: auto;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "diginet-core-ui",
-  "version": "1.3.91",
+  "version": "1.3.92",
   "description": "The DigiNet core ui",
   "homepage": "https://diginet.com.vn",
   "main": "index.js",

package/readme.md

@@ -38,6 +38,10 @@ npm test
 ```
 
 ## Changelog
+## 1.3.92
+- \[Fixed\]: Dropdown – Fix override css selected item Typography
+- \[Fixed\]: Attachment – Fix crash when remove attached item
+
 ## 1.3.91
 - \[Changed\]: TreeView – Optimize code
 - \[Changed\]: Popup – Add defaultProps description

package/styles/general.js

@@ -413,6 +413,14 @@ const textLowercase = css`
 const textRight = css`
     text-align: right;
 `;
+const textSentence = css`
+    & {
+        text-transform: lowercase;
+    }
+    &:first-letter {
+        text-transform: uppercase;
+    }
+`;
 const textUnderline = css`
     text-decoration: underline;
 `;
@@ -445,4 +453,4 @@ const whiteSpacePreWrap = css`
 const z = vl => css`
     z-index: ${zIndex(vl)};
 `;
-export { bgColor, bgCurrent, bgTransparent, border, borderBottom, borderBottomColor, borderColor, borderNone, borderRadius, borderRadius100, borderRadius4px, borderRadius50, bottom, boxBorder, boxContent, breakAll, breakWord, cursorDefault, cursorInherit, cursorInitial, cursorMove, cursorNoDrop, cursorNotAllowed, cursorPointer, cursorText, displayBlock, displayFlex, displayInlineBlock, displayInlineFlex, displayNone, fill, flexCol, flexColReverse, flexNowrap, flexRow, flexRowReverse, flexShrink, flexShrink0, flexWrap, flexWrapReverse, floatLeft, floatNone, floatRight, gap, gapX, gapY, inset, insetX, insetY, invisible, italic, itemsCenter, itemsEnd, itemsStart, justifyAround, justifyBetween, justifyCenter, justifyEnd, justifyEvenly, justifyStart, left, mg, mgb, mgl, mgr, mgt, mgx, mgy, noBorder, noBoxShadow, noMargin, noPadding, objectContain, objectCover, objectFill, objectNone, order, outlineNone, overflowAuto, overflowHidden, parseHeight, parseMaxHeight, parseMaxWidth, parseMaxWidthHeight, parseMinHeight, parseMinWidth, parseMinWidthHeight, parseWidth, parseWidthHeight, pd, pdb, pdl, pdr, pdt, pdx, pdy, pointerEventsAuto, pointerEventsInherit, pointerEventsInitial, pointerEventsNone, positionAbsolute, positionFixed, positionRelative, positionSticky, right, scale, scaleX, scaleY, selfCenter, selfEnd, selfStart, shadowNone, textCapitalize, textCenter, textColor, textCurrent, textEllipsis, textLeft, textLineThrough, textLowercase, textRight, textUnderline, textUppercase, top, truncate, userSelectNone, visible, whiteSpaceBreakSpaces, whiteSpaceNoWrap, whiteSpacePreWrap, z };
+export { bgColor, bgCurrent, bgTransparent, border, borderBottom, borderBottomColor, borderColor, borderNone, borderRadius, borderRadius100, borderRadius4px, borderRadius50, bottom, boxBorder, boxContent, breakAll, breakWord, cursorDefault, cursorInherit, cursorInitial, cursorMove, cursorNoDrop, cursorNotAllowed, cursorPointer, cursorText, displayBlock, displayFlex, displayInlineBlock, displayInlineFlex, displayNone, fill, flexCol, flexColReverse, flexNowrap, flexRow, flexRowReverse, flexShrink, flexShrink0, flexWrap, flexWrapReverse, floatLeft, floatNone, floatRight, gap, gapX, gapY, inset, insetX, insetY, invisible, italic, itemsCenter, itemsEnd, itemsStart, justifyAround, justifyBetween, justifyCenter, justifyEnd, justifyEvenly, justifyStart, left, mg, mgb, mgl, mgr, mgt, mgx, mgy, noBorder, noBoxShadow, noMargin, noPadding, objectContain, objectCover, objectFill, objectNone, order, outlineNone, overflowAuto, overflowHidden, parseHeight, parseMaxHeight, parseMaxWidth, parseMaxWidthHeight, parseMinHeight, parseMinWidth, parseMinWidthHeight, parseWidth, parseWidthHeight, pd, pdb, pdl, pdr, pdt, pdx, pdy, pointerEventsAuto, pointerEventsInherit, pointerEventsInitial, pointerEventsNone, positionAbsolute, positionFixed, positionRelative, positionSticky, right, scale, scaleX, scaleY, selfCenter, selfEnd, selfStart, shadowNone, textCapitalize, textCenter, textColor, textCurrent, textEllipsis, textLeft, textLineThrough, textLowercase, textRight, textSentence, textUnderline, textUppercase, top, truncate, userSelectNone, visible, whiteSpaceBreakSpaces, whiteSpaceNoWrap, whiteSpacePreWrap, z };