linear-react-components-ui 1.1.21-beta.3 → 1.1.21-beta.5

package/lib/inputs/date/index.js

@@ -6,21 +6,18 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _moment = _interopRequireDefault(require("moment"));
-var _BaseMask = _interopRequireDefault(require("../mask/BaseMask"));
-var _Dropdown = _interopRequireDefault(require("./Dropdown"));
-var _calendar = _interopRequireDefault(require("../../calendar"));
-require("../../assets/styles/datepicker.scss");
-var contants = _interopRequireWildcard(require("../../internals/constants"));
+var _gridlayout = _interopRequireDefault(require("../../gridlayout"));
 var _buttons = _interopRequireDefault(require("../../buttons"));
-var _icons = _interopRequireDefault(require("../../icons"));
+var _calendar = _interopRequireDefault(require("../../calendar"));
 var _Dialog = _interopRequireDefault(require("./Dialog"));
+var _Dropdown = _interopRequireDefault(require("./Dropdown"));
 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; }
 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 CALENDAR_BUTTON_WIDTH = 24;
-const CALENDAR_MIN_WIDTH = 250;
 const DatePicker = props => {
   const {
     showButtonOpen = true,
@@ -33,75 +30,110 @@ const DatePicker = props => {
     name = '',
     inputRef: inputRefProp,
     dialogSize = {
-      width: '350px',
-      height: '350px'
-    }
+      width: '384px',
+      height: '384px'
+    },
+    gridLayout,
+    shouldCloseOnEsc = true,
+    isDateTimeField = false
   } = 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 [valueFromProps, setValueFromProps] = (0, _react.useState)(value);
   const [showCalendar, setShowCalendar] = (0, _react.useState)(false);
+  const [valueFromProps, setValueFromProps] = (0, _react.useState)((0, _moment.default)(value, patternFormat).format());
   const [inputDimensions, setInputDimensions] = (0, _react.useState)();
-  const [formatedLeftPosition, setFormatedLeftPosition] = (0, _react.useState)();
+  const [calendarOnDialog, setCalendarOnDialog] = (0, _react.useState)(false);
   const [onDenied, setOnDenied] = (0, _react.useState)({
     disabled: false,
     readOnly: false,
     unvisible: false,
     hideContent: false
   });
-  const inputRef = (0, _react.useRef)();
+  const inputDateRef = (0, _react.useRef)();
   const buttonOpenRef = (0, _react.useRef)();
   const dropdownContainer = (0, _react.useRef)();
-  const [insideDropdown, setInsideDropdown] = (0, _react.useState)(false);
+  const currentDateButtonRef = (0, _react.useRef)();
+  const calendarContainerRef = (0, _react.useRef)(null);
+  const datePickerContainerRef = (0, _react.useRef)(null);
   const onScreenResize = () => {
-    setInputDimensions(inputRef?.current?.getBoundingClientRect());
+    setInputDimensions(inputDateRef?.current?.getBoundingClientRect());
+  };
+  const onCloseDateDialog = () => {
+    setShowCalendar(false);
+    if (showCalendarInDialog) {
+      setTimeout(() => {
+        setCalendarOnDialog(false);
+        inputDateRef.current?.focus();
+      }, 100);
+    }
   };
-  const onClickOutside = event => {
-    const {
-      target
-    } = event;
-    if (!dropdownContainer || target === inputRef.current || target === buttonOpenRef.current) return;
-    if (target !== dropdownContainer.current && dropdownContainer && dropdownContainer.current && !dropdownContainer.current.contains(target) && buttonOpenRef && !buttonOpenRef?.current?.contains(target)) {
+  const onCloseWithoutBlur = event => {
+    const focusOnAnotherField = !datePickerContainerRef.current?.contains(event.relatedTarget);
+    if (!showCalendarInDialog && showCalendar && focusOnAnotherField) {
       setShowCalendar(false);
     }
   };
+  const onKeyDownPress = event => {
+    if (shouldCloseOnEsc && showCalendar && event && event.key && event.key === 'Escape') {
+      event.preventDefault();
+      setShowCalendar(false);
+      inputDateRef.current?.focus();
+    }
+    if (showCalendar && showCalendarInDialog && event && event.key && event.key === 'Tab') {
+      const buttonForNavigateCalendar = calendarContainerRef.current?.getElementsByClassName('navbutton');
+      const datePicked = calendarContainerRef.current?.getElementsByClassName('-selectedday');
+      const buttonDatePicked = datePicked[0].firstChild;
+      const buttonsForFocus = Array.from([...buttonForNavigateCalendar, buttonDatePicked]);
+      const firstElement = buttonsForFocus[0];
+      const lastElement = buttonsForFocus[buttonsForFocus.length - 1];
+      if (event.shiftKey && document.activeElement === firstElement) {
+        event.preventDefault();
+        lastElement.focus();
+      } else if (!event.shiftKey && document.activeElement === lastElement) {
+        event.preventDefault();
+        firstElement.focus();
+      }
+    }
+    event.stopPropagation();
+  };
+  const keepPositionCalendarByScroll = () => {
+    const inputDateDimensions = inputDateRef.current?.getBoundingClientRect();
+    const positionTop = inputDateDimensions && inputDateDimensions.bottom;
+    if (dropdownContainer && dropdownContainer.current && inputDateDimensions) {
+      dropdownContainer.current.style.top = String(positionTop).concat('px');
+    }
+  };
   const openCalendar = () => {
     setShowCalendar(true);
-    if (inputRef.current) {
-      setInputDimensions(inputRef.current.getBoundingClientRect());
+    if (inputDateRef.current) {
+      inputDateRef.current.focus();
+      setInputDimensions(inputDateRef.current?.getBoundingClientRect());
     }
-  };
-  const onMouseMove = event => {
-    const {
-      target
-    } = event;
-    setInsideDropdown(false);
-    if (dropdownContainer !== undefined && dropdownContainer.current) {
-      if (target === dropdownContainer.current || dropdownContainer.current.contains(target)) {
-        setInsideDropdown(true);
-      }
+    if (showCalendarInDialog) {
+      setTimeout(() => {
+        currentDateButtonRef.current?.focus();
+      }, 100);
     }
   };
   const onInputFocus = e => {
     if (props.onFocus) props.onFocus(e);
-    if (openOnFocus) openCalendar();
+    if (openOnFocus && !showCalendar && !calendarOnDialog) {
+      openCalendar();
+    }
   };
   const onInputBlur = e => {
     if (props.onBlur) props.onBlur(e);
-    if (!insideDropdown) setShowCalendar(false);
-  };
-  const onInputKeyDown = event => {
-    if (Number(event.code) === contants.keyCodes.TAB) {
-      setInsideDropdown(false);
-      setShowCalendar(false);
-    }
   };
   const isValidDate = date => {
     if (typeof date === 'object' && !(date instanceof Date)) {
-      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();
+      const initialValid = (0, _moment.default)(date.initial, brFormatter, true).isValid();
+      const finalValid = (0, _moment.default)(date.final, brFormatter, true).isValid();
       return initialValid && finalValid;
     }
-    return (0, _moment.default)(date, _helpers.PT_BR_FORMAT, true).isValid();
+    return (0, _moment.default)(date, brFormatter, true).isValid();
   };
   const onInputChange = function (event) {
     let valueInput = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
@@ -109,7 +141,7 @@ const DatePicker = props => {
       const date = event.target.value ?? '';
       if (props.onChange) {
         if (isValidDate(date)) {
-          const newValue = (0, _moment.default)(date, _helpers.PT_BR_FORMAT).format(_helpers.EN_US_FORMAT);
+          const newValue = (0, _moment.default)(date, brFormatter).format(usFormatter);
           const obj = {
             target: {
               value: newValue,
@@ -131,101 +163,106 @@ const DatePicker = props => {
       }
     }
   };
-  const setValue = function () {
-    let valueParam = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-    let e = arguments.length > 1 ? arguments[1] : undefined;
-    if (showCalendar && setFocusOnSelect) inputRef.current?.focus();
+  const setValue = (valueParam, e) => {
+    if (showCalendar && setFocusOnSelect) inputDateRef.current?.focus();
     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, _helpers.PT_BR_FORMAT));
+    setValueState((0, _moment.default)(valueParam, brFormatter));
   };
   const shouldDisable = () => props.disabled || onDenied && (onDenied.disabled || onDenied.hideContent);
   const getButtonOpen = () => {
     if (!showButtonOpen) return undefined;
     return /*#__PURE__*/_react.default.createElement(_buttons.default, {
-      key: "button-1313414141",
-      boxShadow: false,
-      icon: /*#__PURE__*/_react.default.createElement(_icons.default, {
-        name: "calendar",
-        size: 16
-      }),
+      key: "button-open-date-picker",
+      disabled: shouldDisable(),
+      tabIndex: -1,
+      customClass: "calendar-button",
+      iconName: "calendar",
+      title: showCalendar ? 'Fechar Calendário' : 'Abrir Calendário',
       onClick: () => {
-        openCalendar();
+        if (showCalendar) {
+          setShowCalendar(false);
+        } else openCalendar();
       },
-      customClass: "calendar-button",
-      tabIndex: -1,
       targetRef: ref => {
         buttonOpenRef.current = ref;
-      },
-      disabled: shouldDisable()
+      }
     });
   };
   const getCalendar = (valueCalendar, calendarColorStyle) => /*#__PURE__*/_react.default.createElement(_calendar.default, {
+    colorStyle: calendarColorStyle,
     currentDate: valueCalendar !== undefined ? valueCalendar : (0, _moment.default)(),
     onDateChange: date => {
-      setValue(date.format(_helpers.PT_BR_FORMAT), undefined);
+      setValue(date.format(brFormatter), undefined);
+      if (showCalendarInDialog) setCalendarOnDialog(false);
     },
-    colorStyle: calendarColorStyle
+    currentDateButton: buttonElement => currentDateButtonRef.current = buttonElement,
+    calendarContainer: calendarContainer => {
+      calendarContainerRef.current = calendarContainer;
+    }
   });
-  const getWrapperComponent = () => {
+  const getCalendarComponent = () => {
     if (onDenied && onDenied.readOnly) return null;
     if (showCalendarInDialog) {
       return /*#__PURE__*/_react.default.createElement(_Dialog.default, {
         dialogSize: dialogSize,
-        handlerClose: setShowCalendar
+        handlerClose: onCloseDateDialog
       }, getCalendar(valueState, props?.calendarColorStyle));
     }
     return /*#__PURE__*/_react.default.createElement(_Dropdown.default, {
-      topPosition: inputDimensions ? inputDimensions.top + inputDimensions.height + 5 : '',
-      leftPosition: inputDimensions ? formatedLeftPosition : '',
-      minWidth: CALENDAR_MIN_WIDTH,
-      width: inputDimensions ? inputDimensions.width + (showButtonOpen ? CALENDAR_BUTTON_WIDTH : 0) : '',
+      showButtonOpen: showButtonOpen,
+      inputDimensions: inputDimensions,
+      containerRef: datePickerContainerRef,
       dropdownRef: el => {
         dropdownContainer.current = el;
       }
     }, getCalendar(valueState, props?.calendarColorStyle));
   };
   (0, _react.useEffect)(() => {
-    const screenWidth = window.innerWidth;
-    if (inputDimensions && screenWidth < inputDimensions.left + CALENDAR_MIN_WIDTH) {
-      setFormatedLeftPosition(inputDimensions.left - (CALENDAR_MIN_WIDTH - inputDimensions.width - CALENDAR_BUTTON_WIDTH));
-    } else {
-      setFormatedLeftPosition(inputDimensions?.left);
+    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));
+      setValueFromProps(value);
+    } else if (!value && value !== valueFromProps) {
+      setValueState(undefined);
+      setValueFromProps(value);
     }
-  }, [window?.innerWidth, inputDimensions]);
+  }, [value]);
   (0, _react.useEffect)(() => {
     window.addEventListener('resize', onScreenResize);
-    document.addEventListener('click', onClickOutside);
-    document.addEventListener('mousemove', onMouseMove);
-    if (inputRef.current) onScreenResize();
+    document.addEventListener('keydown', onKeyDownPress);
+    if (inputDateRef.current) onScreenResize();
+    if (showCalendar && showCalendarInDialog) setCalendarOnDialog(true);
     return () => {
       window.removeEventListener('resize', onScreenResize);
-      document.removeEventListener('click', onClickOutside);
-      document.removeEventListener('mousemove', onMouseMove);
+      document.removeEventListener('keydown', onKeyDownPress);
     };
-
-    // TODO: Procurar solução melhor.
-    // setTimeout(() => { this.onScreenResize(); }, 300);
-  }, [inputRef.current]);
+  }, [inputDateRef.current, showCalendar]);
   (0, _react.useEffect)(() => {
-    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);
-      setValueFromProps(value);
-    }
-  }, [value]);
+    document.addEventListener('scroll', keepPositionCalendarByScroll);
+    document.getElementById('modal-dialog-content')?.addEventListener('scroll', keepPositionCalendarByScroll);
+    return () => {
+      document.removeEventListener('scroll', keepPositionCalendarByScroll);
+      document.getElementById('modal-dialog-content')?.removeEventListener('scroll', keepPositionCalendarByScroll);
+    };
+  }, []);
   if (onDenied && onDenied.unvisible) return null;
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_BaseMask.default, _extends({}, props, {
-    value: !valueState ? ' ' : valueState.format(_helpers.PT_BR_FORMAT),
-    mask: "00/00/0000",
+  const component = () => /*#__PURE__*/_react.default.createElement("div", {
+    ref: datePickerContainerRef,
+    onBlur: onCloseWithoutBlur,
+    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);
@@ -235,17 +272,20 @@ const DatePicker = props => {
     onFocus: e => {
       onInputFocus(e);
     },
-    onKeyDown: onInputKeyDown,
-    onChange: (e, __, date) => {
-      if (date) onInputChange(e, e.target.value);
+    onChange: (e, date) => {
+      if (date) onInputChange(e, date);
     },
     inputRef: el => {
-      inputRef.current = el;
+      inputDateRef.current = el;
       if (inputRefProp) inputRefProp.current = el;
     },
     rightElements: getButtonOpen(),
     required: required,
     handlerSetOnDenied: () => setOnDenied(onDenied)
-  })), showCalendar && getWrapperComponent());
+  })), showCalendar && getCalendarComponent());
+  return !gridLayout ? component() : /*#__PURE__*/_react.default.createElement(_gridlayout.default, {
+    customClass: "-withinput",
+    cols: gridLayout
+  }, component());
 };
 var _default = exports.default = DatePicker;

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

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { ReactNode, RefObject } from 'react';
 import { ColorStyles } from '../../@types/ColorStyles.js';
 import { PermissionAttr } from '../../@types/PermissionAttr.js';
 import { CustomInputEvent } from '../base/types.js';
