linear-react-components-ui 0.4.77-beta.8 → 1.0.0-rc.1

package/lib/inputs/base/InputTextBase.js

@@ -1,16 +1,14 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+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
 });
-exports["default"] = void 0;
+exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _lodash = _interopRequireDefault(require("lodash"));
 
 var _inputHOC = _interopRequireDefault(require("../inputHOC"));
@@ -23,44 +21,24 @@ var _withTooltip = _interopRequireDefault(require("../../internals/withTooltip")
 
 var _permissionValidations = require("../../permissionValidations");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+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; }
-
-function _extends() { _extends = Object.assign || 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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-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 _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 _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["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); }
 
 var InputTextBase = function InputTextBase(props) {
-  var value = props.value,
-      type = props.type,
-      readOnly = props.readOnly,
+  var _props$textAlign = props.textAlign,
+      textAlign = _props$textAlign === void 0 ? 'left' : _props$textAlign,
+      value = props.value,
+      _props$type = props.type,
+      type = _props$type === void 0 ? 'text' : _props$type,
+      _props$readOnly = props.readOnly,
+      readOnly = _props$readOnly === void 0 ? false : _props$readOnly,
       placeHolder = props.placeHolder,
-      disabled = props.disabled,
-      autoFocus = props.autoFocus,
-      maxLength = props.maxLength,
-      name = props.name,
-      id = props.id,
       required = props.required,
-      _onChange = props.onChange,
-      _onFocus = props.onFocus,
-      onInputReceiveFocus = props.onInputReceiveFocus,
-      _onBlur = props.onBlur,
-      onInputLostFocus = props.onInputLostFocus,
-      _onKeyDown = props.onKeyDown,
-      _onKeyPress = props.onKeyPress,
       leftElements = props.leftElements,
       rightElements = props.rightElements,
       children = props.children,
@@ -74,23 +52,29 @@ var InputTextBase = function InputTextBase(props) {
       labelUppercase = props.labelUppercase,
       hint = props.hint,
       errorMessages = props.errorMessages,
-      visible = props.visible,
+      _props$visible = props.visible,
+      visible = _props$visible === void 0 ? true : _props$visible,
       permissionAttr = props.permissionAttr,
       onDeniedActions = props.onDeniedActions,
       handlerSetOnDenied = props.handlerSetOnDenied,
       targetRef = props.targetRef,
-      skeletonize = props.skeletonize,
+      _props$skeletonize = props.skeletonize,
+      skeletonize = _props$skeletonize === void 0 ? false : _props$skeletonize,
       style = props.style,
       styleForInputContent = props.styleForInputContent,
       styleForWrapper = props.styleForWrapper,
       styleForLabel = props.styleForLabel,
-      styleForSideButtons = props.styleForSideButtons;
+      styleForSideButtons = props.styleForSideButtons,
+      _props$disabled = props.disabled,
+      disabled = _props$disabled === void 0 ? false : _props$disabled,
+      autoFocus = props.autoFocus,
+      maxLength = props.maxLength,
+      name = props.name,
+      id = props.id,
+      _onChange = props.onChange;
+  var propsInput;
   var options = [_permissionValidations.OPTIONS_ON_DENIED.disabled, _permissionValidations.OPTIONS_ON_DENIED.unvisible, _permissionValidations.OPTIONS_ON_DENIED.readOnly, _permissionValidations.OPTIONS_ON_DENIED.hideContent];
-
-  var _useState = (0, _react.useState)(onDeniedActions || (0, _permissionValidations.actionsOnPermissionDenied)(permissionAttr, options)),
-      _useState2 = _slicedToArray(_useState, 1),
-      onDenied = _useState2[0];
-
+  var onDenied = onDeniedActions || (0, _permissionValidations.actionsOnPermissionDenied)(options, permissionAttr);
   var hideContent = onDenied.hideContent,
       unvisible = onDenied.unvisible;
   (0, _react.useEffect)(function () {
@@ -107,7 +91,7 @@ var InputTextBase = function InputTextBase(props) {
 
   var inputProps = function inputProps() {
     var disableCallbacks = shouldBeReadOnly() || shouldDisable() || hideContent;
-    var propsInput = {
+    propsInput = {
       value: hideContent ? '' : value,
       type: type,
       readOnly: shouldBeReadOnly(),
@@ -117,10 +101,13 @@ var InputTextBase = function InputTextBase(props) {
       maxLength: maxLength,
       name: name,
       id: id,
-      className: helpers.getInputClass(props),
+      className: helpers.getInputClass({
+        textAlign: textAlign,
+        readOnly: readOnly
+      }),
       ref: function ref(r) {
         if (inputRef) {
-          if (!_lodash["default"].isFunction(inputRef)) {
+          if (!_lodash.default.isFunction(inputRef)) {
             inputRef.current = r;
           } else {
             inputRef(r);
@@ -134,18 +121,22 @@ var InputTextBase = function InputTextBase(props) {
     if (!disableCallbacks) {
       propsInput = _extends({}, propsInput, {
         onFocus: function onFocus(e) {
-          onInputReceiveFocus();
-          if (_onFocus) _onFocus(e);
+          var _props$onInputReceive;
+
+          (_props$onInputReceive = props.onInputReceiveFocus) === null || _props$onInputReceive === void 0 ? void 0 : _props$onInputReceive.call(props);
+          if (props.onFocus) props.onFocus(e);
         },
         onBlur: function onBlur(e) {
-          onInputLostFocus();
-          if (_onBlur) _onBlur(e);
+          var _props$onInputLostFoc;
+
+          (_props$onInputLostFoc = props.onInputLostFocus) === null || _props$onInputLostFoc === void 0 ? void 0 : _props$onInputLostFoc.call(props);
+          if (props.onBlur) props.onBlur(e);
         },
         onKeyDown: function onKeyDown(e) {
-          if (_onKeyDown) _onKeyDown(e);
+          if (props.onKeyDown) props.onKeyDown(e);
         },
         onKeyPress: function onKeyPress(e) {
-          if (_onKeyPress) _onKeyPress(e);
+          if (props.onKeyPress) props.onKeyPress(e);
         },
         onChange: function onChange(e) {
           if (_onChange) _onChange(e);
@@ -157,138 +148,38 @@ var InputTextBase = function InputTextBase(props) {
   };
 
   if (!visible || unvisible) return null;
-  return /*#__PURE__*/_react["default"].createElement("div", {
+  return /*#__PURE__*/_react.default.createElement("div", {
     style: style,
     className: "input-base-component ".concat(skeletonize ? '-skeletonized' : '', " ").concat(customClass),
     ref: inputBaseRef
-  }, label && /*#__PURE__*/_react["default"].createElement("div", {
+  }, label && /*#__PURE__*/_react.default.createElement("div", {
     className: "labelcontainer"
-  }, /*#__PURE__*/_react["default"].createElement("span", {
+  }, /*#__PURE__*/_react.default.createElement("span", {
     style: styleForLabel,
     className: "label ".concat(customClassForLabel, " ").concat(labelUppercase && ' -uppercase')
-  }, label, required && /*#__PURE__*/_react["default"].createElement("span", {
+  }, label, required && /*#__PURE__*/_react.default.createElement("span", {
     className: "-requiredlabel"
-  }, "*"))), /*#__PURE__*/_react["default"].createElement("div", {
+  }, "*"))), /*#__PURE__*/_react.default.createElement("div", {
     "data-testid": "testInputWrapper",
     style: styleForWrapper,
     className: helpers.getInputWrapperClass(_extends({}, props, {
       disabled: shouldDisable() || hideContent
     }))
-  }, leftElements && /*#__PURE__*/_react["default"].createElement("div", {
+  }, leftElements && /*#__PURE__*/_react.default.createElement("div", {
     style: styleForSideButtons,
     className: "sidebuttons ".concat(customClassForSideButtons)
-  }, leftElements), /*#__PURE__*/_react["default"].createElement("div", {
+  }, leftElements), /*#__PURE__*/_react.default.createElement("div", {
     "data-testid": "testInputContent",
     style: styleForInputContent,
     className: "inputcontent ".concat(customClassForInputContent)
-  }, type === 'textarea' ? /*#__PURE__*/_react["default"].createElement("textarea", _extends({
+  }, type === 'textarea' ? /*#__PURE__*/_react.default.createElement("textarea", _extends({
     rows: props.rows,
     cols: props.cols
-  }, inputProps())) : /*#__PURE__*/_react["default"].createElement("input", inputProps()), children), helpers.getRightElements(rightElements, errorMessages, skeletonize)), hint && /*#__PURE__*/_react["default"].createElement("p", {
+  }, inputProps())) : /*#__PURE__*/_react.default.createElement("input", inputProps()), children), helpers.getRightElements(errorMessages || [], skeletonize, rightElements)), hint && /*#__PURE__*/_react.default.createElement("p", {
     className: "hint"
-  }, hint), helpers.getErrorMessages(errorMessages));
-};
-
-InputTextBase.propTypes = {
-  value: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
-  label: _propTypes["default"].string,
-  id: _propTypes["default"].string,
-  labelUppercase: _propTypes["default"].bool,
-  rows: _propTypes["default"].string,
-  cols: _propTypes["default"].string,
-  type: _propTypes["default"].string,
-  readOnly: _propTypes["default"].bool,
-  placeHolder: _propTypes["default"].string,
-  disabled: _propTypes["default"].bool,
-  autoFocus: _propTypes["default"].bool,
-  maxLength: _propTypes["default"].number,
-  name: _propTypes["default"].string,
-  required: _propTypes["default"].bool,
-  inputHasFocus: _propTypes["default"].bool.isRequired,
-  onInputReceiveFocus: _propTypes["default"].func.isRequired,
-  onInputLostFocus: _propTypes["default"].func.isRequired,
-  onBlur: _propTypes["default"].func,
-  onFocus: _propTypes["default"].func,
-  onChange: _propTypes["default"].func,
-  onKeyDown: _propTypes["default"].func,
-  onKeyPress: _propTypes["default"].func,
-  leftElements: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].object), _propTypes["default"].element, _propTypes["default"].object]),
-  rightElements: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].object), _propTypes["default"].element, _propTypes["default"].object]),
-  children: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].arrayOf(_propTypes["default"].element), _propTypes["default"].instanceOf(Object)]),
-  customClass: _propTypes["default"].string,
-  customClassForWrapper: _propTypes["default"].string,
-  customClassForInputContent: _propTypes["default"].string,
-  customClassForLabel: _propTypes["default"].string,
-  customClassForSideButtons: _propTypes["default"].string,
-  requiredError: _propTypes["default"].bool,
-  inputRef: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].object]),
-  inputBaseRef: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].object]),
-  hint: _propTypes["default"].string,
-  textAlign: _propTypes["default"].string,
-  rounded: _propTypes["default"].bool,
-  errorMessages: _propTypes["default"].arrayOf(_propTypes["default"].string),
-  visible: _propTypes["default"].bool,
-  permissionAttr: _propTypes["default"].oneOfType([_propTypes["default"].object, _propTypes["default"].arrayOf(_propTypes["default"].object)]),
-  onDeniedActions: _propTypes["default"].object,
-  handlerSetOnDenied: _propTypes["default"].func,
-  targetRef: _propTypes["default"].func,
-  gridLayout: _propTypes["default"].string,
-  skeletonize: _propTypes["default"].bool,
-  style: _propTypes["default"].object,
-  styleForInputContent: _propTypes["default"].object,
-  styleForWrapper: _propTypes["default"].object,
-  styleForLabel: _propTypes["default"].object,
-  styleForSideButtons: _propTypes["default"].object
-};
-InputTextBase.defaultProps = {
-  value: undefined,
-  label: undefined,
-  id: undefined,
-  labelUppercase: false,
-  type: 'text',
-  readOnly: false,
-  placeHolder: undefined,
-  disabled: false,
-  autoFocus: false,
-  maxLength: undefined,
-  name: undefined,
-  required: false,
-  onBlur: undefined,
-  onFocus: undefined,
-  onChange: undefined,
-  onKeyDown: undefined,
-  onKeyPress: undefined,
-  leftElements: null,
-  rightElements: null,
-  children: undefined,
-  customClass: '',
-  customClassForWrapper: '',
-  customClassForInputContent: '',
-  customClassForLabel: '',
-  customClassForSideButtons: '',
-  requiredError: false,
-  rows: '',
-  cols: '',
-  inputRef: undefined,
-  inputBaseRef: undefined,
-  hint: undefined,
-  textAlign: 'left',
-  rounded: false,
-  errorMessages: [],
-  visible: true,
-  permissionAttr: undefined,
-  onDeniedActions: undefined,
-  handlerSetOnDenied: undefined,
-  targetRef: undefined,
-  gridLayout: undefined,
-  skeletonize: false,
-  style: {},
-  styleForInputContent: {},
-  styleForWrapper: {},
-  styleForLabel: {},
-  styleForSideButtons: {}
+  }, hint), errorMessages && helpers.getErrorMessages(errorMessages));
 };
 
-var _default = (0, _inputHOC["default"])((0, _withTooltip["default"])(InputTextBase));
+var _default = (0, _inputHOC.default)((0, _withTooltip.default)(InputTextBase));
 
-exports["default"] = _default;
+exports.default = _default;

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

@@ -0,0 +1,14 @@
+import { IBaseProps } from './types.js';
+import 'react';
+import '../../@types/Period.js';
+import '../../@types/PermissionAttr.js';
+
+declare const getInputClass: ({ textAlign, readOnly }: {
+    textAlign?: string | undefined;
+    readOnly?: boolean | undefined;
+}) => string;
+declare const getInputWrapperClass: (props: IBaseProps) => string;
+declare const getErrorMessages: (messages: string[]) => JSX.Element;
+declare const getRightElements: (errorMessages: string[], skeletonize: boolean, rightElements?: JSX.Element | JSX.Element[]) => JSX.Element | JSX.Element[] | null;
+
+export { getErrorMessages, getInputClass, getInputWrapperClass, getRightElements };

package/lib/inputs/base/helpers.js

@@ -9,7 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _lodash = _interopRequireDefault(require("lodash"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var getInputClass = function getInputClass(_ref) {
   var textAlign = _ref.textAlign,
@@ -25,35 +25,35 @@ var getInputWrapperClass = function getInputWrapperClass(props) {
       rounded = props.rounded,
       errorMessages = props.errorMessages,
       disabled = props.disabled;
-  return "inputwrapper ".concat(inputHasFocus && ' -focusable', "\n          ").concat(customClassForWrapper, "\n          ").concat(errorMessages.length > 0 && ' -requirederror', "\n          ").concat(rounded && ' -roundedborders', "\n          ").concat(disabled && ' -disabled');
+  return "inputwrapper ".concat(inputHasFocus && ' -focusable', "\n          ").concat(customClassForWrapper, "\n          ").concat(errorMessages && errorMessages.length > 0 && ' -requirederror', "\n          ").concat(rounded && ' -roundedborders', "\n          ").concat(disabled && ' -disabled');
 };
 
 exports.getInputWrapperClass = getInputWrapperClass;
 
 var getErrorMessages = function getErrorMessages(messages) {
-  if (!messages || messages.length === 0) return /*#__PURE__*/_react["default"].createElement("noscript", null);
-  return /*#__PURE__*/_react["default"].createElement("p", {
+  if (!messages || messages.length === 0) return /*#__PURE__*/_react.default.createElement("noscript", null);
+  return /*#__PURE__*/_react.default.createElement("p", {
     className: "errormessages"
   }, messages.join(', '));
 };
 
 exports.getErrorMessages = getErrorMessages;
 
-var getRightElements = function getRightElements(rightElements, errorMessages, skeletonize) {
+var getRightElements = function getRightElements(errorMessages, skeletonize, rightElements) {
   var elements = rightElements || [];
   if (skeletonize) return null;
 
-  if (!_lodash["default"].isArray(elements)) {
+  if (!_lodash.default.isArray(elements)) {
     elements = [elements];
   }
 
   elements = elements.map(function (element, index) {
-    return element && /*#__PURE__*/_react["default"].cloneElement(element, {
+    return element && /*#__PURE__*/_react.default.cloneElement(element, {
       key: "rightelement-".concat(index + 1)
     });
   });
-  if (errorMessages.length === 0) return elements;
-  return /*#__PURE__*/_react["default"].createElement("div", {
+  if (errorMessages && errorMessages.length === 0) return elements;
+  return /*#__PURE__*/_react.default.createElement("div", {
     className: "sidebuttons"
   }, elements);
 };

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

@@ -0,0 +1,68 @@
+import { KeyboardEvent, MutableRefObject, RefObject, CSSProperties } from 'react';
+import { Period } from '../../@types/Period.js';
+import { PermissionAttr, OnDenied } from '../../@types/PermissionAttr.js';
+
+interface CustomInputEvent {
+    target: {
+        value: string;
+        name?: string;
+    };
+}
+interface IBaseProps {
+    inputHasFocus?: boolean;
+    onInputReceiveFocus?: () => void;
+    onInputLostFocus?: () => void;
+    value?: string | string[];
+    label?: string | string[];
+    id?: string;
+    labelUppercase?: boolean;
+    rows?: number;
+    cols?: number;
+    type?: string;
+    readOnly?: boolean;
+    placeHolder?: string;
+    disabled?: boolean;
+    autoFocus?: boolean;
+    maxLength?: number;
+    name?: string;
+    required?: boolean;
+    onBlur?: (e: CustomInputEvent) => void;
+    onFocus?: (e: CustomInputEvent) => void;
+    onReset?: (e: CustomInputEvent) => void;
+    onComplete?: (e: CustomInputEvent, maskValue?: string, date?: string) => void;
+    onChange?: (e: CustomInputEvent, maskValue?: string, date?: {
+        initial: string;
+        final: string;
+    }, period?: Period) => void;
+    onKeyDown?: (e: KeyboardEvent<Element>) => void;
+    onKeyPress?: (e: KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    leftElements?: JSX.Element | JSX.Element[];
+    rightElements?: JSX.Element | JSX.Element[];
+    children?: JSX.Element | JSX.Element[];
+    customClass?: string;
+    customClassForWrapper?: string;
+    customClassForInputContent?: string;
+    customClassForLabel?: string;
+    customClassForSideButtons?: string;
+    requiredError?: boolean;
+    inputRef?: MutableRefObject<HTMLInputElement | HTMLTextAreaElement | null> | ((ref: HTMLInputElement | HTMLTextAreaElement | null) => void);
+    inputBaseRef?: RefObject<HTMLDivElement> | ((ref: HTMLDivElement) => void);
+    hint?: string;
+    textAlign?: string;
+    rounded?: boolean;
+    errorMessages?: string[] | undefined;
+    visible?: boolean;
+    permissionAttr?: PermissionAttr;
+    onDeniedActions?: OnDenied;
+    handlerSetOnDenied?: (onDenied: OnDenied) => void;
+    targetRef?: (ref: HTMLDivElement | HTMLInputElement | HTMLTextAreaElement | null) => void;
+    gridLayout?: string;
+    skeletonize?: boolean;
+    style?: CSSProperties;
+    styleForInputContent?: object;
+    styleForWrapper?: object;
+    styleForLabel?: object;
+    styleForSideButtons?: object;
+}
+
+export { CustomInputEvent, IBaseProps };

package/lib/inputs/base/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -0,0 +1,7 @@
+import { IColorProps } from './types.js';
+import 'react';
+import '../../@types/PermissionAttr.js';
+
+declare const ColorPicker: (props: IColorProps) => JSX.Element;
+
+export { ColorPicker as default };

package/lib/inputs/color/index.js

@@ -1,16 +1,14 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+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
 });
-exports["default"] = void 0;
+exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _lodash = _interopRequireDefault(require("lodash"));
 
 var _text = _interopRequireDefault(require("../text"));
@@ -19,13 +17,13 @@ var _buttons = _interopRequireDefault(require("../../buttons"));
 
 require("../../assets/styles/colorpicker.scss");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+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; }
+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 _extends() { _extends = Object.assign || 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 _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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
@@ -40,11 +38,13 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 var ColorPicker = function ColorPicker(props) {
-  var value = props.value,
+  var _props$asTextField = props.asTextField,
+      asTextField = _props$asTextField === void 0 ? true : _props$asTextField,
+      _props$value = props.value,
+      value = _props$value === void 0 ? '#aaaaaa' : _props$value,
       onChange = props.onChange,
-      asTextField = props.asTextField,
-      name = props.name,
-      onButtonClick = props.onButtonClick;
+      onButtonClick = props.onButtonClick,
+      name = props.name;
 
   var _useState = (0, _react.useState)(value),
       _useState2 = _slicedToArray(_useState, 2),
@@ -53,12 +53,25 @@ var ColorPicker = function ColorPicker(props) {
 
   var inputRef = (0, _react.useRef)(null);
 
-  var debouncedOnChange = _lodash["default"].debounce(function (func, e) {
+  var debouncedOnChange = _lodash.default.debounce(function (func, e) {
     func(e);
   }, 300);
 
   var onInputChange = function onInputChange(e) {
-    setColor(e.target.value);
+    var target = e.target;
+    setColor(target.value);
+
+    if (onChange) {
+      // Nota: A aplicação desta regra é limitada a projetos usando React 16 ou
+      // inferior porque o pool de eventos foi removido no React 17. CORRIGIR
+      // e.persist();
+      debouncedOnChange(onChange, e);
+    }
+  };
+
+  var onInputChangeDefault = function onInputChangeDefault(e) {
+    var target = e.target;
+    setColor(target.value);
 
     if (onChange) {
       e.persist();
@@ -67,22 +80,24 @@ var ColorPicker = function ColorPicker(props) {
   };
 
   var onPaletteButtonClick = function onPaletteButtonClick() {
-    inputRef.current.click();
+    if (inputRef.current) inputRef.current.click();
   };
 
   (0, _react.useEffect)(function () {
     setColor(value);
   }, [value]);
-  return asTextField ? /*#__PURE__*/_react["default"].createElement(_text["default"], _extends({}, props, {
+  return asTextField ? /*#__PURE__*/_react.default.createElement(_text.default, _extends({}, props, {
     value: color,
-    onChange: onInputChange,
-    leftElements: [/*#__PURE__*/_react["default"].createElement("div", {
+    onChange: function onChange(e) {
+      if (e) onInputChange(e);
+    },
+    leftElements: [/*#__PURE__*/_react.default.createElement("div", {
       key: "colorMirror",
       className: "colorpicker-colormirror",
       style: {
         background: color
       }
-    }), /*#__PURE__*/_react["default"].createElement("input", {
+    }), /*#__PURE__*/_react.default.createElement("input", {
       key: "inputColor",
       className: "colorpicker-hideinputcolor",
       ref: inputRef,
@@ -90,42 +105,29 @@ var ColorPicker = function ColorPicker(props) {
       defaultValue: color,
       name: name,
       onClick: function onClick(e) {
-        return onButtonClick ? onButtonClick(e) : null;
+        return onButtonClick ? onButtonClick(e) : undefined;
       },
-      onInput: onInputChange
+      onInput: onInputChangeDefault
     })],
-    rightElements: /*#__PURE__*/_react["default"].createElement(_buttons["default"], {
+    rightElements: /*#__PURE__*/_react.default.createElement(_buttons.default, {
       className: "colorpicker-palettebutton",
       key: "palettebutton",
       onClick: onPaletteButtonClick,
       iconName: "pallete",
       boxShadow: false
     })
-  })) : /*#__PURE__*/_react["default"].createElement("input", {
+  })) : /*#__PURE__*/_react.default.createElement("input", {
     key: "inputColor",
     name: name,
     ref: inputRef,
     type: "color",
     defaultValue: color,
     onClick: function onClick(e) {
-      return onButtonClick ? onButtonClick(e) : null;
+      return onButtonClick ? onButtonClick(e) : undefined;
     },
-    onInput: onInputChange
+    onInput: onInputChangeDefault
   });
 };
 
-ColorPicker.propTypes = {
-  asTextField: _propTypes["default"].bool,
-  value: _propTypes["default"].string,
-  onChange: _propTypes["default"].func.isRequired,
-  onButtonClick: _propTypes["default"].func,
-  name: _propTypes["default"].string
-};
-ColorPicker.defaultProps = {
-  asTextField: true,
-  value: '#aaaaaa',
-  name: undefined,
-  onButtonClick: undefined
-};
 var _default = ColorPicker;
-exports["default"] = _default;
+exports.default = _default;

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

@@ -0,0 +1,14 @@
+import { MouseEvent } from 'react';
+import { PermissionAttr } from '../../@types/PermissionAttr.js';
+
+interface IColorProps {
+    onChange?: () => void;
+    asTextField?: boolean;
+    value?: string;
+    onButtonClick?: (e: MouseEvent<HTMLInputElement>) => void;
+    name?: string;
+    permissionAttr?: PermissionAttr;
+    visible?: boolean;
+}
+
+export { IColorProps };