linear-react-components-ui 1.1.7 → 1.1.8

package/lib/form/FieldPeriod.js

@@ -50,7 +50,7 @@ const FieldPeriod = props => {
   if (Component) {
     content = /*#__PURE__*/_react.default.createElement(Component, _extends({}, props, {
       errorMessages: errorMessages,
-      onChange: (e, maskValue, _ref) => {
+      onChange: (__, ___, _ref) => {
         let {
           initial,
           final

package/lib/inputs/base/types.d.ts

@@ -13,6 +13,8 @@ interface CustomInputEvent {
     code?: number;
     target: {
         value: string;
+        maskedValue?: string;
+        typedValue?: number | Date | null;
         name?: string;
         files?: FileList | null;
     };

package/lib/inputs/date/index.js

@@ -111,7 +111,6 @@ const DatePicker = props => {
     if (typeof valueInput === 'string') {
       var _event$target$value;
       const date = (_event$target$value = event.target.value) !== null && _event$target$value !== void 0 ? _event$target$value : '';
-      console.log('date >>>', props.onChange);
       if (props.onChange) {
         if (isValidDate(date)) {
           const newValue = (0, _moment.default)(date, _helpers.PT_BR_FORMAT).format(_helpers.EN_US_FORMAT);
@@ -153,7 +152,7 @@ const DatePicker = props => {
   const getButtonOpen = () => {
     if (!showButtonOpen) return undefined;
     return /*#__PURE__*/_react.default.createElement(_buttons.default, {
-      key: "button-",
+      key: "button-1313414141",
       boxShadow: false,
       icon: /*#__PURE__*/_react.default.createElement(_icons.default, {
         name: "calendar",

package/lib/inputs/errorMessage/index.d.ts

@@ -1,6 +1,5 @@
 import React__default from 'react';
 import { ErrorProps } from '../types.js';
-import 'imask';
 import '../../@types/PermissionAttr.js';
 import '../../@types/DataCombo.js';
 import '../base/types.js';

package/lib/inputs/inputHOC.d.ts

@@ -1,6 +1,5 @@
 import React__default from 'react';
 import { IInputHOCProps } from './types.js';
-import 'imask';
 import '../@types/PermissionAttr.js';
 import '../@types/DataCombo.js';
 import './base/types.js';

package/lib/inputs/mask/BaseMask.d.ts

@@ -1,6 +1,5 @@
 import { IBaseMaskProps } from './types.js';
 import 'react';
-import 'imask';
 import '../../@types/Align.js';
 import '../../@types/PermissionAttr.js';
 import '../base/types.js';
@@ -8,9 +7,6 @@ import '../../@types/Period.js';
 import '../../internals/types.js';
 import '../../@types/Position.js';
 
-declare const _default: {
-    (props: IBaseMaskProps): JSX.Element;
-    displayName: string;
-};
+declare const BaseMask: ({ value: valueProp, defaultValue, inputRef, onChange, onComplete, permissionAttr, ...rest }: IBaseMaskProps) => JSX.Element;
 
-export { _default as default };
+export { BaseMask as default };

package/lib/inputs/mask/BaseMask.js

@@ -4,12 +4,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _imaskHOC = _interopRequireDefault(require("./imaskHOC"));
+var _react = _interopRequireWildcard(require("react"));
 var _InputTextBase = _interopRequireDefault(require("../base/InputTextBase"));
 var _format_number = require("../number/format_number");
-const _excluded = ["inputRef"];
+var _reactImask = require("react-imask");
+var _permissionValidations = require("../../permissionValidations");
+var _helpers = require("./helpers");
+const _excluded = ["value", "defaultValue", "inputRef", "onChange", "onComplete", "permissionAttr"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -37,10 +41,27 @@ const returnEventFormattedValue = (props, event) => {
   }
   return event;
 };
-const getEventProps = props => {
+const getEventProps = (props, setValue, maskRef) => {
   if (props.isNumeric) return {};
   return {
     onBlur: e => {
+      if (maskRef.unmaskedValue.trim().length && props.autoCompleteMask) {
+        const currentValue = maskRef.unmaskedValue;
+        const sizeMask = maskRef.mask.toString().replace(/\D+/g, '').length;
+        if (sizeMask > currentValue.length) {
+          switch (props.autoCompleteMask) {
+            case 'left':
+              setValue(currentValue.padStart(sizeMask, '0'));
+              break;
+            case 'right':
+              setValue(currentValue.padEnd(sizeMask, '0'));
+              break;
+            default:
+              setValue(currentValue);
+              break;
+          }
+        }
+      }
       if (props.onBlur) {
         const {
           value
@@ -72,13 +93,73 @@ const getEventProps = props => {
     }
   };
 };
+const options = [_permissionValidations.OPTIONS_ON_DENIED.disabled, _permissionValidations.OPTIONS_ON_DENIED.unvisible, _permissionValidations.OPTIONS_ON_DENIED.readOnly, _permissionValidations.OPTIONS_ON_DENIED.hideContent];
 const BaseMask = _ref => {
   let {
-      inputRef
+      value: valueProp,
+      defaultValue,
+      inputRef,
+      onChange,
+      onComplete,
+      permissionAttr
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/_react.default.createElement(_InputTextBase.default, _extends({}, props, {
-    inputRef: inputRef
-  }, getEventProps(props)));
+    rest = _objectWithoutProperties(_ref, _excluded);
+  const onDenied = (0, _permissionValidations.actionsOnPermissionDenied)(options, permissionAttr);
+  const {
+    disabled,
+    readOnly
+  } = onDenied;
+  const disableCallbacks = disabled || readOnly;
+  const maskOptions = (0, _helpers.getMaskOptions)(rest);
+  const {
+    ref,
+    setValue,
+    maskRef
+  } = (0, _reactImask.useIMask)(maskOptions, {
+    defaultValue: defaultValue,
+    onAccept: (_, r) => {
+      if (!disableCallbacks && onChange) {
+        const event = {
+          target: {
+            name: r.el.input.name,
+            value: r.unmaskedValue,
+            maskedValue: r.value,
+            typedValue: r.typedValue
+          }
+        };
+        onChange(event);
+      }
+    },
+    onComplete: (_, r) => {
+      if (!disableCallbacks && onComplete) {
+        const event = {
+          target: {
+            name: r.el.input.name,
+            value: r.unmaskedValue,
+            maskedValue: r.value,
+            typedValue: r.typedValue
+          }
+        };
+        onComplete(event);
+      }
+    }
+  });
+  (0, _react.useEffect)(() => {
+    if (valueProp) {
+      setValue(String(valueProp));
+    }
+  }, [valueProp]);
+  return /*#__PURE__*/_react.default.createElement(_InputTextBase.default, _extends({
+    inputRef: r => {
+      ref.current = r;
+      if (inputRef) {
+        if (typeof inputRef === 'function') {
+          inputRef(r);
+        } else {
+          inputRef.current = r;
+        }
+      }
+    }
+  }, rest, getEventProps(rest, setValue, maskRef.current)));
 };
-var _default = exports.default = (0, _imaskHOC.default)(BaseMask);
+var _default = exports.default = BaseMask;

package/lib/inputs/mask/Cnpj.d.ts

@@ -1,6 +1,5 @@
 import { ICnpjFieldProps } from './types.js';
 import 'react';
-import 'imask';
 import '../../@types/Align.js';
 import '../../@types/PermissionAttr.js';
 import '../base/types.js';

package/lib/inputs/mask/Cpf.d.ts

@@ -1,6 +1,5 @@
 import { ICpfProps } from './types.js';
 import 'react';
-import 'imask';
 import '../../@types/Align.js';
 import '../../@types/PermissionAttr.js';
 import '../base/types.js';

package/lib/inputs/mask/Cpf.js

@@ -30,7 +30,7 @@ const CpfField = props => {
   }, 300), [handlerSetComponentValidator]);
   (0, _react.useEffect)(() => debouncedOnChange.cancel, []);
   const onChange = e => {
-    if (enableValidation && e) {
+    if (enableValidation) {
       debouncedOnChange(e.target.value);
       if (props.onChange) props.onChange(e);
     } else if (props.onChange) {

package/lib/inputs/mask/Phone.d.ts

@@ -1,6 +1,5 @@
 import { IPhoneFieldProps } from './types.js';
 import 'react';
-import 'imask';
 import '../../@types/Align.js';
 import '../../@types/PermissionAttr.js';
 import '../base/types.js';

package/lib/inputs/mask/ZipCode.d.ts

@@ -1,6 +1,5 @@
 import { IZipCode } from './types.js';
 import 'react';
-import 'imask';
 import '../../@types/Align.js';
 import '../../@types/PermissionAttr.js';
 import '../base/types.js';

package/lib/inputs/mask/helpers.d.ts

@@ -1,19 +1,55 @@
-import { AnyMaskedOptions } from 'imask';
-import { IMaskHOCProps } from '../types.js';
-import 'react';
-import '../../@types/PermissionAttr.js';
-import '../../@types/DataCombo.js';
-import '../base/types.js';
-import '../../@types/Align.js';
+import { TextAlign } from '../../@types/Align.js';
+import { OnDenied, PermissionAttr } from '../../@types/PermissionAttr.js';
+import * as React from 'react';
+import { CustomInputEvent } from '../base/types.js';
+import { IBaseMaskProps } from './types.js';
 import '../../@types/Period.js';
 import '../../internals/types.js';
 import '../../@types/Position.js';
-import '../../drawer/types.js';
-import '../../@types/Icon.js';
-import '../../icons/helper.js';
 
-declare function extractNonMaskProps(props: IMaskHOCProps, maskProps: AnyMaskedOptions): any;
+declare const getMaskOptions: ({ isDateField, placeholderChar, min, max, lazy, rightElements, ...rest }: IBaseMaskProps) => {
+    value?: string | undefined;
+    onBlur?: ((e: CustomInputEvent) => void) | undefined;
+    onKeyDown?: ((e: CustomInputEvent | React.KeyboardEvent<Element>) => void) | undefined;
+    defaultValue?: string | undefined;
+    isNumeric?: boolean | undefined;
+    scale?: number | undefined;
+    radix?: string | undefined;
+    blocks?: any;
+    thousandsSeparator?: string | undefined;
+    leftElements?: JSX.Element | JSX.Element[] | undefined;
+    handlerSetOnDenied?: ((onDeniedValue: OnDenied) => void) | undefined;
+    onChange?: ((e: CustomInputEvent, maskValue?: string | undefined, date?: string | undefined) => void) | undefined;
+    padFractionalZeros?: boolean | undefined;
+    onComplete?: ((e: CustomInputEvent, maskValue?: string | undefined, date?: string | undefined) => void) | undefined;
+    inputRef?: React.MutableRefObject<HTMLInputElement | HTMLTextAreaElement | null> | ((ref: HTMLInputElement | HTMLTextAreaElement | null) => void) | undefined;
+    permissionAttr?: PermissionAttr | undefined;
+    errorMessages?: string[] | undefined;
+    rounded?: boolean | undefined;
+    textAlign?: TextAlign | undefined;
+    customClassForInputContent?: string | undefined;
+    label?: string | undefined;
+    name?: string | undefined;
+    customClassForLabel?: string | undefined;
+    customClass?: string | undefined;
+    gridLayout?: string | undefined;
+    placeHolder?: string | undefined;
+    readOnly?: boolean | undefined;
+    labelUppercase?: boolean | undefined;
+    disabled?: boolean | undefined;
+    unmask?: boolean | undefined;
+    onFocus?: ((e: CustomInputEvent) => void) | undefined;
+    required?: boolean | undefined;
+    returnFormattedValueOnBlur?: boolean | undefined;
+    returnFormattedValueOnKeyDown?: boolean | undefined;
+    autoCompleteMask?: "left" | "right" | undefined;
+    definitions?: any;
+    mask?: any;
+    placeholderChar: string;
+    min: any;
+    max: any;
+};
 declare function CPFValidation(cpf?: string, returnMessage?: (msg: string) => void): void | "CPF inválido";
 declare function CNPJValidation(cnpj?: string, returnMessage?: (msg: string) => void): void | "CNPJ inválido";
 
-export { CNPJValidation, CPFValidation, extractNonMaskProps };
+export { CNPJValidation, CPFValidation, getMaskOptions };

package/lib/inputs/mask/helpers.js

@@ -5,23 +5,67 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.CNPJValidation = CNPJValidation;
 exports.CPFValidation = CPFValidation;
-exports.extractNonMaskProps = extractNonMaskProps;
+exports.getMaskOptions = void 0;
 var _lodash = require("lodash");
+const _excluded = ["isDateField", "placeholderChar", "min", "max", "lazy", "rightElements"];
+/* eslint-disable @typescript-eslint/no-explicit-any */
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } /* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable no-plusplus */
-function extractNonMaskProps(props, maskProps) {
-  const nonMask = _objectSpread({}, props);
-  Object.keys(maskProps).forEach(maskProp => {
-    delete nonMask[maskProp];
-  });
-  delete nonMask.value;
-  delete nonMask.onChange;
-  return nonMask;
-}
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+const momentFormat = 'DD/MM/YYYY';
+const getMaskOptions = _ref => {
+  let {
+      isDateField,
+      placeholderChar = '_',
+      min,
+      max,
+      lazy,
+      rightElements
+    } = _ref,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  // TODO: essa etapa deverá ser feita junto com o refactory dos componentes Date e Period.
+  // if (isDateField) {
+  //   return {
+  //     mask: Date,
+  //     min: min || new Date(1900, 0, 1),
+  //     max: max || new Date(9999, 0, 1),
+  //     pattern: momentFormat,
+  //     lazy,
+  //     format: (date: moment.MomentInput) => moment(date).format(momentFormat),
+  //     parse: (str) => moment(str, momentFormat).toDate(),
+  //     blocks: {
+  //       DD: {
+  //         mask: IMask.MaskedRange,
+  //         from: 1,
+  //         to: 31,
+  //         maxLength: 2,
+  //       },
+  //       MM: {
+  //         mask: IMask.MaskedRange,
+  //         from: 1,
+  //         to: 12,
+  //         maxLength: 2,
+  //       },
+  //       YYYY: {
+  //         mask: IMask.MaskedRange,
+  //         from: 1900,
+  //         to: 9999,
+  //       },
+  //     },
+  //   } satisfies ReactMaskOpts;
+  // }
+
+  return _objectSpread({
+    placeholderChar: placeholderChar === '' ? ' ' : placeholderChar,
+    min,
+    max
+  }, rest);
+};
+exports.getMaskOptions = getMaskOptions;
 const allEqualDigits = input => input.split('').every(char => char === input[0]);
 function CPFValidation(cpf, returnMessage) {
   const stringCpf = cpf ? cpf.replace(/[^\d]+/g, '') : '';

package/lib/inputs/mask/index.d.ts

@@ -1,11 +1,10 @@
-import _default from './BaseMask.js';
+import BaseMask from './BaseMask.js';
 export { default as CpfField } from './Cpf.js';
 export { default as CnpjField } from './Cnpj.js';
 export { default as PhoneField } from './Phone.js';
 export { default as ZipCodeField } from './ZipCode.js';
 import './types.js';
 import 'react';
-import 'imask';
 import '../../@types/Align.js';
 import '../../@types/PermissionAttr.js';
 import '../base/types.js';
@@ -15,4 +14,4 @@ import '../../@types/Position.js';
 
 
 
-export { _default as default };
+export { BaseMask as default };

package/lib/inputs/mask/types.d.ts

@@ -1,5 +1,4 @@
 import { KeyboardEvent, MutableRefObject } from 'react';
-import IMask from 'imask';
 import { TextAlign } from '../../@types/Align.js';
 import { OnDenied, PermissionAttr } from '../../@types/PermissionAttr.js';
 import { CustomInputEvent } from '../base/types.js';
@@ -7,23 +6,20 @@ import '../../@types/Period.js';
 import '../../internals/types.js';
 import '../../@types/Position.js';
 
-interface IBaseMaskProps {
+type IBaseMaskProps = {
     value?: string;
     onBlur?: (e: CustomInputEvent) => void;
     onKeyDown?: (e: CustomInputEvent | KeyboardEvent<Element>) => void;
     defaultValue?: string;
-    mask?: IMask.AnyMask;
     isNumeric?: boolean;
     scale?: number;
     radix?: string;
+    blocks?: any;
     thousandsSeparator?: string;
     rightElements?: JSX.Element | JSX.Element[];
     leftElements?: JSX.Element | JSX.Element[];
     handlerSetOnDenied?: (onDeniedValue: OnDenied) => void;
-    onChange?: (e: CustomInputEvent, maskValue?: string, date?: string | {
-        initial: string;
-        final: string;
-    }) => void;
+    onChange?: (e: CustomInputEvent, maskValue?: string, date?: string) => void;
     padFractionalZeros?: boolean;
     onComplete?: (e: CustomInputEvent, maskValue?: string, date?: string) => void;
     inputRef?: MutableRefObject<HTMLInputElement | HTMLTextAreaElement | null> | ((ref: HTMLInputElement | HTMLTextAreaElement | null) => void);
@@ -50,26 +46,27 @@ interface IBaseMaskProps {
     returnFormattedValueOnKeyDown?: boolean;
     isDateField?: boolean;
     autoCompleteMask?: 'left' | 'right';
-    definitions?: IMask.AllMaskedOptions['definitions'];
-}
-interface ICnpjFieldProps extends IBaseMaskProps {
+    definitions?: any;
+    mask?: any;
+    min?: any;
+    max?: any;
+};
+type ICnpjFieldProps = IBaseMaskProps & {
     value?: string;
     enableValidation?: boolean;
     handlerSetComponentValidator?: (validator: () => void) => void;
-    onChange?: (e?: CustomInputEvent) => void;
-}
-interface ICpfProps extends IBaseMaskProps {
+};
+type ICpfProps = IBaseMaskProps & {
     value?: string;
     enableValidation?: boolean;
     handlerSetComponentValidator?: (validator: () => void) => void;
-    onChange?: (e?: CustomInputEvent) => void;
-}
-interface IPhoneFieldProps extends IBaseMaskProps {
+};
+type IPhoneFieldProps = IBaseMaskProps & {
     value?: string;
     cellNumber?: boolean;
-}
-interface IZipCode extends IBaseMaskProps {
+};
+type IZipCode = IBaseMaskProps & {
     value?: string;
-}
+};
 
 export { IBaseMaskProps, ICnpjFieldProps, ICpfProps, IPhoneFieldProps, IZipCode };

package/lib/inputs/number/BaseNumber.d.ts

@@ -7,7 +7,6 @@ import '../../@types/Period.js';
 import '../../internals/types.js';
 import '../../@types/Position.js';
 import '../types.js';
-import 'imask';
 import '../../@types/DataCombo.js';
 import '../../drawer/types.js';
 import '../../@types/Icon.js';

package/lib/inputs/number/Currency.d.ts

@@ -7,7 +7,6 @@ import '../../@types/Period.js';
 import '../../internals/types.js';
 import '../../@types/Position.js';
 import '../types.js';
-import 'imask';
 import '../../@types/DataCombo.js';
 import '../../drawer/types.js';
 import '../../@types/Icon.js';

package/lib/inputs/number/Decimal.d.ts

@@ -7,7 +7,6 @@ import '../../@types/Period.js';
 import '../../internals/types.js';
 import '../../@types/Position.js';
 import '../types.js';
-import 'imask';
 import '../../@types/DataCombo.js';
 import '../../drawer/types.js';
 import '../../@types/Icon.js';

package/lib/inputs/number/index.d.ts

@@ -9,7 +9,6 @@ import '../../@types/Period.js';
 import '../../internals/types.js';
 import '../../@types/Position.js';
 import '../types.js';
-import 'imask';
 import '../../@types/DataCombo.js';
 import '../../drawer/types.js';
 import '../../@types/Icon.js';

package/lib/inputs/number/types.d.ts

@@ -6,7 +6,6 @@ import '../../@types/Align.js';
 import '../../@types/Period.js';
 import '../../internals/types.js';
 import '../../@types/Position.js';
-import 'imask';
 import '../../@types/DataCombo.js';
 import '../../drawer/types.js';
 import '../../@types/Icon.js';
@@ -16,7 +15,7 @@ interface INumberFieldProps extends IMaskHOCProps {
     value?: string;
     permissionAttr?: PermissionAttr;
     disabled?: boolean;
-    onChange?: (e?: CustomInputEvent, maskValue?: string, date?: string | {
+    onChange?: (e?: CustomInputEvent | InputEvent, maskValue?: string, date?: string | {
         initial: string;
         final: string;
     }) => void;

package/lib/inputs/period/index.js

@@ -93,19 +93,6 @@ const PeriodPicker = props => {
       document.removeEventListener('keydown', onCloseCalendarWithoutFocus);
     };
   }, []);
-  (0, _react.useEffect)(() => {
-    if (valueFinal && valueInitial && (0, _moment.default)(valueFinal).isBefore((0, _moment.default)(valueInitial))) {
-      setValueInitial(valueFinal);
-      setValueFinal(valueInitial);
-    } else if (props.onChange) {
-      const initial = valueInitial ? valueInitial.format('YYYY-MM-DD') : '';
-      const final = valueFinal ? valueFinal.format('YYYY-MM-DD') : '';
-      props.onChange(undefined, '', {
-        initial,
-        final
-      });
-    }
-  }, [valueInitial, valueFinal]);
   (0, _react.useEffect)(() => {
     if (props.value && !((0, _moment.default)(props.value.initial).isSame(valueInitial) || (0, _moment.default)(props.value.final).isSame(valueFinal))) {
       const {
@@ -161,6 +148,16 @@ const PeriodPicker = props => {
       }
     }
   };
+  const onDateChange = date => {
+    if (props.onChange) {
+      const initial = date.initial ? date.initial.format('YYYY-MM-DD') : '';
+      const final = date.final ? date.final.format('YYYY-MM-DD') : '';
+      props.onChange(undefined, '', {
+        initial,
+        final
+      });
+    }
+  };
   const setValue = function (event, value) {
     var _inputInitialRef$curr, _inputFinalRef$curren;
     let shouldOpenDropdown = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
@@ -168,10 +165,32 @@ const PeriodPicker = props => {
     const dateObj = (0, _moment.default)(value, 'DD/MM/YYYY');
     if (showCalendarValueInitial) (_inputInitialRef$curr = inputInitialRef.current) === null || _inputInitialRef$curr === void 0 ? void 0 : _inputInitialRef$curr.focus();
     if (showCalendarValueFinal) (_inputFinalRef$curren = inputFinalRef.current) === null || _inputFinalRef$curren === void 0 ? void 0 : _inputFinalRef$curren.focus();
-    if (valueDateName === 'valueInitial') {
+    if (valueDateName === 'valueFinal' && valueInitial && dateObj.isBefore(valueInitial)) {
+      setValueInitial(dateObj);
+      setValueFinal(valueInitial);
+      onDateChange({
+        initial: dateObj,
+        final: valueInitial
+      });
+    } else if (valueDateName === 'valueInitial' && valueFinal && dateObj.isAfter(valueFinal)) {
+      setValueInitial(valueFinal);
+      setValueFinal(dateObj);
+      onDateChange({
+        initial: valueFinal,
+        final: dateObj
+      });
+    } else if (valueDateName === 'valueInitial') {
       setValueInitial(dateObj);
+      onDateChange({
+        initial: dateObj,
+        final: valueFinal
+      });
     } else {
       setValueFinal(dateObj);
+      onDateChange({
+        initial: valueInitial,
+        final: dateObj
+      });
     }
     if (valueDateName === 'valueInitial' && !valueFinal && shouldOpenDropdown) {
       var _inputFinalRef$curren2;
@@ -239,11 +258,13 @@ const PeriodPicker = props => {
   });
   const getCalendar = (value, calendarColorStyleCalendar, valueDateName) => /*#__PURE__*/_react.default.createElement(_calendar.default, {
     currentDate: value !== undefined ? (0, _moment.default)(value) : (0, _moment.default)(),
-    onDateChange: date => setValue({
-      target: {
-        name: valueDateName
-      }
-    }, date),
+    onDateChange: date => {
+      setValue({
+        target: {
+          name: valueDateName
+        }
+      }, date);
+    },
     colorStyle: calendarColorStyleCalendar
   });
   const setPeriodDates = (selected, dates) => {
@@ -337,12 +358,11 @@ const PeriodPicker = props => {
     name: "valueInitial",
     value: !valueInitial ? '' : (0, _moment.default)(valueInitial).format('DD/MM/YYYY'),
     mask: "00/00/0000",
-    onComplete: (e, date) => {
-      setValue(e, date, true);
+    onComplete: e => {
+      setValue(e, e.target.value, true);
     },
     onFocus: onInputFocus,
     onBlur: e => onInputBlur(e),
-    isDateField: true,
     onChange: onInputChange,
     inputRef: el => {
       inputInitialRef.current = el;
@@ -359,9 +379,8 @@ const PeriodPicker = props => {
     name: "valueFinal",
     value: !valueFinal ? '' : (0, _moment.default)(valueFinal).format('DD/MM/YYYY'),
     mask: "00/00/0000",
-    isDateField: true,
-    onComplete: (e, date) => {
-      setValue(e, date, true);
+    onComplete: e => {
+      setValue(e, e.target.value, true);
     },
     onFocus: onInputFocus,
     onBlur: e => onInputBlur(e),