linear-react-components-ui 1.1.15-beta.1 → 1.1.15-beta.2

package/lib/dialog/form/index.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.FormDialogContext = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var uuid = _interopRequireWildcard(require("uuid"));
 var _base = _interopRequireDefault(require("../base"));
 var _Header = _interopRequireDefault(require("../base/Header"));
 var _index = require("../../buttons/index");
@@ -66,18 +65,15 @@ const ModalForm = props => {
     icon: props.icon
   })), /*#__PURE__*/_react.default.createElement(_Content.default, {
     styleForContent: _objectSpread(_objectSpread({}, props.styleForContent), overlayStyle)
-  }, content || children), getSpinner(), showFooter && props.buttons && props.buttons.length > 0 && /*#__PURE__*/_react.default.createElement(_Footer.default, null, /*#__PURE__*/_react.default.createElement(_index.ButtonContainer, _extends({}, props, {
+  }, content || children), getSpinner(), showFooter && props.buttons && /*#__PURE__*/_react.default.createElement(_Footer.default, null, /*#__PURE__*/_react.default.createElement(_index.ButtonContainer, _extends({}, props, {
     style: _objectSpread({}, overlayStyle)
-  }), props.buttons.map(button => {
+  }), _react.default.Children.toArray(props.buttons.map(button => {
     if (context && context.securityBeforeUnload && button && button.type && button.type.name === 'CancelButton') {
       return /*#__PURE__*/_react.default.cloneElement(button, {
-        key: "button-".concat(uuid.v1()),
         onClick: props.handlerClose
       });
     }
-    return /*#__PURE__*/_react.default.cloneElement(button, {
-      key: "button-".concat(uuid.v1())
-    });
-  })))));
+    return /*#__PURE__*/_react.default.cloneElement(button);
+  }))))));
 };
 var _default = exports.default = (0, _withFormSecurity.default)(ModalForm);

package/lib/form/FieldNumber.js

@@ -24,9 +24,11 @@ const getEventProps = _ref => {
     validators,
     onBlur,
     onKeyDown,
+    onChange,
     handlerFieldValidade,
     handlerFieldChange,
-    handleShowValidateMessages
+    handleShowValidateMessages,
+    component
   } = _ref;
   return {
     onBlur: e => {
@@ -37,11 +39,20 @@ const getEventProps = _ref => {
     },
     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);
         handleShowValidateMessages(true);
       }
+    },
+    onChange: e => {
+      if ((component === null || component === void 0 ? void 0 : component.name) === 'NumberField') {
+        if (validators && e.target && handlerFieldValidade) {
+          handlerFieldValidade(name, e.target.value, validators);
+          handleShowValidateMessages(true);
+        }
+        if (handlerFieldChange) handlerFieldChange(e);
+        if (onChange) onChange(e);
+      }
     }
   };
 };

package/lib/form/types.d.ts

