linear-react-components-ui 1.0.1-beta.1 → 1.0.2

package/lib/assets/styles/commons.scss

@@ -116,6 +116,16 @@
   }
 }
 
+%skeleton-transparency {
+  content: '';
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: rgb(255,255,255);
+  background: linear-gradient( 180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 30%,
+    rgba(255,255,255,0.6) 70%,rgba(255,255,255,0.8) 100%);
+}
+
 /* Efeito utilizado para o componente Skeleton */
 @keyframes shimmer {
   0% {

package/lib/assets/styles/dropdown.scss

@@ -1,5 +1,6 @@
 @import "commons.scss";
 @import "effects.scss";
+@import "colors.scss";
 .dropdown-component {
   position: absolute;
   animation: 0.3s ease-in 0s 1 slideDown, revealelement 0.3s forwards ease-in-out;
@@ -75,12 +76,44 @@
     box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
     animation: revealelement 0.3s forwards ease-in-out;
     margin-right: 7px;
-    > .floatmenuitem {
+    > .floatmenuitem,
+    > .floatsubmenu .floatmenuitem {
       text-decoration: none;
       color: #666666;
       text-align: center;
     }
-    > .floatmenuitem .-items {
+    > .floatsubmenu {
+      position: relative;
+      animation: slideWithPositionRightToLeft 0.4s;
+    }
+    > .floatsubmenu {
+        width: 100%;
+      > .submenuheader {
+        color: $font-color-soft;
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        margin-bottom: 10px;
+        span {
+          font-weight: 500;
+        }
+      }
+      > .submenucontent {
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-box-orient: horizontal;
+        -webkit-box-direction: normal;
+        -ms-flex-flow: row wrap;
+        flex-flow: row wrap;
+
+        svg {
+          margin: 0 auto;
+        }
+      }
+    }
+    > .floatmenuitem .-items,
+    > .floatsubmenu .floatmenuitem .-items {
       border: solid 1px $default-hover-color;
       margin: 0 5px 5px 0;
       font-size: 12px;

package/lib/assets/styles/effects.scss

@@ -791,6 +791,17 @@
   }
 }
 
+@keyframes slideWithPositionRightToLeft {
+  from {
+    left: 100%;
+    opacity: 0;
+  }
+  to {
+    left: 0;
+    opacity: 1;
+  }
+}
+
 @keyframes slideRightToLeftWithFade {
   from {
     opacity: 0;

package/lib/assets/styles/list.scss

@@ -20,6 +20,14 @@ $item-height: 48px;
       line-height: 40px!important;
     }
   }
+  > .skeleton-transparency {
+    position: relative;
+    &::after {
+      @extend %skeleton-transparency;
+      top: 0;
+      left: 0;
+    }
+  }
 }
 
 .item-container {

package/lib/assets/styles/table.scss

@@ -1,5 +1,6 @@
 @import "colors.scss";
 @import "effects.scss";
+@import "commons.scss";
 
 .table-component {
   width: 100%;
@@ -23,13 +24,7 @@
   > .tbody {
     position: relative;
     &.skeleton-transparency::before {
-      content: '';
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      background: rgb(255,255,255);
-      background: linear-gradient( 180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 30%,
-        rgba(255,255,255,0.6) 70%,rgba(255,255,255,0.8) 100%);
+      @extend %skeleton-transparency;
     }
   }
   > .headercontainer > .innertable > .theader > .trow,

package/lib/checkbox/index.js

@@ -10,7 +10,6 @@ var _gridlayout = _interopRequireDefault(require("../gridlayout"));
 var _Label = _interopRequireDefault(require("./Label"));
 require("../assets/styles/checkbox.scss");
 var _permissionValidations = require("../permissionValidations");
-var _hint = _interopRequireDefault(require("../hint"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -116,11 +115,9 @@ var CheckBox = function CheckBox(_ref) {
       tooltip: tooltip,
       tooltipWidth: tooltipWidth,
       tooltipPosition: tooltipPosition
-    })), /*#__PURE__*/_react.default.createElement(_hint.default, {
-      visible: !!hint,
-      description: hint,
-      customClass: "hint"
-    }));
+    })), hint && /*#__PURE__*/_react.default.createElement("div", {
+      className: "hint"
+    }, /*#__PURE__*/_react.default.createElement("span", null, hint)));
   };
   if (onDenied.unvisible) return null;
   return gridLayout ? /*#__PURE__*/_react.default.createElement(_gridlayout.default, {

package/lib/dialog/form/index.js

@@ -26,7 +26,9 @@ var ModalForm = function ModalForm(props) {
     _props$width = props.width,
     width = _props$width === void 0 ? '50%' : _props$width,
     _props$height = props.height,
-    height = _props$height === void 0 ? '50%' : _props$height;
+    height = _props$height === void 0 ? '50%' : _props$height,
+    content = props.content,
+    children = props.children;
   var overlayStyle = isWaiting ? {
     opacity: 0.4,
     pointerEvent: 'none'
@@ -54,7 +56,7 @@ var ModalForm = function ModalForm(props) {
     handlerClose: props.handlerClose
   }, props))), /*#__PURE__*/_react.default.createElement(_Content.default, {
     styleForContent: _extends({}, props.styleForContent, overlayStyle)
-  }, props.children), getSpinner(), showFooter && /*#__PURE__*/_react.default.createElement(_Footer.default, null, /*#__PURE__*/_react.default.createElement(_index.ButtonContainer, _extends({}, props, {
+  }, content || children), getSpinner(), showFooter && /*#__PURE__*/_react.default.createElement(_Footer.default, null, /*#__PURE__*/_react.default.createElement(_index.ButtonContainer, _extends({}, props, {
     style: _extends({}, overlayStyle)
   }), props.buttons.map(function (button) {
     if (context && context.securityBeforeUnload && button && button.type && button.type.name === 'CancelButton') {

package/lib/dialog/types.d.ts

@@ -40,6 +40,7 @@ interface IFormProps {
     closeOnOutsideClick?: boolean;
     closeOnEsc?: boolean;
     overlay?: boolean;
+    content?: ReactNode;
 }
 interface ICommonDialogProps {
     onConfirmClick?: () => void;

package/lib/drawer/Content.d.ts

@@ -1,6 +1,7 @@
 import { IDrawerProps } from './types.js';
 import 'react';
 import '../@types/PermissionAttr.js';
+import '../@types/Position.js';
 
 declare const Content: ({ children, style }: IDrawerProps) => JSX.Element;
 

package/lib/drawer/Drawer.d.ts

@@ -1,7 +1,8 @@
 import React__default from 'react';
 import { IDrawerProps } from './types.js';
 import '../@types/PermissionAttr.js';
+import '../@types/Position.js';
 
-declare const BaseDrawer: ({ position, customClass, children, style, customClassForContent, targetId, closeOnEsc, overlay, permissionAttr, skeletonize, handlerClose, }: IDrawerProps) => React__default.ReactPortal;
+declare const BaseDrawer: ({ position, customClass, children, style, customClassForContent, targetId, closeOnEsc, overlay, permissionAttr, skeletonize, handlerClose, customClassForDrawer, content, title, ...rest }: IDrawerProps) => React__default.ReactPortal;
 
 export { BaseDrawer as default };

package/lib/drawer/Drawer.js

@@ -9,6 +9,8 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactDom = _interopRequireDefault(require("react-dom"));
 var _helpers = _interopRequireDefault(require("./helpers"));
 var _permissionValidations = require("../permissionValidations");
+var _ = require(".");
+var _excluded = ["position", "customClass", "children", "style", "customClassForContent", "targetId", "closeOnEsc", "overlay", "permissionAttr", "skeletonize", "handlerClose", "customClassForDrawer", "content", "title"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -18,19 +20,32 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+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; }
 var BaseDrawer = function BaseDrawer(_ref) {
   var _ref$position = _ref.position,
     position = _ref$position === void 0 ? 'left' : _ref$position,
-    customClass = _ref.customClass,
+    _ref$customClass = _ref.customClass,
+    customClass = _ref$customClass === void 0 ? '' : _ref$customClass,
     children = _ref.children,
     style = _ref.style,
-    customClassForContent = _ref.customClassForContent,
+    _ref$customClassForCo = _ref.customClassForContent,
+    customClassForContent = _ref$customClassForCo === void 0 ? '' : _ref$customClassForCo,
     targetId = _ref.targetId,
     closeOnEsc = _ref.closeOnEsc,
     overlay = _ref.overlay,
     permissionAttr = _ref.permissionAttr,
     skeletonize = _ref.skeletonize,
-    handlerClose = _ref.handlerClose;
+    handlerClose = _ref.handlerClose,
+    _ref$customClassForDr = _ref.customClassForDrawer,
+    customClassForDrawer = _ref$customClassForDr === void 0 ? '' : _ref$customClassForDr,
+    content = _ref.content,
+    title = _ref.title,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var headerProps = _extends({}, rest, {
+    title: title
+  });
   var drawerContainerEl = (0, _react.useRef)(document.createElement('div'));
   drawerContainerEl.current.className = 'drawercontainer';
   var drawerComponentEl = (0, _react.useRef)();
@@ -102,7 +117,9 @@ var BaseDrawer = function BaseDrawer(_ref) {
     }, /*#__PURE__*/_react.default.createElement("div", {
       "data-testid": "drawercontent",
       className: "drawercontent ".concat(skeletonize ? '-skeletonized' : '', " ").concat(customClassForContent)
-    }, children)));
+    }, title && /*#__PURE__*/_react.default.createElement(_.DrawerHeader, _extends({}, headerProps, {
+      customClass: customClassForDrawer
+    })), content ? /*#__PURE__*/_react.default.createElement(_.DrawerContent, null, content) : children)));
   };
   return /*#__PURE__*/_reactDom.default.createPortal(drawerContent(), drawerContainerEl.current);
 };

package/lib/drawer/Header.d.ts

@@ -1,6 +1,7 @@
 import { IDrawerHeaderProps } from './types.js';
 import 'react';
 import '../@types/PermissionAttr.js';
+import '../@types/Position.js';
 
 declare const Header: ({ showCloseButton, title, subTitle, icon, titleIcon, customClass, titleContent, subTitleContent, titleRightContent, }: IDrawerHeaderProps) => JSX.Element;
 

package/lib/drawer/helpers.d.ts

@@ -1,6 +1,7 @@
 import React__default from 'react';
 import { IDrawerContext } from './types.js';
 import '../@types/PermissionAttr.js';
+import '../@types/Position.js';
 
 declare const DrawerContext: React__default.Context<IDrawerContext>;
 

package/lib/drawer/index.d.ts

@@ -3,6 +3,7 @@ export { default as DrawerHeader } from './Header.js';
 export { default as DrawerContent } from './Content.js';
 import 'react';
 import '../@types/PermissionAttr.js';
+import '../@types/Position.js';
 
 declare const _default: (props: IDrawerProps) => JSX.Element;
 

package/lib/drawer/types.d.ts

@@ -1,18 +1,22 @@
 import React__default, { ReactNode, ReactElement } from 'react';
 import { PermissionAttr } from '../@types/PermissionAttr.js';
+import { Position } from '../@types/Position.js';
 
 interface IDrawerProps extends React__default.HTMLAttributes<HTMLDivElement> {
     overlay?: boolean;
     children?: ReactNode;
     customClass?: string;
     customClassForContent?: string;
-    position?: string;
+    customClassForDrawer?: string;
+    position?: Exclude<Position, 'center'>;
     handlerClose?: () => void;
     closeOnEsc?: boolean;
     targetId?: string;
     permissionAttr?: PermissionAttr | PermissionAttr[];
     skeletonize?: boolean;
     closeOnOutsideClick?: boolean;
+    content?: string;
+    title?: string;
 }
 interface IDrawerHeaderProps extends React__default.HTMLAttributes<HTMLDivElement> {
     showCloseButton?: boolean;

package/lib/dropdown/withDropdown.js

@@ -52,7 +52,7 @@ var withDropdown = function withDropdown(WrappedComponent) {
     }
     var onClickOutside = function onClickOutside(_ref) {
       var target = _ref.target;
-      if (popupRef && popupRef.current && target !== popupRef.current && !popupRef.current.contains(target) && wrappedComponentRef.current !== target) {
+      if (popupRef !== null && popupRef !== void 0 && popupRef.current && target !== (popupRef === null || popupRef === void 0 ? void 0 : popupRef.current) && !(popupRef !== null && popupRef !== void 0 && popupRef.current.contains(target)) && wrappedComponentRef.current !== target) {
         setOpened(false);
       }
     };

package/lib/form/FieldNumber.js

@@ -1,5 +1,6 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -8,12 +9,16 @@ var _react = _interopRequireDefault(require("react"));
 var _lodash = _interopRequireDefault(require("lodash"));
 var _withFieldHOC = _interopRequireDefault(require("./withFieldHOC"));
 var _helpers = require("./helpers");
+var constants = _interopRequireWildcard(require("../internals/constants"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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); }
-var getOnBlurEvent = function getOnBlurEvent(_ref) {
+var getEventProps = function getEventProps(_ref) {
   var name = _ref.name,
     validators = _ref.validators,
     _onBlur = _ref.onBlur,
+    _onKeyDown = _ref.onKeyDown,
     handlerFieldValidade = _ref.handlerFieldValidade,
     handlerFieldChange = _ref.handlerFieldChange;
   return {
@@ -21,19 +26,22 @@ var getOnBlurEvent = function getOnBlurEvent(_ref) {
       if (handlerFieldChange) handlerFieldChange(e);
       if (validators && handlerFieldValidade) handlerFieldValidade(name, e.target.value, validators);
       if (_onBlur) _onBlur(e);
+    },
+    onKeyDown: function onKeyDown(e) {
+      if ([constants.keyCodes.ENTER].includes(e.keyCode)) {
+        handlerFieldChange === null || handlerFieldChange === void 0 ? void 0 : handlerFieldChange(e);
+        if (validators) handlerFieldValidade === null || handlerFieldValidade === void 0 ? void 0 : handlerFieldValidade(name, e.target.value, validators);
+        if (_onKeyDown) _onKeyDown(e);
+      }
     }
   };
 };
 var FieldMask = function FieldMask(props) {
   var data = props.data,
-    name = props.name,
-    _onChange = props.onChange;
-  return /*#__PURE__*/_react.default.createElement(props.component, _extends({}, props, getOnBlurEvent(props), {
+    name = props.name;
+  return /*#__PURE__*/_react.default.createElement(props.component, _extends({}, props, getEventProps(props), {
     errorMessages: (0, _helpers.getErrorMessages)(props),
-    value: _lodash.default.get(data, name),
-    onChange: function onChange(e) {
-      if (_onChange) _onChange(e);
-    }
+    value: _lodash.default.get(data, name)
   }));
 };
 var _default = (0, _withFieldHOC.default)(FieldMask);

package/lib/form/types.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode, CSSProperties, ChangeEvent, ComponentType, MouseEventHandler } from 'react';
+import { ChangeEvent, ReactNode, CSSProperties, ComponentType, MouseEventHandler } from 'react';
 
 type Validator = (value: string) => string | undefined;
 type PeriodValidator = (value: {
@@ -8,6 +8,9 @@ type PeriodValidator = (value: {
 type OnFielChangeEvent = Event & {
     target: HTMLInputElement;
 };
+type CustomKeyboardEvent = ChangeEvent<HTMLInputElement> & {
+    keyCode: number;
+};
 interface IFormProps {
     dataSource: object;
     children: ReactNode;
@@ -33,12 +36,13 @@ interface IFieldProps extends WithFieldProps {
     name: string;
     value?: string;
     label?: string;
-    handlerFieldChange?: (event: ChangeEvent) => ChangeEvent;
+    handlerFieldChange?: (event: ChangeEvent<HTMLInputElement> | CustomKeyboardEvent) => ChangeEvent;
     handlerFieldValidade?: (name: string, value: string, validatorsArray: Validator[] | Validator) => void;
     component: ComponentType<any>;
     componentType?: 'Radio' | 'Checkbox';
     onChange?: (event: ChangeEvent) => ChangeEvent;
-    onBlur?: () => void;
+    onBlur?: (event: ChangeEvent<HTMLInputElement>) => void;
+    onKeyDown?: (event: ChangeEvent<HTMLInputElement>) => void;
     validators?: Validator | Validator[];
     fieldErrors?: {
         [name: string]: string[];
@@ -145,13 +149,14 @@ interface IFormSecurityContext {
     setSecurityBeforeUnload: (value: boolean) => void;
     securityBeforeUnload?: boolean;
 }
-interface IOnBlurParams {
+interface IEventParams {
     name: string;
     data?: object;
     validators?: Validator | Validator[];
     onBlur?: (event: ChangeEvent<HTMLInputElement>) => void;
+    onKeyDown?: (event: CustomKeyboardEvent) => void;
     handlerFieldValidade?: (name: string, value: string, validatorsArray: Validator[] | Validator) => void;
-    handlerFieldChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    handlerFieldChange?: (event: ChangeEvent<HTMLInputElement> | CustomKeyboardEvent) => void;
     validatorFromComponent?: Validator | Validator[];
 }
 interface IGetErrorMessagesParams {
@@ -165,4 +170,4 @@ interface IGetErrorMessagesParams {
     externalMessagesErrors?: string[];
 }
 
-export { CustomEvent, FormContextProps, IFieldArrayProps, IFieldPeriodProps, IFieldProps, IFormProps, IFormSecurityContext, IGetErrorMessagesParams, IOnBlurParams, IWithFieldContext, IWithFormSecurity, OnFielChangeEvent, PeriodChangeEvent, PeriodValidator, Validator, WithFieldProps };
+export { CustomEvent, CustomKeyboardEvent, FormContextProps, IEventParams, IFieldArrayProps, IFieldPeriodProps, IFieldProps, IFormProps, IFormSecurityContext, IGetErrorMessagesParams, IWithFieldContext, IWithFormSecurity, OnFielChangeEvent, PeriodChangeEvent, PeriodValidator, Validator, WithFieldProps };

package/lib/inputs/base/InputTextBase.js

@@ -12,7 +12,6 @@ require("../../assets/styles/input.scss");
 var helpers = _interopRequireWildcard(require("./helpers"));
 var _withTooltip = _interopRequireDefault(require("../../internals/withTooltip"));
 var _permissionValidations = require("../../permissionValidations");
-var _hint = _interopRequireDefault(require("../../hint"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -173,11 +172,9 @@ var InputTextBase = function InputTextBase(props) {
   }, type === 'textarea' ? /*#__PURE__*/_react.default.createElement("textarea", _extends({
     rows: props.rows,
     cols: props.cols
-  }, inputProps())) : /*#__PURE__*/_react.default.createElement("input", inputProps()), children), helpers.getRightElements(errorMessages || [], skeletonize, rightElements)), /*#__PURE__*/_react.default.createElement(_hint.default, {
-    visible: !!hint,
-    customClass: "hint",
-    description: hint
-  }), errorMessages && helpers.getErrorMessages(errorMessages));
+  }, inputProps())) : /*#__PURE__*/_react.default.createElement("input", inputProps()), children), helpers.getRightElements(errorMessages || [], skeletonize, rightElements)), hint && /*#__PURE__*/_react.default.createElement("p", {
+    className: "hint"
+  }, hint), errorMessages && helpers.getErrorMessages(errorMessages));
 };
 var _default = (0, _inputHOC.default)((0, _withTooltip.default)(InputTextBase));
 exports.default = _default;

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

@@ -6,6 +6,8 @@ interface CustomInputEvent {
     preventDefault?: () => void;
     stopPropagation?: () => void;
     dataTransfer?: DataTransfer;
+    keyCode?: number;
+    code?: number;
     target: {
         value: string;
         name?: string;
@@ -38,7 +40,7 @@ interface IBaseProps {
         initial: string;
         final: string;
     }, period?: Period) => void;
-    onKeyDown?: (e: KeyboardEvent<Element>) => void;
+    onKeyDown?: (e: CustomInputEvent | KeyboardEvent) => void;
     onKeyPress?: (e: KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
     onDragOver?: (e: DragEvent<HTMLInputElement | HTMLTextAreaElement | HTMLDivElement>) => void;
     onDrop?: (e: DragEvent) => void;

package/lib/inputs/date/index.js

@@ -236,6 +236,7 @@ var DatePicker = function DatePicker(props) {
   }, [value]);
   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),
+    isDateField: true,
     mask: "00/00/0000",
     onComplete: function onComplete(e, date) {
       if (date) {
@@ -248,9 +249,7 @@ var DatePicker = function DatePicker(props) {
     onFocus: function onFocus(e) {
       onInputFocus(e);
     },
-    onKeyDown: function onKeyDown(event) {
-      onInputKeyDown(event);
-    },
+    onKeyDown: onInputKeyDown,
     onChange: function onChange(e, date) {
       if (date) onInputChange(e, date);
     },

package/lib/inputs/inputHOC.d.ts

@@ -2,9 +2,10 @@ import React__default from 'react';
 import { IInputHOCProps } from './types.js';
 import '../@types/PermissionAttr.js';
 import '../@types/DataCombo.js';
-import './select/types.js';
 import './base/types.js';
 import '../@types/Period.js';
+import '../drawer/types.js';
+import '../@types/Position.js';
 
 declare const InputHOC: <ComponentProps extends IInputHOCProps>(WrappedComponent: React__default.ComponentType<ComponentProps>) => (props: ComponentProps) => JSX.Element;
 

package/lib/inputs/mask/BaseMask.js

@@ -7,28 +7,42 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _imaskHOC = _interopRequireDefault(require("./imaskHOC"));
 var _InputTextBase = _interopRequireDefault(require("../base/InputTextBase"));
+var _format_number = require("../number/format_number");
 var _excluded = ["inputRef"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-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; }
-var getOnBlurEvent = function getOnBlurEvent(props) {
+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); }
+var returnEventFormattedValue = function returnEventFormattedValue(props, event) {
+  if (props.returnFormattedValueOnBlur || props.returnFormattedValueOnKeyDown) {
+    // Retornando um objeto com a mesma estrutura do Proxy original
+    // para recuperacao do valor da mascara sem formatacao.
+    // O retorno poderá ser modificado conforme necessidade, desde que seja
+    // mantido o path até a propriedade value e name.
+    var name = event.target.name;
+    var value = props.defaultValue || '';
+    return _extends({}, event, {
+      target: {
+        value: (0, _format_number.numberToEnUS)(value),
+        name: name
+      }
+    });
+  }
+  return event;
+};
+var getEventProps = function getEventProps(props) {
   if (props.isNumeric) return {};
   return {
     onBlur: function onBlur(e) {
       if (props.onBlur) {
-        // Retornando um objeto com a mesma estrutura do Proxy original
-        // para recuperacao do valor da mascara sem formatacao.
-        // O retorno poderá ser modificado conforme necessidade, desde que seja
-        // mantido o path até a propriedade value e name.
-        var name = e.target.name;
-        var value = props.defaultValue || '';
-        props.onBlur({
-          target: {
-            value: value,
-            name: name
-          }
-        });
+        var formattedEvent = returnEventFormattedValue(props, e);
+        props.onBlur(formattedEvent);
+      }
+    },
+    onKeyDown: function onKeyDown(e) {
+      if (props.onKeyDown) {
+        var formattedEvent = returnEventFormattedValue(props, e);
+        props.onKeyDown(formattedEvent);
       }
     }
   };
@@ -38,7 +52,7 @@ var BaseMask = function BaseMask(_ref) {
     props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement(_InputTextBase.default, _extends({}, props, {
     inputRef: inputRef
-  }, getOnBlurEvent(props)));
+  }, getEventProps(props)));
 };
 var _default = (0, _imaskHOC.default)(BaseMask);
 exports.default = _default;

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

@@ -3,9 +3,10 @@ import { IMaskHOCProps } from '../types.js';
 import 'react';
 import '../../@types/PermissionAttr.js';
 import '../../@types/DataCombo.js';
-import '../select/types.js';
 import '../base/types.js';
 import '../../@types/Period.js';
+import '../../drawer/types.js';
+import '../../@types/Position.js';
 
 declare function extractNonMaskProps(props: IMaskHOCProps, maskProps: AnyMaskedOptions): any;
 declare function CPFValidation(cpf?: string, returnMessage?: (msg: string) => void): void | "CPF inválido";

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

@@ -2,9 +2,10 @@ import React__default from 'react';
 import { IMaskHOCProps } from '../types.js';
 import '../../@types/PermissionAttr.js';
 import '../../@types/DataCombo.js';
-import '../select/types.js';
 import '../base/types.js';
 import '../../@types/Period.js';
+import '../../drawer/types.js';
+import '../../@types/Position.js';
 
 declare const IMaskHOC: <ComponentProps extends IMaskHOCProps>(ComposedComponent: React__default.ComponentType<ComponentProps>) => {
     (props: ComponentProps): JSX.Element;