diginet-core-ui 1.3.53-beta.3 → 1.3.53-beta.6

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

@@ -5,7 +5,7 @@ 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, positionAbsolute, positionRelative, cursorNoDrop } from '../../../styles/general';
+import { alignCenter, alignStart, borderBox, cursorPointer, displayBlock, flexRow, positionAbsolute, positionRelative, cursorNoDrop, parseWidthHeight } from '../../../styles/general';
 import { randomString } from '../../../utils';
 import { color as colors } from '../../../styles/colors';
 import theme from '../../../theme/settings';
@@ -24,6 +24,7 @@ const {
   },
   spacing
 } = theme;
+const padding = spacing(0.75);
 const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   id,
   className,
@@ -52,7 +53,6 @@ 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, {
@@ -62,123 +62,13 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }
 
   const clMain = colors[color] || color;
-  const CheckBoxSquare = css`
-                ${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}
-				content: "";
-                        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};
-                margin-bottom: 0 !important;
-            `;
-  const CheckBoxRoot = css`
-                ${flexRow};
-                ${alignStart};
-                ${borderBox};
-            `;
-  const CheckboxContainer = css`
-                ${displayBlock};
-                ${positionRelative};
-                padding: ${padding}px;
-            `;
-
-  const handleChange = () => {
+
+  const _CheckBoxSquareCSS = CheckBoxSquareCSS(width, clMain);
+
+  const _CheckBoxInputCSS = CheckBoxInputCSS(_CheckBoxSquareCSS.name, clMain);
+
+  const handleChange = event => {
+    event.stopPropagation();
     if (readOnly || inputProps.readOnly || disabled || inputProps.disabled) return;
     const oldLogicChecked = inputRef.current.checked; //Use for TreeView
 
@@ -225,14 +115,14 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   });
   return jsx("div", {
     id: 'DGN-UI-Checkbox-' + id.replace('DGN-UI-', ''),
-    css: CheckboxContainer,
+    css: CheckboxContainerCSS,
     className: ['DGN-UI-Checkbox', className].join(' ').trim().replace(/\s+/g, ' '),
     ref: ref,
     ...props,
     onClick: handleChange
   }, jsx("div", {
-    css: CheckBoxRoot,
-    className: disabled ? 'disabled' : readOnly ? 'read-only' : ''
+    css: CheckBoxRootCSS,
+    className: ['DGN-UI-Checkbox-Root', disabled ? 'disabled' : readOnly ? 'read-only' : ''].join(' ').trim().replace(/\s+/g, ' ')
   }, jsx("input", {
     value: value,
     ...inputProps,
@@ -240,7 +130,7 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     readOnly: readOnly || inputProps.readOnly,
     disabled: disabled || inputProps.disabled,
     ref: inputRef,
-    css: CheckBoxInput,
+    css: _CheckBoxInputCSS,
     id: id,
     name: name,
     type: "checkbox",
@@ -248,16 +138,136 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     onChange: handleChange,
     hidden: true
   }), jsx("label", {
-    css: CheckBoxLabel
+    css: CheckBoxLabelCSS
   }, jsx("span", {
     className: [determinate ? 'determinate' : 'indeterminate', readOnly ? 'read-only' : '', disabled ? 'disabled' : ''].join(' '),
-    css: CheckBoxSquare
+    css: _CheckBoxSquareCSS
   }), (children || label) && jsx(Typography, {
     type: 'p1',
+    style: {
+      marginLeft: spacing(1)
+    },
     color: disabled ? clDisabled : '',
     ...labelProps
   }, children || label))));
 }));
