linear-react-components-ui 1.1.20-beta.33 → 1.1.20-beta.34

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

@@ -0,0 +1,100 @@
+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';
+import { WithTooltipProps } from '../../internals/types.js';
+import '../../@types/Position.js';
+
+interface CustomInputEvent {
+    preventDefault?: () => void;
+    stopPropagation?: () => void;
+    dataTransfer?: DataTransfer;
+    keyCode?: number;
+    code?: number;
+    target: {
+        value: string;
+        maskedValue?: string;
+        typedValue?: number | Date | null;
+        name?: string;
+        files?: FileList | null;
+    };
+}
+interface InputLabelProps extends WithTooltipProps {
+    label?: string | string[];
+    customClassForLabel?: string;
+    styleForLabel?: object;
+    labelUppercase?: boolean;
+    required?: boolean;
+    targetRef?: (ref: HTMLSpanElement | null) => void;
+    labelRef?: MutableRefObject<HTMLSpanElement | null>;
+    onHoverLabel?: React.MouseEventHandler<HTMLSpanElement>;
+}
+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;
+    onClick?: (event: MouseEvent) => void;
+    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: CustomInputEvent | KeyboardEvent) => void;
+    onKeyPress?: (e: KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    onDragOver?: (e: DragEvent<HTMLInputElement | HTMLTextAreaElement | HTMLDivElement>) => void;
+    onDrop?: (e: DragEvent) => void;
+    onDragLeave?: (e: DragEvent) => 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 | string[];
+    hintPosition?: 'below' | 'onLabelRight';
+    textAlign?: TextAlign;
+    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;
+    accept?: string;
+    multiple?: boolean;
+    readOnlyClass?: string;
+    autoComplete?: 'on' | 'off';
+    themePopover?: 'light' | 'dark';
+    popoverAlign?: 'right' | 'left';
+}
+
+export { CustomInputEvent, IBaseProps, InputLabelProps };

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

@@ -0,0 +1,95 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _lodash = _interopRequireDefault(require("lodash"));
+var _text = _interopRequireDefault(require("../text"));
+var _buttons = _interopRequireDefault(require("../../buttons"));
+require("../../assets/styles/colorpicker.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 ColorPicker = props => {
+  const {
+    asTextField = true,
+    value = '#aaaaaa',
+    onChange,
+    onButtonClick,
+    name
+  } = props;
+  const [color, setColor] = (0, _react.useState)(value);
+  const inputRef = (0, _react.useRef)(null);
+  const debouncedOnChange = _lodash.default.debounce((func, e) => {
+    func(e);
+  }, 300);
+  const onInputChange = e => {
+    const {
+      target
+    } = e;
+    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);
+    }
+  };
+  const onInputChangeDefault = e => {
+    const {
+      target
+    } = e;
+    setColor(target.value);
+    if (onChange) {
+      e.persist();
+      debouncedOnChange(onChange, e);
+    }
+  };
+  const onPaletteButtonClick = () => {
+    if (inputRef.current) inputRef.current.click();
+  };
+  (0, _react.useEffect)(() => {
+    setColor(value);
+  }, [value]);
+  return asTextField ? /*#__PURE__*/_react.default.createElement(_text.default, _extends({}, props, {
+    value: color,
+    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", {
+      key: "inputColor",
+      className: "colorpicker-hideinputcolor",
+      ref: inputRef,
+      type: "color",
+      defaultValue: color,
+      name: name,
+      onClick: e => onButtonClick ? onButtonClick(e) : undefined,
+      onInput: onInputChangeDefault
+    })],
+    rightElements: /*#__PURE__*/_react.default.createElement(_buttons.default, {
+      className: "colorpicker-palettebutton",
+      key: "palettebutton",
+      onClick: onPaletteButtonClick,
+      iconName: "pallete",
+      boxShadow: false
+    })
+  })) : /*#__PURE__*/_react.default.createElement("input", {
+    key: "inputColor",
+    name: name,
+    ref: inputRef,
+    type: "color",
+    defaultValue: color,
+    onClick: e => onButtonClick ? onButtonClick(e) : undefined,
+    onInput: onInputChangeDefault
+  });
+};
+var _default = exports.default = ColorPicker;

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

@@ -0,0 +1,19 @@
+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;
+    label?: string;
+    hint?: string | string[];
+    hintPosition?: 'below' | 'onLabelRight';
+    themePopover?: 'light' | 'dark';
+    popoverAlign?: 'right' | 'left';
+}
+
+export { IColorProps };

package/lib/inputs/color/types.js

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

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

@@ -0,0 +1,13 @@
+import { IDateDialogProps } from './types.js';
+import 'react';
+import '../../@types/ColorStyles.js';
+import '../../@types/PermissionAttr.js';
+import '../base/types.js';
+import '../../@types/Align.js';
+import '../../@types/Period.js';
+import '../../internals/types.js';
+import '../../@types/Position.js';
+
+declare const Dialog: ({ handlerClose, children, dialogSize }: IDateDialogProps) => JSX.Element;
+
+export { Dialog as default };

