diginet-core-ui 1.3.65 → 1.3.66

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

@@ -1,7 +1,7 @@
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import { memo, useState, useEffect, useRef, forwardRef, useImperativeHandle } from 'react';
+import { memo, useEffect, useRef, forwardRef, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import { InputBase, Label, HelperText, Typography } from '../../';
@@ -27,19 +27,14 @@ const PhoneInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   defaultValue,
   value,
   placeholder,
-  autoComplete,
   autoFocus,
   disabled,
   readOnly,
   multiline,
-  onConfirm,
   refs,
   inputRef,
   inputProps,
-  iconStyle,
   inputStyle,
-  labelProps,
-  errorProps,
   error,
   onChange,
   onBlur,
@@ -58,18 +53,18 @@ const PhoneInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
 
   const PhoneInputRoot = css`
-        display: block;
-        position: relative;
-    `;
+                display: block;
+                position: relative;
+            `;
   const PhoneInputEnsign = css`
-        display: inline-flex;
-        position: relative;
-        max-height: 24px;
-        align-items: center;
-        svg {
-            margin-right: 4px;
-        }
-    `;
+                display: inline-flex;
+                position: relative;
+                max-height: 24px;
+                align-items: center;
+                svg {
+                    margin-right: 4px;
+                }
+            `;
   /* End styled */
 
   let currentKey,
@@ -324,7 +319,7 @@ const PhoneInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     onPaste: onPasteHandler,
     startIcon: jsx("span", {
       css: PhoneInputEnsign
-    }, !hiddenEnsign && ensigns[ensign].icon, " ", jsx(Typography, null, "(+", ensigns[ensign].countryCode, ")")),
+    }, !hiddenEnsign && ensigns[ensign].icon, ' ', jsx(Typography, null, "(+", ensigns[ensign].countryCode, ")")),
     startIconProps: {
       className: 'non-effect'
     }