+
+const CheckBoxSquareCSS = (width, clMain) => css`
+    ${flexRow};
+    ${positionRelative};
+    ${cursorPointer};
+    ${borderBox};
+    ${parseWidthHeight(width, width)};
+    min-width: ${width};
+    min-height: ${width};
+    background-color: ${white};
+    border: 2px solid ${rest};
+    border-radius: 2px;
+    margin: ${padding}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};
+            content: '';
+            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 CheckBoxInputCSS = (CheckBoxSquareCSSName, clMain) => css`
+    &:checked + label > span.css-${CheckBoxSquareCSSName} {
+        &.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-${CheckBoxSquareCSSName} {
+        background-color: ${clMain} !important;
+        border-color: ${clMain} !important;
+    }
+    &:checked:disabled {
+        & + label > span.css-${CheckBoxSquareCSSName} {
+            &:not(.indeterminate) {
+                background-color: ${clDisabled} !important;
+            }
+            &.indeterminate {
+                background-color: ${clFormal2} !important;
+                border-color: ${clFormal2} !important;
+            }
+        }
+    }
+    &:disabled {
+        & + label > span.css-${CheckBoxSquareCSSName} {
+            border-color: ${clDisabled};
+        }
+    }
+`;
+
+const CheckBoxLabelCSS = css`
+    ${flexRow};
+    ${positionRelative};
+    ${alignCenter};
+    ${borderBox};
+    margin-bottom: 0 !important;
+`;
+const CheckBoxRootCSS = css`
+    ${flexRow};
+    ${alignStart};
+    ${borderBox};
+`;
+const CheckboxContainerCSS = css`
+    ${displayBlock};
+    ${positionRelative};
+    width: fit-content;
+`;
 Checkbox.defaultProps = {
   label: '',
   className: '',
@@ -271,57 +281,53 @@ Checkbox.defaultProps = {
   width: 18
 };
 Checkbox.propTypes = {
-  /** value to check/uncheck square */
+  /** If `true`, the component is checked. */
   checked: PropTypes.bool,
 
-  /** value to check/uncheck square (just one time) */
-  defaultChecked: PropTypes.bool,
+  /** Class for component. */
+  className: PropTypes.string,
 
-  /** Prevent all event if true */
-  disabled: PropTypes.bool,
+  /** The main color of the component. ['primary', 'info', 'success', 'warning', 'danger', #hex, rgb(#, #, #)] */
+  color: PropTypes.string,
 
-  /** Prevent all event if true (keeping style) */
-  readOnly: PropTypes.bool,
+  /** The default checked state. Use when the component is not controlled. */
+  defaultChecked: PropTypes.bool,
 
-  /** display tick or hyphen icon */
+  /** If `true` display tick or indeterminate if `false`. */
   determinate: PropTypes.bool,
 
-  /** Id is randomized randomly to avoid duplication. */
-  id: PropTypes.string,
-
-  /** value of input */
-  value: PropTypes.string,
+  /** If `true`, the component is disabled. */
+  disabled: PropTypes.bool,
 
-  /** class of Checkbox */
-  className: PropTypes.string,
+  /** The id of the component. */
+  id: PropTypes.string,
 
-  /** The name of the Checkbox corresponds to the label displayed on the interface */
-  name: PropTypes.string,
+  /** [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element. */
+  inputProps: PropTypes.object,
 
-  /** The name of the Radio is displayed on the interface */
+  /** The name of the Radio is displayed on the interface. */
   label: PropTypes.string,
 
-  /** color of checkbox background ['primary', 'info', 'success', 'warning', 'danger', #hex, rgb(#, #, #)] */
-  color: PropTypes.string,
-
-  /** props for Typography of label */
+  /** [Props](https://core.diginet.com.vn/ui/?path=/docs/typography--title) applied to the `Typography` 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,
+  /** The name of the Checkbox corresponds to the label displayed on the interface. */
+  name: PropTypes.string,
 
   /**
-   * ref methods
+   * Callback fired when the state is changed.
    *
-   * * setChecked: Set check for input
-   * * getChecked: Get check of input
+   * You can pull out the new checked state by accessing `event.value` or `event.target.checked` (boolean).
    */
-  ref: PropTypes.any
+  onChange: PropTypes.func,
+
+  /** If `true`, the component is readonly. */
+  readOnly: PropTypes.bool,
+
+  /** The width of checkbox. */
+  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
+  /** The value of input */
+  value: PropTypes.any
 };
 export default Checkbox;

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

@@ -1786,14 +1786,14 @@ Dropdown.propTypes = {
   /** The icon to display if not found the icon follow `iconExpr`. */
   iconDefault: PropTypes.string,
 
-  /** Field name used for icon display.<br/>
-   * Example:<br/>
-   * &nbsp;&nbsp;string: 'icon'<br/>
-   * &nbsp;&nbsp;object: {<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;key: 'icon',<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;prefix: 'https://imglink.com',<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;suffix: '.jpg'<br/>
-   * &nbsp;&nbsp;}
+  /** Field name used for icon display.<br/>
+   * Example:<br/>
+   * &nbsp;&nbsp;string: 'icon'<br/>
+   * &nbsp;&nbsp;object: {<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;key: 'icon',<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;prefix: 'https://imglink.com',<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;suffix: '.jpg'<br/>
+   * &nbsp;&nbsp;}
    */
   iconExpr: PropTypes.oneOfType([PropTypes.string, PropTypes.shape({
     key: PropTypes.string,
@@ -1808,9 +1808,9 @@ Dropdown.propTypes = {
   /** The displayed value of component. */
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),
 
-  /** Field name used for text display in dropdown list.<br/>
-   * Example: 'name', '{id} - {name}', '{age} age(s)'<br/>
-   * Note: don't use 'id - name', return undefined
+  /** Field name used for text display in dropdown list.<br/>
+   * Example: 'name', '{id} - {name}', '{age} age(s)'<br/>
+   * Note: don't use 'id - name', return undefined
    */
   displayExpr: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),
 
@@ -1820,10 +1820,10 @@ Dropdown.propTypes = {
   /** The field name used for the returned result. */
   valueExpr: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 
-  /**
-   * Duration wait enter search content on search.<br/>
-   * Example: 700 -> 700ms, '700ms' -> 700ms, '0.7s' -> 700ms, '1m' -> 60000ms
-   * If `true`, used default delayOnInput.
+  /**
+   * Duration wait enter search content on search.<br/>
+   * Example: 700 -> 700ms, '700ms' -> 700ms, '0.7s' -> 700ms, '1m' -> 60000ms
+   * If `true`, used default delayOnInput.
    */
   searchDelayTime: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]),
 
@@ -1890,19 +1890,19 @@ Dropdown.propTypes = {
   /** The array of elements that appear in the dropdown list. */
   dataSource: PropTypes.array,
 
-  /** Function displays items by custom.<br/>
-   * renderItem={(data, index) => data.name + ' - ' + data.role}<br/>
-   * --> such as: displayExpr={'name - role'}
+  /** Function displays items by custom.<br/>
+   * renderItem={(data, index) => data.name + ' - ' + data.role}<br/>
+   * --> such as: displayExpr={'name - role'}
    */
   renderItem: PropTypes.func,
 
-  /** Function displays selected items by custom, example:<br/>
-   * renderSelectedItem={(data, index) => index + ' - ' + data.name}<br/>
+  /** Function displays selected items by custom, example:<br/>
+   * renderSelectedItem={(data, index) => index + ' - ' + data.name}<br/>
    */
   renderSelectedItem: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
 
-  /** Callback fired when the input value changes.<br/>
-   * if undefined: the filter function will run (default)
+  /** Callback fired when the input value changes.<br/>
+   * if undefined: the filter function will run (default)
    */
   onInput: PropTypes.func,
 
@@ -1921,19 +1921,19 @@ Dropdown.propTypes = {
   /** The contents in Dropdown box (Exp: TreeView). */
   children: PropTypes.node,
 
-  /**
-   * ref methods
-   *
-   * how to get component element? ref.current
-   *
-   * how to call method? ref.current.instance.{method}
-   *
-   * * showDropdown(): Show dropdown
-   * * closeDropdown(): Close dropdown
-   * * onClear(): Clear selected value
-   * * setPreviousValue(): Set value to previous value
-   * * setValue(value): Set value of dropdown
-   *  * @param {value} - string || number || array
+  /**
+   * ref methods
+   *
+   * how to get component element? ref.current
+   *
+   * how to call method? ref.current.instance.{method}
+   *
+   * * showDropdown(): Show dropdown
+   * * closeDropdown(): Close dropdown
+   * * onClear(): Clear selected value
+   * * setPreviousValue(): Set value to previous value
+   * * setValue(value): Set value of dropdown
+   *  * @param {value} - string || number || array
    */
   reference: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: PropTypes.instanceOf(Element)

package/components/form-control/number-input/index2.js

@@ -108,10 +108,8 @@ const NumberInput = /*#__PURE__*/forwardRef(({
     if (!decimalDigit) number.length = 1;else if (number[1]) number[1] = (_number$ = number[1]) === null || _number$ === void 0 ? void 0 : _number$.slice(0, decimalDigit || 0);
     number = number.join(decimalSymbol); // keep focus position
 
-    if ((_number3 = number) !== null && _number3 !== void 0 && _number3.indexOf(thousandSymbol) && !pos.current) {
-      var _number4;
-
-      pos.current = selectionStart + (((_number4 = number) === null || _number4 === void 0 ? void 0 : _number4.toString().split(thousandSymbol).length) - (vl === null || vl === void 0 ? void 0 : vl.toString().split(thousandSymbol).length));
+    if (((_number3 = number) === null || _number3 === void 0 ? void 0 : _number3.indexOf(thousandSymbol)) > -1 && selectionStart !== number.length + 1) {
+      pos.current = selectionStart + (number.toString().length - 1 === vl.toString().length ? 1 : 0);
     }
 
     return number;
@@ -126,12 +124,12 @@ const NumberInput = /*#__PURE__*/forwardRef(({
    */
 
   const convertMoneyToNumber = useCallback((vl, isNumber) => {
-    var _number5, _number5$toString, _number5$toString$rep, _number5$toString$rep2, _number5$toString$rep3;
+    var _number4, _number4$toString, _number4$toString$rep, _number4$toString$rep2, _number4$toString$rep3;
 
     let number = vl === null || vl === void 0 ? void 0 : vl.toString().replace(regexValidNumber, ''); // allow number and , || . || -
     // remove <thousandSymbol> and replace . to <decimalSymbol>
 
-    if (!isNumber) number = (_number5 = number) === null || _number5 === void 0 ? void 0 : (_number5$toString = _number5.toString()) === null || _number5$toString === void 0 ? void 0 : (_number5$toString$rep = _number5$toString.replaceAll) === null || _number5$toString$rep === void 0 ? void 0 : (_number5$toString$rep2 = (_number5$toString$rep3 = _number5$toString$rep.call(_number5$toString, thousandSymbol, '')).replaceAll) === null || _number5$toString$rep2 === void 0 ? void 0 : _number5$toString$rep2.call(_number5$toString$rep3, decimalSymbol, '.');
+    if (!isNumber) number = (_number4 = number) === null || _number4 === void 0 ? void 0 : (_number4$toString = _number4.toString()) === null || _number4$toString === void 0 ? void 0 : (_number4$toString$rep = _number4$toString.replaceAll) === null || _number4$toString$rep === void 0 ? void 0 : (_number4$toString$rep2 = (_number4$toString$rep3 = _number4$toString$rep.call(_number4$toString, thousandSymbol, '')).replaceAll) === null || _number4$toString$rep2 === void 0 ? void 0 : _number4$toString$rep2.call(_number4$toString$rep3, decimalSymbol, '.');
     return number;
   }, [decimalSymbol]);
 

package/components/paging/page-info.js

@@ -8,7 +8,7 @@ import OptionWrapper from '../others/option-wrapper';
 import { ButtonIcon, NumberInput, Dropdown, Typography, Divider } from '../';
 import { getGlobal } from '../../global';
 import theme from '../../theme/settings';
-import { alignCenter, borderBox, flexRow, noMargin, noPadding, border, textCenter, cursorPointer } from '../../styles/general';
+import { alignCenter, borderBox, flexRow, noMargin, noPadding, border, textCenter, cursorPointer, parseHeight } from '../../styles/general';
 const {
   colors: {
     system: {
@@ -40,6 +40,7 @@ const getLastPage = (totalItems, itemsPerPage) => {
   return _lastPage + 1;
 };
 
+const delayOnInput = getGlobal('delayOnInput');
 const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   id,
   typeShort,
@@ -59,6 +60,7 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
   const ref = useRef(null);
   const timer = useRef(null);
+  const currentPageRef = useRef(null);
   const [totalItemsState, setTotalItemsState] = useState(totalItems);
   const [itemsPerPageState, setItemsPerPageState] = useState(itemsPerPage || listPerPage[0] || 10);
   const [currentPageState, setCurrentPageState] = useState(currentPage);
@@ -105,6 +107,7 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
     }
 
+    currentPageRef.current = page;
     setCurrentPageState(page);
     setDisablePrevState(disablePrev);
     setDisableNextState(disableNext);
@@ -133,6 +136,7 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
     }
 
+    currentPageRef.current = 0;
     setItemsPerPageState(per);
     setCurrentPageState(0);
     setDisablePrevState(true);
@@ -153,7 +157,7 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     currentPage = page - 1;
     timer.current = setTimeout(() => {
       _onChangePage(page - 1, isInit, e);
-    }, 500);
+    }, delayOnInput);
   };
 
   const checkKeyPress = e => {
@@ -172,7 +176,7 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
     timer.current = setTimeout(() => {
       _onChangePage(currentPageState !== null && currentPageState !== void 0 ? currentPageState : 0, true);
-    }, 500);
+    }, delayOnInput);
   }, [totalItemsState, itemsPerPageState]);
   useEffect(() => {
     setItemsPerPageState(itemsPerPage);
@@ -235,7 +239,17 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       size: 'small',
       name: 'ArrowLeft',
       disabled: disablePrevState,
-      onClick: e => _onChangePage(currentPageState - 1, false, e)
+      onClick: e => {
+        currentPageRef.current = currentPageRef.current - 1;
+
+        if (timer.current) {
+          clearTimeout(timer.current);
+        }
+
+        timer.current = setTimeout(() => {
+          _onChangePage(currentPageRef.current, false, e);
+        }, delayOnInput);
+      }
     }), jsx(NumberInput, {
       css: _dynamicWidthCSS,
       disabledNegative: true,
@@ -256,7 +270,17 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       size: 'small',
       name: 'ArrowRight',
       disabled: disableNextState,
-      onClick: e => _onChangePage(currentPageState + 1, false, e)
+      onClick: e => {
+        currentPageRef.current = currentPageRef.current + 1;
+
+        if (timer.current) {
+          clearTimeout(timer.current);
+        }
+
+        timer.current = setTimeout(() => {
+          _onChangePage(currentPageRef.current, false, e);
+        }, delayOnInput);
+      }
     }), jsx(ButtonIcon, {
       circular: true,
       viewType: 'text',
@@ -300,10 +324,10 @@ const pagingInfoCSS = (bgColor, typeShort) => css`
     ${paragraph2};
     ${borderBox};
     ${border(1, system)};
-    height: 40px;
+    ${parseHeight(40)}
     border-left: none;
     border-right: none;
-    padding: ${spacing()}px 0;
+    padding: ${spacing([1, 0])};
     background-color: ${bgColor};
     color: ${main};
     .inputPage {
@@ -321,13 +345,13 @@ const pagingInfoCSS = (bgColor, typeShort) => css`
         }
     }
     .txt-line-number {
-        margin-left: ${spacing(4)}px;
+        margin-left: ${spacing([4])};
     }
     .DGN-UI-Divider {
-        margin: 0px ${spacing(2)}px;
+        margin: ${spacing([0, 2])};
     }
     .DGN-UI-Dropdown {
-        margin-left: ${typeShort ? '0px' : `${spacing(2)}px`};
+        margin-left: ${`${spacing(typeShort ? [0] : [2])}`};
         margin-bottom: 0;
         min-width: 52px;
         .DGN-UI-Dropdown-Form {
@@ -352,7 +376,7 @@ const pagingInfoCSS = (bgColor, typeShort) => css`
         }
     }
     .total-items {
-        margin-left: ${typeShort ? '0px' : `${spacing(4)}px`};
+        margin-left: ${`${spacing(typeShort ? [0] : [4])}`};
     }
 `;