package/lib/inputs/date/Dialog.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _base = _interopRequireDefault(require("../../dialog/base"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Dialog = _ref => {
+  let {
+    handlerClose,
+    children,
+    dialogSize
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_base.default, {
+    width: dialogSize.width,
+    height: dialogSize.height,
+    onOpenChange: handlerClose,
+    closeOnOutsideClick: true,
+    closeOnEsc: true,
+    wrapperClassName: ""
+  }, children);
+};
+var _default = exports.default = Dialog;

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

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { IDateDropdownProps } from './types.js';
+import '../../@types/ColorStyles.js';
+import '../../@types/PermissionAttr.js';
+import '../base/types.js';
+import '../../@types/Align.js';
+import '../../@types/Period.js';
+import '../../internals/types.js';
+import '../../@types/Position.js';
+
+declare const Dropdown: (props: IDateDropdownProps) => React.ReactPortal;
+
+export { Dropdown as default };

package/lib/inputs/date/Dropdown.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _reactDom = _interopRequireDefault(require("react-dom"));
+var _helpers = require("./helpers");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const body = document.getElementsByTagName('body')[0];
+const Dropdown = props => {
+  const {
+    dropdownRef,
+    children
+  } = props;
+  const elementRef = (0, _react.useRef)(document.createElement('div'));
+  (0, _react.useEffect)(() => {
+    elementRef.current.className = 'datepicker-component';
+    elementRef.current.setAttribute('style', (0, _helpers.getCalendarDropdownStyle)(props));
+    body.appendChild(elementRef.current);
+    dropdownRef(elementRef.current);
+    return () => {
+      body.removeChild(elementRef.current);
+    };
+  }, []);
+  (0, _react.useEffect)(() => {
+    elementRef.current.setAttribute('style', (0, _helpers.getCalendarDropdownStyle)(props));
+  }, [props]);
+  return /*#__PURE__*/_reactDom.default.createPortal(children, elementRef.current);
+};
+var _default = exports.default = Dropdown;

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

@@ -0,0 +1,17 @@
+import moment from 'moment';
+import { IDateDropdownProps } from './types.js';
+import 'react';
+import '../../@types/ColorStyles.js';
+import '../../@types/PermissionAttr.js';
+import '../base/types.js';
+import '../../@types/Align.js';
+import '../../@types/Period.js';
+import '../../internals/types.js';
+import '../../@types/Position.js';
+
+declare const PT_BR_FORMAT = "DD/MM/YYYY";
+declare const EN_US_FORMAT = "YYYY-MM-DD";
+declare const getCalendarDropdownStyle: ({ topPosition, leftPosition, width, minWidth, }: IDateDropdownProps) => string;
+declare const getMomentValue: (value: string) => moment.Moment;
+
+export { EN_US_FORMAT, PT_BR_FORMAT, getCalendarDropdownStyle, getMomentValue };

package/lib/inputs/date/helpers.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getMomentValue = exports.getCalendarDropdownStyle = exports.PT_BR_FORMAT = exports.EN_US_FORMAT = void 0;
+var _moment = _interopRequireDefault(require("moment"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const PT_BR_FORMAT = exports.PT_BR_FORMAT = 'DD/MM/YYYY';
+const EN_US_FORMAT = exports.EN_US_FORMAT = 'YYYY-MM-DD';
+const getCalendarDropdownStyle = _ref => {
+  let {
+    topPosition,
+    leftPosition,
+    width,
+    minWidth
+  } = _ref;
+  return `top: ${topPosition}px;
+  left: ${leftPosition}px;
+  width: ${width}px;
+  min-width: ${minWidth}px;`;
+};
+exports.getCalendarDropdownStyle = getCalendarDropdownStyle;
+const getMomentValue = value => {
+  let newValue = value;
+  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;
+};
+exports.getMomentValue = getMomentValue;

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

@@ -0,0 +1,13 @@
+import { IDatePickerProps } from './types.js';
+import 'react';
+import '../../@types/ColorStyles.js';
+import '../../@types/PermissionAttr.js';
+import '../base/types.js';
+import '../../@types/Align.js';
+import '../../@types/Period.js';
+import '../../internals/types.js';
+import '../../@types/Position.js';
+
+declare const DatePicker: (props: IDatePickerProps) => JSX.Element | null;
+
+export { DatePicker as default };

package/lib/inputs/date/index.js

@@ -0,0 +1,251 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _moment = _interopRequireDefault(require("moment"));
+var _BaseMask = _interopRequireDefault(require("../mask/BaseMask"));
+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 _helpers = require("./helpers");
+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 => {
+  const {
+    showButtonOpen = true,
+    openOnFocus = true,
+    shouldCloseOnSelect = true,
+    setFocusOnSelect = true,
+    showCalendarInDialog = false,
+    required = false,
+    value = '',
+    name = '',
+    inputRef: inputRefProp,
+    dialogSize = {
+      width: '350px',
+      height: '350px'
+    }
+  } = 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 [inputDimensions, setInputDimensions] = (0, _react.useState)();
+  const [formatedLeftPosition, setFormatedLeftPosition] = (0, _react.useState)();
+  const [onDenied, setOnDenied] = (0, _react.useState)({
+    disabled: false,
+    readOnly: false,
+    unvisible: false,
+    hideContent: false
+  });
+  const inputRef = (0, _react.useRef)();
+  const buttonOpenRef = (0, _react.useRef)();
+  const dropdownContainer = (0, _react.useRef)();
+  const [insideDropdown, setInsideDropdown] = (0, _react.useState)(false);
+  const onScreenResize = () => {
+    setInputDimensions(inputRef?.current?.getBoundingClientRect());
+  };
+  const onClickOutside = event => {
+    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?.current?.contains(target)) {
+      setShowCalendar(false);
+    }
+  };
+  const openCalendar = () => {
+    setShowCalendar(true);
+    if (inputRef.current) {
+      setInputDimensions(inputRef.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);
+      }
+    }
+  };
+  const onInputFocus = e => {
+    if (props.onFocus) props.onFocus(e);
+    if (openOnFocus) 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)) {
+      const initialValid = (0, _moment.default)(date.initial, _helpers.PT_BR_FORMAT, true).isValid();
+      const finalValid = (0, _moment.default)(date.final, _helpers.PT_BR_FORMAT, true).isValid();
+      return initialValid && finalValid;
+    }
+    return (0, _moment.default)(date, _helpers.PT_BR_FORMAT, true).isValid();
+  };
+  const onInputChange = function (event) {
+    let valueInput = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+    if (typeof valueInput === 'string') {
+      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);
+          const obj = {
+            target: {
+              value: newValue,
+              name: event.target.name
+            }
+          };
+          props.onChange(obj, date);
+        } else if (event.target.value === '') {
+          const obj = {
+            target: {
+              value: '',
+              name: event.target.name
+            }
+          };
+          props.onChange(obj, date);
+          setShowCalendar(false);
+          setValueState(undefined);
+        }
+      }
+    }
+  };
+  const setValue = function () {
+    let valueParam = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+    let e = arguments.length > 1 ? arguments[1] : undefined;
+    if (showCalendar && setFocusOnSelect) inputRef.current?.focus();
+    if (props.onComplete) props.onComplete(e, valueParam);
+    if (props.onChange) onInputChange({
+      target: {
+        value: valueParam,
+        name
+      }
+    }, valueParam);
+    if (shouldCloseOnSelect) setShowCalendar(false);
+    setValueState((0, _moment.default)(valueParam, _helpers.PT_BR_FORMAT));
+  };
+  const shouldDisable = () => props.disabled || onDenied && (onDenied.disabled || onDenied.hideContent);
+  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
+      }),
+      onClick: () => {
+        openCalendar();
+      },
+      customClass: "calendar-button",
+      tabIndex: -1,
+      targetRef: ref => {
+        buttonOpenRef.current = ref;
+      },
+      disabled: shouldDisable()
+    });
+  };
+  const getCalendar = (valueCalendar, calendarColorStyle) => /*#__PURE__*/_react.default.createElement(_calendar.default, {
+    currentDate: valueCalendar !== undefined ? valueCalendar : (0, _moment.default)(),
+    onDateChange: date => {
+      setValue(date.format(_helpers.PT_BR_FORMAT), undefined);
+    },
+    colorStyle: calendarColorStyle
+  });
+  const getWrapperComponent = () => {
+    if (onDenied && onDenied.readOnly) return null;
+    if (showCalendarInDialog) {
+      return /*#__PURE__*/_react.default.createElement(_Dialog.default, {
+        dialogSize: dialogSize,
+        handlerClose: setShowCalendar
+      }, 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) : '',
+      dropdownRef: el => {
+        dropdownContainer.current = el;
+      }
+    }, 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?.left);
+    }
+  }, [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));
+      setValueFromProps(value);
+    } else if (!value && value !== valueFromProps) {
+      setValueState(undefined);
+      setValueFromProps(value);
+    }
+  }, [value]);
+  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),
+    mask: "00/00/0000",
+    onComplete: e => {
+      if (e) {
+        setValue(e.target?.maskedValue, e);
+      }
+    },
+    onBlur: onInputBlur,
+    onFocus: e => {
+      onInputFocus(e);
+    },
+    onKeyDown: onInputKeyDown,
+    onChange: (e, __, date) => {
+      if (date) onInputChange(e, e.target.value);
+    },
+    inputRef: el => {
+      inputRef.current = el;
+      if (inputRefProp) inputRefProp.current = el;
+    },
+    rightElements: getButtonOpen(),
+    required: required,
+    handlerSetOnDenied: () => setOnDenied(onDenied)
+  })), showCalendar && getWrapperComponent());
+};
+var _default = exports.default = DatePicker;