diginet-core-ui 1.3.34 → 1.3.35

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

@@ -81,27 +81,27 @@ const TextInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   /* Start styled */
 
   const TextInputRoot = css`
-        display: block;
-        position: relative;
-        margin-bottom: 20px;
-    `;
+                display: block;
+                position: relative;
+                margin-bottom: 20px;
+            `;
   const TextInputIcon = css`
-        display: flex;
-        color: inherit;
-        .edit-icon-pen {
-            display: flex;
-        }
-        .edit-icon-confirm {
-            display: none;
-        }
-        .edit-icon-clear {
-            display: none;
-            margin-left: 12px;
-        }
-        .circular {
-            display: none;
-        }
-    `;
+                display: flex;
+                color: inherit;
+                .edit-icon-pen {
+                    display: flex;
+                }
+                .edit-icon-confirm {
+                    display: none;
+                }
+                .edit-icon-clear {
+                    display: none;
+                    margin-left: 12px;
+                }
+                .circular {
+                    display: none;
+                }
+            `;
   /* End styled */
 
   /* Start handler */
@@ -117,8 +117,6 @@ const TextInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         target: null
       });
     }
-
-    ;
   };
 
   const onFocusInput = () => {
@@ -158,7 +156,6 @@ const TextInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       return;
     }
 
