diginet-core-ui 1.3.24 → 1.3.29

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

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
@@ -7,17 +5,23 @@ import { memo, useState, useEffect, useRef, useImperativeHandle, forwardRef, Fra
 import { createPortal } from 'react-dom';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
-import { InputBase, Label } from '../../';
-import Icon from '../../../icons';
-import { randomString, updatePosition } from '../../../utils';
-import { useTheme } from '../../../theme';
+import { ButtonIcon, InputBase, Label } from '../../';
+import { randomString } from '../../../utils';
+import { color as colors } from '../../../styles/colors';
+import { typography } from '../../../styles/typography';
+import { borderBox, borderRadius4px, displayBlock, positionFixed, positionRelative } from '../../../styles/general';
+const {
+  paragraph1
+} = typography;
 const {
-  colors,
-  typography: {
-    fontSize,
-    fontFamily
+  semantic: {
+    info
+  },
+  fill: {
+    disabled: fillDisabled,
+    'scrollbar-tabbar': scrollbar
   }
-} = useTheme();
+} = colors;
 const timing = {};
 const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   className,
@@ -37,6 +41,8 @@ const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   zIndex,
   onOpened,
   onClosed,
+  onChangeInput,
+  delayOnInput,
   ...props
 }, reference) => {
   const ref = useRef(null);
@@ -52,27 +58,27 @@ const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
   const DropdownBoxRoot = css`
         &.DGN-UI-Dropdown-Box {
-            display: block;
-            position: relative;
+            ${displayBlock}
+            ${positionRelative}
             min-width: 150px;
             height: max-content;
             .end-icon > .DGN-UI-Icon {
                 transition: transform 250ms;
             }
             &.dropdown-showing {
-                .end-icon > .DGN-UI-Icon {
+                .end-icon > .DGN-UI-ButtonIcon {
                     transform: rotateX(180deg);
                 }
             }
             .DGN-UI-InputBase {
-                background-color: ${bgColor ? bgColor === true ? colors.bgDisabled : bgColor : 'inherit'};
+                background-color: ${bgColor ? bgColor === true ? fillDisabled : bgColor : 'inherit'};
                 &.underlined {
                     height: 32px;
                 }
                 &.dropdown-focus {
                     background-color: inherit;
                     &::after {
-                        border-bottom-color: ${colors.info};
+                        border-bottom-color: ${info};
                         transform: scaleX(1);
                     }
                 }
@@ -80,32 +86,30 @@ const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         }
     `;
   const DropdownBoxCSS = css`
-		display: block;
-        position: fixed;
+        ${displayBlock}
+        ${paragraph1};
+        ${positionFixed}
+        ${borderBox}
+        ${borderRadius4px}
 		width: 100%;
 		height: auto;
         max-height: 80%;
 		overflow: auto;
         padding: 16px;
-        font-size: ${fontSize};
-        font-family: ${fontFamily};
         background-color: #FFF;
-		box-sizing: border-box;
-		border-radius: 4px;
 		box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-        box-sizing: border-box;
         opacity: 0;
         transition: opacity 0.3s;
         z-index: ${zIndex};
 		&::-webkit-scrollbar {
-			width: 8px;
+			${borderRadius4px}
+            width: 8px;
 			background-color: #FFF !important;
-            border-radius: 4px;
 		}
 		&::-webkit-scrollbar-thumb {
-			border-radius: 4px;
-			mix-blend-mode: normal;
-			background-color: ${colors.scrollbar} !important;
+			${borderRadius4px}
+            mix-blend-mode: normal;
+			background-color: ${scrollbar} !important;
 			background-clip: content-box;
 		}
         .DGN-UI-TreeView {
@@ -117,9 +121,9 @@ const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   /* Start handler */
 
   const onTriggerDropdown = e => {
-    if (!ref.current.classList.contains('dropdown-showing')) {
-      ref.current.classList.add('dropdown-showing');
-      inputBaseRef.current.classList.add('dropdown-focus');
+    if (!open) {
+      // ref.current.classList.add('dropdown-showing');
+      // inputBaseRef.current.classList.add('dropdown-focus');
       openDropdownBox();
     } else {
       closeDropdownBox(true);
@@ -160,23 +164,22 @@ const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
 
   const closeDropdownBox = certain => {
+    var _Array$from, _Array$from$classList;
+
     const portals = document.querySelectorAll('.DGN-UI-Portal');
 
-    if (!certain && portals && portals.length > 1 && Array.from(portals)[portals.length - 1] && !Array.from(portals)[portals.length - 1].contains(ref.current)) {
+    if (!certain && portals && portals.length > 1 && Array.from(portals)[portals.length - 1] && !Array.from(portals)[portals.length - 1].contains(ref.current) && !((_Array$from = Array.from(portals)[portals.length - 1]) !== null && _Array$from !== void 0 && (_Array$from$classList = _Array$from.classList) !== null && _Array$from$classList !== void 0 && _Array$from$classList.contains('DGN-UI-Modal'))) {
       return;
     }
 
     if (dropdownBoxRef.current) {
       dropdownBoxRef.current.style.pointerEvents = `none`;
-      dropdownBoxRef.current.style.opacity = 0;
-
-      if (ref.current) {
-        ref.current.classList.remove('dropdown-showing');
-      }
-
-      if (inputBaseRef.current) {
-        inputBaseRef.current.classList.remove('dropdown-focus');
-      }
+      dropdownBoxRef.current.style.opacity = 0; // if (ref.current) {
+      //     ref.current.classList.remove('dropdown-showing');
+      // }
+      // if (inputBaseRef.current) {
+      //     inputBaseRef.current.classList.remove('dropdown-focus');
+      // }
 
       document.removeEventListener('click', onClickOutsideOfInput);
       timing[unique + 'Box'] = setTimeout(() => {
@@ -188,6 +191,14 @@ const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
   };
 
+  const _onChangeInput = e => {
+    const value = e.target.value;
+    const timeout = setTimeout(() => {
+      onChangeInput === null || onChangeInput === void 0 ? void 0 : onChangeInput(value);
+    }, delayOnInput);
+    return () => clearTimeout(timeout);
+  };
+
   useEffect(() => {
     return () => {
       closeDropdownBox();
@@ -203,19 +214,23 @@ const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       closeDropdownBox(true);
     }
   }));
-  const dropdownIcon = jsx(Icon, {
+  const dropdownIcon = jsx(ButtonIcon, {
+    viewType: 'ghost',
     name: 'ArrowDown',
     onClick: openOnClickAt === 'icon' ? onTriggerDropdown : null,
     ref: dropdownIconRef
   });
-  return jsx(Fragment, null, jsx("div", _extends({
+  return jsx(Fragment, null, jsx("div", {
     ref: ref,
     css: DropdownBoxRoot,
-    className: ['DGN-UI-Dropdown-Box', className].join(' ').trim(),
-    style: style
-  }, props), label ? jsx(Label, _extends({
-    required: required
-  }, labelProps), label) : null, jsx(InputBase, _extends({}, inputProps, {
+    className: ['DGN-UI-Dropdown-Box', open && 'dropdown-showing', className].join(' ').trim(),
+    style: style,
+    ...props
+  }, label ? jsx(Label, {
+    required: required,
+    ...labelProps
+  }, label) : null, jsx(InputBase, { ...inputProps,
+    className: open && 'dropdown-focus',
     style: inputStyle,
     viewType: viewType,
     ref: inputBaseRef,
@@ -224,8 +239,9 @@ const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     value: value,
     startIcon: startIcon,
     endIcon: dropdownIcon,
+    onChange: _onChangeInput,
     onClick: openOnClickAt === 'full' ? onTriggerDropdown : null
-  }))), open && /*#__PURE__*/createPortal(jsx("div", {
+  })), open && /*#__PURE__*/createPortal(jsx("div", {
     ref: dropdownBoxRef,
     className: `DGN-UI-Portal DGN-DropdownBox-${unique}`,
     css: DropdownBoxCSS
@@ -238,6 +254,7 @@ DropdownBox.defaultProps = {
   startIcon: 'search',
   openOnClickAt: 'icon',
   inputProps: {},
+  delayOnInput: 700,
   zIndex: 9001
 };
 DropdownBox.propTypes = {
@@ -274,6 +291,12 @@ DropdownBox.propTypes = {
   /** style inline of input in DropdownBox component */
   inputStyle: PropTypes.object,
 
+  /** the function will run when entering input */
+  onChangeInput: PropTypes.func,
+
+  /** delay time on input */
+  delayOnInput: PropTypes.number,
+
   /** style inline of label in DropdownBox component */
   labelProps: PropTypes.object,
 

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

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
@@ -96,11 +94,12 @@ const MoneyInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   /* End handler */
 
   useImperativeHandle(reference, () => ref.current);
-  return jsx("div", _extends({
+  return jsx("div", {
     ref: ref,
     css: FormGroupRoot,
-    className: ['DGN-UI-FormGroup', fullWidth ? 'Form-Group-full-width' : '', oneHelperText ? 'Form-Group-Common' : '', className].join(' ').trim()
-  }, props), children);
+    className: ['DGN-UI-FormGroup', fullWidth ? 'Form-Group-full-width' : '', oneHelperText ? 'Form-Group-Common' : '', className].join(' ').trim(),
+    ...props
+  }, children);
 }));
 MoneyInput.defaultProps = {
   marginRight: 16,

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

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
@@ -37,14 +35,15 @@ const HelperText = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     `;
   /* End styled */
 
-  return jsx(Typography, _extends({
+  return jsx(Typography, {
     ref: ref,
     type: 'p3',
     color: theme.colors.danger,
     fullWidth: false,
     css: HelperTextRoot,
-    className: ['DGN-UI-HelperText', className, status, disabled ? 'disabled' : ''].join(' ').trim()
-  }, props), typeof children === 'boolean' ? getGlobal('thisFieldIsRequired') : children);
+    className: ['DGN-UI-HelperText', className, status, disabled ? 'disabled' : ''].join(' ').trim(),
+    ...props
+  }, typeof children === 'boolean' ? getGlobal('thisFieldIsRequired') : children);
 }));
 HelperText.defaultProps = {
   disabled: false,

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

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
@@ -8,12 +6,9 @@ import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import { renderIcon } from '../../../utils';
 import theme from '../../../theme/settings';
+import { typography } from '../../../styles/typography';
 const {
-  colors,
-  typography: {
-    fontSize,
-    fontFamily
-  }
+  colors
 } = theme;
 const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   type,
@@ -226,16 +221,12 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         color: ${colors.input};
         background-color: transparent;
         padding-top: 0;
-        font-family: ${fontFamily};
-        font-style: normal;
-        font-weight: 500;
-        font-size: ${fontSize};
-        line-height: 20px;
+        ${typography.paragraph1};
         height: 24px;
+        text-overflow: ellipsis;
         &::placeholder {
             color: ${colors.placeholder};
-            font-family: ${fontFamily};
-            font-size: ${fontSize};
+            ${typography.paragraph1};
         }
         &:focus {
             background-color: transparent;
@@ -261,9 +252,7 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const textAreaCSS = css`
         display: block;
         color: ${colors.input};
-        font-family: ${fontFamily};
-        font-size: ${fontSize};
-        line-height: 20px;
+        ${typography.paragraph1};
         min-height: max-content;
         min-width: max-content;
         outline: none;
@@ -524,15 +513,16 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   /* Start component */
 
   const newClass = (viewType === 'outlined' ? 'outlined' : 'underlined') + (nonStyle ? ' non-style' : '');
-  const MultipleInputComp = jsx("div", _extends({
+  const MultipleInputComp = jsx("div", {
     css: multilineCSS,
     className: ['DGN-UI-InputBase', newClass, className].join(' ').trim(),
-    ref: ref
-  }, props), jsx("textarea", _extends({
+    ref: ref,
+    ...props
+  }, jsx("textarea", {
     type: "text",
     placeholder: placeholder,
-    defaultValue: defaultValue
-  }, inputProps, {
+    defaultValue: defaultValue,
+    ...inputProps,
     css: textAreaCSS,
     readOnly: readOnly,
     style: inputStyle || (inputProps === null || inputProps === void 0 ? void 0 : inputProps.style),
@@ -544,19 +534,19 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     onChange: onChange,
     onBlur: onBlur,
     onFocus: onFocus
-  })));
-  const InputComp = jsx("div", _extends({
+  }));
+  const InputComp = jsx("div", {
     css: inputBaseRoot,
-    ref: ref
-  }, props, {
+    ref: ref,
+    ...props,
     className: ['DGN-UI-InputBase', newClass, className, status].join(' ').trim()
-  }), jsx("div", {
+  }, jsx("div", {
     css: inputBaseCSS
-  }, !!startIcon && jsx("div", _extends({
-    css: inputBaseIconCSS
-  }, startIconProps, {
+  }, !!startIcon && jsx("div", {
+    css: inputBaseIconCSS,
+    ...startIconProps,
     className: 'start-icon ' + (startIconProps.className ? startIconProps.className : '')
-  }), renderIcon(startIcon, typeof startIcon === 'string' && startIcon.length < 20 ? 'effect' : null, {
+  }, renderIcon(startIcon, typeof startIcon === 'string' && startIcon.length < 20 ? 'effect' : null, {
     onClick: startIconProps.onClick ? null : () => inputBaseRef.current.focus(),
     style: {
       padding: 0,
@@ -564,12 +554,12 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       ...iconStyle
     },
     viewBox: true
-  })), jsx("input", _extends({
+  })), jsx("input", {
     type: type,
     autoComplete: autoComplete,
     placeholder: placeholder,
-    defaultValue: defaultValue
-  }, inputProps, {
+    defaultValue: defaultValue,
+    ...inputProps,
     readOnly: readOnly,
     style: inputStyle || (inputProps === null || inputProps === void 0 ? void 0 : inputProps.style),
     className: [newClass, inputProps === null || inputProps === void 0 ? void 0 : inputProps.className].join(' '),
@@ -581,11 +571,11 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     onChange: onChange,
     onBlur: onBlur,
     onFocus: onFocus
-  }))), !!endIcon && jsx("div", _extends({
-    css: inputBaseIconCSS
-  }, endIconProps, {
+  })), !!endIcon && jsx("div", {
+    css: inputBaseIconCSS,
+    ...endIconProps,
     className: 'end-icon ' + (endIconProps.className ? endIconProps.className : '')
-  }), renderIcon(endIcon, null, {
+  }, renderIcon(endIcon, null, {
     style: {
       padding: 0,
       minHeight: '24px',

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

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
@@ -7,7 +5,19 @@ import { memo, useMemo, forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import { Typography } from '../../';
-import theme from '../../../theme/settings';
+import { color as colors } from '../../../styles/colors';
+import { ellipsis } from '../../../styles/general';
+const {
+  system: {
+    disabled: systemDisabled
+  },
+  semantic: {
+    danger
+  },
+  text: {
+    normal_label
+  }
+} = colors;
 const Label = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   required,
   children,
@@ -17,29 +27,29 @@ const Label = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   ...props
 }, ref) => {
   const LabelRootCSS = css`
+        ${ellipsis}
         margin: 0px;
-        font-weight: bold !important;
         &.read-only,
         &.disabled {
-            color: ${theme.colors.disabled};
+            color: ${systemDisabled};
         }
         .required {
-            color: ${theme.colors.danger};
+            color: ${danger};
         }
         & + .DGN-UI-InputBase.outlined {
             margin-top: 2px;
         }
     `;
-  const LabelComp = useMemo(() => jsx(Typography, _extends({
-    type: 'p3',
-    color: theme.colors.label,
-    fullWidth: false
-  }, props, {
+  const LabelComp = useMemo(() => jsx(Typography, {
+    type: 'h6',
+    color: normal_label,
+    fullWidth: false,
     ref: ref,
     mapping: 'label',
     css: LabelRootCSS,
-    className: ['DGN-UI-Label', className, readOnly ? 'read-only' : '', disabled ? 'disabled' : ''].join(' ').trim()
-  }), children, required ? jsx("span", {
+    className: ['DGN-UI-Label', className, readOnly ? 'read-only' : '', disabled ? 'disabled' : ''].join(' ').trim(),
+    ...props
+  }, children, required ? jsx("span", {
     className: 'required'
   }, " *") : null), [children, required, readOnly, disabled]);
   return LabelComp;

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

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
@@ -184,7 +182,8 @@ const MoneyInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     const decimalSymbolDigit = (_local$current$clipbo = local.current.clipboardText.match(new RegExp(decimalSymbol, 'g'))) === null || _local$current$clipbo === void 0 ? void 0 : _local$current$clipbo.length;
     const selectionText = window.getSelection().toString(); // Only includes number and decimalSymbol
 
-    if (!pattern.test(local.current.clipboardText) || decimalSymbolDigit && value.includes(decimalSymbol) && !selectionText.includes(decimalSymbol)) {
+    if (!pattern.test(local.current.clipboardText) || // Only one decimalSymbol
+    decimalSymbolDigit && value.includes(decimalSymbol) && !selectionText.includes(decimalSymbol)) {
       e.preventDefault();
       return;
     }
@@ -321,11 +320,12 @@ const MoneyInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     return ref.current;
   });
   const validateResult = validates && onValidate(value, validates, true);
-  return jsx("div", _extends({
+  return jsx("div", {
     ref: ref,
     css: MoneyInputRoot,
-    className: ('DGN-UI-Money-Input ' + className).trim()
-  }, props), !!label && jsx(Label, {
+    className: ('DGN-UI-Money-Input ' + className).trim(),
+    ...props
+  }, !!label && jsx(Label, {
     required: required,
     disabled: disabled
   }, label), jsx(InputBase, {

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

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
@@ -227,6 +225,7 @@ const NumberInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     local.current.isSpecialSymbol = false;
     local.current.isDeleteDecimalSymbol = key === 'Backspace' && value[cursor - 1] === decimalSymbol;
     local.current.currentKey = key;
+    if (onKeyDown) onKeyDown(e);
   };
 
   const onPasteHandler = e => {
@@ -239,7 +238,8 @@ const NumberInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     const decimalSymbolDigit = (_local$current$clipbo = local.current.clipboardText.match(new RegExp(decimalSymbol, 'g'))) === null || _local$current$clipbo === void 0 ? void 0 : _local$current$clipbo.length;
     let selectionText = window.getSelection().toString(); // Only includes number and decimalSymbol
 
-    if (!pattern.test(local.current.clipboardText.replaceAll(separatorSymbol.current, '')) || decimalSymbolDigit && value.includes(decimalSymbol) && !selectionText.includes(decimalSymbol)) {
+    if (!pattern.test(local.current.clipboardText.replaceAll(separatorSymbol.current, '')) || // Only one decimalSymbol
+    decimalSymbolDigit && value.includes(decimalSymbol) && !selectionText.includes(decimalSymbol)) {
       e.preventDefault();
       return;
     }
@@ -260,7 +260,7 @@ const NumberInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     let result = getValueWithMinMax(value);
 
     if (/\d/.test(local.current.currentKey)) {
-      if (!!+result && result === getValueWithMinMax(value.replace(local.current.currentKey, ''))) {
+      if (!!+result && result < getValueWithMinMax(value.replace(local.current.currentKey, ''))) {
         e.target.value = local.current.currentValue;
         return;
       }
@@ -397,13 +397,10 @@ const NumberInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
     if (defaultValue !== undefined && defaultValue !== '') {
       setValueIntoInput(defaultValue);
-    }
+    } // inputRef.current.addEventListener('focus', () => {
+    //     inputRef.current.addEventListener('keydown', onKeyDownHandler);
+    // }, {once: true});
 
-    inputRef.current.addEventListener('focus', () => {
-      inputRef.current.addEventListener('keydown', onKeyDownHandler);
-    }, {
-      once: true
-    });
   }, []);
   useEffect(() => {
     if (placeholder !== undefined) {
@@ -460,10 +457,11 @@ const NumberInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     ref.current.getValueWithMinMax = getValueWithMinMax;
     return ref.current;
   });
-  return jsx("div", _extends({
+  return jsx("div", {
     ref: ref,
-    css: NumberInputRoot
-  }, props), !!label && jsx(Label, {
+    css: NumberInputRoot,
+    ...props
+  }, !!label && jsx(Label, {
     required: required,
     disabled: disabled
   }, label), jsx(InputBase, {
@@ -485,7 +483,7 @@ const NumberInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     onBlur: onBlurHandler,
     onFocus: onFocus,
     onInput: onInput,
-    onKeyDown: onKeyDown,
+    onKeyDown: onKeyDownHandler,
     onKeyUp: onKeyUp,
     onPaste: onPasteHandler
   }), !!error && jsx(HelperText, {

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

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
@@ -295,13 +293,14 @@ const PhoneInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   useImperativeHandle(reference, () => ({
     get: () => ref.current
   }));
-  return jsx("div", _extends({
+  return jsx("div", {
     ref: ref,
     css: PhoneInputRoot,
     style: {
       marginBottom: '20px'
-    }
-  }, props), jsx(Label, {
+    },
+    ...props
+  }, jsx(Label, {
     required: required,
     disabled: disabled
   }, label), jsx(InputBase, {