@@ -368,9 +363,6 @@ PhoneInput.propTypes = {
   /** error for input */
   error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
 
-  /** type auto complete of input (like new-password) */
-  autoComplete: PropTypes.string,
-
   /** prevent all event if true, hide all icon */
   disabled: PropTypes.bool,
 
@@ -392,12 +384,6 @@ PhoneInput.propTypes = {
   /** style inline of input in PhoneInput component */
   inputStyle: PropTypes.object,
 
-  /** any props of label in PhoneInput component */
-  labelProps: PropTypes.object,
-
-  /** any props of error in PhoneInput component */
-  errorProps: PropTypes.object,
-
   /** The function to get ref of Dropdown component */
   refs: PropTypes.func,
 
@@ -410,13 +396,13 @@ PhoneInput.propTypes = {
   /** on input function */
   onInput: PropTypes.func,
 
-  /**
-   * on change function. Return a object, example:<br/>
-   * {<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;target: {value: "(+84) 123 456 789", ...}<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;value: 0123456789<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;countryCode: 84<br/>
-   * }
+  /**
+   * on change function. Return a object, example:<br/>
+   * {<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;target: {value: "(+84) 123 456 789", ...}<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;value: 0123456789<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;countryCode: 84<br/>
+   * }
    */
   onChange: PropTypes.func,
 

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

@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import { ButtonIcon, CircularProgress as Circular, HelperText, InputBase, Label } from '../../';
 import { renderIcon, onValidate } from '../../../utils';
-import { displayBlock, flexRow, positionRelative } from '../../../styles/general';
+import { cursorNotAllowed, displayBlock, flexRow, positionRelative } from '../../../styles/general';
 const icons = {
   default: `<svg width="20" height="19" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path fillRule="evenodd" clipRule="evenodd" d="M15.5616 19.0007C15.4036 19.0007 15.2446 18.9637 15.0986 18.8877L9.99962 16.2237L4.90162 18.8877C4.56362 19.0627 4.15562 19.0327 3.84962 18.8087C3.54162 18.5847 3.38862 18.2057 3.45362 17.8307L4.42462 12.2027L0.304623 8.21765C0.030623 7.95265 -0.068377 7.55465 0.048623 7.19065C0.165623 6.82865 0.478623 6.56365 0.856623 6.50965L6.55662 5.68165L9.10462 0.555654C9.44262 -0.124346 10.5576 -0.124346 10.8956 0.555654L13.4436 5.68165L19.1436 6.50965C19.5216 6.56365 19.8346 6.82865 19.9516 7.19065C20.0686 7.55465 19.9696 7.95265 19.6956 8.21765L15.5756 12.2027L16.5466 17.8307C16.6116 18.2057 16.4576 18.5847 16.1506 18.8087C15.9766 18.9367 15.7696 19.0007 15.5616 19.0007Z" fill="#7F828E"/>
@@ -81,15 +81,18 @@ const TextInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   /* Start styled */
 
   const TextInputRoot = css`
-                ${displayBlock}
-                ${positionRelative}
-        margin-bottom: 20px;
+                ${displayBlock};
+                ${positionRelative};
+                margin-bottom: 20px;
+                &.disabled {
+                    ${cursorNotAllowed};
+                }
             `;
   const TextInputIcon = css`
-                ${flexRow}
+                ${flexRow};
                 color: inherit;
                 .edit-icon-pen {
-                    ${flexRow}
+                    ${flexRow};
                 }
                 .edit-icon-confirm {
                     display: none;

package/components/form-control/time-picker/index.js

@@ -479,7 +479,8 @@ const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const escKeyFunc = ev => {
     //call the useOnClickOutside when press esc key
     if (ev.keyCode === 27) {
-      onBlur();
+      onBlur(); // eslint-disable-next-line no-undef
+
       inputContainerRef.current.childNodes[0].blur();
     }
   };

package/components/form-control/time-picker/swiper.js

@@ -1,7 +1,11 @@
+/* eslint-disable no-unused-vars */
+
+/* eslint-disable react/prop-types */
+
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import { useEffect, useMemo, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import { jsx, css } from '@emotion/core';
 import PropTypes from 'prop-types';
 import { randomString } from '../../../utils';
@@ -95,84 +99,84 @@ const Swiper = props => {
 
   const styles = {
     container: css`
-			* {
-				box-sizing: border-box;
-			}
-			background-color: #fff;
-			border-radius: 0;
-			color: #111d5e;
-			height: 100%;
-			overflow: hidden;
-			position: relative;
-			text-align: center;
-			width: 100%;
-			::before,
-			::after {
-				border-radius: 0px;
-				content: '';
-				display: block;
-				height: 50%;
-				pointer-events: none;
-				position: absolute;
-				width: 100%;
-				/* z-index: 9003; */
-				z-index: 1;
-			}
-			::before {
-				top: 0;
-				background-image: linear-gradient(to bottom, ${gradient});
-			}
-			::after {
-				bottom: 0;
-				background-image: linear-gradient(to top, ${gradient});
-			}
-		`,
+            * {
+                box-sizing: border-box;
+            }
+            background-color: #fff;
+            border-radius: 0;
+            color: #111d5e;
+            height: 100%;
+            overflow: hidden;
+            position: relative;
+            text-align: center;
+            width: 100%;
+            ::before,
+            ::after {
+                border-radius: 0px;
+                content: '';
+                display: block;
+                height: 50%;
+                pointer-events: none;
+                position: absolute;
+                width: 100%;
+                /* z-index: 9003; */
+                z-index: 1;
+            }
+            ::before {
+                top: 0;
+                background-image: linear-gradient(to bottom, ${gradient});
+            }
+            ::after {
+                bottom: 0;
+                background-image: linear-gradient(to top, ${gradient});
+            }
+        `,
     mainSelector: css`
-			-webkit-font-smoothing: subpixel-antialiased;
-			color: #111d53;
-			list-style: none;
-			margin: 0 auto;
-			position: absolute;
-			top: 50%;
-			transform-style: preserve-3d;
-			transform: translate3d(0, 0, ${-radius}px) rotateX(0deg);
-			width: 100%;
-			.${IDs.mainOption} {
-				-webkit-font-smoothing: subpixel-antialiased;
-				backface-visibility: hidden;
-				cursor: pointer;
-				position: absolute;
-				user-select: none;
-			}
-		`,
+            -webkit-font-smoothing: subpixel-antialiased;
+            color: #111d53;
+            list-style: none;
+            margin: 0 auto;
+            position: absolute;
+            top: 50%;
+            transform-style: preserve-3d;
+            transform: translate3d(0, 0, ${-radius}px) rotateX(0deg);
+            width: 100%;
+            .${IDs.mainOption} {
+                -webkit-font-smoothing: subpixel-antialiased;
+                backface-visibility: hidden;
+                cursor: pointer;
+                position: absolute;
+                user-select: none;
+            }
+        `,
     highlightContainer: css`
-			background-color: #fff;
-			border-bottom: 1px solid #7f828e;
-			border-top: 1px solid #7f828e;
-			color: #111d53;
-			font-size: 24px;
-			font-weight: 500;
-			height: ${itemHeight}px;
-			left: 50%;
-			line-height: ${itemHeight}px;
-			overflow: hidden;
-			position: absolute;
-			top: 50%;
-			transform: translate(-50%, -50%);
-			vertical-align: middle;
-			width: 70%;
-		`,
+            background-color: #fff;
+            border-bottom: 1px solid #7f828e;
+            border-top: 1px solid #7f828e;
+            color: #111d53;
+            font-size: 24px;
+            font-weight: 500;
+            height: ${itemHeight}px;
+            left: 50%;
+            line-height: ${itemHeight}px;
+            overflow: hidden;
+            position: absolute;
+            top: 50%;
+            transform: translate(-50%, -50%);
+            vertical-align: middle;
+            width: 70%;
+        `,
     highlightSelector: css`
-			list-style: none;
-			margin: 0;
-			padding: 0;
-			position: absolute;
-			width: 100%;
-			.${IDs.highlightOption} {
-				cursor: pointer;
-				user-select: none;
-			}
-		`
+            list-style: none;
+            margin: 0;
+            padding: 0;
+            position: absolute;
+            width: 100%;
+            .${IDs.highlightOption} {
+                cursor: pointer;
+                user-select: none;
+            }
+        `
   };
 
   const renderSwiper = data => {

package/components/form-view/helper-text.js

@@ -1,3 +1,4 @@
+/* eslint-disable react/display-name */
 import React, { memo } from 'react';
 import PropTypes from 'prop-types';
 import { Typography } from '../';

package/components/grid/Col.js

@@ -27,9 +27,9 @@ const useStyles = makeStyles({
     }
   }
 });
-const classes = useStyles();
 
 const Col = props => {
+  const classes = useStyles();
   const {
     className
   } = props;

package/components/index.js

@@ -78,7 +78,10 @@ export { default as PagingSelector } from './paging/page-selector2'; // PAPER
 
 export { default as Paper } from './paper'; // POPOVER
 
-export { default as Popover } from './popover'; // POPUP
+export { default as Popover } from './popover';
+export { default as PopoverHeader } from './popover/header';
+export { default as PopoverBody } from './popover/body';
+export { default as PopoverFooter } from './popover/footer'; // POPUP
 
 export { default as Popup } from './popup';
 export { default as PopupV2 } from './popup/v2';

package/components/modal/index.js

@@ -1,3 +1,4 @@
+/* eslint-disable react/display-name */
 import React, { memo, useEffect, useRef, forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import Modal from './modal';

package/components/others/extra/index.js

@@ -1,3 +1,5 @@
+/* eslint-disable react/prop-types */
+
 /** @jsxRuntime classic */
 
 /** @jsx jsx */

package/components/others/scrollbar/index.js

@@ -35,35 +35,35 @@ const scrollbar = ({
   ...props
 }) => {
   const Scrollbar = css`
-		position: relative;
-		display: block;
-		padding: 8px 8px;
-		margin-right: 8px;
-		max-width: ${maxWidth ? isNaN(maxWidth) ? maxWidth : maxWidth + 'px' : '100%'};
-		max-height: ${maxHeight ? isNaN(maxHeight) ? maxHeight : maxHeight + 'px' : '100%'};
-		&::-webkit-scrollbar{
-				width: ${width ? isNaN(width) ? width : width + 'px' : '8px'};
-				height: ${height ? isNaN(height) ? height : height + 'px' : '8px'};
-				background-color: ${backgroundScroll};
-		}
-		&::-webkit-scrollbar-thumb{
-				border-radius: 10px;
-				mix-blend-mode: normal;
-				background-color: ${backgroundThumb};
-				background-clip: content-box;
-		}
-		&::-webkit-scrollbar-thumb:hover{
-				border-radius: 10px;
-				background-color: ${backgroundThumbHover};
-				background-clip: content-box;
-		}
-		${/tract/i.test(custom) ? `&::-webkit-scrollbar-track {
+        position: relative;
+        display: block;
+        padding: 8px 8px;
+        margin-right: 8px;
+        max-width: ${maxWidth ? isNaN(maxWidth) ? maxWidth : maxWidth + 'px' : '100%'};
+        max-height: ${maxHeight ? isNaN(maxHeight) ? maxHeight : maxHeight + 'px' : '100%'};
+        &::-webkit-scrollbar {
+            width: ${width ? isNaN(width) ? width : width + 'px' : '8px'};
+            height: ${height ? isNaN(height) ? height : height + 'px' : '8px'};
+            background-color: ${backgroundScroll};
+        }
+        &::-webkit-scrollbar-thumb {
+            border-radius: 10px;
+            mix-blend-mode: normal;
+            background-color: ${backgroundThumb};
+            background-clip: content-box;
+        }
+        &::-webkit-scrollbar-thumb:hover {
+            border-radius: 10px;
+            background-color: ${backgroundThumbHover};
+            background-clip: content-box;
+        }
+        ${/tract/i.test(custom) ? `&::-webkit-scrollbar-track {
 						border-radius: 10px;
 						mix-blend-mode: normal;
 						background: rgba(21, 26, 48, 0.02);
 					}` : ''}
-		${getPosition[position]}
-	`;
+        ${getPosition[position]}
+    `;
   return jsx("div", {
     css: Scrollbar,
     custom: custom,
@@ -82,7 +82,6 @@ scrollbar.defaultProps = {
 };
 scrollbar.propTypes = {
   custom: PropTypes.string,
-  position: PropTypes.string,
   position: PropTypes.oneOf(['bottom', 'right', 'left']),
   maxHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),

package/components/popover/body.js

@@ -0,0 +1,74 @@
+/** @jsxRuntime classic */
+
+/** @jsx jsx */
+import { memo, useMemo, useRef, forwardRef, useImperativeHandle } from 'react';
+import PropTypes from 'prop-types';
+import { jsx, css } from '@emotion/core';
+import OptionWrapper from '../others/option-wrapper';
+import { flexCol, overflowAuto, positionRelative } from '../../styles/general';
+import theme from '../../theme/settings';
+const {
+  colors: {
+    fill: {
+      'scrollbar-rest': scrollbarRest,
+      'scrollbar-active': scrollbarActive
+    }
+  },
+  spacing
+} = theme;
+const PopoverBody = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  children,
+  className,
+  id,
+  style
+}, reference) => {
+  const ref = useRef(null);
+  useImperativeHandle(reference, () => ({
+    element: ref.current,
+    instance: {}
+  }));
+  return useMemo(() => jsx("div", {
+    css: PopoverBodyCSS,
+    ref: ref,
+    id: id,
+    style: style,
+    className: ['DGN-UI-Popover-Body', className].join(' ').trim().replace(/\s+/g, ' ')
+  }, children), [children, className, id, style]);
+}));
+const PopoverBodyCSS = css`
+    ${flexCol};
+    ${positionRelative};
+    ${overflowAuto};
+    padding: ${spacing([4])};
+    max-height: 472px;
+    order: 2;
+    &::-webkit-scrollbar {
+        width: 24px;
+    }
+    &::-webkit-scrollbar-thumb {
+        border-radius: 10px;
+        mix-blend-mode: normal;
+        background-color: ${scrollbarRest};
+        background-clip: content-box;
+        border: 8px solid transparent;
+        :hover {
+            background-color: ${scrollbarActive};
+        }
+    }
+`;
+PopoverBody.defaultProps = {
+  className: '',
+  style: {}
+};
+PopoverBody.propTypes = {
+  /** The content of the component. */
+  children: PropTypes.node,
+
+  /** Class for component. */
+  className: PropTypes.string,
+
+  /** Style inline of component. */
+  style: PropTypes.object
+};
+export { PopoverBody };
+export default OptionWrapper(PopoverBody);

package/components/popover/footer.js

@@ -0,0 +1,76 @@
+/** @jsxRuntime classic */
+
+/** @jsx jsx */
+import { memo, useMemo, useRef, forwardRef, useImperativeHandle } from 'react';
+import PropTypes from 'prop-types';
+import { jsx, css } from '@emotion/core';
+import OptionWrapper from '../others/option-wrapper';
+import { alignCenter, borderBox, flexRow, justifyEnd, parseWidth, positionRelative } from '../../styles/general';
+import theme from '../../theme/settings';
+const {
+  colors: {
+    system: {
+      white
+    }
+  },
+  spacing
+} = theme;
+const PopoverFooter = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  boxShadow,
+  children,
+  className,
+  id,
+  style
+}, reference) => {
+  const ref = useRef(null);
+
+  const _PopoverFooterCSS = PopoverFooterCSS(boxShadow);
+
+  useImperativeHandle(reference, () => ({
+    element: ref.current,
+    instance: {}
+  }));
+  return useMemo(() => jsx("div", {
+    css: _PopoverFooterCSS,
+    ref: ref,
+    id: id,
+    style: style,
+    className: ['DGN-UI-Popover-Footer', className].join(' ').trim().replace(/\s+/g, ' ')
+  }, children), [children, className, id, style]);
+}));
+
+const PopoverFooterCSS = boxShadow => css`
+    ${flexRow};
+    ${positionRelative};
+    ${alignCenter};
+    ${justifyEnd};
+    ${borderBox};
+    ${parseWidth('100%')};
+    min-height: 56px;
+    padding: ${spacing([4])};
+    background: ${white};
+    border-radius: 0px 0px 4px 4px;
+    box-shadow: ${boxShadow ? '0px -2px 2px rgba(0, 0, 0, 0.1)' : 'none'};
+    order: 3;
+`;
+
+PopoverFooter.defaultProps = {
+  className: '',
+  style: {},
+  boxShadow: true
+};
+PopoverFooter.propTypes = {
+  /** The box-shadow of component. */
+  boxShadow: PropTypes.bool,
+
+  /** The content of the component. */
+  children: PropTypes.node,
+
+  /** Class for component. */
+  className: PropTypes.string,
+
+  /** Style inline of component. */
+  style: PropTypes.object
+};
+export { PopoverFooter };
+export default OptionWrapper(PopoverFooter);

package/components/popover/header.js

@@ -0,0 +1,79 @@
+/** @jsxRuntime classic */
+
+/** @jsx jsx */
+import { memo, useMemo, useRef, forwardRef, useImperativeHandle } from 'react';
+import PropTypes from 'prop-types';
+import { jsx, css } from '@emotion/core';
+import OptionWrapper from '../others/option-wrapper';
+import { Typography } from '../';
+import { alignCenter, borderBox, flexRow, parseWidthHeight, positionRelative } from '../../styles/general';
+import theme from '../../theme/settings';
+const {
+  colors: {
+    fill: {
+      headerbar
+    }
+  },
+  spacing
+} = theme;
+const PopoverHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  children,
+  className,
+  id,
+  style,
+  title
+}, reference) => {
+  const ref = useRef(null);
+  useImperativeHandle(reference, () => ({
+    element: ref.current,
+    instance: {}
+  }));
+  return useMemo(() => jsx("div", {
+    css: PopoverHeaderCSS,
+    ref: ref,
+    id: id,
+    style: style,
+    className: ['DGN-UI-Popover-Header', className].join(' ').trim().replace(/\s+/g, ' ')
+  }, jsx(Typography, {
+    type: 'h3',
+    style: {
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      width: '100%'
+    }
+  }, children ? children : title)), [children, className, id, style, title]);
+}));
+const PopoverHeaderCSS = css`
+    ${flexRow};
+    ${alignCenter};
+    ${positionRelative};
+    ${borderBox};
+    ${parseWidthHeight('100%', 56)};
+    background-color: ${headerbar};
+    min-width: 480px;
+    padding: ${spacing([4])};
+    border-radius: 4px 4px 0px 0px;
+    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
+    order: 1;
+`;
+PopoverHeader.defaultProps = {
+  title: '',
+  className: '',
+  style: {}
+};
+PopoverHeader.propTypes = {
+  /** The content of the component. */
+  children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+
+  /** Class for component. */
+  className: PropTypes.string,
+
+  /** Style inline of component. */
+  style: PropTypes.object,
+
+  /** The content of the component if not have prop `children`. */
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
+};
+export { PopoverHeader };
+export default OptionWrapper(PopoverHeader);