diginet-core-ui 1.3.39 → 1.3.40-beta.1

package/components/accordion/css.js

@@ -144,8 +144,6 @@ export const SummaryRootCSS = css`
         ${displayInlineBlock};
         ${positionRelative};
         ${cursorPointer};
-        width: 24px;
-        height: 24px;
         transition: transform 200ms linear;
         .Accordion-Expand-Icon {
             transform: scale(1);

package/components/alert/index.js

@@ -10,6 +10,7 @@ import ButtonIcon from '../button/icon';
 import Icon from '../../icons';
 import { hexToRGBA } from '../../styles/color-helper';
 import { typography } from '../../styles/typography';
+import { useTheme } from '../../theme';
 import { alignCenter, border, borderBox, borderRadius4px, breakWord, displayBlock, flexRow, justifyStart, positionRelative, userSelectNone } from '../../styles/general';
 const {
   heading3,
@@ -25,6 +26,9 @@ const {
     white
   }
 } = colors;
+const {
+  zIndex
+} = useTheme();
 const iconMap = new Map([['info', 'Info'], ['success', 'ApprovalFilled'], ['warning', 'Warning'], ['danger', 'CancelFilled']]);
 const maxWidthMap = new Map([['tiny', 320], ['small', 400], ['medium', 480]]);
 const primaryTypoMap = new Map([['tiny', heading5], ['small', heading4], ['medium', heading3]]);
@@ -173,7 +177,7 @@ const AlertContainerCSS = (size, progressing, duration) => css`
     transition: opacity ${progressing ? duration / 2 + 1 : duration * 1}s ease ${progressing ? duration / 2 : 0}s;
     margin-bottom: 1rem;
     pointer-events: auto;
-    z-index: 9001;
+    z-index: ${zIndex(1)}; ;
 `;
 
 const AlertInfoCSS = (mainColor, opacityColor) => css`

package/components/alert/notify.js

@@ -3,10 +3,14 @@ import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import Alert from './';
 import { randomString } from '../../utils';