-    ;
     currentValue = value;
     if (onConfirm) onConfirm({
       value
@@ -207,7 +204,7 @@ const TextInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }, [type, multiline]);
   useEffect(() => {
     if (/inform/i.test(type) && !multiline) {
-      const regexp = /(success)|(warning)|(danger)/ig;
+      const regexp = /(success)|(warning)|(danger)/gi;
       const existedClass = ref.current.classList.value.match(regexp);
 
       if (existedClass) {
@@ -500,10 +497,10 @@ TextInput.propTypes = {
   /** on focus function */
   onFocus: PropTypes.func,
 
-  /** validation value, argument can:<br/>
-   * * string: the validation rule. Example required.<br/>
-   * * object: the validation rule insist name, property, message. Example {name: 'min', compareValue: 9, message: 'Error'} or {max: 99}<br/>
-   * * array: the validation rule list, insist object/string
+  /** validation value, argument can:<br/>
+   * * string: the validation rule. Example required.<br/>
+   * * object: the validation rule insist name, property, message. Example {name: 'min', compareValue: 9, message: 'Error'} or {max: 99}<br/>
+   * * array: the validation rule list, insist object/string
    */
   validates: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.array, PropTypes.func]),
 

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

@@ -37,109 +37,108 @@ const Toggle = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }
 
   const formCheck = css`
-        position: relative;
-        cursor: pointer;
-        user-select: none;
-        padding-left: 3px;
-        &.disabled {
-            pointer-events: none;
-        }
-    `;
+                position: relative;
+                cursor: pointer;
+                user-select: none;
+                padding-left: 3px;
+                &.disabled {
+                    pointer-events: none;
+                }
+            `;
   const toggle = css`
-        display:flex;
-        align-items: center;
-        cursor: pointer;
-        position: relative;
-        box-sizing: border-box;
-        margin: 0;
-    `;
+                display: flex;
+                align-items: center;
+                cursor: pointer;
+                position: relative;
+                box-sizing: border-box;
+                margin: 0;
+            `;
   const slider = css`
-        position: relative;
-        cursor: pointer;
-        display: block;
-        height: ${height}px;
-        width: ${width}px;
-        border-radius: ${height}px;
-        background: white;
-        border: 1px solid ${theme.colors.border};
-        margin: 0px auto;
-        &::after {
-            content: '';
-            box-sizing: border-box;
-            position: absolute;
-            border-radius: 100%;
-            left: 3%;
-            z-index: 2;
-            background: ${theme.colors.border};
-            transition: 0.3s ease-in-out;
-            top: 49%;
-            transform: translateY(-49%);
-            margin: 0px auto;
-            width: ${width / 12 * 5}px;
-            height: ${width / 12 * 5}px;
-        }
-        &:hover {
-			box-shadow:
-                0 0 2px 2px ${theme.colors.focus};
-			background-color:${theme.colors.focus};
-            border: 1px solid ${theme.colors.primary};
-		}
-    `;
-  const checkbox = css`
-        box-sizing: border-box;
-        left: 0;
-        top: 50%;
-        z-index: 2;
-        &:checked + label > span.css-${slider.name} {
-            border: none;
-            background: ${theme.colors.primary};
-            border: 1px solid transparent;
-            transition: 0.3s ease-in-out;
-            box-shadow:
-                0 0 2px 2px ${theme.colors.focus};
-            &::after {
-                transform: translate(${height}px, -50%);
+                position: relative;
+                cursor: pointer;
+                display: block;
+                height: ${height}px;
+                width: ${width}px;
+                border-radius: ${height}px;
                 background: white;
-            }
-        }
-        &:hover:checked + label > span.css-${slider.name} {
-            border: none;
-            background: ${theme.colors.primary};
-            border: 1px solid transparent;
-            &::after {
-                background: ${theme.colors.hover};
-            }
-        }
-        &:disabled:checked + label > span.css-${slider.name} {
-            user-select: none;
-            pointer-events: none;
-            cursor: not-allowed;
-            border: none;
-            background: ${theme.colors.disabled};
-            border: 1px solid transparent;
-            box-shadow: initial;
-            &::after {
-                background: ${theme.colors.dark12};
-            }
-        }
-        &:hover:not(:checked) + label > span.css-${slider.name} {
-            background:  ${theme.colors.hover};
-            border: 1px solid ${theme.colors.primary};
-            transition: 0.3s ease-in-out;
-            ::after{
-                background: ${theme.colors.primary};
-            }
-        }
-        &:disabled:not(:checked) + label > span.css-${slider.name} {
-            background:  ${theme.colors.dark12};
-            cursor: not-allowed;
-            user-select: none;
-            border: 1px solid ${theme.colors.disabled};
-            pointer-events: none;
-            ::after{
-                background: ${theme.colors.disabled};
-            }
-        }`;
+                border: 1px solid ${theme.colors.border};
+                margin: 0px auto;
+                &::after {
+                    content: '';
+                    box-sizing: border-box;
+                    position: absolute;
+                    border-radius: 100%;
+                    left: 3%;
+                    z-index: 2;
+                    background: ${theme.colors.border};
+                    transition: 0.3s ease-in-out;
+                    top: 49%;
+                    transform: translateY(-49%);
+                    margin: 0px auto;
+                    width: ${width / 12 * 5}px;
+                    height: ${width / 12 * 5}px;
+                }
+                &:hover {
+                    box-shadow: 0 0 2px 2px ${theme.colors.focus};
+                    background-color: ${theme.colors.focus};
+                    border: 1px solid ${theme.colors.primary};
+                }
+            `;
+  const checkbox = css`
+                box-sizing: border-box;
+                left: 0;
+                top: 50%;
+                z-index: 2;
+                &:checked + label > span.css-${slider.name} {
+                    border: none;
+                    background: ${theme.colors.primary};
+                    border: 1px solid transparent;
+                    transition: 0.3s ease-in-out;
+                    box-shadow: 0 0 2px 2px ${theme.colors.focus};
+                    &::after {
+                        transform: translate(${height}px, -50%);
+                        background: white;
+                    }
+                }
+                &:hover:checked + label > span.css-${slider.name} {
+                    border: none;
+                    background: ${theme.colors.primary};
+                    border: 1px solid transparent;
+                    &::after {
+                        background: ${theme.colors.hover};
+                    }
+                }
+                &:disabled:checked + label > span.css-${slider.name} {
+                    user-select: none;
+                    pointer-events: none;
+                    cursor: not-allowed;
+                    border: none;
+                    background: ${theme.colors.disabled};
+                    border: 1px solid transparent;
+                    box-shadow: initial;
+                    &::after {
+                        background: ${theme.colors.dark12};
+                    }
+                }
+                &:hover:not(:checked) + label > span.css-${slider.name} {
+                    background: ${theme.colors.hover};
+                    border: 1px solid ${theme.colors.primary};
+                    transition: 0.3s ease-in-out;
+                    ::after {
+                        background: ${theme.colors.primary};
+                    }
+                }
+                &:disabled:not(:checked) + label > span.css-${slider.name} {
+                    background: ${theme.colors.dark12};
+                    cursor: not-allowed;
+                    user-select: none;
+                    border: 1px solid ${theme.colors.disabled};
+                    pointer-events: none;
+                    ::after {
+                        background: ${theme.colors.disabled};
+                    }
+                }
+            `;
   const idDefault = generateRandom(10, {
     allowNumber: false,
     allowSymbol: false
@@ -222,9 +221,9 @@ Toggle.propTypes = {
   /** Id is randomized randomly to avoid duplication. */
   id: PropTypes.string,
 
-  /** 
-  * Name attribute of the `input` element. 
-  */
+  /**
+   * Name attribute of the `input` element.
+   */
   name: PropTypes.string,
 
   /** The name of the Radio is displayed on the interface */
@@ -239,10 +238,10 @@ Toggle.propTypes = {
   /** props for input */
   inputProps: PropTypes.object,
 
-  /** * Callback fired when the state is changed.
-   *
-   * @param {object} event The event source of the callback.
-   * You can pull out the new checked state by accessing `event.target.checked` (boolean). 
+  /** * Callback fired when the state is changed.
+   *
+   * @param {object} event The event source of the callback.
+   * You can pull out the new checked state by accessing `event.target.checked` (boolean).
    */
   onChange: PropTypes.func
 };

package/components/modal/modal.js

@@ -35,20 +35,20 @@ const Modal = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const modalBoxRef = useRef(null);
   const [openState, setOpenState] = useState(open);
   const ModalContainer = css`
-        position: fixed;
-        display: flex;
-        width: 100%;
-        height: 100vh;
-        background-color: ${darkTheme ? 'rgba(21, 26, 48, 0.5)' : 'transparent'};
-        top: 0;
-        left: 0;
-        justify-content: center;
-        align-items: ${top ? 'inherit' : 'center'};
-        padding-top: ${top ? isNaN(top) ? top : top + 'px' : 0};
-        opacity: 0;
-        transition: opacity 0.3s ease;
-        z-index: ${zIndex};
-    `;
+                position: fixed;
+                display: flex;
+                width: 100%;
+                height: 100vh;
+                background-color: ${darkTheme ? 'rgba(21, 26, 48, 0.5)' : 'transparent'};
+                top: 0;
+                left: 0;
+                justify-content: center;
+                align-items: ${top ? 'inherit' : 'center'};
+                padding-top: ${top ? isNaN(top) ? top : top + 'px' : 0};
+                opacity: 0;
+                transition: opacity 0.3s ease;
+                z-index: ${zIndex};
+            `;
   const fadeInDown = keyframes`
         0% {
             opacity: 0;
@@ -72,31 +72,31 @@ const Modal = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         }
     `;
   const ModalBox = css`
-        display: flex;
-        flex-direction: column;
-        position: relative;
-        background-color: white;
-        ${typography.paragraph1};
-        height: max-content;
-        max-height: calc(100% - ${isNaN(top) ? top : +top + 'px'});
-        min-width: 150px;
-        max-width: 90%;
-        /* min-height: 152px; */
-        margin: 0 auto;
-        border-radius: 4px;
-        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-        box-sizing: border-box;
-        -webkit-box-orient: vertical;
-        -webkit-box-direction: normal;
-        width: ${isNaN(width) ? width : width + 'px'};
-        animation: ${fadeOutUp} 0.2s ease;
-        animation-fill-mode: forwards;
-        cursor: ${moveable && dragAnyWhere ? 'move' : 'initial'};
-        &.show {
-            display: flex !important;
-            animation: ${fadeInDown} 0.2s ease;
-        }
-    `;
+                display: flex;
+                flex-direction: column;
+                position: relative;
+                background-color: white;
+                ${typography.paragraph1};
+                height: max-content;
+                max-height: calc(100% - ${isNaN(top) ? top : +top + 'px'});
+                min-width: 150px;
+                max-width: 90%;
+                /* min-height: 152px; */
+                margin: 0 auto;
+                border-radius: 4px;
+                box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+                box-sizing: border-box;
+                -webkit-box-orient: vertical;
+                -webkit-box-direction: normal;
+                width: ${isNaN(width) ? width : width + 'px'};
+                animation: ${fadeOutUp} 0.2s ease;
+                animation-fill-mode: forwards;
+                cursor: ${moveable && dragAnyWhere ? 'move' : 'initial'};
+                &.show {
+                    display: flex !important;
+                    animation: ${fadeInDown} 0.2s ease;
+                }
+            `;
 
   const onShowModal = () => {
     setOpenState(true);
@@ -108,7 +108,6 @@ const Modal = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         setOpenState(false);
       }, 500);
     }
-    ;
 
     if (pressESCToClose) {
       document.removeEventListener('keydown', pressESCHandler);
@@ -130,8 +129,6 @@ const Modal = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
       onCloseModal();
     }
-
-    ;
   };
 
   const dragMouseDown = e => {
@@ -150,8 +147,8 @@ const Modal = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       modalBoxRef.current.style.display = 'block';
       modalBoxRef.current.style.position = 'absolute';
       modalBoxRef.current.style.margin = '0px';
-      modalBoxRef.current.style.top = top + "px";
-      modalBoxRef.current.style.left = left + "px";
+      modalBoxRef.current.style.top = top + 'px';
+      modalBoxRef.current.style.left = left + 'px';
     }
 
     document.onmouseup = () => {
@@ -184,8 +181,8 @@ const Modal = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       } // set the element's new position:
 
 
-      modalBoxRef.current.style.top = newTop + "px";
-      modalBoxRef.current.style.left = newLeft + "px";
+      modalBoxRef.current.style.top = newTop + 'px';
+      modalBoxRef.current.style.left = newLeft + 'px';
     };
   };
 

package/components/popover/index.js

@@ -33,39 +33,39 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const [openState, setOpenState] = useState(open);
   const [element, setElement] = useState(null);
   const PopoverContainer = css`
-        ${flexRow}
-        ${positionFixed}
+                ${flexRow}
+                ${positionFixed}
         width: ${isNaN(width) ? width : width + 'px'};
-        max-width: 100%;
-        max-height: 100%;
-        height: ${isNaN(height) ? height : height + 'px'};
-        z-index: 1000;
-        transform: scale(0);
-        transition: transform 0.2s linear;
-        pointer-events: initial;
-        &.open {
-            transform: scale(1);
-        }
-    `;
+                max-width: 100%;
+                max-height: 100%;
+                height: ${isNaN(height) ? height : height + 'px'};
+                z-index: 1000;
+                transform: scale(0);
+                transition: transform 0.2s linear;
+                pointer-events: initial;
+                &.open {
+                    transform: scale(1);
+                }
+            `;
   const PopoverRoot = css`
-        ${displayBlock}
-        ${positionRelative}
+                ${displayBlock}
+                ${positionRelative}
         ${borderRadius4px}
         ${paragraph1};
-        background-color: ${bgColor};
-        width: 100%;
-        height: 100%;
-        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-    `;
+                background-color: ${bgColor};
+                width: 100%;
+                height: 100%;
+                box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+            `;
   const PopoverArrow = css`
-        ${displayBlock}
-        ${positionAbsolute}
+                ${displayBlock}
+                ${positionAbsolute}
         height: 0;
-        width: 0;
-        border-left: 6px solid transparent;
-        border-right: 6px solid transparent;
-        border-bottom: 6px solid ${bgColor};
-    `;
+                width: 0;
+                border-left: 6px solid transparent;
+                border-right: 6px solid transparent;
+                border-bottom: 6px solid ${bgColor};
+            `;
 
   const onClosePopover = () => {
     // const popovers = document.querySelectorAll('.DGN-UI-Portal');
@@ -82,8 +82,6 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     if (event.key === 'Escape') {
       onClosePopover();
     }
-
-    ;
   };
 
   const clickOutOfPopover = event => {