@@ -9,10 +9,11 @@ import '../../@types/Position.js';
 
 interface IDatePickerProps {
     value?: string;
+    openOnFocus?: boolean;
     showButtonOpen?: boolean;
+    shouldCloseOnEsc?: boolean;
     shouldCloseOnSelect?: boolean;
     setFocusOnSelect?: boolean;
-    openOnFocus?: boolean;
     showCalendarInDialog?: boolean;
     inputRef?: React.MutableRefObject<HTMLInputElement | HTMLTextAreaElement | null>;
     dialogSize?: {
@@ -37,18 +38,19 @@ interface IDatePickerProps {
     disabled?: boolean;
     permissionAttr?: PermissionAttr;
     label?: string;
+    gridLayout?: string;
     hint?: string | string[];
     hintPosition?: 'below' | 'onLabelRight';
     themePopover?: 'light' | 'dark';
     popoverAlign?: 'right' | 'left';
+    isDateTimeField?: boolean;
 }
 interface IDateDropdownProps {
     children: ReactNode | ReactNode[];
     dropdownRef: (el: HTMLDivElement) => void;
-    topPosition: number | string;
-    leftPosition?: number | string;
-    width: number | string;
-    minWidth: number | string;
+    containerRef: RefObject<HTMLDivElement | HTMLElement>;
+    showButtonOpen: boolean;
+    inputDimensions?: DOMRect;
 }
 interface IDateDialogProps {
     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, ...rest }: IBaseMaskProps) => JSX.Element;
+declare const BaseMask: ({ value: valueProp, defaultValue, inputRef, onChange, onComplete, permissionAttr, mask, isDateTimeField, ...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"];
+const _excluded = ["value", "defaultValue", "inputRef", "onChange", "onComplete", "permissionAttr", "mask", "isDateTimeField"];
 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,7 +102,8 @@ const BaseMask = _ref => {
       onChange,
       onComplete,
       permissionAttr,
-      mask
+      mask,
+      isDateTimeField
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded);
   const onDenied = (0, _permissionValidations.actionsOnPermissionDenied)(options, permissionAttr);
@@ -112,14 +113,15 @@ const BaseMask = _ref => {
   } = onDenied;
   const disableCallbacks = disabled || readOnly;
   const maskOptions = (0, _helpers.getMaskOptions)(_objectSpread({
-    mask
+    mask,
+    isDateTimeField
   }, rest));
   const {
     ref,
     setValue,
     setTypedValue,
     maskRef
-  } = (0, _reactImask.useIMask)(maskOptions, {
+  } = (0, _reactImask.useIMask)(_objectSpread({}, maskOptions), {
     defaultValue: defaultValue,
     onAccept: (_, r) => {
       if (!disableCallbacks && onChange) {

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

@@ -1,61 +1,14 @@
-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, ...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 const getMaskOptions: ({ isDateField, placeholderChar, min, max, lazy, pattern, radix, thousandsSeparator, mapToRadix, scale, normalizeZeros, padFractionalZeros, rightElements, leftElements, isDateTimeField, ...rest }: IBaseMaskProps) => ReactMaskOpts;
 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,8 +7,10 @@ exports.CNPJValidation = CNPJValidation;
 exports.CPFValidation = CPFValidation;
 exports.getMaskOptions = void 0;
 var _lodash = require("lodash");
-const _excluded = ["isDateField", "placeholderChar", "min", "max", "lazy", "pattern", "radix", "thousandsSeparator", "mapToRadix", "scale", "normalizeZeros", "padFractionalZeros", "rightElements", "leftElements"];
+var _moment = _interopRequireDefault(require("moment"));
+const _excluded = ["isDateField", "placeholderChar", "min", "max", "lazy", "pattern", "radix", "thousandsSeparator", "mapToRadix", "scale", "normalizeZeros", "padFractionalZeros", "rightElements", "leftElements", "isDateTimeField"];
 /* eslint-disable @typescript-eslint/no-explicit-any */
+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; }
@@ -32,42 +34,11 @@ const getMaskOptions = _ref => {
       normalizeZeros = true,
       padFractionalZeros = true,
       rightElements,
-      leftElements
+      leftElements,
+      isDateTimeField
     } = _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({
+  const options = _objectSpread({
     placeholderChar: placeholderChar === '' ? ' ' : placeholderChar,
     min,
     max,
@@ -80,6 +51,15 @@ 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/types.d.ts

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

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

@@ -12,6 +12,6 @@ import '../../drawer/types.js';
 import '../../@types/Icon.js';
 import '../../icons/helper.js';
 
-declare const BaseNumber: (props: IBaseNumberProps) => JSX.Element;
+declare const BaseNumber: ({ value, ...props }: IBaseNumberProps) => JSX.Element;
 
 export { BaseNumber as default };

package/lib/inputs/number/BaseNumber.js

@@ -7,8 +7,11 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _BaseMask = _interopRequireDefault(require("../mask/BaseMask"));
 var _format_number = require("./format_number");
+const _excluded = ["value"];
 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 _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; }
 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; }
@@ -54,13 +57,17 @@ const getEventProps = props => {
     }
   };
 };
-const BaseNumber = props => {
+const BaseNumber = _ref => {
+  let {
+      value
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
   const eventProps = _objectSpread(_objectSpread({}, props), {}, {
     returnFormattedValueOnBlur: true,
     returnFormattedValueOnKeyDown: true
   });
   return /*#__PURE__*/_react.default.createElement(_BaseMask.default, _extends({
-    value: (0, _format_number.numberToPtBR)(props.value),
+    value: (0, _format_number.numberToPtBR)(value ?? 0),
     thousandsSeparator: ".",
     radix: ",",
     mask: Number,