diginet-core-ui 1.3.88 → 1.3.89

package/components/check-text/index.js

@@ -1,12 +1,11 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import { memo, useEffect, useRef, forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import theme from "../../theme/settings";
 import Typography from "../typography";
-const color = [`${theme.colors.info}`, `${theme.colors.success}`, `${theme.colors.warning}`, `${theme.colors.danger}`];
+const color = [`${theme.colors.semantic.info}`, `${theme.colors.semantic.success}`, `${theme.colors.semantic.warning}`, `${theme.colors.semantic.danger}`];
 const colorNum = {
   option0: 0,
   option1: 1,
@@ -24,10 +23,9 @@ const InterviewStatus = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   if (!ref) {
     ref = useRef(null);
   }
-
   const checkText = css`
             display: inline-flex;
-            color: ${disabled ? theme.colors.disabled : theme.colors.border};
+            color: ${disabled ? theme.colors.system.disabled : theme.colors.system.rest};
             div:nth-of-type(1):hover {
                 color: ${color[0]};
             }
@@ -45,10 +43,9 @@ const InterviewStatus = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
             margin: 2px 19px;
             width: 2px;
             height: 16px;
-            background: ${theme.colors.border};
+            background: ${theme.colors.system.rest};
             border-radius: 1px;
         `;
-
   const onClickItem = (e, index) => {
     const clickedItem = ref.current.querySelectorAll('div');
     if (readOnly || clickedItem[index].style.color) return;
@@ -66,7 +63,6 @@ const InterviewStatus = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     if (onClick) onClick(e);
     if (onChoose) onChoose(e);
   };
-
   useEffect(() => {
     ref.current.querySelectorAll('div').forEach((el, i) => {
       if (i === chosen || el.textContent === chosen) {
@@ -87,7 +83,7 @@ const InterviewStatus = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     type: 'p2',
     style: {
       lineHeight: '20px',
-      color: `${disabled ? `${theme.colors.disabled} !important` : 'inherit'}`,
+      color: `${disabled ? `${theme.colors.system.disabled} !important` : 'inherit'}`,
       cursor: `${readOnly ? 'default' : 'pointer'}`,
       pointerEvents: `${disabled ? 'none' : 'auto'}`,
       userSelect: 'none'
@@ -100,7 +96,7 @@ const InterviewStatus = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     type: 'p2',
     style: {
       lineHeight: '20px',
-      color: `${disabled ? `${theme.colors.disabled} !important` : 'inherit'}`,
+      color: `${disabled ? `${theme.colors.system.disabled} !important` : 'inherit'}`,
       cursor: `${readOnly ? 'default' : 'pointer'}`,
       pointerEvents: `${disabled ? 'none' : 'auto'}`,
       userSelect: 'none'
@@ -113,7 +109,7 @@ const InterviewStatus = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     type: 'p2',
     style: {
       lineHeight: '20px',
-      color: `${disabled ? `${theme.colors.disabled} !important` : 'inherit'}`,
+      color: `${disabled ? `${theme.colors.system.disabled} !important` : 'inherit'}`,
       cursor: `${readOnly ? 'default' : 'pointer'}`,
       pointerEvents: `${disabled ? 'none' : 'auto'}`,
       userSelect: 'none'
@@ -126,7 +122,7 @@ const InterviewStatus = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     type: 'p2',
     style: {
       lineHeight: '20px',
-      color: `${disabled ? `${theme.colors.disabled} !important` : 'inherit'}`,
+      color: `${disabled ? `${theme.colors.system.disabled} !important` : 'inherit'}`,
       cursor: `${readOnly ? 'default' : 'pointer'}`,
       pointerEvents: `${disabled ? 'none' : 'auto'}`,
       userSelect: 'none'
@@ -142,16 +138,12 @@ InterviewStatus.defaultProps = {
 InterviewStatus.propsTypes = {
   /** Prevent all event if true */
   disabled: PropTypes.bool,
-
   /** Item of CheckText in CheckText component */
   option: PropTypes.oneOf(['status', 'success', 'warning', 'danger']),
-
   /** the displayed chosen for each change */
   chosen: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
   /** The function will run to return a value of CheckText Component */
   onClick: PropTypes.func,
-
   /** The function will run to return a value of CheckText Component */
   onChoose: PropTypes.func
 };

package/components/check-text/interview-confirmation.js

@@ -1,12 +1,11 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import { memo, useMemo, useEffect, useRef, forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import theme from "../../theme/settings";
 import Typography from "../typography";
-const color = [`${theme.colors.warning}`, `${theme.colors.success}`, `${theme.colors.danger}`];
+const color = [`${theme.colors.semantic.warning}`, `${theme.colors.semantic.success}`, `${theme.colors.semantic.danger}`];
 const colorNum = {
   Yes: 0,
   Maybe: 1,
@@ -22,31 +21,29 @@ const InterviewConfirmation = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   if (!ref) {
     ref = useRef(null);
   }
-
   const checkText = css`
-        display: inline-flex;
-        color: ${disabled ? theme.colors.disabled : theme.colors.border};
-        div:nth-of-type(1):hover {
-            color: ${color[0]};
-        }
-        div:nth-of-type(2):hover {
-            color: ${color[1]};
-        }
-        div:nth-of-type(3):hover {
-            color: ${color[2]};
-        }
-    `;
+            display: inline-flex;
+            color: ${disabled ? theme.colors.text.disabled : theme.colors.system.rest};
+            div:nth-of-type(1):hover {
+                color: ${color[0]};
+            }
+            div:nth-of-type(2):hover {
+                color: ${color[1]};
+            }
+            div:nth-of-type(3):hover {
+                color: ${color[2]};
+            }
+        `;
   const checkTextItemText = css`
-        margin-left: 10px;
-    `;
+            margin-left: 10px;
+        `;
   const checkTextDivider = css`
-        margin: 2px 19px;
-        width: 2px;
-        height: 16px;
-        background: ${theme.colors.border};
-        border-radius: 1px;
-    `;
-
+            margin: 2px 19px;
+            width: 2px;
+            height: 16px;
+            background: ${theme.colors.system.rest};
+            border-radius: 1px;
+        `;
   const onClickItem = (e, index) => {
     const clickedItem = ref.current.querySelectorAll('div');
     if (readOnly || clickedItem[index].style.color) return;
@@ -64,7 +61,6 @@ const InterviewConfirmation = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     if (onClick) onClick(e);
     if (onChoose) onChoose(e);
   };
-
   useEffect(() => {
     ref.current.querySelectorAll('div').forEach((el, i) => {
       if (i === chosen || el.textContent === chosen) {
@@ -81,7 +77,7 @@ const InterviewConfirmation = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     type: 'p2',
     style: {
       lineHeight: '20px',
-      color: `${disabled ? `${theme.colors.disabled} !important` : 'inherit'}`,
+      color: `${disabled ? `${theme.colors.text.disabled} !important` : 'inherit'}`,
       cursor: `${readOnly ? 'default' : 'pointer'}`,
       pointerEvents: `${disabled ? 'none' : 'auto'}`,
       userSelect: 'none'
@@ -107,7 +103,7 @@ const InterviewConfirmation = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     type: 'p2',
     style: {
       lineHeight: '20px',
-      color: `${disabled ? `${theme.colors.disabled} !important` : 'inherit'}`,
+      color: `${disabled ? `${theme.colors.text.disabled} !important` : 'inherit'}`,
       cursor: `${readOnly ? 'default' : 'pointer'}`,
       pointerEvents: `${disabled ? 'none' : 'auto'}`,
       userSelect: 'none'
@@ -134,7 +130,7 @@ const InterviewConfirmation = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     type: 'p2',
     style: {
       lineHeight: '20px',
-      color: `${disabled ? `${theme.colors.disabled} !important` : 'inherit'}`,
+      color: `${disabled ? `${theme.colors.text.disabled} !important` : 'inherit'}`,
       cursor: `${readOnly ? 'default' : 'pointer'}`,
       pointerEvents: `${disabled ? 'none' : 'auto'}`,
       userSelect: 'none'
@@ -159,13 +155,10 @@ const InterviewConfirmation = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 InterviewConfirmation.propsTypes = {
   /** Prevent all event if true */
   disabled: PropTypes.bool,
-
   /** the displayed chosen for each change */
   chosen: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
   /** The function will run to return a value of CheckText Component */
   onClick: PropTypes.func,
-
   /** The function will run to return a value of CheckText Component */
   onChoose: PropTypes.func
 };

package/components/check-text/interview-status.js

@@ -1,12 +1,11 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import { memo, useMemo, useEffect, useRef, forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import theme from "../../theme/settings";
 import Typography from "../typography";
-const color = [`${theme.colors.warning}`, `${theme.colors.success}`, `${theme.colors.danger}`];
+const color = [`${theme.colors.semantic.warning}`, `${theme.colors.semantic.success}`, `${theme.colors.semantic.danger}`];
 const colorNum = {
   Scheduled: 0,
   Started: 1,
@@ -22,31 +21,29 @@ const InterviewStatus = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   if (!ref) {
     ref = useRef(null);
   }
-
   const checkText = css`
-        display: inline-flex;
-        color: ${disabled ? theme.colors.disabled : theme.colors.border};
-        div:nth-of-type(1):hover {
-            color: ${color[0]};
-        }
-        div:nth-of-type(2):hover {
-            color: ${color[1]};
-        }
-        div:nth-of-type(3):hover {
-            color: ${color[2]};
-        }
-    `;
+            display: inline-flex;
+            color: ${disabled ? theme.colors.text.disabled : theme.colors.system.rest};
+            div:nth-of-type(1):hover {
+                color: ${color[0]};
+            }
+            div:nth-of-type(2):hover {
+                color: ${color[1]};
+            }
+            div:nth-of-type(3):hover {
+                color: ${color[2]};
+            }
+        `;
   const checkTextItemText = css`
-        margin-left: 10px;
-    `;
+            margin-left: 10px;
+        `;
   const checkTextDivider = css`
-        margin: 2px 19px;
-        width: 2px;
-        height: 16px;
-        background: ${theme.colors.border};
-        border-radius: 1px;
-    `;
-
+            margin: 2px 19px;
+            width: 2px;
+            height: 16px;
+            background: ${theme.colors.system.rest};
+            border-radius: 1px;
+        `;
   const onClickItem = (e, index) => {
     const clickedItem = ref.current.querySelectorAll('div');
     if (readOnly || clickedItem[index].style.color) return;
@@ -64,7 +61,6 @@ const InterviewStatus = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     if (onClick) onClick(e);
     if (onChoose) onChoose(e);
   };
-
   useEffect(() => {
     ref.current.querySelectorAll('div').forEach((el, i) => {
       if (i === chosen || el.textContent === chosen) {
@@ -81,7 +77,7 @@ const InterviewStatus = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     type: 'p2',
     style: {
       lineHeight: '20px',
-      color: `${disabled ? `${theme.colors.disabled} !important` : 'inherit'}`,
+      color: `${disabled ? `${theme.colors.text.disabled} !important` : 'inherit'}`,
       cursor: `${readOnly ? 'default' : 'pointer'}`,
       pointerEvents: `${disabled ? 'none' : 'auto'}`,
       userSelect: 'none'
@@ -96,7 +92,7 @@ const InterviewStatus = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     type: 'p2',
     style: {
       lineHeight: '20px',
-      color: `${disabled ? `${theme.colors.disabled} !important` : 'inherit'}`,
+      color: `${disabled ? `${theme.colors.text.disabled} !important` : 'inherit'}`,
       cursor: `${readOnly ? 'default' : 'pointer'}`,
       pointerEvents: `${disabled ? 'none' : 'auto'}`,
       userSelect: 'none'
@@ -111,7 +107,7 @@ const InterviewStatus = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     type: 'p2',
     style: {
       lineHeight: '20px',
-      color: `${disabled ? `${theme.colors.disabled} !important` : 'inherit'}`,
+      color: `${disabled ? `${theme.colors.text.disabled} !important` : 'inherit'}`,
       cursor: `${readOnly ? 'default' : 'pointer'}`,
       pointerEvents: `${disabled ? 'none' : 'auto'}`,
       userSelect: 'none'
@@ -125,13 +121,10 @@ const InterviewStatus = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 InterviewStatus.propsTypes = {
   /** Prevent all event if true */
   disabled: PropTypes.bool,
-
   /** the displayed chosen for each change */
   chosen: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
   /** The function will run to return a value of CheckText Component */
   onClick: PropTypes.func,
-
   /** The function will run to return a value of CheckText Component */
   onChoose: PropTypes.func
 };

package/components/chip/attach.js

@@ -1,5 +1,4 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import { Fragment, memo, useMemo, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
@@ -43,10 +42,8 @@ const AttachChip = /*#__PURE__*/memo(({
             display: flex;
         }
     `;
-
   const getStartIcon = () => {
     var _file$FileName;
-
     const lastIndexOfDot = (_file$FileName = file.FileName) === null || _file$FileName === void 0 ? void 0 : _file$FileName.lastIndexOf('.');
     if (!lastIndexOfDot) return null;
     const fileExt = file.FileName.slice(lastIndexOfDot + 1);
@@ -58,19 +55,16 @@ const AttachChip = /*#__PURE__*/memo(({
       viewBox: true
     });
   };
-
   const clickOutAction = event => {
     if (!moreActionRef.current) {
       document.removeEventListener('click', clickOutAction);
       return;
     }
-
     if (!moreActionRef.current.contains(event.target)) {
       moreActionRef.current.classList.remove('DGN-UI-Chip-show');
       document.removeEventListener('click', clickOutAction);
     }
   };
-
   const onShowMoreOption = () => {
     if (!moreActionRef.current.classList.contains('DGN-UI-Chip-show')) {
       moreActionRef.current.classList.add('DGN-UI-Chip-show');
@@ -79,7 +73,6 @@ const AttachChip = /*#__PURE__*/memo(({
       }, 100);
     }
   };
-
   const viewAction = (e, file) => {
     if (onView) {
       onView(e, file);
@@ -87,15 +80,14 @@ const AttachChip = /*#__PURE__*/memo(({
       setOpen(true);
     }
   };
-
   const downloadAction = (e, file = {}) => {
     if (onDownload) onDownload(e, file);else if (file.URL) {
       fetch(file.URL).then(resp => resp.blob()).then(blob => {
         const url = window.URL.createObjectURL(blob);
         const a = document.createElement('a');
         a.style.display = 'none';
-        a.href = url; // the filename you want
-
+        a.href = url;
+        // the filename you want
         a.download = file.FileName;
         document.body.appendChild(a);
         a.click();
@@ -103,22 +95,18 @@ const AttachChip = /*#__PURE__*/memo(({
       }).catch(() => alert('File not found'));
     }
   };
-
   const deleteAction = (e, file) => {
     if (onRemove) onRemove(e, file);
     setTimeout(() => {
       if (moreActionRef.current && moreActionRef.current.parentNode) moreActionRef.current.parentNode.remove();
     }, 0);
   };
-
   const renderLabel = label => {
     if (maxLength && label && label.length > maxLength) {
       label = label.slice(0, maxLength) + '...';
     }
-
     return label;
   };
-
   const attachView = useMemo(() => {
     return jsx(ModalSample, {
       open: open,
@@ -128,7 +116,8 @@ const AttachChip = /*#__PURE__*/memo(({
       url: file.URL
     })));
   }, [open]);
-  return jsx(Fragment, null, jsx(Chip, { ...props,
+  return jsx(Fragment, null, jsx(Chip, {
+    ...props,
     clearAble: false,
     label: renderLabel(file.FileName),
     startIcon: getStartIcon(),
@@ -156,20 +145,18 @@ const AttachChip = /*#__PURE__*/memo(({
   }))), attachView);
 });
 AttachChip.propTypes = {
-  /** the file info, such as:<br/>
-   * {<br/>
-   *  URL: https://url.com/pathname,<br/>
-   *  FileName: file.name,<br/>
-   * }
+  /** the file info, such as:<br/>
+   * {<br/>
+   *  URL: https://url.com/pathname,<br/>
+   *  FileName: file.name,<br/>
+   * }
    */
   file: PropTypes.shape({
     URL: PropTypes.string.isRequired,
     FileName: PropTypes.string.isRequired
   }).isRequired,
-
   /** max length content to display was allowed */
   maxLength: PropTypes.number,
-
   /** any props else of Chip component */
   props: PropTypes.any
 };

package/components/chip/index.js

@@ -1,5 +1,4 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import { memo, useRef, forwardRef, useMemo, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
@@ -11,21 +10,23 @@ import { hexToRGBA } from "../../styles/color-helper";
 import { useTheme, useColor as colors } from "../../theme";
 const {
   colors: {
-    danger,
-    info,
-    success,
-    warning,
     system: {
       active,
       rest,
       white,
       disabled: disabledCl,
       dark
+    },
+    semantic: {
+      success: semanticSuccess,
+      warning: semanticWarning,
+      danger: semanticDanger,
+      info: semanticInfo
     }
   },
   spacing
 } = useTheme();
-const colorMap = new Map([['default', active], ['primary', active], ['success', success], ['warning', warning], ['danger', danger], ['info', info]]);
+const colorMap = new Map([['default', active], ['primary', active], ['success', semanticSuccess], ['warning', semanticWarning], ['danger', semanticDanger], ['info', semanticInfo]]);
 const iconSizeMap = new Map([['small', `${spacing(4)}px`], ['medium', `${spacing(5)}px`], ['large', `${spacing(6)}px`]]);
 const typographySizeMap = new Map([['small', 'p3'], ['medium', 'p2'], ['large', 'p1']]);
 const paddingSizeMap = new Map([['small', `0px ${spacing(1.5)}px`], ['medium', `0px ${spacing(2)}px`], ['large', `0px ${spacing(2.5)}px`]]);
@@ -70,30 +71,25 @@ const Chip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
     const _instance = {}; // methods
-
     _instance.__proto__ = {}; // hidden methods
-
     currentRef.instance = _instance;
     return currentRef;
   });
-
   const onRemoveHandler = () => {
     if (onRemove || disabled) onRemove(ref.current);
   };
-
   const _onClick = event => {
     onClick && event.stopPropagation();
     if (disabled) return;
     onClick && onClick(event);
   };
-
   const _onDbClick = event => {
     onDbClick && event.stopPropagation();
     if (disabled) return;
     onDbClick && onDbClick(event);
-  }; // Start Icon
-
+  };
 
+  // Start Icon
   const startIconView = useMemo(() => {
     if (typeof startIcon === 'string') {
       return jsx(Icon, {
@@ -105,8 +101,9 @@ const Chip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     } else return jsx("div", {
       css: ChipIconCSS(infoChip)
     }, startIcon);
-  }, [startIcon, size]); // Label
+  }, [startIcon, size]);
 
+  // Label
   const labelView = useMemo(() => {
     return jsx(Typography, {
       css: ChipLabelCSS,
@@ -115,11 +112,11 @@ const Chip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       lineClamp: 1,
       ...labelProps
     }, label);
-  }, [label, size, startIcon, endIcon, clearAble]); // End Icon
+  }, [label, size, startIcon, endIcon, clearAble]);
 
+  // End Icon
   const endIconView = useMemo(() => {
     let node = endIcon;
-
     if (typeof node === 'string') {
       return jsx(Icon, {
         name: node,
@@ -129,7 +126,6 @@ const Chip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         viewBox: true
       });
     }
-
     return clearAble ? jsx(ButtonIcon, {
       ref: IconRef,
       className: 'end-icon',
@@ -162,7 +158,6 @@ const ChipLabelCSS = css`
     ${positionRelative};
     ${userSelectNone};
 `;
-
 const ChipRootCSS = (onClick, onDbClick, colorProps, info) => css`
     ${displayInlineFlex};
     ${itemsCenter};
@@ -225,7 +220,6 @@ const ChipRootCSS = (onClick, onDbClick, colorProps, info) => css`
         ${cursorNotAllowed}
     }
 `;
-
 const ChipIconCSS = info => css`
     ${flexRow};
     ${justifyCenter};
@@ -240,7 +234,6 @@ const ChipIconCSS = info => css`
     min-height: ${info === null || info === void 0 ? void 0 : info.iconSize};
     max-height: ${info === null || info === void 0 ? void 0 : info.iconSize};
 `;
-
 Chip.defaultProps = {
   viewType: 'outlined',
   size: 'medium',
@@ -249,57 +242,39 @@ Chip.defaultProps = {
 Chip.propTypes = {
   /** content to display in Chip */
   label: PropTypes.string,
-
   /** class of Chip element */
   className: PropTypes.string,
-
   /** max length content to display was allowed */
-
   /** style inline of component */
   style: PropTypes.object,
-
   /** the icon display at head of Chip */
   startIcon: PropTypes.any,
-
   /** the icon display at last of Chip */
   endIcon: PropTypes.any,
-
   /** type of chip */
   viewType: PropTypes.oneOf(['ghost', 'outlined', 'filled']),
-
   /** color for text or background of Chip */
   color: PropTypes.oneOfType([PropTypes.oneOf(['default', 'primary', 'info', 'success', 'warning', 'danger']), PropTypes.string]),
-
   /** size of Chip */
   size: PropTypes.oneOf(['small', 'medium', 'large']),
-
   /** show clear icon if true */
   clearAble: PropTypes.bool,
-
   /** prevent all event and change color if true */
   disabled: PropTypes.bool,
-
   /** prevent all event if true */
   readOnly: PropTypes.bool,
-
   /** the function to get ref of Chip */
   refs: PropTypes.func,
-
   /** the function will run after remove chip */
   onRemove: PropTypes.func,
-
   /** the function will run when click on chip */
   onClick: PropTypes.func,
-
   /** the function will run when double click on chip */
   onDbClick: PropTypes.func,
-
   /** like onDbClick (priority onDbClick) */
   onDoubleClick: PropTypes.func,
-
   /** content to display on Chip (the same to label) */
   children: PropTypes.node,
-
   /** props for Typography of label */
   labelProps: PropTypes.object
 };