diginet-core-ui 1.3.42 → 1.3.43

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

@@ -5,20 +5,25 @@ import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
 import { forwardRef, memo, useEffect, useRef, useState, useImperativeHandle } from 'react';
 import { Typography } from '../..';
-import { alignCenter, alignStart, borderBox, cursorPointer, displayBlock, flexRow, pointerEventsNone, positionAbsolute, positionRelative, userSelectNone } from '../../../styles/general';
+import { alignCenter, alignStart, borderBox, cursorPointer, displayBlock, flexRow, positionAbsolute, positionRelative, cursorNoDrop } from '../../../styles/general';
 import { randomString } from '../../../utils';
 import { color as colors } from '../../../styles/colors';
+import theme from '../../../theme/settings';
 const {
-  system: {
-    disabled: systemDisabled,
-    rest,
-    white
+  colors: {
+    system: {
+      rest,
+      white
+    },
+    fill: {
+      hover: clFillHover,
+      pressed: clFillPressed
+    },
+    disabled: clDisabled,
+    formal2: clFormal2
   },
-  fill: {
-    hover,
-    focusshd
-  }
-} = colors;
+  spacing
+} = theme;
 const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   id,
   className,
@@ -36,6 +41,8 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   children,
   inputProps,
   forTreeView,
+  width,
+  labelProps,
   ...props
 }, reference) => {
   if (!inputRef) {
@@ -43,7 +50,9 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }
 
   const ref = useRef(null);
+  if (typeof width === 'number') width += 'px';
   const [checkedState, setCheckedState] = useState(checked || defaultChecked);
+  const padding = spacing(0.5);
 
   if (!id) {
     [id] = useState('DGN-UI-' + randomString(10, {
@@ -52,140 +61,122 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }));
   }
 
-  const CheckBoxInput = css`
-		&:checked + span {
-			background-color: ${colors[color] || color};
-			border-color: ${colors[color] || color};
-			&.determinate {
-				&::after {
-					transform: translate(-50%, -66%) scale(1) rotate(-45deg);
-					background:
-						linear-gradient(${white}, ${white}) left bottom/2px 100%,
-						linear-gradient(${white}, ${white}) left bottom/100% 2px;
-					background-repeat: no-repeat;
-				}
-			}
-			&.indeterminate {
-				&::after {
-					transform: scale(1);
-				}
-			}
-		}
-	`;
+  const clMain = colors[color] || color;
   const CheckBoxSquare = css`
-		${flexRow}
-		${positionRelative}
-		${borderBox}
-		width: 18px;
-		min-width: 18px;
-		height: 18px;
-		min-height: 18px;
-		background-color: ${white};
-		border: 2px solid ${rest};
-		border-radius: 2px;
-		&.determinate {
-			&::after {
-				${displayBlock}
-				${positionAbsolute}
+                ${flexRow};
+                ${positionRelative};
+                ${cursorPointer};
+                ${borderBox};
+                width: ${width};
+                min-width: ${width};
+                height: ${width};
+                min-height: ${width};
+                background-color: ${white};
+                border: 2px solid ${rest};
+                border-radius: 2px;
+                margin-right: ${spacing(2)}px;
+                &.determinate {
+                    &::after {
+                        ${displayBlock}
+                        ${positionAbsolute}
 				content   : '';
-				height    : 7px;
-				left	  : 50%;
-				top		  : 43%;
-				transform : translate(-50%, -50%) scale(0) rotate(45deg);
-				transition: transform 0.3s;
-				width     : 12.6px;
-			}
-		}
-		&.indeterminate {
-			&::after {
-				${flexRow}
-				${positionAbsolute}
+                        height: 7px;
+                        left: 50%;
+                        top: 43%;
+                        transform: translate(-50%, -50%) scale(0) rotate(45deg);
+                        transition: transform 0.3s;
+                        width: 12.6px;
+                    }
+                }
+                &.indeterminate {
+                    &::after {
+                        ${flexRow}
+                        ${positionAbsolute}
 				content: "";
-				background-color: white;
-				left: 2px;
-				top: 6px;
-				width: 10px;
-				height: 2px;
-				transition: transform 0.3s;
-				transform: scale(0);
-			}
-		}
-		&:hover {
-			box-shadow:
-                0 0 2px 2px ${focusshd};
-			background-color:${focusshd};
-		}
-		
-	`;
+                        background-color: white;
+                        left: 2px;
+                        top: 6px;
+                        width: 10px;
+                        height: 2px;
+                        transition: transform 0.3s;
+                        transform: scale(0);
+                    }
+                }
+                &:not(.disabled):not(.read-only) {
+                    &:hover {
+                        box-shadow: 0 0 0 3px ${clFillHover};
+                        background-color: ${clFillHover};
+                        border-color: ${clMain};
+                    }
+                    &:focus,
+                    &:active {
+                        box-shadow: 0 0 0 3px ${clFillPressed};
+                        background-color: ${clFillPressed};
+                    }
+                }
+                &:not(disabled):focus {
+                    box-shadow: 0 0 0 3px ${clFillPressed};
+                    background-color: ${clFillPressed};
+                }
+                &.disabled,
+                &.read-only {
+                    ${cursorNoDrop};
+                }
+            `;
+  const CheckBoxInput = css`
+                &:checked + label > span.css-${CheckBoxSquare.name} {
+                    &.determinate {
+                        &::after {
+                            transform: translate(-50%, -66%) scale(1) rotate(-45deg);
+                            background: linear-gradient(${white}, ${white}) left bottom/2px 100%,
+                                linear-gradient(${white}, ${white}) left bottom/100% 2px;
+                            background-repeat: no-repeat;
+                        }
+                    }
+                    &.indeterminate {
+                        &::after {
+                            transform: scale(1);
+                        }
+                    }
+                }
+                &:checked:not(:disabled) + label > span.css-${CheckBoxSquare.name} {
+                    background-color: ${clMain} !important;
+                    border-color: ${clMain} !important;
+                }
+                &:checked:disabled {
+                    & + label > span.css-${CheckBoxSquare.name} {
+                        &:not(.indeterminate) {
+                            background-color: ${clDisabled} !important;
+                        }
+                        &.indeterminate {
+                            background-color: ${clFormal2} !important;
+                            border-color: ${clFormal2} !important;
+                        }
+                    }
+                }
+                &:disabled {
+                    & + label > span.css-${CheckBoxSquare.name} {
+                        border-color: ${clDisabled};
+                    }
+                }
+            `;
   const CheckBoxLabel = css`
