linear-react-components-ui 1.0.10-rc.8 → 1.0.10

package/lib/form/index.js

@@ -77,7 +77,9 @@ var Form = function Form(_ref) {
     onSubmit = _ref.onSubmit,
     skeletonize = _ref.skeletonize,
     disabled = _ref.disabled,
-    children = _ref.children;
+    children = _ref.children,
+    _ref$useInternalState = _ref.useInternalState,
+    useInternalState = _ref$useInternalState === void 0 ? false : _ref$useInternalState;
   var _useState = (0, _react.useState)(dataSource),
     _useState2 = _slicedToArray(_useState, 2),
     data = _useState2[0],
@@ -95,7 +97,12 @@ var Form = function Form(_ref) {
     fieldErrors = _useState8[0],
     setFieldErrors = _useState8[1];
   var fieldsValidators = (0, _react.useRef)({});
+  var _useState9 = (0, _react.useState)(0),
+    _useState10 = _slicedToArray(_useState9, 2),
+    oldFieldsValidatorsQuantity = _useState10[0],
+    setOldFieldsValidatorsQuantity = _useState10[1];
   var context = (0, _react.useContext)(_withFormSecurity.FormSecurityContext);
+  var usedData = useInternalState ? data : dataSource;
   var getValidatesErrorMessages = function getValidatesErrorMessages(validators, fieldValue) {
     var validatorsArray = !(validators instanceof Array) ? [validators] : validators;
     var errors = [];
@@ -108,8 +115,11 @@ var Form = function Form(_ref) {
     return errors;
   };
   var getErrorMessages = function getErrorMessages(currentData, currentValidators) {
-    var dataValidate = currentData || data;
-    var currentFieldErrors = _objectSpread({}, fieldErrors);
+    var dataValidate = currentData || usedData;
+    var currentFieldErrors = _lodash.default.pickBy(fieldErrors, function (error, fieldName) {
+      var fieldValidatorsNames = Object.keys(currentValidators);
+      return fieldValidatorsNames.includes(fieldName);
+    });
     _lodash.default.forEach(currentValidators, function (validators, fieldName) {
       var fieldValue = _lodash.default.get(dataValidate, fieldName);
       var messages = getValidatesErrorMessages(validators, fieldValue);
@@ -128,9 +138,14 @@ var Form = function Form(_ref) {
   };
   var onFieldChange = function onFieldChange(event) {
     var target = event.target;
-    setData(function (prevState) {
-      return (0, _helpers.changeValue)(prevState, target);
-    });
+    if (!useInternalState && onDataChange) {
+      var newData = (0, _helpers.changeValue)(dataSource, target);
+      onDataChange(newData);
+    } else {
+      setData(function (prevState) {
+        return (0, _helpers.changeValue)(prevState, target);
+      });
+    }
   };
   var onValidate = function onValidate(fieldName, fieldValue, validators) {
     if (validators) {
@@ -146,10 +161,14 @@ var Form = function Form(_ref) {
   };
   var onFormSubmit = function onFormSubmit(event) {
     if (event) event.preventDefault();
-    if (checkIsValid(data)) onSubmit(data);
+    if (checkIsValid(usedData)) onSubmit(usedData);
   };
   var onReset = function onReset() {
-    setData(JSON.parse(JSON.stringify(originalData)));
+    if (!useInternalState && onDataChange) {
+      onDataChange(JSON.parse(JSON.stringify(originalData)));
+    } else {
+      setData(JSON.parse(JSON.stringify(originalData)));
+    }
     setFieldErrors({});
   };
   var onRemoveFieldValidators = function onRemoveFieldValidators(fieldName) {
@@ -159,7 +178,7 @@ var Form = function Form(_ref) {
   var onBeforeUnload = function onBeforeUnload(e) {
     var event = e;
     event.preventDefault();
-    if (_lodash.default.isEqual(data, originalData)) {
+    if (_lodash.default.isEqual(usedData, originalData)) {
       return;
     }
     event.returnValue = true;
@@ -184,25 +203,34 @@ var Form = function Form(_ref) {
     }
     return propsForm;
   };
-  (0, _react.useEffect)(function () {
+  var updateFormState = function updateFormState() {
     if (!_lodash.default.isEmpty(context)) {
       var onChangedData = context.onChangedData;
-      if (securityData && !_lodash.default.isEqual(data, securityData)) {
+      if (securityData && !_lodash.default.isEqual(usedData, securityData)) {
         onChangedData(true);
       } else {
         onChangedData(false);
       }
     }
+    if (onDataChange) onDataChange(usedData);
 
     // TODO - Usar debounce para evitar chamada a cada letra digitada
-    if (onDataChange) onDataChange(data);
-    if (onValidateForm) onValidateForm(checkIsValid(data, true));
+    if (onValidateForm) onValidateForm(checkIsValid(usedData, true));
     if (!disabled) {
       handlerSubmit(onFormSubmit);
       if (handlerReset) handlerReset(onReset);
-      if (handlerValidates) handlerValidates(checkIsValid(data));
+      if (handlerValidates) handlerValidates(function () {
+        return checkIsValid(usedData);
+      });
     }
-  }, [data]);
+    if (_lodash.default.isEmpty(usedData)) setOriginalData(usedData);
+  };
+  (0, _react.useEffect)(function () {
+    if (useInternalState) updateFormState();
+  }, [JSON.stringify(data), useInternalState]);
+  (0, _react.useEffect)(function () {
+    if (!useInternalState && onDataChange) updateFormState();
+  }, [JSON.stringify(dataSource), useInternalState]);
   (0, _react.useEffect)(function () {
     if (securityBeforeUnload) {
       if (context) context.setSecurityBeforeUnload(true);
@@ -213,36 +241,29 @@ var Form = function Form(_ref) {
     };
   }, [securityBeforeUnload, onBeforeUnload]);
   (0, _react.useEffect)(function () {
-    if (!disabled) {
-      if (submitOnPressEnterKey !== submitFormOnEnter || dataSource !== originalData) {
-        setData(function (prevState) {
-          return !_lodash.default.isEqual(data, dataSource) ? dataSource : prevState;
-        });
-        setOriginalData(function (prevState) {
-          return prevState || dataSource;
-        });
-        setSubmitFormOnEnter(submitOnPressEnterKey);
-      }
+    if (!disabled && submitOnPressEnterKey !== submitFormOnEnter) {
+      setSubmitFormOnEnter(submitOnPressEnterKey);
     }
-  }, [submitOnPressEnterKey, dataSource]);
+  }, [submitOnPressEnterKey]);
+  (0, _react.useEffect)(function () {
+    var newValidatorsQuantity = Object.values(fieldsValidators.current).reduce(function (acc, currentValue) {
+      return acc + ((currentValue === null || currentValue === void 0 ? void 0 : currentValue.length) || 0);
+    }, 0);
+    if (fieldsValidators.current && onValidateForm && oldFieldsValidatorsQuantity !== newValidatorsQuantity) {
+      setOldFieldsValidatorsQuantity(newValidatorsQuantity);
+      onValidateForm(checkIsValid(usedData, true, fieldsValidators.current));
+    }
+  }, [fieldsValidators.current, oldFieldsValidatorsQuantity, onValidateForm, JSON.stringify(usedData)]);
   var contextValues = {
     skeletonize: skeletonize,
     handlerFieldChange: onFieldChange,
     handlerFieldValidade: onValidate,
     handlerStoreValidators: function handlerStoreValidators(fieldName, fieldValidates) {
-      var oldFieldsValidators = _objectSpread({}, fieldsValidators.current);
       fieldsValidators.current = _objectSpread(_objectSpread({}, fieldsValidators.current), {}, _defineProperty({}, fieldName, fieldValidates));
-      if (onValidateForm && oldFieldsValidators && oldFieldsValidators[fieldName]) {
-        var oldValidatorsValue = Object.values(oldFieldsValidators[fieldName]);
-        var newValidatorValue = Object.values(fieldValidates);
-        var validatorsIsNotEqual = oldValidatorsValue.length !== newValidatorValue.length;
-        if (validatorsIsNotEqual) {
-          onValidateForm(checkIsValid(data, true, fieldsValidators.current));
-        }
-      }
     },
     handlerRemoveValidators: onRemoveFieldValidators,
-    data: data,
+    data: useInternalState ? data : dataSource,
+    originalData: originalData,
     fieldErrors: fieldErrors,
     externalFieldErrors: externalFieldErrors
   };

package/lib/form/types.d.ts

@@ -1,4 +1,4 @@
-import { ChangeEvent, ReactNode, CSSProperties, ComponentType, MouseEventHandler } from 'react';
+import { ChangeEvent, ComponentType, MouseEventHandler, ReactNode, CSSProperties } from 'react';
 import { AllOptions } from '../inputs/select/types.js';
 import '../@types/Align.js';
 import '../@types/DataCombo.js';
@@ -17,7 +17,7 @@ type OnFielChangeEvent = Event & {
 type CustomKeyboardEvent = ChangeEvent<HTMLInputElement> & {
     keyCode: number;
 };
-interface IFormProps {
+type BaseFormProps = {
     dataSource: object;
     children: ReactNode;
     onSubmit: (data: object) => void;
@@ -28,7 +28,6 @@ interface IFormProps {
     submitOnPressEnterKey?: boolean;
     style?: CSSProperties;
     customClass?: string;
-    onDataChange?: (data: object) => void;
     securityBeforeUnload?: boolean;
     securityTitle?: string;
     securityText?: string;
@@ -36,10 +35,21 @@ interface IFormProps {
     externalFieldErrors?: object;
     skeletonize?: boolean;
     disabled?: boolean;
-}
+};
+type FormProps = BaseFormProps & ({
+    useInternalState?: false;
+    onDataChange: (data: object) => void;
+} | {
+    useInternalState: true;
+    onDataChange?: (data: object) => void;
+});
+type Data = {
+    [key: string]: any;
+};
 interface IFieldProps extends WithFieldProps {
-    data?: object;
-    dataSource?: object;
+    data?: Data;
+    originalData?: Data;
+    dataSource?: Data;
     name: string;
     value?: string;
     label?: string;
@@ -78,8 +88,9 @@ interface CustomEvent {
     };
 }
 interface IFieldArrayProps extends WithFieldProps {
-    data?: object;
-    dataSource?: object;
+    data?: Data;
+    originalData?: Data;
+    dataSource?: Data;
     name: string;
     handlerFieldChange?: (event: CustomEvent) => void;
     fieldErrors?: {
@@ -102,6 +113,8 @@ interface IFieldArrayProps extends WithFieldProps {
     gridLayout?: string;
     multiple?: boolean;
     disabled?: boolean;
+    onBlur?: (event: ChangeEvent<HTMLInputElement>) => void;
+    handlerFieldValidade?: (name: string, value: string, validatorsArray: Validator[] | Validator) => void;
 }
 type PeriodChangeEvent = {
     initial: string;
@@ -114,7 +127,8 @@ type PeriodFieldChangeEvent = {
     };
 };
 interface IFieldPeriodProps extends WithFieldProps {
-    data?: object;
+    data?: Data;
+    originalData?: Data;
     nameDateInitial: string;
     nameDateFinal: string;
     handlerFieldChange?: (event: PeriodFieldChangeEvent) => PeriodFieldChangeEvent;
@@ -136,16 +150,19 @@ interface FormContextProps {
     handlerStoreValidators: (fieldName: string, fieldValidates: Validator) => void;
     handlerRemoveValidators: (fieldName: string) => void;
     data: object;
+    originalData: object;
     fieldErrors: object;
     externalFieldErrors?: object;
 }
 interface WithFieldProps {
     name: string;
+    data?: Data;
     handlerStoreValidators?: (name: string, validators: Validator | Validator[]) => void;
     handlerRemoveValidators?: (name: string) => void;
     validators?: Validator | Validator[] | PeriodValidator | PeriodValidator[];
 }
 interface IWithFieldContext {
+    validatorFromComponent: Validator | Validator[] | undefined;
     handlerSetValidatorFromComponent: (validator: Validator | Validator[]) => void;
 }
 interface IWithFormSecurity {
@@ -190,4 +207,4 @@ type FieldValidator = {
     [name: string]: Validator | Validator[];
 };
 
-export { CustomEvent, CustomKeyboardEvent, FieldErrors, FieldValidator, FormContextProps, IEventParams, IFieldArrayProps, IFieldPeriodProps, IFieldProps, IFormProps, IFormSecurityContext, IGetErrorMessagesParams, IWithFieldContext, IWithFormSecurity, OnFielChangeEvent, PeriodChangeEvent, PeriodValidator, Validator, WithFieldProps };
+export { CustomEvent, CustomKeyboardEvent, FieldErrors, FieldValidator, FormContextProps, FormProps, IEventParams, IFieldArrayProps, IFieldPeriodProps, IFieldProps, IFormSecurityContext, IGetErrorMessagesParams, IWithFieldContext, IWithFormSecurity, OnFielChangeEvent, PeriodChangeEvent, PeriodValidator, Validator, WithFieldProps };

package/lib/form/withFieldHOC.js

@@ -40,6 +40,7 @@ var withFieldHOC = function withFieldHOC(WrappedComponent) {
       updateValidators();
     }, [validators]);
     var contextValues = {
+      validatorFromComponent: validatorFromComponent,
       handlerSetValidatorFromComponent: function handlerSetValidatorFromComponent(validator) {
         setValidatorFromComponent(validator);
       }

package/lib/hint/index.js

@@ -16,10 +16,26 @@ var Hint = function Hint(_ref) {
     skeletonize = _ref$skeletonize === void 0 ? false : _ref$skeletonize,
     style = _ref.style;
   if (!visible || !description) return null;
+  var showHintList = function showHintList(arrayHint) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "rules-list",
+      style: {
+        padding: '15px 0px'
+      }
+    }, /*#__PURE__*/_react.default.createElement("ul", {
+      style: {
+        listStyleType: 'none'
+      }
+    }, arrayHint.map(function (hint, index) {
+      return /*#__PURE__*/_react.default.createElement("li", {
+        key: index.toString()
+      }, "- ", hint);
+    })));
+  };
   return /*#__PURE__*/_react.default.createElement("div", {
     style: style,
     className: "\n        hint-component\n        ".concat(customClass, "\n        ").concat(skeletonize ? '-skeletonized' : '', "\n      ")
-  }, /*#__PURE__*/_react.default.createElement("span", null, description));
+  }, Array.isArray(description) ? showHintList(description) : /*#__PURE__*/_react.default.createElement("span", null, description));
 };
 var _default = Hint;
 exports.default = _default;

package/lib/hint/types.d.ts

@@ -1,7 +1,7 @@
 import { CSSProperties } from 'react';
 
 interface HintProps {
-    description?: string;
+    description?: string | string[];
     visible?: boolean;
     customClass?: string;
     skeletonize?: boolean;

package/lib/icons/helper.d.ts

@@ -111,6 +111,10 @@ declare const _default: {
         viewbox: string;
         paths: string[];
     };
+    file_excel: {
+        viewbox: string;
+        paths: string[];
+    };
     search: {
         viewbox: string;
         paths: string[];
@@ -579,6 +583,14 @@ declare const _default: {
         viewbox: string;
         paths: string[];
     };
+    keyboard: {
+        viewbox: string;
+        paths: string[];
+    };
+    download: {
+        viewbox: string;
+        paths: string[];
+    };
 };
 
 export { _default as default };

package/lib/icons/helper.js

@@ -117,6 +117,10 @@ var _default = {
     viewbox: '0 0 16 16',
     paths: ['M11 4h3.627c-0.078-0.126-0.172-0.266-0.286-0.421-0.347-0.473-0.831-1.027-1.362-1.558s-1.085-1.015-1.558-1.362c-0.155-0.114-0.295-0.208-0.421-0.286v3.627z', 'M10.5 5c-0.276 0-0.5-0.224-0.5-0.5v-4.5h-7.75c-0.689 0-1.25 0.561-1.25 1.25v13.5c0 0.689 0.561 1.25 1.25 1.25h11.5c0.689 0 1.25-0.561 1.25-1.25v-9.75h-4.5zM8 15.5l-3.5-3.5h2.5v-5h2v5h2.5l-3.5 3.5z']
   },
+  file_excel: {
+    viewbox: '0 0 16 16',
+    paths: ['M11.61 6h-2.114l-1.496 2.204-1.496-2.204h-2.114l2.534 3.788-2.859 4.212h3.935v-1.431h-0.784l0.784-1.172 1.741 2.603h2.194l-2.859-4.212 2.534-3.788z', 'M14.341 3.579c-0.347-0.473-0.831-1.027-1.362-1.558s-1.085-1.015-1.558-1.362c-0.806-0.591-1.197-0.659-1.421-0.659h-7.75c-0.689 0-1.25 0.561-1.25 1.25v13.5c0 0.689 0.561 1.25 1.25 1.25h11.5c0.689 0 1.25-0.561 1.25-1.25v-9.75c0-0.224-0.068-0.615-0.659-1.421v0zM12.271 2.729c0.48 0.48 0.856 0.912 1.134 1.271h-2.406v-2.405c0.359 0.278 0.792 0.654 1.271 1.134v0zM14 14.75c0 0.136-0.114 0.25-0.25 0.25h-11.5c-0.135 0-0.25-0.114-0.25-0.25v-13.5c0-0.135 0.115-0.25 0.25-0.25 0 0 7.749-0 7.75 0v3.5c0 0.276 0.224 0.5 0.5 0.5h3.5v9.75z']
+  },
   search: {
     viewbox: '0 0 16 16',
     paths: ['M16 13.5l-4.695-4.695c0.444-0.837 0.695-1.792 0.695-2.805 0-3.314-2.686-6-6-6s-6 2.686-6 6 2.686 6 6 6c1.013 0 1.968-0.252 2.805-0.695l4.695 4.695 2.5-2.5zM2 6c0-2.209 1.791-4 4-4s4 1.791 4 4-1.791 4-4 4-4-1.791-4-4z']
@@ -584,6 +588,14 @@ var _default = {
   select2: {
     viewbox: '0 0 16 16',
     paths: ['M13.002 14.658v0l-2.16-4.329 4.278-0.74-10.119-7.589v12.649l3.158-2.978 2.16 4.329z', 'M1 10.5v-9c0-0.271 0.229-0.5 0.5-0.5h11c0.271 0 0.5 0.229 0.5 0.5v4l1 0.75v-4.75c0-0.825-0.675-1.5-1.5-1.5h-11c-0.825 0-1.5 0.675-1.5 1.5v9c0 0.825 0.675 1.5 1.5 1.5h1.5v-1h-1.5c-0.271 0-0.5-0.229-0.5-0.5z']
+  },
+  keyboard: {
+    viewbox: '0 0 16 16',
+    paths: ['M14 4h-13c-0.55 0-1 0.45-1 1v7c0 0.55 0.45 1 1 1h13c0.55 0 1-0.45 1-1v-7c0-0.55-0.45-1-1-1zM14 11.998c-0.001 0.001-0.001 0.001-0.002 0.002h-12.996c-0.001-0.001-0.001-0.001-0.002-0.002v-6.996c0.001-0.001 0.001-0.001 0.002-0.002h12.996c0.001 0.001 0.001 0.001 0.002 0.002v6.996zM4 10h7v1h-7zM11 8h1v1h-1zM9 8h1v1h-1zM7 8h1v1h-1zM5 8h1v1h-1zM3 8h1v1h-1zM10 6h1v1h-1zM12 6h1v1h-1zM8 6h1v1h-1zM6 6h1v1h-1zM4 6h1v1h-1zM2 6h1v1h-1z']
+  },
+  download: {
+    viewbox: '0 0 16 16',
+    paths: ['M12.5 6h-3.5v-4h-2v4h-3.5l4.5 4zM11.611 8.322l-0.525 0.462c1.746 0.35 2.914 0.987 2.914 1.716 0 1.105-2.686 2-6 2s-6-0.895-6-2c0-0.728 1.168-1.366 2.914-1.716l-0.525-0.462c-2.604 0.495-4.389 1.508-4.389 2.678 0 1.657 3.582 3 8 3s8-1.343 8-3c0-1.17-1.785-2.183-4.389-2.678z']
   }
 };
 exports.default = _default;

package/lib/index.d.ts

@@ -7,7 +7,7 @@ export { default as List } from './list/index.js';
 export { default as Radio } from './radio/index.js';
 export { default as Tab } from './tabs/index.js';
 export { default as Dialog } from './dialog/base/index.js';
-import './types-c1e2d0c9.js';
+import './types-98a22f0f.js';
 import 'react';
 import './@types/PermissionAttr.js';
 import './internals/colorStyles.js';

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

@@ -57,7 +57,7 @@ interface IBaseProps {
     requiredError?: boolean;
     inputRef?: MutableRefObject<HTMLInputElement | HTMLTextAreaElement | null> | ((ref: HTMLInputElement | HTMLTextAreaElement | null) => void);
     inputBaseRef?: RefObject<HTMLDivElement> | ((ref: HTMLDivElement) => void);
-    hint?: string;
+    hint?: string | string[];
     textAlign?: TextAlign;
     rounded?: boolean;
     errorMessages?: string[] | undefined;

package/lib/inputs/date/index.js

@@ -29,6 +29,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var CALENDAR_BUTTON_WIDTH = 24;
 var CALENDAR_MIN_WIDTH = 250;
 var DatePicker = function DatePicker(props) {
+  var _window;
   var _props$showButtonOpen = props.showButtonOpen,
     showButtonOpen = _props$showButtonOpen === void 0 ? true : _props$showButtonOpen,
     _props$openOnFocus = props.openOnFocus,
@@ -223,7 +224,7 @@ var DatePicker = function DatePicker(props) {
     } else {
       setFormatedLeftPosition(inputDimensions === null || inputDimensions === void 0 ? void 0 : inputDimensions.left);
     }
-  }, [getWrapperComponent]);
+  }, [(_window = window) === null || _window === void 0 ? void 0 : _window.innerWidth, inputDimensions]);
   if (onDenied && onDenied.unvisible) return null;
   (0, _react.useEffect)(function () {
     window.addEventListener('resize', onScreenResize);

package/lib/inputs/file/DefaultFile.js

@@ -13,6 +13,7 @@ require("../../assets/styles/file.scss");
 var _buttons = _interopRequireDefault(require("../../buttons"));
 var _icons = _interopRequireDefault(require("../../icons"));
 var _popover = _interopRequireWildcard(require("../../popover"));
+var helperBase = _interopRequireWildcard(require("../base/helpers"));
 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; }
@@ -32,6 +33,10 @@ var DefaultFile = function DefaultFile(props) {
     onBtnClickRemove = props.onBtnClickRemove,
     inputRef = props.inputRef,
     defaultFiles = props.defaultFiles,
+    _props$hint = props.hint,
+    hint = _props$hint === void 0 ? [] : _props$hint,
+    _props$errorMessages = props.errorMessages,
+    errorMessages = _props$errorMessages === void 0 ? [] : _props$errorMessages,
     onChange = props.onChange;
   var getFilesList = function getFilesList(files) {
     return !(files !== null && files !== void 0 && files.length) ? [] : _lodash.default.map(files, function (file) {
@@ -78,11 +83,12 @@ var DefaultFile = function DefaultFile(props) {
     (_e$preventDefault = e.preventDefault) === null || _e$preventDefault === void 0 ? void 0 : _e$preventDefault.call(e);
     var files = getFilesList(e.target.files);
     setFileList(files);
-    onChange === null || onChange === void 0 ? void 0 : onChange(e);
+    onChange === null || onChange === void 0 ? void 0 : onChange(files, e);
   };
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "input-simple-file-container"
   }, /*#__PURE__*/_react.default.createElement(_InputTextBase.default, _extends({}, props, {
+    hint: hint,
     readOnlyClass: "-disabledVisualApply",
     customClassForInputContent: "-absolute -pointEventDisabled -disabledVisualApply",
     type: "file",
@@ -96,7 +102,7 @@ var DefaultFile = function DefaultFile(props) {
         return _onBtnClickInsert();
       }
     })
-  }), popUpDescription(), buttonRemoveFile()));
+  }), popUpDescription(), buttonRemoveFile()), errorMessages && helperBase.getErrorMessages(errorMessages));
 };
 var _default = DefaultFile;
 exports.default = _default;

package/lib/inputs/file/DragDropFile.js

@@ -10,6 +10,8 @@ var _lodash = _interopRequireDefault(require("lodash"));
 var _buttons = require("../../buttons");
 var _icons = _interopRequireDefault(require("../../icons"));
 var _InputTextBase = _interopRequireDefault(require("../base/InputTextBase"));
+var helperBase = _interopRequireWildcard(require("../base/helpers"));
+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; }
@@ -55,8 +57,16 @@ var DragDropFile = function DragDropFile(props) {
     onDragOver = props.onDragOver,
     onDragLeave = props.onDragLeave,
     onDrop = props.onDrop,
+    _props$showSubtitle = props.showSubtitle,
+    showSubtitle = _props$showSubtitle === void 0 ? true : _props$showSubtitle,
     _props$multiple = props.multiple,
-    multiple = _props$multiple === void 0 ? false : _props$multiple;
+    multiple = _props$multiple === void 0 ? false : _props$multiple,
+    _props$hint = props.hint,
+    hint = _props$hint === void 0 ? [] : _props$hint,
+    _props$errorMessages = props.errorMessages,
+    errorMessages = _props$errorMessages === void 0 ? [] : _props$errorMessages,
+    _props$skeletonize = props.skeletonize,
+    skeletonize = _props$skeletonize === void 0 ? false : _props$skeletonize;
   var _useState = (0, _react.useState)(false),
     _useState2 = _slicedToArray(_useState, 2),
     dragActive = _useState2[0],
@@ -165,7 +175,7 @@ var DragDropFile = function DragDropFile(props) {
           return !ids.includes(name, index + 1);
         });
         setFileList(filtered);
-        onChange === null || onChange === void 0 ? void 0 : onChange(e);
+        onChange === null || onChange === void 0 ? void 0 : onChange(files, e);
         onDrop === null || onDrop === void 0 ? void 0 : onDrop(e);
       }
     }
@@ -190,7 +200,7 @@ var DragDropFile = function DragDropFile(props) {
         return !ids.includes(name, index + 1);
       });
       setFileList(filesFiltered);
-      onChange === null || onChange === void 0 ? void 0 : onChange(e);
+      onChange === null || onChange === void 0 ? void 0 : onChange(files, e);
     }
   };
   var onButtonClickRemoveAll = function onButtonClickRemoveAll() {
@@ -205,16 +215,19 @@ var DragDropFile = function DragDropFile(props) {
   };
   var generateListArray = function generateListArray() {
     if ((fileList === null || fileList === void 0 ? void 0 : fileList.length) === 1) {
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: "image-preview-solo"
-      }, (fileList[0].type === 'image/jpeg' || fileList[0].type === 'image/png') && /*#__PURE__*/_react.default.createElement("img", {
+      return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, fileList[0].type === 'image/jpeg' || fileList[0].type === 'image/png' ? /*#__PURE__*/_react.default.createElement("img", {
         alt: fileList[0].name,
         src: URL.createObjectURL(fileList[0])
-      }), fileList[0].name && /*#__PURE__*/_react.default.createElement("div", {
+      }) : /*#__PURE__*/_react.default.createElement(_icons.default, {
+        size: 64,
+        name: "file_excel"
+      }), /*#__PURE__*/_react.default.createElement("div", {
+        className: "image-preview-solo"
+      }, /*#__PURE__*/_react.default.createElement("div", {
         className: "description-file"
       }, /*#__PURE__*/_react.default.createElement("span", {
         className: "subtitle"
-      }, fileList[0].name)));
+      }, fileList[0].name))));
     }
     return /*#__PURE__*/_react.default.createElement("ul", {
       className: "file-list"
@@ -253,16 +266,19 @@ var DragDropFile = function DragDropFile(props) {
       return e.preventDefault();
     }
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "drag-content"
+    className: "drag-content ".concat(skeletonize ? '-skeletonized' : '')
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(message.class, " content")
+    className: "".concat(message.class, " ").concat(!skeletonize ? 'content' : '')
   }, message.error || fileList.length === 0 ? /*#__PURE__*/_react.default.createElement("label", {
     htmlFor: id
   }, /*#__PURE__*/_react.default.createElement("h1", {
-    className: "title"
-  }, message.text), /*#__PURE__*/_react.default.createElement("p", {
+    className: "title",
+    style: {
+      paddingBottom: '20px'
+    }
+  }, message.text), showSubtitle && /*#__PURE__*/_react.default.createElement("p", {
     className: "subtitle"
-  }, message.subtitle), /*#__PURE__*/_react.default.createElement(_buttons.PrimaryButton, {
+  }, message.subtitle), !skeletonize && /*#__PURE__*/_react.default.createElement(_buttons.PrimaryButton, {
     onClick: onBtnClickInsert,
     label: labelButton
   })) : /*#__PURE__*/_react.default.createElement(_react.Fragment, null, generateListArray(), /*#__PURE__*/_react.default.createElement("footer", {
@@ -299,7 +315,11 @@ var DragDropFile = function DragDropFile(props) {
     onDragLeave: handleDragLeave,
     onDragOver: handleDragOver,
     onDrop: handleDrop
-  })));
+  })), errorMessages && helperBase.getErrorMessages(errorMessages), /*#__PURE__*/_react.default.createElement(_hint.default, {
+    visible: !!hint,
+    customClass: "hint",
+    description: hint
+  }));
 };
 var _default = DragDropFile;
 exports.default = _default;

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

