diginet-core-ui 1.3.85 → 1.3.86

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

@@ -8,7 +8,7 @@ import { ButtonIcon, InputBase, Label } from "../../";
 import { randomString } from "../../../utils";
 import { color as colors } from "../../../styles/colors";
 import { typography } from "../../../styles/typography";
-import { borderBox, borderRadius4px, displayBlock, positionFixed, positionRelative } from "../../../styles/general";
+import { boxBorder, borderRadius4px, displayBlock, positionFixed, positionRelative } from "../../../styles/general";
 import { useTheme } from "../../../theme";
 const {
   paragraph1
@@ -196,7 +196,7 @@ const DropdownBoxCSS = zIndex => css`
     ${displayBlock};
     ${paragraph1};
     ${positionFixed};
-    ${borderBox};
+    ${boxBorder};
     ${borderRadius4px};
     background-color: ${white};
     z-index: ${zIndex};

package/components/form-control/input-base/index.js

@@ -5,7 +5,7 @@ import { Icon, Typography } from "../..";
 import { getGlobal } from "../../../global";
 import PropTypes from 'prop-types';
 import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
-import { alignCenter, backgroundTransparent, border, borderBox, borderNone, borderRadius4px, displayBlock, flexRow, outlineNone, parseHeight, parseMinHeight, parseMinWidthHeight, parseWidth, parseWidthHeight, pointerEventsNone, positionAbsolute, positionRelative } from "../../../styles/general";
+import { bgColor, bgTransparent, border, borderNone, borderRadius, borderRadius4px, boxBorder, displayBlock, displayNone, flexRow, inset, insetX, itemsCenter, mgl, mgr, outlineNone, parseHeight, parseMaxHeight, parseMinHeight, parseMinWidthHeight, parseWidth, parseWidthHeight, pd, pdl, pdx, pdy, pointerEventsNone, positionAbsolute, positionRelative, selfEnd, userSelectNone } from "../../../styles/general";
 import { useColor as colors, useTheme } from "../../../theme";
 import { classNames, refType as ref, useInput } from "../../../utils";
 const {
@@ -35,8 +35,7 @@ const {
   },
   typography: {
     paragraph1
-  },
-  spacing
+  }
 } = useTheme();
 const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
@@ -187,33 +186,35 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     if (typeof node === 'string') {
       node = jsx(Icon, {
         name: startIcon,
-        style: iconStyle
+        style: iconStyle,
+        ...startIconProps
       });
     }
     return jsx("div", {
       css: _InputBaseIconCSS,
-      ...startIconProps,
-      className: classNames('DGN-UI-InputBase-Start-Icon', startIconProps.className)
+      className: classNames('DGN-UI-InputBase-Start-Icon', startIconProps.className),
+      ...startIconProps
     }, node);
-  }, [startIcon]);
+  }, [startIcon, startIconProps]);
   const EndIcon = useMemo(() => {
     let node = endIcon;
     if (typeof node === 'string') {
       node = jsx(Icon, {
         name: endIcon,
-        style: iconStyle
+        style: iconStyle,
+        ...endIconProps
       });
     }
     return jsx("div", {
       css: _InputBaseIconCSS,
-      ...endIconProps,
-      className: classNames('DGN-UI-InputBase-End-Icon', endIconProps.className)
-    }, ' ', node, ' ');
-  }, [endIcon]);
+      className: classNames('DGN-UI-InputBase-End-Icon', endIconProps.className),
+      ...endIconProps
+    }, node);
+  }, [endIcon, endIconProps]);
   const MultipleInputComp = jsx("div", {
+    ref: ref,
     css: [_InputBaseCSS, _MultilineCSS],
     className: classNames('DGN-UI-InputBase', newClass, className, disabled && 'disabled'),
-    ref: ref,
     ...props
   }, startIcon && StartIcon, jsx("textarea", {
     placeholder: isEnabled ? placeholder : '',
@@ -233,10 +234,10 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     ...bind
   }), endIcon && EndIcon);
   const InputComp = jsx("div", {
-    css: [[_InputBaseCSS, _SingleLineCSS]],
     ref: ref,
-    ...props,
-    className: classNames('DGN-UI-InputBase', newClass, className, disabled && 'disabled')
+    css: [[_InputBaseCSS, _SingleLineCSS]],
+    className: classNames('DGN-UI-InputBase', newClass, className, disabled && 'disabled'),
+    ...props
   }, startIcon && StartIcon, jsx("input", {
     type: type,
     autoComplete: autoComplete,
@@ -277,7 +278,7 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 const InputBaseCSS = (readOnly, status) => css`
     ${flexRow};
     ${positionRelative};
-    ${borderBox};
+    ${boxBorder};
     &:hover,
     &:focus-within {
         .DGN-UI-InputBase-Start-Icon:not(.non-effect) {
@@ -293,7 +294,7 @@ const InputBaseCSS = (readOnly, status) => css`
             border-bottom-color: ${lineDisabled} !important;
         }
         &.outlined {
-            background-color: ${fillDisabled};
+            ${bgColor(fillDisabled)};
         }
         .DGN-UI-InputBase-Start-Icon,
         .DGN-UI-InputBase-End-Icon {
@@ -308,7 +309,7 @@ const InputBaseCSS = (readOnly, status) => css`
     &.outlined {
         ${border(1, lineNormal)};
         ${borderRadius4px};
-        padding: ${spacing([1.75, 4])};
+        ${pd([1.75, 4])};
         &:not(:focus-within):hover {
             ${!readOnly && `
                 background-color: ${fillHover};
@@ -335,15 +336,11 @@ const InputBaseCSS = (readOnly, status) => css`
             ${borderRadius4px};
             ${pointerEventsNone};
             ${border(2, 'transparent')};
-            left: -2px;
-            right: -2px;
-            top: -2px;
-            bottom: -2px;
+            ${inset(-2)};
         }
     }
     &.underlined {
-        padding-bottom: ${spacing([1])};
-        padding-top: ${spacing([1])};
+        ${pdy([1])};
         &:not(:focus-within):hover {
             ${!readOnly && `
                 &::before {
@@ -368,16 +365,14 @@ const InputBaseCSS = (readOnly, status) => css`
         &::before {
             content: '';
             ${positionAbsolute};
-            left: 0;
-            right: 0;
+            ${insetX(0)};
             bottom: 0;
             border-bottom: 1px solid ${lineNormal};
         }
         &::after {
             content: '';
             ${positionAbsolute};
-            left: 0px;
-            right: 0px;
+            ${insetX(0)};
             bottom: -1px;
             border-bottom: 2px solid transparent;
             transform: scaleX(0);
@@ -386,8 +381,7 @@ const InputBaseCSS = (readOnly, status) => css`
         }
     }
     &.non-style {
-        padding-bottom: ${spacing([1])};
-        padding-top: ${spacing([1])};
+        ${pdy([1])};
         border-color: transparent !important;
         box-shadow: none !important;
         background-color: transparent !important;
@@ -400,8 +394,10 @@ const InputBaseCSS = (readOnly, status) => css`
             border-color: transparent !important;
         }
     }
-    ${status !== 'default' && `border-color: ${colors[status]} !important;&::before {
+    ${status !== 'default' && `
         border-color: ${colors[status]} !important;
+        &::before {
+            border-color: ${colors[status]} !important;
     }`}
     & + .DGN-UI-HelperText {
         ${positionAbsolute};
@@ -411,7 +407,7 @@ const InputBaseCSS = (readOnly, status) => css`
 `;
 const SingleLineCSS = (autoWidth, readOnly) => css`
     ${parseWidthHeight(autoWidth ? 'max-content' : 'auto', 'max-content')}
-    ${alignCenter};
+    ${itemsCenter};
     flex: 1 1 auto;
     &:focus-within {
         ${!readOnly && `
@@ -424,7 +420,7 @@ const SingleLineCSS = (autoWidth, readOnly) => css`
     }
     &.outlined {
         ${parseHeight(40)};
-        background-color: ${systemWhite};
+        ${bgColor(systemWhite)};
     }
 `;
 const InputCSS = (autoWidth, isEnabled, hoverTooltip) => css`
@@ -433,9 +429,8 @@ const InputCSS = (autoWidth, isEnabled, hoverTooltip) => css`
     ${outlineNone};
     transition: all 0.1s;
     color: ${textMain};
-    ${backgroundTransparent};
-    padding-top: 0;
-    padding-bottom: 0;
+    ${bgTransparent};
+    ${pdy(0)};
     ${paragraph1};
     text-overflow: ellipsis;
     &::placeholder {
@@ -443,46 +438,45 @@ const InputCSS = (autoWidth, isEnabled, hoverTooltip) => css`
         ${paragraph1};
     }
     &:focus {
-        background-color: transparent;
+        ${bgTransparent};
         color: ${systemActive};
     }
     &:hover {
         color: ${systemActive};
     }
     &.underlined {
-        padding-left: 0;
-        padding-right: 0;
+        ${pdx(0)};
     }
     &:disabled {
-        background-color: transparent;
+        ${bgTransparent};
     }
-    ${!isEnabled && hoverTooltip && 'display: none'};
+    ${!isEnabled && hoverTooltip && displayNone};
 `;
 const TypoCSS = disabled => css`
     ${parseHeight(24)};
     &:focus {
-        background-color: transparent;
+        ${bgTransparent};
         color: ${systemActive};
     }
     &:hover {
         color: ${systemActive};
     }
-    ${disabled && 'user-select: none'};
+    ${disabled && userSelectNone};
 `;
 const MultilineCSS = (TextAreaCSSName, rows, maxRows) => css`
     ${parseWidthHeight('100%', 'max-content')};
     &.outlined {
         .css-${TextAreaCSSName} {
             ${parseHeight(24)};
-            ${rows && /\d+/.test(rows) && `height: ${20 * rows + 4}px`};
-            ${maxRows && /\d+/.test(maxRows) && `max-height: ${20 * maxRows + 4}px`};
+            ${rows && /\d+/.test(rows) && parseHeight(20 * rows + 4)};
+            ${maxRows && /\d+/.test(maxRows) && parseMaxHeight(20 * maxRows + 4)};
         }
     }
     &.underlined {
         .css-${TextAreaCSSName} {
             ${parseHeight(24)};
-            ${rows && /\d+/.test(rows) && `height: ${20 * rows + 4}px`};
-            ${maxRows && /\d+/.test(maxRows) && `max-height: ${20 * maxRows + 4}px`};
+            ${rows && /\d+/.test(rows) && parseHeight(20 * rows + 4)};
+            ${maxRows && /\d+/.test(maxRows) && parseMaxHeight(20 * maxRows + 4)};
         }
     }
 `;
@@ -492,12 +486,12 @@ const TextAreaCSS = (resize, readOnly) => css`
     ${borderNone};
     ${outlineNone};
     ${positionRelative};
-    ${borderBox};
+    ${boxBorder};
     ${parseWidth('100%')};
     ${parseMinWidthHeight('max-content')};
+    ${pd([0.5, 0])};
+    ${bgTransparent};
     color: ${textMain};
-    background-color: transparent;
-    padding: ${spacing(0.5, 0)};
     overflow-y: auto;
     resize: ${resize};
     &:hover:not(:focus-within) {
@@ -515,27 +509,27 @@ const TextAreaCSS = (resize, readOnly) => css`
     &::-webkit-scrollbar {
         ${borderRadius4px};
         ${parseWidth(4)};
-        background-color: ${systemWhite};
+        ${bgColor(systemWhite)};
     }
     &::-webkit-scrollbar-thumb {
-        border-radius: 10px;
+        ${borderRadius(10)};
+        ${bgColor(fillDisabled)};
         mix-blend-mode: normal;
-        background-color: ${fillDisabled};
         background-clip: content-box;
     }
 `;
 const InputBaseIconCSS = multiple => css`
     ${flexRow};
-    ${multiple && 'align-self: flex-end'};
+    ${multiple && selfEnd};
     color: inherit;
     &.DGN-UI-InputBase-Start-Icon {
-        margin-right: ${spacing([1])};
+        ${mgr([1])};
         & + input {
-            padding-left: 0;
+            ${pdl(0)};
         }
     }
     &.DGN-UI-InputBase-End-Icon {
-        margin-left: ${spacing([1])};
+        ${mgl([1])};
     }
 `;
 InputBase.defaultProps = {

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

@@ -6,7 +6,7 @@ import { forwardRef, memo, useState, useRef, useEffect, useMemo, Fragment } from
 import theme from "../../../theme/settings";
 import { randomString } from "../../../utils";
 import Typography from "./../../typography";
-import { cursorPointer, borderBox, positionAbsolute, positionRelative, displayNone, displayBlock, cursorNoDrop } from "../../../styles/general";
+import { cursorPointer, boxBorder, positionAbsolute, positionRelative, displayNone, displayBlock, cursorNoDrop } from "../../../styles/general";
 const {
   spacing,
   colors: {
@@ -107,10 +107,10 @@ const formCheckCSS = css`
 `;
 const formCheckInputCSS = width => css`
     ${positionAbsolute};
-    ${borderBox};
+    ${boxBorder};
     ${displayNone};
     &:checked ~ label:after {
-        ${borderBox};
+        ${boxBorder};
         ${positionAbsolute};
         width: ${width / 2}px;
         height: ${width / 2}px;
@@ -152,7 +152,7 @@ const formCheckLabelCSS = width => css`
     }
     &:before {
         ${positionAbsolute};
-        ${borderBox};
+        ${boxBorder};
         width: ${width}px;
         height: ${width}px;
         border-radius: 50%;

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

@@ -6,7 +6,7 @@ import { forwardRef, memo, useEffect, useMemo, useRef, useState, Fragment } from
 import theme from "../../../theme/settings";
 import generateRandom from "../../../utils/randomString";
 import Typography from "../../typography";
-import { alignCenter, cursorNoDrop, cursorPointer, displayBlock, flexRow, positionAbsolute, positionRelative } from "../../../styles/general";
+import { itemsCenter, cursorNoDrop, cursorPointer, displayBlock, flexRow, positionAbsolute, positionRelative } from "../../../styles/general";
 const {
   colors: {
     system: {
@@ -59,7 +59,7 @@ const Toggle = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
             `;
   const toggle = css`
                 ${flexRow};
-                ${alignCenter};
+                ${itemsCenter};
                 ${positionRelative};
                 ${cursorPointer};
                 margin: 0;

package/components/grid/index.js

@@ -3,7 +3,7 @@
 import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
 import { forwardRef, memo, useContext, useImperativeHandle, useMemo, useRef } from 'react';
-import { borderBox } from "../../styles/general";
+import { boxBorder } from "../../styles/general";
 import { useTheme } from "../../theme";
 import { breakpointKeys } from "../../theme/createBreakpoints";
 import { classNames, handleBreakpoints } from "../../utils";
@@ -110,7 +110,7 @@ const handleGrid = (size, value, columns) => {
     }`;
 };
 const GridCSS = (direction, zeroMinWidth, container, item, wrap, verticalAlign) => css`
-    ${borderBox};
+    ${boxBorder};
     ${container && `
         display: flex;
         flex-wrap: ${wrap};

package/components/image/index.js

@@ -7,7 +7,7 @@ import OptionWrapper from "../others/option-wrapper";
 import { useIntersection } from "../../utils/intersectionObserver";
 import { classNames } from "../../utils";
 import AvatarDefault from "../../assets/avatar/default.svg";
-import { alignCenter, inlineFlex, overflowHidden, parseWidthHeight, positionRelative } from "../../styles/general";
+import { itemsCenter, displayInlineFlex, overflowHidden, parseWidthHeight, positionRelative } from "../../styles/general";
 const blurKeyframe = keyframes`
     0% { -webkit-filter: blur(4px);}
     25% { -webkit-filter: blur(3px);}
@@ -100,9 +100,9 @@ const Image = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }, [alt, circular, className, defaultSrc, height, id, lazyLoading, src, style, width, isInView, onLoaded, srcState]);
 }));
 const ImageCSS = (width, height, circular) => css`
-    ${inlineFlex};
+    ${displayInlineFlex};
     ${positionRelative};
-    ${alignCenter};
+    ${itemsCenter};
     ${overflowHidden};
     ${parseWidthHeight(width, height)};
     ${circular && `border-radius: 50%`};

package/components/modal/body.js

@@ -3,7 +3,7 @@
 import { memo, useMemo, useRef, forwardRef, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
-import { border, borderBox, displayBlock, overflowAuto, parseWidthHeight, positionRelative } from "../../styles/general";
+import { border, boxBorder, displayBlock, overflowAuto, parseWidthHeight, positionRelative } from "../../styles/general";
 import { classNames } from "../../utils";
 import theme from "../../theme/settings";
 import { responsivePaddingCSS } from "./header";
@@ -44,7 +44,7 @@ const ModalBody = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 const ModalBodyCSS = css`
     ${displayBlock};
     ${positionRelative};
-    ${borderBox};
+    ${boxBorder};
     ${overflowAuto};
     ${parseWidthHeight('100%', 'auto')};
     order: 2;

package/components/modal/footer.js

@@ -3,7 +3,7 @@
 import { memo, useMemo, useRef, forwardRef, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
-import { alignCenter, borderBox, flexRow, justifyEnd, positionRelative } from "../../styles/general";
+import { itemsCenter, boxBorder, flexRow, justifyEnd, positionRelative } from "../../styles/general";
 import { classNames } from "../../utils";
 import { responsivePaddingCSS } from "./header";
 const ModalFooter = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
@@ -37,9 +37,9 @@ const ModalFooter = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 const ModalFooterCSS = boxShadow => css`
     ${flexRow};
     ${positionRelative};
-    ${alignCenter};
+    ${itemsCenter};
     ${justifyEnd};
-    ${borderBox};
+    ${boxBorder};
     width: 100%;
     min-height: 56px;
     border-radius: 0px 0px 4px 4px;

package/components/modal/header.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import ModalContext from "./context";
 import { ButtonIcon, Typography } from "../";
-import { alignCenter, borderBox, flexRow, justifyBetween, parseWidthHeight, positionRelative } from "../../styles/general";
+import { itemsCenter, boxBorder, flexRow, justifyBetween, parseWidthHeight, positionRelative } from "../../styles/general";
 import { classNames, handleBreakpoints } from "../../utils";
 import theme from "../../theme/settings";
 const {
@@ -75,8 +75,8 @@ const ModalHeaderCSS = modal => css`
     ${flexRow};
     ${positionRelative};
     ${justifyBetween};
-    ${alignCenter};
-    ${borderBox};
+    ${itemsCenter};
+    ${boxBorder};
     ${parseWidthHeight('100%', 56)};
     background-color: ${headerbar};
     border-radius: 4px 4px 0px 0px;

package/components/modal/modal.js

@@ -7,7 +7,7 @@ import { jsx, css } from '@emotion/core';
 import useDelayUnmount from "../../utils/useDelayUnmount";
 import ModalContext from "./context";
 import { animations } from "../../styles/animation";
-import { borderBox, borderRadius4px, flexCol, flexRow, justifyCenter, parseWidth, parseWidthHeight, positionFixed, positionRelative } from "../../styles/general";
+import { boxBorder, borderRadius4px, flexCol, flexRow, justifyCenter, parseWidth, parseWidthHeight, positionFixed, positionRelative } from "../../styles/general";
 import theme from "../../theme/settings";
 import { classNames } from "../../utils";
 const {
@@ -209,7 +209,7 @@ const ModalBoxCSS = (width, moveable, dragAnyWhere) => css`
     ${flexCol};
     ${positionRelative};
     ${borderRadius4px}
-    ${borderBox};
+    ${boxBorder};
     ${parseWidth(width)}
     cursor: ${moveable && dragAnyWhere ? 'move' : 'initial'};
     max-height: calc(100% - 12px);

package/components/paging/page-info.js

@@ -6,7 +6,7 @@ import OptionWrapper from "../others/option-wrapper";
 import { getGlobal } from "../../global";
 import PropTypes from 'prop-types';
 import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from 'react';
-import { alignCenter, borderBox, cursorPointer, flexRow, justifyCenter, noPadding, parseHeight, parseMinHeight, parseMinWidth, parseMinWidthHeight, parseWidthHeight, textCenter, whiteSpaceNoWrap } from "../../styles/general";
+import { itemsCenter, boxBorder, cursorPointer, flexRow, justifyCenter, noPadding, parseHeight, parseMinHeight, parseMinWidth, parseMinWidthHeight, parseWidthHeight, textCenter, whiteSpaceNoWrap } from "../../styles/general";
 import { useTheme } from "../../theme";
 import { classNames, refType as ref } from "../../utils";
 const {
@@ -441,16 +441,16 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 }));
 const ViewNumberInput = css`
     ${flexRow};
-    ${alignCenter};
+    ${itemsCenter};
     ${justifyCenter};
     transition: all 0.1s;
     margin: ${spacing([0, 1])};
 `;
 const pagingInfoCSS = (bgColor, typeShort) => css`
     ${flexRow};
-    ${alignCenter};
+    ${itemsCenter};
     ${paragraph2};
-    ${borderBox};
+    ${boxBorder};
     ${parseHeight(40)};
     border-top: solid 1px ${lineSystem};
     padding: ${spacing([1, 0])};
@@ -471,7 +471,7 @@ const pagingInfoCSS = (bgColor, typeShort) => css`
     }
     .txt-line-number {
         ${whiteSpaceNoWrap};
-        ${alignCenter};
+        ${itemsCenter};
         opacity: 0;
         display: flex !important;
         transition: opacity 0.3s ease;
@@ -506,7 +506,7 @@ const pagingInfoCSS = (bgColor, typeShort) => css`
     .total-items {
         ${whiteSpaceNoWrap};
         ${flexRow};
-        ${alignCenter};
+        ${itemsCenter};
         margin-left: ${`${spacing(typeShort ? [0] : [4])}`};
         opacity: 0;
         transition: opacity 0.3s ease;

package/components/paging/page-selector2.js

@@ -6,7 +6,7 @@ import { jsx, css } from '@emotion/core';
 import OptionWrapper from "../others/option-wrapper";
 import { getGlobal } from "../../global";
 import theme from "../../theme/settings";
-import { alignCenter, borderBox, flexRow, parseHeight } from "../../styles/general";
+import { itemsCenter, boxBorder, flexRow, parseHeight } from "../../styles/general";
 import { ButtonIcon } from '..';
 import { useElementSize } from "../../utils/useElementSize";
 const {
@@ -311,8 +311,8 @@ const PagingSelector = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 }));
 const PageSelectorCSS = css`
     ${flexRow};
-    ${alignCenter};
-    ${borderBox};
+    ${itemsCenter};
+    ${boxBorder};
     ${parseHeight(40)};
     padding: ${spacing([1])};
     background: ${white};

package/components/popover/footer.js

@@ -4,7 +4,7 @@ import { css, jsx } from '@emotion/core';
 import OptionWrapper from "../others/option-wrapper";
 import PropTypes from 'prop-types';
 import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
-import { alignCenter, borderBox, flexRow, justifyEnd, parseWidth, positionRelative } from "../../styles/general";
+import { itemsCenter, boxBorder, flexRow, justifyEnd, parseWidth, positionRelative } from "../../styles/general";
 import { useTheme } from "../../theme";
 import { classNames } from "../../utils";
 const {
@@ -46,9 +46,9 @@ const PopoverFooter = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 const PopoverFooterCSS = boxShadow => css`
     ${flexRow};
     ${positionRelative};
-    ${alignCenter};
+    ${itemsCenter};
     ${justifyEnd};
-    ${borderBox};
+    ${boxBorder};
     ${parseWidth('100%')};
     min-height: 56px;
     padding: ${spacing([4])};

package/components/popover/header.js

@@ -5,7 +5,7 @@ import { Typography } from "./..";
 import OptionWrapper from "../others/option-wrapper";
 import PropTypes from 'prop-types';
 import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
-import { alignCenter, borderBox, flexRow, parseWidthHeight, positionRelative } from "../../styles/general";
+import { itemsCenter, boxBorder, flexRow, parseWidthHeight, positionRelative } from "../../styles/general";
 import { useTheme } from "../../theme";
 import { classNames } from "../../utils";
 const {
@@ -54,9 +54,9 @@ const PopoverHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 }));
 const PopoverHeaderCSS = css`
     ${flexRow};
-    ${alignCenter};
+    ${itemsCenter};
     ${positionRelative};
-    ${borderBox};
+    ${boxBorder};
     ${parseWidthHeight('100%', 56)};
     background-color: ${fillHeaderbar};
     padding: ${spacing([4])};

package/components/popup/v2/index.js

@@ -8,7 +8,7 @@ import { forwardRef, Fragment, memo, useCallback, useEffect, useImperativeHandle
 import { createPortal } from 'react-dom';
 import { animations } from "../../../styles/animation";
 import { hexToRGBA } from "../../../styles/color-helper";
-import { alignCenter, border, borderBox, borderRadius4px, borderRadius50, breakWord, cursorPointer, displayBlock, ellipsis, flexCol, flexRow, justifyCenter, justifyEnd, overflowAuto, overflowHidden, parseHeight, parseMaxWidthHeight, parseMinHeight, parseMinWidth, parseWidth, parseWidthHeight, positionFixed, positionRelative } from "../../../styles/general";
+import { itemsCenter, border, boxBorder, borderRadius4px, borderRadius50, breakWord, cursorPointer, displayBlock, truncate, flexCol, flexRow, justifyCenter, justifyEnd, overflowAuto, overflowHidden, parseHeight, parseMaxWidthHeight, parseMinHeight, parseMinWidth, parseWidth, parseWidthHeight, positionFixed, positionRelative } from "../../../styles/general";
 import { useTheme } from "../../../theme";
 import { classNames, refType as ref, useDelayUnmount } from "../../../utils";
 const {
@@ -244,7 +244,7 @@ const PopupRootCSS = (width, top, type, description, subtitle, showMoreDescripti
     .DGN-UI-Popup {
         ${flexCol};
         ${borderRadius4px};
-        ${borderBox};
+        ${boxBorder};
         ${parseWidthHeight(width, 'fit-content')};
         ${parseMaxWidthHeight('80%')};
         margin: ${isNaN(top) ? top : top + 'px'} auto auto;
@@ -259,13 +259,13 @@ const PopupRootCSS = (width, top, type, description, subtitle, showMoreDescripti
         }
         .DGN-UI-Popup-Header {
             ${flexRow};
-            ${alignCenter};
+            ${itemsCenter};
             ${parseMinHeight(40)};
             padding: ${spacing([0, 2, 0, 4])};
             border-radius: 4px 4px 0px 0px;
             .DGN-UI-Popup-Header-Title {
                 ${flexRow};
-                ${ellipsis};
+                ${truncate};
                 ${parseWidth('calc(100% - 24px)')};
             }
             color: ${colorMap.get(type)};
@@ -305,7 +305,7 @@ const PopupRootCSS = (width, top, type, description, subtitle, showMoreDescripti
             .DGN-UI-Popup-Body-Description {
                 ${flexRow};
                 ${positionRelative};
-                ${alignCenter};
+                ${itemsCenter};
                 ${parseMinHeight(40)};
                 ${parseHeight('max-content')};
                 .DGN-UI-Popup-Body-Subtitle {