-		${flexRow}
-		${positionRelative}
-		${alignCenter}
-		${borderBox}
-		padding-left: 8px;
-	`;
+                ${flexRow};
+                ${positionRelative};
+                ${alignCenter};
+                ${borderBox};
+                margin-bottom: 0 !important;
+            `;
   const CheckBoxRoot = css`
-		${flexRow}
-		${positionRelative}
-		${alignStart}
-		${cursorPointer}
-		${userSelectNone}
-		${borderBox}
-		margin: 3px 0;
-		&.disabled {
-			${pointerEventsNone}
-			.css-${CheckBoxSquare.name} {
-				border-color:${systemDisabled};
-			}
-			.css-${CheckBoxInput.name} {
-				&:checked {
-					&.determinate + span::after {
-						background:
-							linear-gradient(${white},${white}) left bottom/2px 100%,
-							linear-gradient(${white},${white}) left bottom/ 100% 2px;
-						background-repeat: no-repeat;
-					}
-					&.indeterminate + span::after {
-						background-color: ${white};
-					}
-					& + span {
-						background-color:${systemDisabled};
-					}
-				}
-			}
-		}
-		&.read-only {
-			${pointerEventsNone}
-			${userSelectNone}
-		}
-		&:not(.disabled):hover {
-			.css-${CheckBoxSquare.name} {
-				background-color:${hover};
-				border-color:${colors[color] || color};
-			}
-			.css-${CheckBoxInput.name} {
-				&:checked {
-					&.determinate + span::after {
-						background:
-							linear-gradient(${colors[color] || color},${colors[color] || color}) left bottom/2px 100%,
-							linear-gradient(${colors[color] || color},${colors[color] || color}) left bottom/100% 2px;
-						background-repeat: no-repeat;
-					}
-					&.indeterminate + span::after {
-						background-color: ${colors[color] || color};
-					}
-				}
-			}
-		}
-	`;
+                ${flexRow};
+                ${alignStart};
+                ${borderBox};
+            `;
   const CheckboxContainer = css`
