linear-react-components-ui 1.1.20-rc.2 → 1.1.20

package/lib/inputs/date/index.js

@@ -6,23 +6,19 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _moment = _interopRequireDefault(require("moment"));
-var _BaseMask = _interopRequireDefault(require("../mask/BaseMask"));
+var _Dialog = _interopRequireDefault(require("./Dialog"));
 var _Dropdown = _interopRequireDefault(require("./Dropdown"));
-var _calendar = _interopRequireDefault(require("../../calendar"));
-require("../../assets/styles/datepicker.scss");
-var contants = _interopRequireWildcard(require("../../internals/constants"));
 var _buttons = _interopRequireDefault(require("../../buttons"));
-var _icons = _interopRequireDefault(require("../../icons"));
-var _Dialog = _interopRequireDefault(require("./Dialog"));
+var _gridlayout = _interopRequireDefault(require("../../gridlayout"));
+var _calendar = _interopRequireDefault(require("../../calendar"));
+var _BaseMask = _interopRequireDefault(require("../mask/BaseMask"));
 var _helpers = require("./helpers");
+require("../../assets/styles/datepicker.scss");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-const CALENDAR_BUTTON_WIDTH = 24;
-const CALENDAR_MIN_WIDTH = 250;
 const DatePicker = props => {
-  var _window;
   const {
     showButtonOpen = true,
     openOnFocus = true,
@@ -34,69 +30,97 @@ const DatePicker = props => {
     name = '',
     inputRef: inputRefProp,
     dialogSize = {
-      width: '350px',
-      height: '350px'
-    }
+      width: '384px',
+      height: '384px'
+    },
+    gridLayout,
+    shouldCloseOnEsc = true
   } = props;
   const [valueState, setValueState] = (0, _react.useState)(value ? (0, _helpers.getMomentValue)(value) : undefined);
-  const [valueFromProps, setValueFromProps] = (0, _react.useState)(value);
   const [showCalendar, setShowCalendar] = (0, _react.useState)(false);
+  const [valueFromProps, setValueFromProps] = (0, _react.useState)(value);
   const [inputDimensions, setInputDimensions] = (0, _react.useState)();
-  const [formatedLeftPosition, setFormatedLeftPosition] = (0, _react.useState)();
+  const [calendarOnDialog, setCalendarOnDialog] = (0, _react.useState)(false);
   const [onDenied, setOnDenied] = (0, _react.useState)({
     disabled: false,
     readOnly: false,
     unvisible: false,
     hideContent: false
   });
-  const inputRef = (0, _react.useRef)();
+  const inputDateRef = (0, _react.useRef)();
   const buttonOpenRef = (0, _react.useRef)();
   const dropdownContainer = (0, _react.useRef)();
-  const [insideDropdown, setInsideDropdown] = (0, _react.useState)(false);
+  const currentDateButtonRef = (0, _react.useRef)();
+  const calendarContainerRef = (0, _react.useRef)(null);
+  const datePickerContainerRef = (0, _react.useRef)(null);
   const onScreenResize = () => {
-    var _inputRef$current;
-    setInputDimensions(inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.getBoundingClientRect());
+    setInputDimensions(inputDateRef?.current?.getBoundingClientRect());
   };
-  const onClickOutside = event => {
-    var _buttonOpenRef$curren;
-    const {
-      target
-    } = event;
-    if (!dropdownContainer || target === inputRef.current || target === buttonOpenRef.current) return;
-    if (target !== dropdownContainer.current && dropdownContainer && dropdownContainer.current && !dropdownContainer.current.contains(target) && buttonOpenRef && !(buttonOpenRef !== null && buttonOpenRef !== void 0 && (_buttonOpenRef$curren = buttonOpenRef.current) !== null && _buttonOpenRef$curren !== void 0 && _buttonOpenRef$curren.contains(target))) {
+  const onCloseDateDialog = () => {
+    setShowCalendar(false);
+    if (showCalendarInDialog) {
+      setTimeout(() => {
+        setCalendarOnDialog(false);
+        inputDateRef.current?.focus();
+      }, 100);
+    }
+  };
+  const onCloseWithoutBlur = event => {
+    const focusOnAnotherField = !datePickerContainerRef.current?.contains(event.relatedTarget);
+    if (!showCalendarInDialog && showCalendar && focusOnAnotherField) {
       setShowCalendar(false);
     }
   };
+  const onKeyDownPress = event => {
+    if (shouldCloseOnEsc && showCalendar && event && event.key && event.key === 'Escape') {
+      event.preventDefault();
+      setShowCalendar(false);
+      inputDateRef.current?.focus();
+    }
+    if (showCalendar && showCalendarInDialog && event && event.key && event.key === 'Tab') {
+      const buttonForNavigateCalendar = calendarContainerRef.current?.getElementsByClassName('navbutton');
+      const datePicked = calendarContainerRef.current?.getElementsByClassName('-selectedday');
+      const buttonDatePicked = datePicked[0].firstChild;
+      const buttonsForFocus = Array.from([...buttonForNavigateCalendar, buttonDatePicked]);
+      const firstElement = buttonsForFocus[0];
+      const lastElement = buttonsForFocus[buttonsForFocus.length - 1];
+      if (event.shiftKey && document.activeElement === firstElement) {
+        event.preventDefault();
+        lastElement.focus();
+      } else if (!event.shiftKey && document.activeElement === lastElement) {
+        event.preventDefault();
+        firstElement.focus();
+      }
+    }
+    event.stopPropagation();
+  };
+  const keepPositionCalendarByScroll = () => {
+    const inputDateDimensions = inputDateRef.current?.getBoundingClientRect();
+    const positionTop = inputDateDimensions && inputDateDimensions.bottom;
+    if (dropdownContainer && dropdownContainer.current && inputDateDimensions) {
+      dropdownContainer.current.style.top = String(positionTop).concat('px');
+    }
+  };
   const openCalendar = () => {
     setShowCalendar(true);
-    if (inputRef.current) {
-      setInputDimensions(inputRef.current.getBoundingClientRect());
+    if (inputDateRef.current) {
+      inputDateRef.current.focus();
+      setInputDimensions(inputDateRef.current?.getBoundingClientRect());
     }
-  };
-  const onMouseMove = event => {
-    const {
-      target
-    } = event;
-    setInsideDropdown(false);
-    if (dropdownContainer !== undefined && dropdownContainer.current) {
-      if (target === dropdownContainer.current || dropdownContainer.current.contains(target)) {
-        setInsideDropdown(true);
-      }
+    if (showCalendarInDialog) {
+      setTimeout(() => {
+        currentDateButtonRef.current?.focus();
+      }, 100);
     }
   };
   const onInputFocus = e => {
     if (props.onFocus) props.onFocus(e);
-    if (openOnFocus) openCalendar();
+    if (openOnFocus && !showCalendar && !calendarOnDialog) {
+      openCalendar();
+    }
   };
   const onInputBlur = e => {
     if (props.onBlur) props.onBlur(e);
-    if (!insideDropdown) setShowCalendar(false);
-  };
-  const onInputKeyDown = event => {
-    if (Number(event.code) === contants.keyCodes.TAB) {
-      setInsideDropdown(false);
-      setShowCalendar(false);
-    }
   };
   const isValidDate = date => {
     if (typeof date === 'object' && !(date instanceof Date)) {
@@ -109,8 +133,7 @@ const DatePicker = props => {
   const onInputChange = function (event) {
     let valueInput = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
     if (typeof valueInput === 'string') {
-      var _event$target$value;
-      const date = (_event$target$value = event.target.value) !== null && _event$target$value !== void 0 ? _event$target$value : '';
+      const date = event.target.value ?? '';
       if (props.onChange) {
         if (isValidDate(date)) {
           const newValue = (0, _moment.default)(date, _helpers.PT_BR_FORMAT).format(_helpers.EN_US_FORMAT);
@@ -135,11 +158,8 @@ const DatePicker = props => {
       }
     }
   };
-  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();
+  const setValue = (valueParam, e) => {
+    if (showCalendar && setFocusOnSelect) inputDateRef.current?.focus();
     if (props.onComplete) props.onComplete(e, valueParam);
     if (props.onChange) onInputChange({
       target: {
@@ -154,70 +174,51 @@ const DatePicker = props => {
   const getButtonOpen = () => {
     if (!showButtonOpen) return undefined;
     return /*#__PURE__*/_react.default.createElement(_buttons.default, {
-      key: "button-1313414141",
-      boxShadow: false,
-      icon: /*#__PURE__*/_react.default.createElement(_icons.default, {
-        name: "calendar",
-        size: 16
-      }),
+      key: "button-open-date-picker",
+      disabled: shouldDisable(),
+      tabIndex: -1,
+      customClass: "calendar-button",
+      iconName: "calendar",
+      title: showCalendar ? 'Fechar Calendário' : 'Abrir Calendário',
       onClick: () => {
-        openCalendar();
+        if (showCalendar) {
+          setShowCalendar(false);
+        } else openCalendar();
       },
-      customClass: "calendar-button",
-      tabIndex: -1,
       targetRef: ref => {
         buttonOpenRef.current = ref;
-      },
-      disabled: shouldDisable()
+      }
     });
   };
   const getCalendar = (valueCalendar, calendarColorStyle) => /*#__PURE__*/_react.default.createElement(_calendar.default, {
+    colorStyle: calendarColorStyle,
     currentDate: valueCalendar !== undefined ? valueCalendar : (0, _moment.default)(),
     onDateChange: date => {
       setValue(date.format(_helpers.PT_BR_FORMAT), undefined);
+      if (showCalendarInDialog) setCalendarOnDialog(false);
     },
-    colorStyle: calendarColorStyle
+    currentDateButton: buttonElement => currentDateButtonRef.current = buttonElement,
+    calendarContainer: calendarContainer => {
+      calendarContainerRef.current = calendarContainer;
+    }
   });
-  const getWrapperComponent = () => {
+  const getCalendarComponent = () => {
     if (onDenied && onDenied.readOnly) return null;
     if (showCalendarInDialog) {
       return /*#__PURE__*/_react.default.createElement(_Dialog.default, {
         dialogSize: dialogSize,
-        handlerClose: setShowCalendar
-      }, getCalendar(valueState, props === null || props === void 0 ? void 0 : props.calendarColorStyle));
+        handlerClose: onCloseDateDialog
+      }, getCalendar(valueState, props?.calendarColorStyle));
     }
     return /*#__PURE__*/_react.default.createElement(_Dropdown.default, {
-      topPosition: inputDimensions ? inputDimensions.top + inputDimensions.height + 5 : '',
-      leftPosition: inputDimensions ? formatedLeftPosition : '',
-      minWidth: CALENDAR_MIN_WIDTH,
-      width: inputDimensions ? inputDimensions.width + (showButtonOpen ? CALENDAR_BUTTON_WIDTH : 0) : '',
+      showButtonOpen: showButtonOpen,
+      inputDimensions: inputDimensions,
+      containerRef: datePickerContainerRef,
       dropdownRef: el => {
         dropdownContainer.current = el;
       }
-    }, getCalendar(valueState, props === null || props === void 0 ? void 0 : props.calendarColorStyle));
+    }, getCalendar(valueState, props?.calendarColorStyle));
   };
-  (0, _react.useEffect)(() => {
-    const screenWidth = window.innerWidth;
-    if (inputDimensions && screenWidth < inputDimensions.left + CALENDAR_MIN_WIDTH) {
-      setFormatedLeftPosition(inputDimensions.left - (CALENDAR_MIN_WIDTH - inputDimensions.width - CALENDAR_BUTTON_WIDTH));
-    } else {
-      setFormatedLeftPosition(inputDimensions === null || inputDimensions === void 0 ? void 0 : inputDimensions.left);
-    }
-  }, [(_window = window) === null || _window === void 0 ? void 0 : _window.innerWidth, inputDimensions]);
-  (0, _react.useEffect)(() => {
-    window.addEventListener('resize', onScreenResize);
-    document.addEventListener('click', onClickOutside);
-    document.addEventListener('mousemove', onMouseMove);
-    if (inputRef.current) onScreenResize();
-    return () => {
-      window.removeEventListener('resize', onScreenResize);
-      document.removeEventListener('click', onClickOutside);
-      document.removeEventListener('mousemove', onMouseMove);
-    };
-
-    // TODO: Procurar solução melhor.
-    // setTimeout(() => { this.onScreenResize(); }, 300);
-  }, [inputRef.current]);
   (0, _react.useEffect)(() => {
     if (value && (0, _moment.default)(value, _helpers.EN_US_FORMAT).format() !== 'Invalid date' && (0, _moment.default)(valueFromProps, _helpers.EN_US_FORMAT).format() !== (0, _moment.default)(value, _helpers.EN_US_FORMAT).format()) {
       setValueState((0, _moment.default)(value, _helpers.EN_US_FORMAT));
@@ -227,31 +228,56 @@ const DatePicker = props => {
       setValueFromProps(value);
     }
   }, [value]);
+  (0, _react.useEffect)(() => {
+    window.addEventListener('resize', onScreenResize);
+    document.addEventListener('keydown', onKeyDownPress);
+    if (inputDateRef.current) onScreenResize();
+    if (showCalendar && showCalendarInDialog) setCalendarOnDialog(true);
+    return () => {
+      window.removeEventListener('resize', onScreenResize);
+      document.removeEventListener('keydown', onKeyDownPress);
+    };
+  }, [inputDateRef.current, showCalendar]);
+  (0, _react.useEffect)(() => {
+    document.addEventListener('scroll', keepPositionCalendarByScroll);
+    document.getElementById('modal-dialog-content')?.addEventListener('scroll', keepPositionCalendarByScroll);
+    return () => {
+      document.removeEventListener('scroll', keepPositionCalendarByScroll);
+      document.getElementById('modal-dialog-content')?.removeEventListener('scroll', keepPositionCalendarByScroll);
+    };
+  }, []);
   if (onDenied && onDenied.unvisible) return null;
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_BaseMask.default, _extends({}, props, {
+  const component = () => /*#__PURE__*/_react.default.createElement("div", {
+    ref: datePickerContainerRef,
+    onBlur: onCloseWithoutBlur,
+    className: "datepicker-container"
+  }, /*#__PURE__*/_react.default.createElement(_BaseMask.default, _extends({}, props, {
+    gridLayout: undefined,
     value: !valueState ? ' ' : valueState.format(_helpers.PT_BR_FORMAT),
     mask: "00/00/0000",
-    onComplete: e => {
-      if (e) {
-        var _e$target;
-        setValue((_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.maskedValue, e);
+    onComplete: (e, date) => {
+      if (date) {
+        setValue(date, e);
       }
     },
     onBlur: onInputBlur,
     onFocus: e => {
       onInputFocus(e);
     },
-    onKeyDown: onInputKeyDown,
-    onChange: (e, __, date) => {
-      if (date) onInputChange(e, e.target.value);
+    onChange: (e, date) => {
+      if (date) onInputChange(e, date);
     },
     inputRef: el => {
-      inputRef.current = el;
+      inputDateRef.current = el;
       if (inputRefProp) inputRefProp.current = el;
     },
     rightElements: getButtonOpen(),
     required: required,
     handlerSetOnDenied: () => setOnDenied(onDenied)
-  })), showCalendar && getWrapperComponent());
+  })), showCalendar && getCalendarComponent());
+  return !gridLayout ? component() : /*#__PURE__*/_react.default.createElement(_gridlayout.default, {
+    customClass: "-withinput",
+    cols: gridLayout
+  }, component());
 };
 var _default = exports.default = DatePicker;

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

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { ReactNode, RefObject } from 'react';
 import { ColorStyles } from '../../@types/ColorStyles.js';
 import { PermissionAttr } from '../../@types/PermissionAttr.js';
 import { CustomInputEvent } from '../base/types.js';
@@ -9,10 +9,11 @@ import '../../@types/Position.js';
 
 interface IDatePickerProps {
     value?: string;
+    openOnFocus?: boolean;
     showButtonOpen?: boolean;
+    shouldCloseOnEsc?: boolean;
     shouldCloseOnSelect?: boolean;
     setFocusOnSelect?: boolean;
-    openOnFocus?: boolean;
     showCalendarInDialog?: boolean;
     inputRef?: React.MutableRefObject<HTMLInputElement | HTMLTextAreaElement | null>;
     dialogSize?: {
@@ -37,6 +38,7 @@ interface IDatePickerProps {
     disabled?: boolean;
     permissionAttr?: PermissionAttr;
     label?: string;
+    gridLayout?: string;
     hint?: string | string[];
     hintPosition?: 'below' | 'onLabelRight';
     themePopover?: 'light' | 'dark';
@@ -45,10 +47,9 @@ interface IDatePickerProps {
 interface IDateDropdownProps {
     children: ReactNode | ReactNode[];
     dropdownRef: (el: HTMLDivElement) => void;
-    topPosition: number | string;
-    leftPosition?: number | string;
-    width: number | string;
-    minWidth: number | string;
+    containerRef: RefObject<HTMLDivElement | HTMLElement>;
+    showButtonOpen: boolean;
+    inputDimensions?: DOMRect;
 }
 interface IDateDialogProps {
     children: ReactNode | ReactNode[];

package/lib/inputs/errorMessage/index.js

@@ -19,7 +19,7 @@ const ErrorMessage = exports.ErrorMessage = /*#__PURE__*/(0, _react.forwardRef)(
   return /*#__PURE__*/_react.default.createElement("p", {
     ref: ref,
     style: style,
-    className: "errormessages-component ".concat(customClass)
+    className: `errormessages-component ${customClass}`
   }, messages.join(', '));
 });
 ErrorMessage.displayName = 'ErrorMessage';

package/lib/inputs/file/DefaultFile.js

@@ -27,16 +27,16 @@ const DefaultFile = props => {
     hint = [],
     onChange
   } = props;
-  const getFilesList = files => !(files !== null && files !== void 0 && files.length) ? [] : _lodash.default.map(files, file => file);
+  const getFilesList = files => !files?.length ? [] : _lodash.default.map(files, file => file);
   const [fileList, setFileList] = (0, _react.useState)(defaultFiles);
   const ifExistFiles = fileList instanceof Array && fileList.length > 0;
   const popUpDescription = () => /*#__PURE__*/_react.default.createElement("div", {
-    className: "size-position-icon ".concat(!ifExistFiles ? '-disabled-popover' : '')
+    className: `size-position-icon ${!ifExistFiles ? '-disabled-popover' : ''}`
   }, /*#__PURE__*/_react.default.createElement(_popover.default, {
     iconSize: 16
   }, /*#__PURE__*/_react.default.createElement(_popover.PopoverText, null, /*#__PURE__*/_react.default.createElement("strong", null, "Arquivos"), /*#__PURE__*/_react.default.createElement("br", null), ifExistFiles && fileList.map(file => /*#__PURE__*/_react.default.createElement("div", {
     className: "list-simple-file",
-    key: "".concat(file.name).concat(file.size)
+    key: `${file.name}${file.size}`
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "file-name"
   }, /*#__PURE__*/_react.default.createElement("span", null, file.name)))))));
@@ -55,11 +55,10 @@ const DefaultFile = props => {
     })
   });
   const handleChange = e => {
-    var _e$preventDefault;
-    (_e$preventDefault = e.preventDefault) === null || _e$preventDefault === void 0 ? void 0 : _e$preventDefault.call(e);
+    e.preventDefault?.();
     const files = getFilesList(e.target.files);
     setFileList(files);
-    onChange === null || onChange === void 0 ? void 0 : onChange(files, e);
+    onChange?.(files, e);
   };
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "input-simple-file-container"

package/lib/inputs/file/DragDropFile.js

@@ -15,7 +15,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-const getFilesList = files => !(files !== null && files !== void 0 && files.length) ? [] : _lodash.default.map(files, file => file);
+const getFilesList = files => !files?.length ? [] : _lodash.default.map(files, file => file);
 const getAcceptFilesLabel = valueAccept => valueAccept.split(',').map(value => value.includes('.') ? value.split('.')[1] : value.split('/')[1]).join(', ');
 const getAcceptFilesWithoutRemoveText = value => value.split(', ');
 const DragDropFile = props => {
@@ -49,9 +49,8 @@ const DragDropFile = props => {
     error: false
   });
   const handleDrag = e => {
-    var _e$preventDefault, _e$stopPropagation;
-    (_e$preventDefault = e.preventDefault) === null || _e$preventDefault === void 0 ? void 0 : _e$preventDefault.call(e);
-    (_e$stopPropagation = e.stopPropagation) === null || _e$stopPropagation === void 0 ? void 0 : _e$stopPropagation.call(e);
+    e.preventDefault?.();
+    e.stopPropagation?.();
   };
   const checkTypeNotAccept = (types, getTypesArray, e) => {
     setTypeNotAccept(false);
@@ -72,7 +71,7 @@ const DragDropFile = props => {
       setMessage({
         class: 'disapprovedFile',
         text: 'Por favor, verifique a extensão do(s) arquivo(s) inserido(s).',
-        subtitle: "Apenas as extens\xF5es ".concat(getAcceptFilesLabel(accept), " s\xE3o permitidas."),
+        subtitle: `Apenas as extensões ${getAcceptFilesLabel(accept)} são permitidas.`,
         error: true
       });
     } else {
@@ -102,7 +101,7 @@ const DragDropFile = props => {
     checkTypeNotAccept(arrayTypes, getTypesArray, e);
     handleDrag(e);
     setDragActive(true);
-    onDragEnter === null || onDragEnter === void 0 ? void 0 : onDragEnter(e);
+    onDragEnter?.(e);
   };
   const handleDragLeave = e => {
     setMessage({
@@ -113,11 +112,11 @@ const DragDropFile = props => {
     });
     handleDrag(e);
     setDragActive(false);
-    onDragLeave === null || onDragLeave === void 0 ? void 0 : onDragLeave(e);
+    onDragLeave?.(e);
   };
   const handleDragOver = e => {
     handleDrag(e);
-    onDragOver === null || onDragOver === void 0 ? void 0 : onDragOver(e);
+    onDragOver?.(e);
   };
   const handleDrop = e => {
     handleDrag(e);
@@ -135,8 +134,8 @@ const DragDropFile = props => {
           return !ids.includes(name, index + 1);
         });
         setFileList(filtered);
-        onChange === null || onChange === void 0 ? void 0 : onChange(files, e);
-        onDrop === null || onDrop === void 0 ? void 0 : onDrop(e);
+        onChange?.(files, e);
+        onDrop?.(e);
       }
     }
     setMessage({
@@ -147,8 +146,7 @@ const DragDropFile = props => {
     });
   };
   const handleChange = e => {
-    var _e$preventDefault2;
-    (_e$preventDefault2 = e.preventDefault) === null || _e$preventDefault2 === void 0 ? void 0 : _e$preventDefault2.call(e);
+    e.preventDefault?.();
     const files = getFilesList(e.target.files);
     if (files.length > 0 && !typeNotAccept) {
       const fileNoRepeat = fileList.concat(files);
@@ -160,7 +158,7 @@ const DragDropFile = props => {
         return !ids.includes(name, index + 1);
       });
       setFileList(filesFiltered);
-      onChange === null || onChange === void 0 ? void 0 : onChange(files, e);
+      onChange?.(files, e);
     }
   };
   const onButtonClickRemoveAll = () => setFileList([]);
@@ -168,7 +166,7 @@ const DragDropFile = props => {
     setFileList(prevState => prevState.filter(file => file.name !== fileName));
   };
   const generateListArray = () => {
-    if ((fileList === null || fileList === void 0 ? void 0 : fileList.length) === 1) {
+    if (fileList?.length === 1) {
       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])
@@ -186,7 +184,7 @@ const DragDropFile = props => {
     return /*#__PURE__*/_react.default.createElement("ul", {
       className: "file-list"
     }, fileList.length > 0 && fileList.map(file => /*#__PURE__*/_react.default.createElement("li", {
-      key: "".concat(file.name).concat(file.size),
+      key: `${file.name}${file.size}`,
       className: "file-card"
     }, /*#__PURE__*/_react.default.createElement(_buttons.DangerButton, {
       transparent: true,
@@ -214,9 +212,9 @@ const DragDropFile = props => {
     onDragEnter: handleDragEnter,
     onSubmit: e => e.preventDefault()
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "drag-content ".concat(skeletonize ? '-skeletonized' : '')
+    className: `drag-content ${skeletonize ? '-skeletonized' : ''}`
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(message.class, " ").concat(!skeletonize ? 'content' : '')
+    className: `${message.class} ${!skeletonize ? 'content' : ''}`
   }, message.error || fileList.length === 0 ? /*#__PURE__*/_react.default.createElement("label", {
     htmlFor: id
   }, /*#__PURE__*/_react.default.createElement("h1", {

package/lib/inputs/file/File.js

@@ -26,8 +26,7 @@ const File = _ref => {
     rest = _objectWithoutProperties(_ref, _excluded);
   const inputFileRef = (0, _react.useRef)(null);
   const onBtnClickInsert = () => {
-    var _inputFileRef$current;
-    (_inputFileRef$current = inputFileRef.current) === null || _inputFileRef$current === void 0 ? void 0 : _inputFileRef$current.click();
+    inputFileRef.current?.click();
   };
   const onBtnClickRemove = () => {
     if (inputFileRef.current) {
@@ -36,10 +35,10 @@ const File = _ref => {
     if (onBtnClickRemoveProp) onBtnClickRemoveProp();
   };
   (0, _react.useEffect)(() => {
-    if (inputFileRef !== null && inputFileRef !== void 0 && inputFileRef.current && defaultFiles) {
+    if (inputFileRef?.current && defaultFiles) {
       inputFileRef.current.files = (0, _helpers.transformFilesToFileList)(defaultFiles);
     }
-  }, [inputFileRef === null || inputFileRef === void 0 ? void 0 : inputFileRef.current]);
+  }, [inputFileRef?.current]);
   const component = applyDragDrop ? /*#__PURE__*/_react.default.createElement(_DragDropFile.default, _extends({}, rest, {
     defaultFiles: defaultFiles,
     inputRef: inputFileRef,

package/lib/inputs/mask/BaseMask.js

@@ -149,11 +149,10 @@ const BaseMask = _ref => {
     }
   });
   (0, _react.useEffect)(() => {
-    var _numberToPtBR;
     if (typeof valueProp === 'number') {
       if (String(valueProp).trim().length > 0) setTypedValue(valueProp);else setTypedValue(0);
     }
-    setValue((_numberToPtBR = (0, _format_number.numberToPtBR)(valueProp)) !== null && _numberToPtBR !== void 0 ? _numberToPtBR : '');
+    setValue((0, _format_number.numberToPtBR)(valueProp) ?? '');
   }, [valueProp]);
   return /*#__PURE__*/_react.default.createElement(_InputTextBase.default, _extends({
     inputRef: r => {

package/lib/inputs/multiSelect/Dropdown.js

@@ -16,17 +16,16 @@ function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 const returnDropdownDynamicStyles = (selectFieldRef, dropdownMaxHeight) => {
-  var _selectFieldRef$curre, _selectFieldRef$curre2, _selectFieldRef$curre3;
-  const selectFieldRects = selectFieldRef === null || selectFieldRef === void 0 ? void 0 : (_selectFieldRef$curre = selectFieldRef.current) === null || _selectFieldRef$curre === void 0 ? void 0 : _selectFieldRef$curre.getBoundingClientRect();
-  const bottom = selectFieldRects !== null && selectFieldRects !== void 0 && selectFieldRects.bottom ? selectFieldRects === null || selectFieldRects === void 0 ? void 0 : selectFieldRects.bottom : 0;
-  const offsetTop = selectFieldRef !== null && selectFieldRef !== void 0 && (_selectFieldRef$curre2 = selectFieldRef.current) !== null && _selectFieldRef$curre2 !== void 0 && _selectFieldRef$curre2.offsetTop ? selectFieldRef === null || selectFieldRef === void 0 ? void 0 : (_selectFieldRef$curre3 = selectFieldRef.current) === null || _selectFieldRef$curre3 === void 0 ? void 0 : _selectFieldRef$curre3.offsetTop : 0;
+  const selectFieldRects = selectFieldRef?.current?.getBoundingClientRect();
+  const bottom = selectFieldRects?.bottom ? selectFieldRects?.bottom : 0;
+  const offsetTop = selectFieldRef?.current?.offsetTop ? selectFieldRef?.current?.offsetTop : 0;
   const dropdownBottomDistance = window.innerHeight - bottom;
   let maxDropdownBottomDistance = 200;
   let height = dropdownMaxHeight;
   let dropdownPosition;
   if (!height || height <= 0) {
     if (dropdownBottomDistance < maxDropdownBottomDistance) {
-      height = selectFieldRects !== null && selectFieldRects !== void 0 && selectFieldRects.top ? selectFieldRects.top : 0;
+      height = selectFieldRects?.top ? selectFieldRects.top : 0;
       dropdownPosition = window.innerHeight - offsetTop + 10;
     } else {
       height = dropdownBottomDistance;
@@ -38,8 +37,8 @@ const returnDropdownDynamicStyles = (selectFieldRef, dropdownMaxHeight) => {
     }
   }
   return {
-    maxHeight: "".concat(height - 30, "px"),
-    bottom: "".concat(dropdownPosition, "px")
+    maxHeight: `${height - 30}px`,
+    bottom: `${dropdownPosition}px`
   };
 };
 const Dropdown = props => {
@@ -103,11 +102,11 @@ const Dropdown = props => {
     customClass: "checkboxicon"
   }), /*#__PURE__*/_react.default.createElement("span", {
     className: "label"
-  }, inputValue !== '' ? 'Selecionar todos pesquisados' : 'Selecionar Todos'))), dataCombo === null || dataCombo === void 0 ? void 0 : dataCombo.map(item => {
+  }, inputValue !== '' ? 'Selecionar todos pesquisados' : 'Selecionar Todos'))), dataCombo?.map(item => {
     const isChecked = selecteds ? selecteds.find(selected => selected[idKey] === item[idKey]) : undefined;
     return /*#__PURE__*/_react.default.createElement("div", {
-      key: "dropdowmItem ".concat(item[idKey], "}"),
-      className: "item ".concat(isChecked && '-selected')
+      key: `dropdowmItem ${item[idKey]}}`,
+      className: `item ${isChecked && '-selected'}`
     }, /*#__PURE__*/_react.default.createElement("button", {
       className: "menubutton",
       tabIndex: -1,

package/lib/inputs/multiSelect/helper.js

@@ -11,11 +11,10 @@ const getFilteredDataCombo = _ref => {
     inputText
   } = _ref;
   return dataSource.filter(item => {
-    var _descriptionKey;
     if (typeof descriptionKey === 'string') {
       return item[descriptionKey].toLowerCase().indexOf(inputText.toLowerCase()) > -1;
     }
-    return ((_descriptionKey = descriptionKey(item)) === null || _descriptionKey === void 0 ? void 0 : _descriptionKey.toLowerCase().indexOf(inputText.toLowerCase())) > -1;
+    return descriptionKey(item)?.toLowerCase().indexOf(inputText.toLowerCase()) > -1;
   });
 };
 var _default = exports.default = getFilteredDataCombo;