@@ -19,7 +19,7 @@ interface IFileProps {
     required?: boolean;
     readOnly?: boolean;
     name?: string;
-    onChange?: (e?: CustomInputEvent | DragEvent) => void;
+    onChange?: (files: File[], e?: CustomInputEvent | DragEvent) => void;
     size?: Size;
     accept?: string;
     labelButton?: string;
@@ -29,6 +29,9 @@ interface IFileProps {
     onDragOver?: (e?: DragEvent) => void;
     onDrop?: (e?: DragEvent) => void;
     onDragLeave?: (e?: DragEvent) => void;
+    errorMessages?: string[];
+    skeletonize?: boolean;
+    showSubtitle?: boolean;
 }
 interface IDefaultFileProps extends IFileProps {
     onBtnClickInsert: () => void;

package/lib/inputs/mask/Cpf.js

@@ -45,11 +45,11 @@ var CpfField = function CpfField(props) {
     return debouncedOnChange.cancel;
   }, []);
   var onChange = function onChange(e) {
+    // console.log('onChange >>>', props.onChange);
     if (enableValidation && e) {
       debouncedOnChange(e.target.value);
       if (props.onChange) props.onChange(e);
-    }
-    if (props.onChange) {
+    } else if (props.onChange) {
       props.onChange(e);
     }
   };
@@ -61,10 +61,10 @@ var CpfField = function CpfField(props) {
     }
     return {};
   };
-  return /*#__PURE__*/_react.default.createElement(_BaseMask.default, _extends({
+  return /*#__PURE__*/_react.default.createElement(_BaseMask.default, _extends({}, props, {
     onChange: onChange,
     mask: "000.000.000-00"
-  }, props, getErrorMessagesProp()));
+  }, getErrorMessagesProp()));
 };
 
 // Em caso de alteração na propriedade displayName deverá ser atualizada a lógica na função