+import { useTheme } from '../../theme';
+const {
+  zIndex
+} = useTheme();
 const positions = {
   general: {
     position: 'fixed',
-    zIndex: 9002,
+    zIndex: zIndex(2),
     backgroundColor: 'transparent',
     pointerEvents: 'none'
   },

package/components/chip/index.js

@@ -114,8 +114,7 @@ const Chip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       className: size
     }, jsx(Typography, {
       type: size === 'small' ? 'p2' : 'p1',
-      color: 'inherit',
-      lineClamp: 1
+      color: 'inherit'
     }, renderLabel()));
   }, [label, size, startIcon, endIcon, clearAble]);
   const endIconView = useMemo(() => {

package/components/form-control/calendar/function.js

@@ -36,216 +36,210 @@ const {
  */
 
 /**
- *
- * @param {Object} unique
- * @param {Boolean} boxShadow
- * @returns
+ * 
+ * @param {Object} unique 
+ * @param {Boolean} boxShadow 
+ * @returns 
  */
 
 const generateCalendarCSS = (unique, boxShadow = true, onClickActive = true) => css`
-    ${borderRadius4px}
-    ${borderBox}
+	${borderRadius4px}
+	${borderBox}
 	${flexCol}
 	background-color: ${white};
-    box-shadow: ${boxShadow ? theme.boxShadows.large : 'none'};
-    max-width: 400px;
-    min-width: 260px;
-    width: 100%;
-    .${unique.navigator.navigator} {
-        ${flexRow}
-        ${justifyBetween}
+	box-shadow      : ${boxShadow ? theme.boxShadows.large : 'none'};
+	max-width       : 400px;
+	min-width       : 260px;
+	width           : 100%;
+	.${unique.navigator.navigator} {
+		${flexRow}
+		${justifyBetween}
 		height         : 28px;
-        margin: 0px 14px;
-        margin-top: 14px;
-        max-width: 400px;
-        width: calc(100% - 28px);
-        .${unique.navigator.around} {
-            ${flexRow}
-            ${userSelectNone}
+		margin		   : 0px 14px;
+		margin-top     : 14px;
+		max-width      : 400px;
+		width          : calc(100% - 28px);
+		.${unique.navigator.around} {
+			${flexRow}
+			${userSelectNone}
 			height        : 28px;
-            width: 64px;
-        }
-        .${unique.navigator.center} {
-            ${inlineFlex}
-            ${alignCenter}
+			width         : 64px;
+		}
+		.${unique.navigator.center} {
+			${inlineFlex}
+			${alignCenter}
 			${textCenter}
 			${userSelectNone}
 			height     : 28px;
-            margin: 0 4px;
-            min-width: 150px;
-            width: 100%;
-            button {
-                height: 28px;
-            }
-            .DGN-UI-Typography {
-                min-width: 150px;
-            }
-        }
-    }
-    .${unique.icon} {
-        height: 28px;
-        margin: 0 2px;
-        width: 28px;
-        svg,
-        path,
-        g {
-            ${pointerEventsNone}
-        }
-    }
-    .${unique.table.container} {
-        ${flexRow}
-        margin : 10px 0;
-        margin-top: 6px;
-        width: 100%;
-    }
-    .${unique.table.table} {
-        border-collapse: separate;
-        margin: 0 16px;
-        padding: 0;
-        table-layout: fixed;
-        width: calc(100% - 32px);
-        .${unique.table.data} {
-            ${cursorPointer}
-            ${positionRelative}
+			margin     : 0 4px;
+			min-width  : 150px;
+			width	   : 100%;
+			button {
+				height: 28px;
+			}
+			.DGN-UI-Typography {
+				min-width  : 150px;
+			}
+		}
+	}
+	.${unique.icon} {
+		height: 28px;
+		margin: 0 2px;
+		width : 28px;
+		svg, path, g {
+			${pointerEventsNone}
+		}
+	}
+	.${unique.table.container} {
+		${flexRow}
+		margin : 10px 0;
+		margin-top: 6px;
+		width  : 100%;
+	}
+	.${unique.table.table} {
+		border-collapse: separate;
+		margin         : 0 16px;
+		padding        : 0;
+		table-layout   : fixed;
+		width          : calc(100% - 32px);
+		.${unique.table.data} {
+			${cursorPointer}
+			${positionRelative}
 			${textCenter}
 			${userSelectNone}
 			color      : ${main};
-            height: 24px;
-            min-width: 24px;
-            padding: 1px;
-            &:nth-of-type(7n - 1) {
-                color: ${info8} !important;
-            }
-            &:nth-of-type(7n) {
-                color: ${danger8} !important;
-            }
-            &.next_month,
-            &.previous_month,
-            &.${unique.day.limit} {
-                opacity: 0.25;
-            }
-            &.${unique.day.limit} {
-                ${pointerEventsNone}
-                cursor: default;
-            }
-            &:hover {
-                span.${unique.day.day} {
-                    background-color: ${fillHover};
-                }
-            }
-            ${onClickActive ? `&:active {
+			height     : 24px;
+			min-width  : 24px;
+			padding    : 1px;
+			&:nth-of-type(7n - 1) {
+				color: ${info8} !important;
+			}
+			&:nth-of-type(7n) {
+				color: ${danger8} !important;
+			}
+			&.next_month, &.previous_month, &.${unique.day.limit} {
+				opacity       : 0.25;
+			}
+			&.${unique.day.limit} {
+				${pointerEventsNone}
+				cursor: default;
+			}
+			&:hover {
+				span.${unique.day.day} {
+					background-color: ${fillHover};
+				}
+			}
+			${onClickActive ? `&:active {
 				span.${unique.day.day} {
 					background-color: ${fillPressed};
 				}
 			}` : ''}
-            &.${unique.day.active} {
-                span.${unique.day.day} {
-                    ${heading6};
-                    background-color: ${fillFocus};
-                }
-            }
-            &.${unique.day.today} {
-                span {
-                    ${heading6}
-                    ${borderBox}
+			&.${unique.day.active} {
+				span.${unique.day.day} {
+					${heading6};
+					background-color: ${fillFocus};
+				}
+			}
+			&.${unique.day.today} {
+				span {
+					${heading6}
+					${borderBox}
 					${border(1, active)}
 					/* text-decoration-line     : underline;
 					text-decoration-thickness: 2px;
 					text-underline-offset    : 1px */
-                }
-            }
-            &.${unique.day.between} {
-                opacity: 1;
-                &::before {
-                    background-color: ${fillHover};
-                }
-            }
-            &.${unique.day.from} {
-                opacity: 1;
-                &::before {
-                    background-color: ${fillHover};
-                    border-bottom-left-radius: 12px;
-                    border-top-left-radius: 12px;
-                    left: calc((100% - 24px) / 2);
-                }
-            }
-            &.${unique.day.to} {
-                opacity: 1;
-                &::before {
-                    background-color: ${fillHover};
-                    border-bottom-right-radius: 12px;
-                    border-top-right-radius: 12px;
-                    right: calc((100% - 24px) / 2);
-                }
-            }
-            ::before {
-                ${positionAbsolute}
-                inset: 1px -2px;
-                content: '';
-            }
-        }
-        .${unique.table.header} {
-            ${userSelectNone}
-            ${textCenter}
+				}
+			}
+			&.${unique.day.between} {
+				opacity: 1;
+				&::before{
+					background-color: ${fillHover};
+				}
+			}
+			&.${unique.day.from} {
+				opacity: 1;
+				&::before{
+					background-color         : ${fillHover};
+					border-bottom-left-radius: 12px;
+					border-top-left-radius   : 12px;
+					left					 : calc((100% - 24px)/2);
+				}
+			}
+			&.${unique.day.to} {
+				opacity: 1;
+				&::before{
+					background-color          : ${fillHover};
+					border-bottom-right-radius: 12px;
+					border-top-right-radius   : 12px;
+					right					  : calc((100% - 24px)/2);
+				}
+			}
+			::before {
+				${positionAbsolute}
+				inset: 1px -2px;
+				content: '';
+			}	
+		}
+		.${unique.table.header} {
+			${userSelectNone}
+			${textCenter}
 			color         : ${normal_label};
-            height: 24px;
-            min-width: 24px;
-            padding: 0;
-            padding-bottom: 6px;
-            &:nth-of-type(6) {
-                color: ${info8} !important;
-            }
-            &:nth-of-type(7) {
-                color: ${danger8} !important;
-            }
-        }
-    }
-    @media only screen and (max-width: 599px) {
-        .${unique.navigator.navigator} {
-            height: 24px;
-            margin-top: 14px;
-            .${unique.navigator.center} {
-                height: 24px;
-                margin: 0;
-                min-width: 130px;
-                button {
-                    height: 24px;
-                }
-                .DGN-UI-Typography {
-                    font-size: 18px;
-                    min-width: 130px;
-                }
-            }
-            .${unique.navigator.around} {
-                height: 24px;
-                width: 56px;
-            }
-            .${unique.icon} {
-                height: 24px;
-                margin: 0 2px;
-                width: 24px;
-                svg,
-                path,
-                g {
-                    ${pointerEventsNone}
-                }
-            }
-        }
-        .${unique.table.container} {
-            margin: 6px 0;
-        }
-        .${unique.table.table} {
-            margin: 0 10px;
-            width: calc(100% - 20px);
-            .DGN-UI-Typography {
-                font-size: 14px;
-            }
-        }
-    }
+			height        : 24px;
+			min-width     : 24px;
+			padding       : 0;
+			padding-bottom: 6px;
+			&:nth-of-type(6) {
+				color: ${info8} !important;
+			}
+			&:nth-of-type(7) {
+				color: ${danger8} !important;
+			}
+		}
+	}
+	@media only screen and (max-width: 599px) {
+		.${unique.navigator.navigator} {
+			height	  : 24px;
+			margin-top: 14px;
+			.${unique.navigator.center} {
+				height	 : 24px;
+				margin   : 0;
+				min-width: 130px;
+				button {
+					height: 24px;
+				}
+				.DGN-UI-Typography {
+					font-size: 18px;
+					min-width: 130px;
+				}
+			}
+			.${unique.navigator.around} {
+				height: 24px;
+				width : 56px;
+			}
+			.${unique.icon} {
+				height: 24px;
+				margin: 0 2px;
+				width : 24px;
+				svg, path, g {
+					${pointerEventsNone}
+				}
+			}
+		}
+		.${unique.table.container} {
+			margin: 6px 0;
+		}
+		.${unique.table.table} {
+			margin: 0 10px;
+			width : calc(100% - 20px);
+			.DGN-UI-Typography {
+				font-size: 14px;
+			}
+		}
+	}
 `;
 /**
- * END STYLE
- */
+* END STYLE
+*/
 
 /**
  *
@@ -273,9 +267,9 @@ const typographyProps = className => {
   };
 };
 /**
- *
+ * 
  * @description return props of the button icon.
- * @param {String} className
+ * @param {String} className 
  * @returns {Object} props of the button icon
  */
 
@@ -291,9 +285,9 @@ const buttonIconProps = className => {
   };
 };
 /**
- *
+ * 
  * @description return props of the button icon.
- * @param {Function} fn
+ * @param {Function} fn 
  * @returns {Object} props of the button text
  */
 
@@ -313,7 +307,7 @@ const buttonTextProps = fn => {
 };
 /**
  * @description detect value is a Date object
- * @param {String | Number | Array} value
+ * @param {String | Number | Array} value 
  * @returns boolean
  */
 
@@ -409,15 +403,15 @@ const isAfterLimit = (max, time) => {
   return max && isValidDate(max) && moment(time).diff(new Date(max).setHours(0, 0, 0, 0)) > 0;
 };
 /**
- *
+ * 
  * @description return the table body of the calendar.
  * @param {Date} time
  * @param {Date} activeValue
  * @param {Object} className
  * @param {Boolean} displayAnotherMonth
  * @param {Function} onTableDataClick
- * @param {Date} min
- * @param {Date} max
+ * @param {Date} min 
+ * @param {Date} max 
  * @returns {Element}
  */
 
@@ -548,9 +542,9 @@ const renderTableBody = (time, activeValue, className, displayAnotherMonth, onTa
   return tableBody;
 };
 /**
- *
- * @param {Object} className
- * @returns
+ * 
+ * @param {Object} className 
+ * @returns 
  */
 
 
@@ -574,13 +568,13 @@ const renderHeader = className => {
   return header;
 };
 /**
- *
- * @param {Object} className
- * @param {Object} refs
- * @param {Function} dbLeftFn
- * @param {Function} leftFn
- * @param {Function} rightFn
- * @param {Function} dbRightFn
+ * 
+ * @param {Object} className 
+ * @param {Object} refs 
+ * @param {Function} dbLeftFn 
+ * @param {Function} leftFn 
+ * @param {Function} rightFn 
+ * @param {Function} dbRightFn 
  * @returns navigator
  */
 
@@ -616,8 +610,8 @@ const renderNavigator = (className, refs, dbLeftFn, leftFn, rightFn, dbRightFn,
   ref: refs.doubleRight
 })));
 /**
- *
- * @param {Date} time
+ * 
+ * @param {Date} time 
  * @returns {String} month year
  */
 
@@ -628,11 +622,11 @@ const renderNavigatorContent = time => {
   return [months[value.getMonth()], value.getFullYear()];
 };
 /**
- *
- * @param {Date} time
- * @param {Object} refs
- * @param {Date} min
- * @param {Date} max
+ * 
+ * @param {Date} time 
+ * @param {Object} refs 
+ * @param {Date} min 
+ * @param {Date} max 
  */
 
 
@@ -675,17 +669,17 @@ const onUpdateNavigator = (time, refs, min, max) => {
   }
 };
 /**
- *
- * @param {Date} time
- * @param {Object} navigatorRefs
- * @param {Date} min
- * @param {Date} max
- * @param {Element} table
- * @param {Date} activeValue
- * @param {Object} className
- * @param {Boolean} displayAnotherMonth
- * @param {Function} onTableDataClick
- * @param {Function} onUpdateNavigatorValue
+ * 
+ * @param {Date} time 
+ * @param {Object} navigatorRefs 
+ * @param {Date} min 
+ * @param {Date} max 
+ * @param {Element} table 
+ * @param {Date} activeValue 
+ * @param {Object} className 
+ * @param {Boolean} displayAnotherMonth 
+ * @param {Function} onTableDataClick 
+ * @param {Function} onUpdateNavigatorValue 
  */
 
 

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

@@ -10,6 +10,7 @@ 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 { useTheme } from '../../../theme';
 const {
   paragraph1
 } = typography;
@@ -25,6 +26,9 @@ const {
     'scrollbar-tabbar': scrollbar
   }
 } = colors;
+const {
+  zIndex: zIndexCORE
+} = useTheme();
 const timing = {};
 const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   className,
@@ -248,7 +252,7 @@ DropdownBox.defaultProps = {
   viewType: 'underlined',
   inputProps: {},
   delayOnInput: 700,
-  zIndex: 9001
+  zIndex: zIndexCORE(1)
 };
 DropdownBox.propTypes = {
   /** class for dropdown */