linear-react-components-ui 1.1.21-rc.5 → 1.1.22-beta.2

package/lib/inputs/date/index.js

@@ -6,14 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _moment = _interopRequireDefault(require("moment"));
-var _gridlayout = _interopRequireDefault(require("../../gridlayout"));
-var _buttons = _interopRequireDefault(require("../../buttons"));
-var _calendar = _interopRequireDefault(require("../../calendar"));
 var _Dialog = _interopRequireDefault(require("./Dialog"));
 var _Dropdown = _interopRequireDefault(require("./Dropdown"));
+var _buttons = _interopRequireDefault(require("../../buttons"));
+var _gridlayout = _interopRequireDefault(require("../../gridlayout"));
+var _calendar = _interopRequireDefault(require("../../calendar"));
+var _BaseMask = _interopRequireDefault(require("../mask/BaseMask"));
 var _helpers = require("./helpers");
 require("../../assets/styles/datepicker.scss");
-var _BaseMask = _interopRequireDefault(require("../mask/BaseMask"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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; }
@@ -34,16 +34,11 @@ const DatePicker = props => {
       height: '384px'
     },
     gridLayout,
-    shouldCloseOnEsc = true,
-    isDateTimeField = false
+    shouldCloseOnEsc = true
   } = props;
-  const maskFormat = !isDateTimeField ? '00/00/0000' : Date;
-  const patternFormat = !isDateTimeField ? undefined : 'DD/MM/YYYY HH:mm';
-  const brFormatter = !isDateTimeField ? _helpers.PT_BR_FORMAT : _helpers.PT_BR_FORMAT_DATETIME;
-  const usFormatter = !isDateTimeField ? _helpers.EN_US_FORMAT : _helpers.EN_US_FORMAT_DATETIME;
   const [valueState, setValueState] = (0, _react.useState)(value ? (0, _helpers.getMomentValue)(value) : undefined);
   const [showCalendar, setShowCalendar] = (0, _react.useState)(false);