-		${displayBlock}
-		${positionRelative}
-		width: max-content;
-		&.disabled {
-			cursor: no-drop;
-		}
-	`;
+                ${displayBlock};
+                ${positionRelative};
+                padding: ${padding}px;
+            `;
 
   const handleChange = () => {
     if (readOnly || inputProps.readOnly || disabled || inputProps.disabled) return;
@@ -235,7 +226,7 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   return jsx("div", {
     id: 'DGN-UI-Checkbox-' + id.replace('DGN-UI-', ''),
     css: CheckboxContainer,
-    className: ['DGN-UI-Checkbox', disabled ? 'disabled' : '', className].join(' ').trim().replace(/\s+/g, ' '),
+    className: ['DGN-UI-Checkbox', className].join(' ').trim().replace(/\s+/g, ' '),
     ref: ref,
     ...props,
     onClick: handleChange
@@ -256,16 +247,15 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     checked: checkedState,
     onChange: handleChange,
     hidden: true
-  }), jsx("span", {
-    css: CheckBoxSquare,
-    className: determinate ? 'determinate' : 'indeterminate'
-  }), (children || label) && jsx("div", {
+  }), jsx("label", {
     css: CheckBoxLabel
-  }, jsx(Typography, {
-    style: {
-      display: 'inline-flex',
-      alignItems: 'center'
-    }
+  }, jsx("span", {
+    className: [determinate ? 'determinate' : 'indeterminate', readOnly ? 'read-only' : '', disabled ? 'disabled' : ''].join(' '),
+    css: CheckBoxSquare
+  }), (children || label) && jsx(Typography, {
+    type: 'p1',
+    color: disabled ? clDisabled : '',
+    ...labelProps
   }, children || label))));
 }));
 Checkbox.defaultProps = {
@@ -276,7 +266,9 @@ Checkbox.defaultProps = {
   readOnly: false,
   defaultChecked: false,
   determinate: true,
-  inputProps: {}
+  inputProps: {},
+  labelProps: {},
+  width: 18
 };
 Checkbox.propTypes = {
   /** value to check/uncheck square */
@@ -312,17 +304,23 @@ Checkbox.propTypes = {
   /** color of checkbox background ['primary', 'info', 'success', 'warning', 'danger', #hex, rgb(#, #, #)] */
   color: PropTypes.string,
 
+  /** props for Typography of label */
+  labelProps: PropTypes.object,
+
   /** props for input */
   inputProps: PropTypes.object,
 
+  /** width is a number || string, width of Checkbox default 18 */
+  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
   /** The function will run to return a true or false value of Radio Component */
   onChange: PropTypes.func,
 
-  /**
-   * ref methods
-  * 
-   * * setChecked: Set check for input
-   * * getChecked: Get check of input
+  /**
+   * ref methods
+   *
+   * * setChecked: Set check for input
+   * * getChecked: Get check of input
    */
   ref: PropTypes.any
 };

package/components/form-control/date-range-picker/index.js

@@ -462,8 +462,8 @@ const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         tableData = [],
         weekDateFirst = getDateOfWeek(firstDay),
         weekDateLast = getDateOfWeek(lastDay);
-    /**
-     * days of previous month
+    /**
+     * days of previous month
      */
 
     for (let i = weekDateFirst; i > 0; i--) {
@@ -476,8 +476,8 @@ const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         className: unique.day.day
       })));
     }
-    /**
-     * days of current month
+    /**
+     * days of current month
      */
 
 
@@ -491,8 +491,8 @@ const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }, jsx(Typography, { ...typographyProps(unique.day.day)
       }, i + 1)));
     }
-    /**
-     * days of next month
+    /**
+     * days of next month
      */
 
 

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

@@ -122,13 +122,6 @@ const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
   };
 