@@ -90,6 +90,7 @@ interface IFieldProps extends WithFieldProps {
     themePopover?: 'light' | 'dark';
     popoverAlign?: 'right' | 'left';
     displayCurrencySymbol?: boolean;
+    removeZeroLeft?: boolean;
 }
 interface CustomEvent {
     target: {
@@ -185,6 +186,7 @@ interface WithFieldProps {
     handlerStoreValidators?: (name: string, validators: Validator | Validator[]) => void;
     handlerRemoveValidators?: (name: string) => void;
     validators?: Validator | Validator[] | PeriodValidator | PeriodValidator[];
+    customClass?: string;
 }
 interface IWithFieldContext {
     validatorFromComponent: Validator | Validator[] | undefined;
@@ -215,6 +217,7 @@ interface IEventParams {
     handlerFieldChange?: (event: ChangeEvent<HTMLInputElement> | CustomKeyboardEvent) => void;
     validatorFromComponent?: Validator | Validator[];
     handleShowValidateMessages: (value: boolean) => void;
+    component?: ComponentType<any>;
 }
 interface IGetErrorMessagesParams {
     name: string;

package/lib/inputs/base/InputTextBase.js

@@ -68,6 +68,7 @@ const InputTextBase = props => {
     onDragOver,
     onDrop,
     onDragLeave,
+    onClick,
     readOnlyClass,
     autoComplete = 'on',
     themePopover = 'light',
@@ -120,7 +121,7 @@ const InputTextBase = props => {
     };
     if (!disableCallbacks) {
       propsInput = _objectSpread(_objectSpread({}, propsInput), {}, {
-        onFocus(e) {
+        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);
@@ -147,6 +148,9 @@ const InputTextBase = props => {
         },
         onDragLeave: e => {
           if (onDragLeave) onDragLeave(e);
+        },
+        onClick: e => {
+          if (onClick) onClick(e);
         }
       });
     }

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

@@ -1,4 +1,4 @@
-import { MutableRefObject, KeyboardEvent, DragEvent, RefObject, CSSProperties } from 'react';
+import { MutableRefObject, MouseEvent, KeyboardEvent, DragEvent, RefObject, CSSProperties } from 'react';
 import { TextAlign } from '../../@types/Align.js';
 import { Period } from '../../@types/Period.js';
 import { PermissionAttr, OnDenied } from '../../@types/PermissionAttr.js';
@@ -27,7 +27,7 @@ interface InputLabelProps extends WithTooltipProps {
     required?: boolean;
     targetRef?: (ref: HTMLSpanElement | null) => void;
     labelRef?: MutableRefObject<HTMLSpanElement | null>;
-    onHoverLabel?: (e: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void;
+    onHoverLabel?: React.MouseEventHandler<HTMLSpanElement>;
 }
 interface IBaseProps {
     inputHasFocus?: boolean;
@@ -47,6 +47,7 @@ interface IBaseProps {
     maxLength?: number;
     name?: string;
     required?: boolean;
+    onClick?: (event: MouseEvent) => void;
     onBlur?: (e: CustomInputEvent) => void;
     onFocus?: (e: CustomInputEvent) => void;
     onReset?: (e: CustomInputEvent) => void;

package/lib/inputs/date/helpers.js

@@ -20,8 +20,8 @@ const getCalendarDropdownStyle = _ref => {
 exports.getCalendarDropdownStyle = getCalendarDropdownStyle;
 const getMomentValue = value => {
   let newValue = value;
-  if ((0, _moment.default)(newValue, PT_BR_FORMAT).isValid()) {
-    newValue = (0, _moment.default)(newValue, PT_BR_FORMAT).format(EN_US_FORMAT);
+  if ((0, _moment.default)(newValue, PT_BR_FORMAT, true).isValid()) {
+    newValue = (0, _moment.default)(newValue, PT_BR_FORMAT).format(PT_BR_FORMAT);
   }
   return typeof newValue === 'string' ? (0, _moment.default)(newValue, EN_US_FORMAT) : newValue;
 };

package/lib/inputs/date/index.js

@@ -135,8 +135,10 @@ const DatePicker = props => {
       }
     }
   };
-  const setValue = (valueParam, e) => {
+  const setValue = function () {
     var _inputRef$current2;
+    let valueParam = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+    let e = arguments.length > 1 ? arguments[1] : undefined;
     if (showCalendar && setFocusOnSelect) (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.focus();
     if (props.onComplete) props.onComplete(e, valueParam);
     if (props.onChange) onInputChange({
@@ -228,11 +230,11 @@ const DatePicker = props => {
   if (onDenied && onDenied.unvisible) return null;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_BaseMask.default, _extends({}, props, {
     value: !valueState ? ' ' : valueState.format(_helpers.PT_BR_FORMAT),
-    isDateField: true,
     mask: "00/00/0000",
-    onComplete: (e, __, date) => {
-      if (date) {
-        setValue(date, e);
+    onComplete: e => {
+      if (e) {
+        var _e$target;
+        setValue((_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.maskedValue, e);
       }
     },
     onBlur: onInputBlur,
@@ -241,7 +243,7 @@ const DatePicker = props => {
     },
     onKeyDown: onInputKeyDown,
     onChange: (e, __, date) => {
-      if (date) onInputChange(e, date);
+      if (date) onInputChange(e, e.target.value);
     },
     inputRef: el => {
       inputRef.current = el;

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

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

package/lib/inputs/mask/BaseMask.js

@@ -10,7 +10,7 @@ var _format_number = require("../number/format_number");
 var _reactImask = require("react-imask");
 var _permissionValidations = require("../../permissionValidations");
 var _helpers = require("./helpers");
-const _excluded = ["value", "defaultValue", "inputRef", "onChange", "onComplete", "permissionAttr"];
+const _excluded = ["value", "defaultValue", "inputRef", "onChange", "onComplete", "permissionAttr", "mask"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -68,9 +68,9 @@ const getEventProps = (props, setValue, maskRef) => {
         } = e.target;
         const formatedValue = (0, _format_number.formatOnlyNumbers)(value);
         const eventWithFormatedValue = _objectSpread(_objectSpread({}, e), {}, {
-          target: {
+          target: _objectSpread(_objectSpread({}, e.target), {}, {
             value: formatedValue
-          }
+          })
         });
         const formattedEvent = returnEventFormattedValue(props, eventWithFormatedValue);
         props.onBlur(formattedEvent);
@@ -101,7 +101,8 @@ const BaseMask = _ref => {
       inputRef,
       onChange,
       onComplete,
-      permissionAttr
+      permissionAttr,
+      mask
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded);
   const onDenied = (0, _permissionValidations.actionsOnPermissionDenied)(options, permissionAttr);
@@ -110,10 +111,13 @@ const BaseMask = _ref => {
     readOnly
   } = onDenied;
   const disableCallbacks = disabled || readOnly;
-  const maskOptions = (0, _helpers.getMaskOptions)(rest);
+  const maskOptions = (0, _helpers.getMaskOptions)(_objectSpread({
+    mask
+  }, rest));
   const {
     ref,
     setValue,
+    setTypedValue,
     maskRef
   } = (0, _reactImask.useIMask)(maskOptions, {
     defaultValue: defaultValue,
@@ -146,18 +150,14 @@ const BaseMask = _ref => {
   });
   (0, _react.useEffect)(() => {
     if (valueProp) {
-      setValue(String(valueProp));
+      if (typeof valueProp === 'string') setValue(valueProp);else setTypedValue(valueProp);
     }
   }, [valueProp]);
   return /*#__PURE__*/_react.default.createElement(_InputTextBase.default, _extends({
     inputRef: r => {
       ref.current = r;
       if (inputRef) {
-        if (typeof inputRef === 'function') {
-          inputRef(r);
-        } else {
-          inputRef.current = r;
-        }
+        if (typeof inputRef === 'object') inputRef.current = r;else inputRef(r);
       }
     },
     permissionAttr: permissionAttr

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

@@ -7,20 +7,16 @@ import '../../@types/Period.js';
 import '../../internals/types.js';
 import '../../@types/Position.js';
 
-declare const getMaskOptions: ({ isDateField, placeholderChar, min, max, lazy, rightElements, ...rest }: IBaseMaskProps) => {
-    value?: string | undefined;
+declare const getMaskOptions: ({ isDateField, placeholderChar, min, max, lazy, pattern, radix, thousandsSeparator, mapToRadix, scale, normalizeZeros, padFractionalZeros, rightElements, ...rest }: IBaseMaskProps) => {
+    value?: string | number | undefined;
     onBlur?: ((e: CustomInputEvent) => void) | undefined;
     onKeyDown?: ((e: CustomInputEvent | React.KeyboardEvent<Element>) => void) | undefined;
     defaultValue?: string | undefined;
     isNumeric?: boolean | undefined;
-    scale?: number | undefined;
-    radix?: string | undefined;
     blocks?: any;
-    thousandsSeparator?: string | undefined;
     leftElements?: JSX.Element | JSX.Element[] | undefined;
     handlerSetOnDenied?: ((onDeniedValue: OnDenied) => void) | undefined;
     onChange?: ((e: CustomInputEvent, maskValue?: string | undefined, date?: string | undefined) => void) | undefined;
-    padFractionalZeros?: boolean | undefined;
     onComplete?: ((e: CustomInputEvent, maskValue?: string | undefined, date?: string | undefined) => void) | undefined;
     inputRef?: React.MutableRefObject<HTMLInputElement | HTMLTextAreaElement | null> | ((ref: HTMLInputElement | HTMLTextAreaElement | null) => void) | undefined;
     permissionAttr?: PermissionAttr | undefined;
@@ -52,7 +48,14 @@ declare const getMaskOptions: ({ isDateField, placeholderChar, min, max, lazy, r
     placeholderChar: string;
     min: any;
     max: any;
-    lazy: boolean | undefined;
+    lazy: boolean;
+    pattern: string;
+    radix: string;
+    thousandsSeparator: string;
+    mapToRadix: string[];
+    scale: number;
+    normalizeZeros: boolean;
+    padFractionalZeros: boolean;
 };
 declare function CPFValidation(cpf?: string, returnMessage?: (msg: string) => void): void | "CPF inválido";
 declare function CNPJValidation(cnpj?: string, returnMessage?: (msg: string) => void): void | "CNPJ inválido";

package/lib/inputs/mask/helpers.js

@@ -7,7 +7,7 @@ exports.CNPJValidation = CNPJValidation;
 exports.CPFValidation = CPFValidation;
 exports.getMaskOptions = void 0;
 var _lodash = require("lodash");
-const _excluded = ["isDateField", "placeholderChar", "min", "max", "lazy", "rightElements"];
+const _excluded = ["isDateField", "placeholderChar", "min", "max", "lazy", "pattern", "radix", "thousandsSeparator", "mapToRadix", "scale", "normalizeZeros", "padFractionalZeros", "rightElements"];
 /* eslint-disable @typescript-eslint/no-explicit-any */
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -23,7 +23,14 @@ const getMaskOptions = _ref => {
       placeholderChar = '_',
       min,
       max,
-      lazy,
+      lazy = false,
+      pattern = '',
+      radix = ' ',
+      thousandsSeparator = '',
+      mapToRadix = [],
+      scale = 2,
+      normalizeZeros = true,
+      padFractionalZeros = true,
       rightElements
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded);
@@ -63,7 +70,14 @@ const getMaskOptions = _ref => {
     placeholderChar: placeholderChar === '' ? ' ' : placeholderChar,
     min,
     max,
-    lazy
+    lazy,
+    pattern,
+    radix,
+    thousandsSeparator,
+    mapToRadix,
+    scale,
+    normalizeZeros,
+    padFractionalZeros
   }, rest);
 };
 exports.getMaskOptions = getMaskOptions;

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

@@ -7,7 +7,7 @@ import '../../internals/types.js';
 import '../../@types/Position.js';
 
 type IBaseMaskProps = {
-    value?: string;
+    value?: string | number;
     onBlur?: (e: CustomInputEvent) => void;
     onKeyDown?: (e: CustomInputEvent | KeyboardEvent<Element>) => void;
     defaultValue?: string;
@@ -54,6 +54,9 @@ type IBaseMaskProps = {
     hintPosition?: 'below' | 'onLabelRight';
     themePopover?: 'light' | 'dark';
     popoverAlign?: 'right' | 'left';
+    pattern?: string;
+    mapToRadix?: string[];
+    normalizeZeros?: boolean;
 };
 type ICnpjFieldProps = IBaseMaskProps & {
     value?: string;

package/lib/inputs/number/index.js

@@ -16,30 +16,49 @@ Object.defineProperty(exports, "DecimalField", {
   }
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _BaseMask = _interopRequireDefault(require("../mask/BaseMask"));
+var _react = _interopRequireWildcard(require("react"));
 var _Currency = _interopRequireDefault(require("./Currency"));
 var _Decimal = _interopRequireDefault(require("./Decimal"));
 require("../../assets/styles/numbers.scss");
-var _format_number = require("./format_number");
+var _InputTextBase = _interopRequireDefault(require("../base/InputTextBase"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _extends() { _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); }
 const NumberField = props => {
   const {
     textAlign = 'left',
     value = '',
     themePopover = 'light',
-    popoverAlign = 'left'
+    popoverAlign = 'left',
+    removeZeroLeft = true,
+    min,
+    max
   } = props;
-  return /*#__PURE__*/_react.default.createElement(_BaseMask.default, _extends({
-    value: typeof value === 'number' ? (0, _format_number.numberToPtBR)(value) : value,
+  const [numberValue, setNumberValue] = (0, _react.useState)();
+  const onChange = event => {
+    const inputValue = event.target.value;
+    const numericValue = inputValue.replace(/\D/g, '');
+    if (min && parseInt(numericValue, 10) < min || max && parseInt(numericValue, 10) > max) {
+      return;
+    }
+    if (removeZeroLeft && numericValue.charAt(0) === '0' && numericValue.length > 1) {
+      setNumberValue(numericValue.substring(1));
+    } else {
+      setNumberValue(numericValue);
+    }
+    if (props.onChange) props.onChange(event);
+  };
+  (0, _react.useEffect)(() => {
+    if (value && !numberValue) setNumberValue(value.toString());
+  }, [value]);
+  return /*#__PURE__*/_react.default.createElement(_InputTextBase.default, _extends({}, props, {
+    value: numberValue,
     textAlign: textAlign,
-    mask: Number,
     themePopover: themePopover,
     popoverAlign: popoverAlign,
-    isNumeric: true,
-    scale: 0,
-    padFractionalZeros: false
-  }, props));
+    onChange: onChange,
+    type: "number"
+  }));
 };
 var _default = exports.default = NumberField;

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

@@ -1,8 +1,8 @@
 import { PermissionAttr } from '../../@types/PermissionAttr.js';
 import { CustomInputEvent } from '../base/types.js';
 import { IMaskHOCProps } from '../types.js';
+import { TextAlign } from '../../@types/Align.js';
 import 'react';
-import '../../@types/Align.js';
 import '../../@types/Period.js';
 import '../../internals/types.js';
 import '../../@types/Position.js';
@@ -15,25 +15,25 @@ interface INumberFieldProps extends IMaskHOCProps {
     value?: string;
     permissionAttr?: PermissionAttr;
     disabled?: boolean;
-    onChange?: (e?: CustomInputEvent | InputEvent, maskValue?: string, date?: string | {
-        initial: string;
-        final: string;
-    }) => void;
     hint?: string | string[];
     hintPosition?: 'below' | 'onLabelRight';
     themePopover?: 'light' | 'dark';
     popoverAlign?: 'right' | 'left';
+    onChange?: (e?: CustomInputEvent) => void;
+    removeZeroLeft?: boolean;
+    textAlign?: TextAlign;
 }
-interface IBaseNumberProps extends INumberFieldProps {
-    value?: string;
-    leftElements?: JSX.Element | JSX.Element[];
-    onBlur?: (e: CustomInputEvent) => void;
+interface IBaseNumberProps extends IMaskHOCProps {
     returnFormattedValueOnBlur?: boolean;
     returnFormattedValueOnKeyDown?: boolean;
 }
-interface ICurrencyProps extends INumberFieldProps {
+interface ICurrencyProps extends IMaskHOCProps {
     currencySymbol?: string;
     displayCurrencySymbol?: boolean;
+    hint?: string | string[];
+    hintPosition?: 'below' | 'onLabelRight';
+    themePopover?: 'light' | 'dark';
+    popoverAlign?: 'right' | 'left';
 }
 
 export { IBaseNumberProps, ICurrencyProps, INumberFieldProps };

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

@@ -46,6 +46,7 @@ const MultipleSelect = props => {
   const gridElRef = (0, _react.useRef)();
   const inputTextRef = (0, _react.useRef)(null);
   const descriptionKeyIsString = typeof descriptionKey === 'string';
+  const insideComponents = ['item', 'menubutton', 'filterinput', 'filtercontainer', 'label', 'actionbutton'];
   const onScreenResize = () => {
     if (selectWrapper.current) setDropdownWidth(selectWrapper.current.clientWidth);
   };
@@ -53,7 +54,7 @@ const MultipleSelect = props => {
     const {
       target
     } = event;
-    if (target !== selectWrapper.current && selectWrapper.current && !selectWrapper.current.contains(target) && dropdownRef.current && !dropdownRef.current.contains(target)) {
+    if (!insideComponents.includes(target.className) && target !== selectWrapper.current && selectWrapper.current && !selectWrapper.current.contains(target) && dropdownRef.current && !dropdownRef.current.contains(target)) {
       setOpened(false);
     }
   };
@@ -93,34 +94,37 @@ const MultipleSelect = props => {
       setInputValue([filteredValue]);
     }
   };
+  const onFocus = () => {
+    const dropdownWidthFocus = selectWrapper.current ? selectWrapper.current.clientWidth : dropdownWidth;
+    setOpened(true);
+    setDropdownWidth(dropdownWidthFocus);
+  };
   const onSelect = select => {
+    var _dropdownRef$current2;
     if (select === null) return;
     const currentsSelect = [...currents, select];
     setCurrents(currentsSelect);
     setDataCombo(dataSource);
     setInputValue([]);
     if (inputTextRef && inputTextRef.current) inputTextRef.current.focus();
-    setOpened(false);
     if (props.onSelect) setSelected(props.onSelect(currentsSelect.map(i => i[idKey])));
+    (_dropdownRef$current2 = dropdownRef.current) === null || _dropdownRef$current2 === void 0 ? void 0 : _dropdownRef$current2.focus();
   };
   const onUnselect = id => {
     if (currents) {
+      var _dropdownRef$current3;
       const result = currents.filter(item => item[idKey] !== id);
       setCurrents(result);
       if (inputTextRef && inputTextRef.current) inputTextRef.current.focus();
       setOpened(false);
       if (props.onSelect) setSelected(props.onSelect(result.map(i => i[idKey])));
+      (_dropdownRef$current3 = dropdownRef.current) === null || _dropdownRef$current3 === void 0 ? void 0 : _dropdownRef$current3.focus();
     }
   };
   const onOpenClose = () => {
     setOpened(prevState => !prevState);
     if (selectWrapper.current) setDropdownWidth(selectWrapper.current.clientWidth);
   };
-  const onFocus = () => {
-    const dropdownWidthFocus = selectWrapper.current ? selectWrapper.current.clientWidth : dropdownWidth;
-    setOpened(true);
-    setDropdownWidth(dropdownWidthFocus);
-  };
   const onBlur = e => {
     if (props.onBlur) props.onBlur(e);
     if (!insideComponent) {
@@ -130,30 +134,36 @@ const MultipleSelect = props => {
   };
   const onInputKeyDown = e => {
     if (e.keyCode) {
-      if (e.keyCode === constants.keyCodes.ENTER && selected) {
+      if (e.keyCode === constants.keyCodes.ENTER && selected && opened) {
         var _e$preventDefault;
         (_e$preventDefault = e.preventDefault) === null || _e$preventDefault === void 0 ? void 0 : _e$preventDefault.call(e);
-        if (!currents.includes(selected)) onSelect(selected);
+        if (!currents.some(current => current[idKey] === selected[idKey])) {
+          var _e$preventDefault2;
+          (_e$preventDefault2 = e.preventDefault) === null || _e$preventDefault2 === void 0 ? void 0 : _e$preventDefault2.call(e);
+          onSelect(selected);
+        }
       } else if ([constants.keyCodes.ARROW_UP, constants.keyCodes.ARROW_DOWN].includes(e.keyCode)) {
         if (!opened) setOpened(true);
-        let index = dataSource ? dataSource.findIndex(d => d === selected) : 0;
+        let index = dataCombo ? dataCombo.findIndex(d => d === selected) : 0;
         if (e.keyCode === constants.keyCodes.ARROW_DOWN) {
-          index = dataSource && index === dataSource.length - 1 ? 0 : index + 1;
+          index = dataCombo && index === dataCombo.length - 1 ? 0 : index + 1;
         } else {
-          index = dataSource && index === 0 ? dataSource.length - 1 : index - 1;
+          index = dataCombo && index === 0 ? dataCombo.length - 1 : index - 1;
         }
-        if (dataSource && dataSource.length) {
-          if (descriptionKeyIsString && dataSource[index][descriptionKey]) {
-            setInputValue(dataSource[index][descriptionKey]);
-          } else if (!descriptionKeyIsString) setInputValue([descriptionKey(dataSource[index])]);
+        if (dataCombo && dataCombo.length) {
+          if (descriptionKeyIsString && dataCombo[index][descriptionKey]) {
+            setInputValue(dataCombo[index][descriptionKey]);
+          } else if (!descriptionKeyIsString) setInputValue([descriptionKey(dataCombo[index])]);
         }
-        if (dataSource) setSelected(dataSource[index]);
+        if (dataCombo) setSelected(dataCombo[index]);
       } else if (e.keyCode === constants.keyCodes.BACKSPACE) {
         if (inputValue.length === 0) {
           const currentsKeyDown = _lodash.default.dropRight(currents);
           setCurrents(currentsKeyDown);
           if (props.onSelect) props.onSelect(currentsKeyDown.map(i => i[idKey]));
         }
+      } else if (e.keyCode === constants.keyCodes.TAB) {
+        setOpened(false);
       }
     }
   };
@@ -225,6 +235,7 @@ const MultipleSelect = props => {
     onChange: e => {
       if (e) onFilter(e.target.value);
     },
+    onClick: onFocus,
     onKeyDown: onInputKeyDown,
     customClassForWrapper: "selectwrapper ".concat((props.readOnly || shouldDisable() || shouldBeReadOnly()) && ' -undigitable'),
     customClassForInputContent: "multiselect",

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

@@ -112,6 +112,7 @@ const SimpleSelect = props => {
     }
   };
   const onSelect = selectedDropdown => {
+    var _dropdownRef$current4;
     if (!selectedDropdown) return;
     setSelected(selectedDropdown);
     if (descriptionKeyIsString) setInputText(selectedDropdown[descriptionKey]);else setInputText(descriptionKey(selectedDropdown));
@@ -121,6 +122,7 @@ const SimpleSelect = props => {
       if (inputTextRef && inputTextRef.current) inputTextRef.current.focus();
       setOpened(false);
     });
+    (_dropdownRef$current4 = dropdownRef.current) === null || _dropdownRef$current4 === void 0 ? void 0 : _dropdownRef$current4.focus();
   };
   const onOpenClose = () => {
     setOpened(prevState => !prevState);
@@ -155,7 +157,7 @@ const SimpleSelect = props => {
   };
   const onInputKeyDown = e => {
     if (e.keyCode) {
-      if (e.keyCode === constants.keyCodes.ENTER && selected) {
+      if (e.keyCode === constants.keyCodes.ENTER && selected && opened) {
         var _e$preventDefault;
         (_e$preventDefault = e.preventDefault) === null || _e$preventDefault === void 0 ? void 0 : _e$preventDefault.call(e);
         onSelect(selected);
@@ -264,6 +266,7 @@ const SimpleSelect = props => {
     onChange: e => {
       if (e) onFilter(e.target.value);
     },
+    onClick: onFocus,
     onKeyDown: onInputKeyDown,
     customClassForWrapper: "selectwrapper ".concat((undigitable || searchOnDropdown || shouldBeReadOnly()) && ' -undigitable'),
     customClassForInputContent: "multiselect",

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

@@ -93,6 +93,9 @@ interface IMultipleSelectProps extends Omit<ISimpleSelectProps, 'idKey' | 'value
     handlerClear?: () => void;
     disabled?: boolean;
     gridLayout?: string;
+    hintPosition?: 'below' | 'onLabelRight';
+    themePopover?: 'light' | 'dark';
+    popoverAlign?: 'right' | 'left';
 }
 interface ISelectedsMultipleProps {
     idKey: string;

package/lib/inputs/types.d.ts

@@ -20,7 +20,7 @@ interface ISearchProps extends IBaseProps {
     resetButton?: boolean;
     onReset?: (event?: CustomInputEvent) => void;
     onChange?: (event?: CustomInputEvent) => void;
-    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    onClick?: (event: MouseEvent<Element>) => void;
     textAlign?: TextAlign;
     disabled?: boolean;
     readOnly?: boolean;
@@ -54,10 +54,7 @@ interface IMaskHOCProps {
     unmask?: boolean;
     name?: string;
     commit?: () => void;
-    onChange?: (event: CustomInputEvent, maskValue?: string, date?: string | {
-        initial: string;
-        final: string;
-    }) => void;
+    onChange?: (event: CustomInputEvent, maskValue?: string, date?: string) => void;
     onFocus?: (e: CustomInputEvent) => void;
     onComplete?: (e: CustomInputEvent, maskValue?: string, date?: string) => void;
     inputRef?: MutableRefObject<HTMLInputElement | HTMLTextAreaElement | null> | ((ref: HTMLInputElement | HTMLTextAreaElement | null) => void);
@@ -112,6 +109,7 @@ interface IDropdownSelectProps {
     handleOnKeydown: (e: CustomInputEvent | KeyboardEvent) => void;
     handleOnBlur: (item: DataCombo) => void;
     handleOnFocus: () => void;
+    handlerSelecionadoAgora?: (bool: boolean) => void;
     opened: boolean;
     dropdownRef: MutableRefObject<HTMLDivElement | null>;
     dataCombo: DataCombo[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "linear-react-components-ui",
-  "version": "1.1.15-beta.1",
+  "version": "1.1.15-beta.2",
   "description": "Linear Sistemas ReactJs Components",
   "main": "lib/index.js",
   "module": "lib/index.cjs",
@@ -67,6 +67,7 @@
     "@babel/preset-typescript": "7.23.3",
     "@svgr/webpack": "8.1.0",
     "@swc/core": "1.4.13",
+    "@testing-library/dom": "10.4.0",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "14.1.2",
     "@testing-library/user-event": "14.4.3",