-  const [valueFromProps, setValueFromProps] = (0, _react.useState)((0, _moment.default)(value, patternFormat).format());
+  const [valueFromProps, setValueFromProps] = (0, _react.useState)(value);
   const [inputDimensions, setInputDimensions] = (0, _react.useState)();
   const [calendarOnDialog, setCalendarOnDialog] = (0, _react.useState)(false);
   const [onDenied, setOnDenied] = (0, _react.useState)({
@@ -129,11 +124,11 @@ const DatePicker = props => {
   };
   const isValidDate = date => {
     if (typeof date === 'object' && !(date instanceof Date)) {
-      const initialValid = (0, _moment.default)(date.initial, brFormatter, true).isValid();
-      const finalValid = (0, _moment.default)(date.final, brFormatter, true).isValid();
+      const initialValid = (0, _moment.default)(date.initial, _helpers.PT_BR_FORMAT, true).isValid();
+      const finalValid = (0, _moment.default)(date.final, _helpers.PT_BR_FORMAT, true).isValid();
       return initialValid && finalValid;
     }
-    return (0, _moment.default)(date, brFormatter, true).isValid();
+    return (0, _moment.default)(date, _helpers.PT_BR_FORMAT, true).isValid();
   };
   const onInputChange = function (event) {
     let valueInput = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
@@ -141,7 +136,7 @@ const DatePicker = props => {
       const date = event.target.value ?? '';
       if (props.onChange) {
         if (isValidDate(date)) {
-          const newValue = (0, _moment.default)(date, brFormatter).format(usFormatter);
+          const newValue = (0, _moment.default)(date, _helpers.PT_BR_FORMAT).format(_helpers.EN_US_FORMAT);
           const obj = {
             target: {
               value: newValue,
@@ -168,12 +163,12 @@ const DatePicker = props => {
     if (props.onComplete) props.onComplete(e, valueParam);
     if (props.onChange) onInputChange({
       target: {
-        value: valueParam ?? '',
+        value: valueParam,
         name
       }
     }, valueParam);
     if (shouldCloseOnSelect) setShowCalendar(false);
-    setValueState((0, _moment.default)(valueParam, brFormatter));
+    setValueState((0, _moment.default)(valueParam, _helpers.PT_BR_FORMAT));
   };
   const shouldDisable = () => props.disabled || onDenied && (onDenied.disabled || onDenied.hideContent);
   const getButtonOpen = () => {
@@ -199,7 +194,7 @@ const DatePicker = props => {
     colorStyle: calendarColorStyle,
     currentDate: valueCalendar !== undefined ? valueCalendar : (0, _moment.default)(),
     onDateChange: date => {
-      setValue(date.format(brFormatter), undefined);
+      setValue(date.format(_helpers.PT_BR_FORMAT), undefined);
       if (showCalendarInDialog) setCalendarOnDialog(false);
     },
     currentDateButton: buttonElement => currentDateButtonRef.current = buttonElement,
@@ -225,8 +220,8 @@ const DatePicker = props => {
     }, getCalendar(valueState, props?.calendarColorStyle));
   };
   (0, _react.useEffect)(() => {
-    if (value && (0, _moment.default)(value, usFormatter).format() !== 'Invalid date' && (0, _moment.default)(valueFromProps, usFormatter).format() !== (0, _moment.default)(value, usFormatter).format()) {
-      setValueState((0, _moment.default)(value, usFormatter));
+    if (value && (0, _moment.default)(value, _helpers.EN_US_FORMAT).format() !== 'Invalid date' && (0, _moment.default)(valueFromProps, _helpers.EN_US_FORMAT).format() !== (0, _moment.default)(value, _helpers.EN_US_FORMAT).format()) {
+      setValueState((0, _moment.default)(value, _helpers.EN_US_FORMAT));
       setValueFromProps(value);
     } else if (!value && value !== valueFromProps) {
       setValueState(undefined);
@@ -258,14 +253,11 @@ const DatePicker = props => {
     className: "datepicker-container"
   }, /*#__PURE__*/_react.default.createElement(_BaseMask.default, _extends({}, props, {
     gridLayout: undefined,
-    isDateTimeField: isDateTimeField,
-    value: !valueState ? ' ' : valueState.format(brFormatter),
-    mask: maskFormat,
-    pattern: patternFormat,
-    blocks: !isDateTimeField ? {} : _helpers.blocksDateTimeFormat,
-    onComplete: e => {
-      if (e) {
-        setValue(e.target?.maskedValue, e);
+    value: !valueState ? ' ' : valueState.format(_helpers.PT_BR_FORMAT),
+    mask: "00/00/0000",
+    onComplete: (e, date) => {
+      if (date) {
+        setValue(date, e);
       }
     },
     onBlur: onInputBlur,

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

@@ -43,7 +43,6 @@ interface IDatePickerProps {
     hintPosition?: 'below' | 'onLabelRight';
     themePopover?: 'light' | 'dark';
     popoverAlign?: 'right' | 'left';
-    isDateTimeField?: boolean;
 }
 interface IDateDropdownProps {
     children: ReactNode | ReactNode[];

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

@@ -7,6 +7,6 @@ import '../../@types/Period.js';
 import '../../internals/types.js';
 import '../../@types/Position.js';
 
-declare const BaseMask: ({ value: valueProp, defaultValue, inputRef, onChange, onComplete, permissionAttr, mask, isDateTimeField, ...rest }: IBaseMaskProps) => JSX.Element;
+declare const BaseMask: ({ value: valueProp, defaultValue, inputRef, onChange, onComplete, permissionAttr, mask, ...rest }: IBaseMaskProps) => JSX.Element;
 
 export { BaseMask as default };

package/lib/inputs/mask/BaseMask.js

@@ -10,7 +10,7 @@ var _format_number = require("../number/format_number");
 var _reactImask = require("react-imask");
 var _permissionValidations = require("../../permissionValidations");
 var _helpers = require("./helpers");
-const _excluded = ["value", "defaultValue", "inputRef", "onChange", "onComplete", "permissionAttr", "mask", "isDateTimeField"];
+const _excluded = ["value", "defaultValue", "inputRef", "onChange", "onComplete", "permissionAttr", "mask"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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; }
@@ -102,8 +102,7 @@ const BaseMask = _ref => {
       onChange,
       onComplete,
       permissionAttr,
-      mask,
-      isDateTimeField
+      mask
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded);
   const onDenied = (0, _permissionValidations.actionsOnPermissionDenied)(options, permissionAttr);
@@ -113,15 +112,14 @@ const BaseMask = _ref => {
   } = onDenied;
   const disableCallbacks = disabled || readOnly;
   const maskOptions = (0, _helpers.getMaskOptions)(_objectSpread({
-    mask,
-    isDateTimeField
+    mask
   }, rest));
   const {
     ref,
     setValue,
     setTypedValue,
     maskRef
-  } = (0, _reactImask.useIMask)(_objectSpread({}, maskOptions), {
+  } = (0, _reactImask.useIMask)(maskOptions, {
     defaultValue: defaultValue,
     onAccept: (_, r) => {
       if (!disableCallbacks && onChange) {

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

@@ -1,14 +1,61 @@
+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 { ReactMaskOpts } from 'react-imask';
-import 'react';
-import '../../@types/Align.js';
-import '../../@types/PermissionAttr.js';
-import '../base/types.js';
 import '../../@types/Period.js';
 import '../../internals/types.js';
 import '../../@types/Position.js';
 
-declare const getMaskOptions: ({ isDateField, placeholderChar, min, max, lazy, pattern, radix, thousandsSeparator, mapToRadix, scale, normalizeZeros, padFractionalZeros, rightElements, leftElements, isDateTimeField, ...rest }: IBaseMaskProps) => ReactMaskOpts;
+declare const getMaskOptions: ({ isDateField, placeholderChar, min, max, lazy, pattern, radix, thousandsSeparator, mapToRadix, scale, normalizeZeros, padFractionalZeros, rightElements, leftElements, ...rest }: IBaseMaskProps) => {
+    value?: string | number | undefined;
+    onBlur?: ((e: CustomInputEvent) => void) | undefined;
+    onKeyDown?: ((e: CustomInputEvent | React.KeyboardEvent<Element>) => void) | undefined;
+    defaultValue?: string | undefined;
+    isNumeric?: boolean | undefined;
+    blocks?: any;
+    handlerSetOnDenied?: ((onDeniedValue: OnDenied) => void) | undefined;
+    onChange?: ((e: CustomInputEvent, maskValue?: string | undefined, date?: string | undefined) => void) | 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;
+    hint?: string | string[] | undefined;
+    hintPosition?: "below" | "onLabelRight" | undefined;
+    themePopover?: "light" | "dark" | undefined;
+    popoverAlign?: "left" | "right" | undefined;
+    placeholderChar: string;
+    min: any;
+    max: any;
+    lazy: boolean;
+    pattern: string;
+    radix: string;
+    thousandsSeparator: string;
+    mapToRadix: string[];
+    scale: number;
+    normalizeZeros: boolean;
+    padFractionalZeros: boolean;
+};
 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";
 

package/lib/inputs/mask/helpers.js

@@ -7,11 +7,8 @@ exports.CNPJValidation = CNPJValidation;
 exports.CPFValidation = CPFValidation;
 exports.getMaskOptions = void 0;
 var _lodash = require("lodash");
-var _moment = _interopRequireDefault(require("moment"));
-const _excluded = ["isDateField", "placeholderChar", "min", "max", "lazy", "pattern", "radix", "thousandsSeparator", "mapToRadix", "scale", "normalizeZeros", "padFractionalZeros", "rightElements", "leftElements", "isDateTimeField"];
+const _excluded = ["isDateField", "placeholderChar", "min", "max", "lazy", "pattern", "radix", "thousandsSeparator", "mapToRadix", "scale", "normalizeZeros", "padFractionalZeros", "rightElements", "leftElements"];
 /* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @typescript-eslint/no-unused-vars */
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -35,11 +32,42 @@ const getMaskOptions = _ref => {
       normalizeZeros = true,
       padFractionalZeros = true,
       rightElements,
-      leftElements,
-      isDateTimeField
+      leftElements
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded);
-  const options = _objectSpread({
+  // 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,
@@ -52,15 +80,6 @@ const getMaskOptions = _ref => {
     normalizeZeros,
     padFractionalZeros
   }, rest);
-  if (isDateTimeField) {
-    options.format = date => {
-      return (0, _moment.default)(date).format(momentFormat);
-    };
-    options.parse = str => {
-      return (0, _moment.default)(str, momentFormat);
-    };
-  }
-  return options;
 };
 exports.getMaskOptions = getMaskOptions;
 const allEqualDigits = input => input.split('').every(char => char === input[0]);

package/lib/inputs/mask/imaskHOC.js

@@ -0,0 +1,205 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _imask = _interopRequireDefault(require("imask"));
+var helpers = _interopRequireWildcard(require("./helpers"));
+var _permissionValidations = require("../../permissionValidations");
+var _format_number = require("../number/format_number");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const options = [_permissionValidations.OPTIONS_ON_DENIED.disabled, _permissionValidations.OPTIONS_ON_DENIED.unvisible, _permissionValidations.OPTIONS_ON_DENIED.readOnly, _permissionValidations.OPTIONS_ON_DENIED.hideContent];
+const IMaskHOC = ComposedComponent => {
+  const MaskedComponent = props => {
+    const {
+      permissionAttr,
+      skeletonize,
+      inputRef,
+      placeholderChar = '_',
+      lazy = false,
+      pattern = '',
+      radix = ' ',
+      thousandsSeparator = '',
+      mapToRadix = [],
+      scale = 2,
+      signed = false,
+      normalizeZeros = true,
+      padFractionalZeros = true,
+      mask,
+      commit = () => {},
+      parse,
+      format,
+      definitions,
+      groups,
+      min,
+      max,
+      dispatch,
+      value = '',
+      onChange,
+      isDateField = false,
+      autoCompleteMask
+    } = props;
+    const maskOptions = {
+      placeholderChar: placeholderChar === '' ? ' ' : placeholderChar,
+      lazy,
+      pattern,
+      radix,
+      thousandsSeparator,
+      mapToRadix,
+      scale,
+      signed,
+      normalizeZeros,
+      padFractionalZeros,
+      mask,
+      commit,
+      parse,
+      format,
+      definitions,
+      groups,
+      min,
+      max,
+      dispatch
+    };
+    const [onDenied] = (0, _react.useState)((0, _permissionValidations.actionsOnPermissionDenied)(options, permissionAttr));
+    const elementRef = (0, _react.useRef)(null);
+    const maskRef = (0, _react.useRef)(null);
+    const {
+      hideContent,
+      unvisible,
+      disabled,
+      readOnly
+    } = onDenied;
+    const dontInitMask = hideContent || unvisible || skeletonize;
+    const disableCallbacks = disabled || readOnly;
+    const setValue = newValue => {
+      if (maskRef.current) {
+        if (props.unmask) maskRef.current.unmaskedValue = newValue.toString();
+        maskRef.current.value = String(newValue);
+      }
+    };
+    const onAccept = (0, _react.useCallback)(() => {
+      if (onChange && !disableCallbacks && maskRef.current) {
+        const {
+          unmaskedValue,
+          value: maskedValue,
+          el
+        } = maskRef.current;
+        const name = el.name || el.input && el.input.name;
+        onChange({
+          target: {
+            value: isDateField ? maskedValue : unmaskedValue,
+            name
+          }
+        }, props.unmask ? unmaskedValue : maskRef.current.value);
+      }
+    }, [onChange]);
+    const onComplete = (0, _react.useCallback)(() => {
+      if (props.onComplete && !disableCallbacks && maskRef.current) {
+        const {
+          unmaskedValue,
+          value: maskedValue,
+          el
+        } = maskRef.current;
+        const name = el.name || el.input && el.input.name;
+        props.onComplete({
+          target: {
+            value: isDateField ? maskedValue : unmaskedValue,
+            name
+          }
+        }, props.unmask ? unmaskedValue : maskRef.current.value);
+      }
+    }, [props.onComplete]);
+    const autoCompleteMaskValue = (0, _react.useCallback)(eventTargetValue => {
+      if (autoCompleteMask && eventTargetValue.length && maskRef.current && elementRef.current) {
+        const sizeMask = maskRef.current.mask.toString().replace(/\D+/g, '').length;
+        if (sizeMask > eventTargetValue.length) {
+          switch (autoCompleteMask) {
+            case 'left':
+              setValue(eventTargetValue.padStart(sizeMask, '0'));
+              break;
+            case 'right':
+              setValue(eventTargetValue.padEnd(sizeMask, '0'));
+              break;
+            default:
+              setValue(eventTargetValue);
+              break;
+          }
+        }
+      }
+    }, [autoCompleteMask, maskRef.current, elementRef.current]);
+    const getMask = () => {
+      const element = elementRef.current;
+      if (element) {
+        const maskCurrent = maskRef.current;
+        if (!maskCurrent) {
+          maskRef.current = (0, _imask.default)(element, maskOptions);
+          if (value && typeof value !== 'number' && value.trim() !== '' || value && typeof value === 'number') onAccept();
+          setValue(value);
+        } else {
+          maskCurrent.updateOptions(maskOptions);
+        }
+      }
+    };
+    const destroyMask = () => {
+      if (maskRef.current) {
+        maskRef.current.destroy();
+        maskRef.current = null;
+      }
+    };
+    (0, _react.useEffect)(() => {
+      if (props.handlerSetOnDenied) props.handlerSetOnDenied(onDenied);
+      if (!props.mask || dontInitMask) return;
+      getMask();
+    }, [maskOptions]);
+    (0, _react.useEffect)(() => {
+      if (!maskRef.current) return;
+      const maskCurrent = maskRef.current;
+      maskCurrent.on('accept', onAccept);
+      maskCurrent.on('complete', onComplete);
+
+      // eslint-disable-next-line consistent-return
+      return () => {
+        maskCurrent.off('accept', onAccept);
+        maskCurrent.off('complete', onComplete);
+      };
+    }, [onAccept, onComplete]);
+    (0, _react.useEffect)(() => {
+      if (maskOptions.mask && !dontInitMask) {
+        if (maskRef.current) {
+          const formattedValue = isDateField ? value : (0, _format_number.numberToPtBR)(value) || '';
+          setValue(formattedValue);
+        } else {
+          getMask();
+        }
+      } else if (!dontInitMask) {
+        destroyMask();
+        if (value && elementRef.current) elementRef.current.value = value;
+      }
+    }, [value, isDateField]);
+    (0, _react.useEffect)(() => destroyMask, []);
+    return /*#__PURE__*/_react.default.createElement(ComposedComponent, _extends({}, helpers.extractNonMaskProps(props, maskOptions), {
+      onDeniedActions: onDenied,
+      defaultValue: value,
+      onBlur: e => {
+        autoCompleteMaskValue(e.target.value);
+        if (props.onBlur) props.onBlur(e);
+      },
+      onChange: e => setValue(e.target.value),
+      inputRef: el => {
+        elementRef.current = el;
+        if (inputRef) {
+          if (typeof inputRef === 'object') inputRef.current = el;else inputRef(el);
+        }
+      }
+    }));
+  };
+  const nestedComponentName = ComposedComponent.displayName || ComposedComponent.name || 'Component';
+  MaskedComponent.displayName = `IMask(${nestedComponentName})`;
+  return MaskedComponent;
+};
+var _default = exports.default = IMaskHOC;

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

@@ -57,7 +57,6 @@ type IBaseMaskProps = {
     pattern?: string;
     mapToRadix?: string[];
     normalizeZeros?: boolean;
-    isDateTimeField?: boolean;
 };
 type ICnpjFieldProps = IBaseMaskProps & {
     value?: string;

package/lib/inputs/select/Dropdown.js

@@ -87,7 +87,7 @@ const Dropdown = props => {
     }, /*#__PURE__*/_react.default.createElement("button", {
       className: "menubutton",
       tabIndex: -1,
-      onClick: () => {
+      onClick: event => {
         if (!disabled) {
           handleOnSelect(item);
         }

package/lib/inputs/select/multiple/index.js

@@ -129,9 +129,6 @@ const MultipleSelect = props => {
   };
   const onBlur = e => {
     if (props.onBlur) props.onBlur(e);
-    if (selected && opened) {
-      onSelect(selected);
-    }
     if (!insideComponent) {
       setOpened(false);
       setDataCombo(dataSource);
@@ -139,9 +136,10 @@ const MultipleSelect = props => {
   };
   const onInputKeyDown = e => {
     if (e.keyCode) {
-      if ((e.keyCode === constants.keyCodes.ENTER || e.key === constants.keys.TAB) && selected && opened) {
-        if (e.keyCode === constants.keyCodes.ENTER) e.preventDefault?.();
+      if (e.keyCode === constants.keyCodes.ENTER && selected && opened) {
+        e.preventDefault?.();
         if (!currents.some(current => current[idKey] === selected[idKey])) {
+          e.preventDefault?.();
           onSelect(selected);
         }
       } else if ([constants.keyCodes.ARROW_UP, constants.keyCodes.ARROW_DOWN].includes(e.keyCode)) {

package/lib/inputs/select/simple/index.js

@@ -141,9 +141,6 @@ const SimpleSelect = props => {
     if (props.onBlur) {
       const event = getSelectEvent(selected);
       props.onBlur(event);
-      if (selected && opened) {
-        onSelect(selected);
-      }
       if (selected && descriptionKeyIsString && inputText !== selected[descriptionKey] || !descriptionKeyIsString && inputText !== descriptionKey(selected)) {
         setSelected(null);
         setInputText(inputText);
@@ -162,8 +159,8 @@ const SimpleSelect = props => {
   };
   const onInputKeyDown = e => {
     if (e.keyCode) {
-      if ((e.keyCode === constants.keyCodes.ENTER || e.key === constants.keys.TAB) && selected && opened) {
-        if (e.keyCode === constants.keyCodes.ENTER) e.preventDefault?.();
+      if (e.keyCode === constants.keyCodes.ENTER && selected && opened) {
+        e.preventDefault?.();
         onSelect(selected);
       } else if ([constants.keyCodes.ARROW_UP, constants.keyCodes.ARROW_DOWN].includes(e.keyCode)) {
         if (!opened) setOpened(true);

package/lib/internals/constants.d.ts

@@ -6,9 +6,6 @@ declare const keyCodes: {
     BACKSPACE: number;
     F: number;
 };
-declare const keys: {
-    TAB: string;
-};
 declare const PARA_ENGANAR_O_ESLINT_JA_QUE_TENHO_SO_UMA_CONSTANTE = 1;
 
-export { PARA_ENGANAR_O_ESLINT_JA_QUE_TENHO_SO_UMA_CONSTANTE, keyCodes, keys };
+export { PARA_ENGANAR_O_ESLINT_JA_QUE_TENHO_SO_UMA_CONSTANTE, keyCodes };

package/lib/internals/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.keys = exports.keyCodes = exports.PARA_ENGANAR_O_ESLINT_JA_QUE_TENHO_SO_UMA_CONSTANTE = void 0;
+exports.keyCodes = exports.PARA_ENGANAR_O_ESLINT_JA_QUE_TENHO_SO_UMA_CONSTANTE = void 0;
 const keyCodes = exports.keyCodes = {
   TAB: 9,
   ENTER: 13,
@@ -12,7 +12,4 @@ const keyCodes = exports.keyCodes = {
   BACKSPACE: 8,
   F: 70
 };
-const keys = exports.keys = {
-  TAB: 'Tab'
-};
 const PARA_ENGANAR_O_ESLINT_JA_QUE_TENHO_SO_UMA_CONSTANTE = exports.PARA_ENGANAR_O_ESLINT_JA_QUE_TENHO_SO_UMA_CONSTANTE = 1;

package/lib/labels/DangerLabel.d.ts

@@ -6,6 +6,6 @@ import '../@types/Size.js';
 import '../@types/Icon.js';
 import '../icons/helper.js';
 
-declare const DangerLabel: ({ ...rest }: ILabelProps) => JSX.Element;
+declare const DangerLabel: ({ className, ...rest }: ILabelProps) => JSX.Element;
 
 export { DangerLabel as default };

package/lib/labels/DangerLabel.js

@@ -6,11 +6,16 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _DefaultLabel = _interopRequireDefault(require("./DefaultLabel"));
+const _excluded = ["className"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-function _objectDestructuringEmpty(t) { if (null == t) throw new TypeError("Cannot destructure " + t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
 const DangerLabel = _ref => {
-  let rest = Object.assign({}, (_objectDestructuringEmpty(_ref), _ref));
+  let {
+      className
+    } = _ref,
+    rest = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement(_DefaultLabel.default, _extends({
     className: "-danger"
   }, rest));

package/lib/labels/InfoLabel.d.ts

@@ -6,6 +6,6 @@ import '../@types/Size.js';
 import '../@types/Icon.js';
 import '../icons/helper.js';
 
-declare const InfoLabel: ({ ...rest }: ILabelProps) => JSX.Element;
+declare const InfoLabel: ({ className, ...rest }: ILabelProps) => JSX.Element;
 
 export { InfoLabel as default };