-  const _onChangeInput = e => {
-    const timeout = setTimeout(() => {
-      onChangeInput === null || onChangeInput === void 0 ? void 0 : onChangeInput(e);
-    }, delayOnInput);
-    return () => clearTimeout(timeout);
-  };
-
   useEffect(() => {
     return () => {
       closeDropdownBox();
@@ -160,7 +153,7 @@ const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     style: style
   }, label ? jsx(Label, { ...labelProps
   }, label) : null, jsx(InputBase, { ...inputProps,
-    className: open && 'dropdown-focus',
+    className: open ? 'dropdown-focus' : '',
     style: inputStyle,
     viewType: viewType,
     inputRef: inputRef,
@@ -168,7 +161,8 @@ const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     value: value,
     startIcon: startIcon,
     endIcon: renderEndIcon(),
-    onChange: _onChangeInput,
+    onChange: onChangeInput,
+    delayOnChange: delayOnInput,
     onClick: openOnClickAt === 'full' ? onTriggerDropdown : null
   })), open && /*#__PURE__*/createPortal(jsx("div", {
     ref: dropdownBoxRef,

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

@@ -1,10 +1,14 @@
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import { memo, useRef, useEffect, forwardRef, Children, cloneElement, useImperativeHandle } from 'react';
+import { memo, useRef, useEffect, forwardRef, Children, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
-const MoneyInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+import theme from '../../../theme/settings';
+const {
+  spacing
+} = theme;
+const FormGroup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   fullWidth,
   oneHelperText,
   marginRight,
@@ -16,42 +20,42 @@ const MoneyInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const previousError = useRef(false);
   /* Start styled */
 
-  const FormGroupRoot = css`  
-        display: flex;
-        position: relative;
-        align-items: flex-end;
-        box-sizing: border-box;
-        width: auto;
-        &.Form-Group-full-width {
-            width: 100% !important;
-            flex: 1 1 auto;
-            .DGN-UI-TextInput {
+  const FormGroupRoot = css`
+            position: relative;
+            align-items: flex-end;
+            box-sizing: border-box;
+            width: auto;
+            margin-bottom: ${spacing(4)}px;
+            &.Form-Group-full-width {
+                width: 100% !important;
                 flex: 1 1 auto;
+                .DGN-UI-TextInput {
+                    flex: 1 1 auto;
+                }
             }
-        }
-        &.Form-Group-Common {
-            margin-bottom: 20px;
-            width: max-content;
-            .DGN-UI-HelperText {
-                width: 100%;
-                left: 0;
+            &.Form-Group-Common {
+                margin-bottom: 20px;
+                width: max-content;
+                .DGN-UI-HelperText {
+                    width: 100%;
+                    left: 0;
+                }
+                .DGN-UI-TextInput {
+                    position: initial;
+                    margin-bottom: 0 !important;
+                }
             }
             .DGN-UI-TextInput {
-                position: initial;
-                margin-bottom: 0 !important;
+                display: flex;
+                flex-direction: column;
+                justify-content: space-between;
+                height: 100%;
+                margin-bottom: 20px !important;
+                &:not(:last-of-type) {
+                    margin-right: ${isNaN(marginRight) ? marginRight : marginRight + 'px'};
+                }
             }
-        }
-        .DGN-UI-TextInput {
-            display: flex;
-            flex-direction: column;
-            justify-content: space-between;
-            height: 100%;
-            margin-bottom: 20px !important;
-            &:not(:last-of-type) {
-                margin-right: ${isNaN(marginRight) ? marginRight : marginRight + 'px'};
-            }
-        }
-    `;
+        `;
   /* End styled */
 
   /* Start handler */
@@ -101,17 +105,17 @@ const MoneyInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     ...props
   }, children);
 }));
-MoneyInput.defaultProps = {
+FormGroup.defaultProps = {
   marginRight: 16,
   fullWidth: false,
   oneHelperText: false,
   className: ''
 };
-MoneyInput.propTypes = {
+FormGroup.propTypes = {
   fullWidth: PropTypes.bool,
   oneHelperText: PropTypes.bool,
   marginRight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   className: PropTypes.string,
   children: PropTypes.node.isRequired
 };
-export default MoneyInput;
+export default FormGroup;

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

@@ -6,7 +6,6 @@ import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import { Typography } from '../../';
 import { color as colors } from '../../../styles/colors';
-import { ellipsis } from '../../../styles/general';
 const {
   system: {
     disabled: systemDisabled
@@ -24,15 +23,15 @@ const Label = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   disabled,
   readOnly,
   className,
+  lineClamp,
   ...props
 }, ref) => {
   const LabelComp = useMemo(() => jsx(Typography, {
-    type: 'h6',
-    color: normal_label,
     fullWidth: false,
     ref: ref,
     mapping: 'label',
     css: LabelRootCSS,
+    lineClamp: lineClamp,
     className: ['DGN-UI-Label', className, readOnly ? 'read-only' : '', disabled ? 'disabled' : ''].join(' ').trim().replace(/\s+/g, ' '),
     ...props
   }, children, required ? jsx("span", {
@@ -41,7 +40,6 @@ const Label = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   return LabelComp;
 }));
 const LabelRootCSS = css`
-    ${ellipsis}
     min-height: 16px;
     margin: 0px;
     &.read-only,
@@ -55,7 +53,10 @@ const LabelRootCSS = css`
         margin-top: 2px;
     }
 `;
-Label.defaultProps = {
+Label.defaultProps = { ...Typography.defaultProps,
+  type: 'h6',
+  color: normal_label,
+  lineClamp: 1,
   required: false,
   disabled: false,
   readOnly: false,
@@ -79,6 +80,11 @@ Label.propTypes = {
   children: PropTypes.node,
 
   /** any props else */
-  props: PropTypes.any
+  props: PropTypes.any,
+  // Reuse from Typography
+  type: Typography.propTypes.type,
+  lineClamp: Typography.propTypes.lineClamp,
+  hoverTooltip: Typography.propTypes.hoverTooltip,
+  color: Typography.propTypes.color
 };
 export default Label;