linear-react-components-ui 1.1.18-beta.17 → 1.1.18-beta.18

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,105 @@ 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());
+    var _inputDateRef$current;
+    setInputDimensions(inputDateRef === null || inputDateRef === void 0 ? void 0 : (_inputDateRef$current = inputDateRef.current) === null || _inputDateRef$current === void 0 ? void 0 : _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(() => {
+        var _inputDateRef$current2;
+        setCalendarOnDialog(false);
+        (_inputDateRef$current2 = inputDateRef.current) === null || _inputDateRef$current2 === void 0 ? void 0 : _inputDateRef$current2.focus();
+      }, 100);
+    }
+  };
+  const onCloseWithoutBlur = event => {
+    var _datePickerContainerR;
+    const focusOnAnotherField = !((_datePickerContainerR = datePickerContainerRef.current) !== null && _datePickerContainerR !== void 0 && _datePickerContainerR.contains(event.relatedTarget));
+    if (!showCalendarInDialog && showCalendar && focusOnAnotherField) {
       setShowCalendar(false);
     }
   };
+  const onKeyDownPress = event => {
+    if (shouldCloseOnEsc && showCalendar && event && event.key && event.key === 'Escape') {
+      var _inputDateRef$current3;
+      event.preventDefault();
+      setShowCalendar(false);
+      (_inputDateRef$current3 = inputDateRef.current) === null || _inputDateRef$current3 === void 0 ? void 0 : _inputDateRef$current3.focus();
+    }
+    if (showCalendar && showCalendarInDialog && event && event.key && event.key === 'Tab') {
+      var _calendarContainerRef, _calendarContainerRef2;
+      const buttonForNavigateCalendar = (_calendarContainerRef = calendarContainerRef.current) === null || _calendarContainerRef === void 0 ? void 0 : _calendarContainerRef.getElementsByClassName('navbutton');
+      const datePicked = (_calendarContainerRef2 = calendarContainerRef.current) === null || _calendarContainerRef2 === void 0 ? void 0 : _calendarContainerRef2.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 = () => {
+    var _inputDateRef$current4;
+    const inputDateDimensions = (_inputDateRef$current4 = inputDateRef.current) === null || _inputDateRef$current4 === void 0 ? void 0 : _inputDateRef$current4.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) {
+      var _inputDateRef$current5;
+      inputDateRef.current.focus();
+      setInputDimensions((_inputDateRef$current5 = inputDateRef.current) === null || _inputDateRef$current5 === void 0 ? void 0 : _inputDateRef$current5.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(() => {
+        var _currentDateButtonRef;
+        (_currentDateButtonRef = currentDateButtonRef.current) === null || _currentDateButtonRef === void 0 ? void 0 : _currentDateButtonRef.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)) {
@@ -135,11 +167,9 @@ 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) => {
+    var _inputDateRef$current6;
+    if (showCalendar && setFocusOnSelect) (_inputDateRef$current6 = inputDateRef.current) === null || _inputDateRef$current6 === void 0 ? void 0 : _inputDateRef$current6.focus();
     if (props.onComplete) props.onComplete(e, valueParam);
     if (props.onChange) onInputChange({
       target: {
@@ -154,70 +184,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
+        handlerClose: onCloseDateDialog
       }, getCalendar(valueState, props === null || props === void 0 ? void 0 : 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));
   };
-  (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 +238,58 @@ 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)(() => {
+    var _document$getElementB;
+    document.addEventListener('scroll', keepPositionCalendarByScroll);
+    (_document$getElementB = document.getElementById('modal-dialog-content')) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.addEventListener('scroll', keepPositionCalendarByScroll);
+    return () => {
+      var _document$getElementB2;
+      document.removeEventListener('scroll', keepPositionCalendarByScroll);
+      (_document$getElementB2 = document.getElementById('modal-dialog-content')) === null || _document$getElementB2 === void 0 ? void 0 : _document$getElementB2.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,18 +38,14 @@ interface IDatePickerProps {
     disabled?: boolean;
     permissionAttr?: PermissionAttr;
     label?: string;
-    hint?: string | string[];
-    hintPosition?: 'below' | 'onLabelRight';
-    themePopover?: 'light' | 'dark';
-    popoverAlign?: 'right' | 'left';
+    gridLayout?: string;
 }
 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/file/DragDropFile.js

@@ -35,7 +35,6 @@ const DragDropFile = props => {
     showSubtitle = true,
     multiple = false,
     hint = [],
-    hintPosition = 'below',
     errorMessages = [],
     skeletonize = false
   } = props;
@@ -266,7 +265,7 @@ const DragDropFile = props => {
   })), /*#__PURE__*/_react.default.createElement(_errorMessage.ErrorMessage, {
     messages: errorMessages
   }), /*#__PURE__*/_react.default.createElement(_hint.default, {
-    visible: !!hint && hintPosition === 'below',
+    visible: !!hint,
     customClass: "hint",
     description: hint
   }));

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

@@ -18,7 +18,6 @@ interface IFileProps {
     label?: string;
     defaultFiles?: CustomFile;
     hint?: string;
-    hintPosition?: 'below' | 'onLabelRight';
     required?: boolean;
     readOnly?: boolean;
     name?: string;
@@ -35,8 +34,6 @@ interface IFileProps {
     errorMessages?: string[];
     skeletonize?: boolean;
     showSubtitle?: boolean;
-    themePopover?: 'light' | 'dark';
-    popoverAlign?: 'right' | 'left';
 }
 interface IDefaultFileProps extends IFileProps {
     onBtnClickInsert: () => void;

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

@@ -40,10 +40,6 @@ declare const getMaskOptions: ({ isDateField, placeholderChar, min, max, lazy, p
     autoCompleteMask?: "left" | "right" | undefined;
     definitions?: any;
     mask?: any;
-    hint?: string | string[] | undefined;
-    hintPosition?: "below" | "onLabelRight" | undefined;
-    themePopover?: "light" | "dark" | undefined;
-    popoverAlign?: "left" | "right" | undefined;
     placeholderChar: string;
     min: any;
     max: any;

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

@@ -50,10 +50,6 @@ type IBaseMaskProps = {
     mask?: any;
     min?: any;
     max?: any;
-    hint?: string | string[];
-    hintPosition?: 'below' | 'onLabelRight';
-    themePopover?: 'light' | 'dark';
-    popoverAlign?: 'right' | 'left';
     pattern?: string;
     mapToRadix?: string[];
     normalizeZeros?: boolean;

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

@@ -56,10 +56,6 @@ interface IMultiSelectProps {
     disabled?: boolean;
     dropdownAlignButton?: 'left' | 'right';
     label?: string;
-    hint?: string | string[];
-    hintPosition?: 'below' | 'onLabelRight';
-    themePopover?: 'light' | 'dark';
-    popoverAlign?: 'right' | 'left';
 }
 
 export { DescriptionKey, GetFilteredParams, IActionButtonsProps, IDropdownMultiSelectProps, IMultiSelectProps };

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

@@ -1,9 +1,9 @@
 import { IBaseNumberProps } from './types.js';
-import '../../@types/PermissionAttr.js';
 import '../base/types.js';
 import 'react';
 import '../../@types/Align.js';
 import '../../@types/Period.js';
+import '../../@types/PermissionAttr.js';
 import '../../internals/types.js';
 import '../../@types/Position.js';
 import '../types.js';

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

@@ -1,9 +1,9 @@
 import { ICurrencyProps } from './types.js';
-import '../../@types/PermissionAttr.js';
 import '../base/types.js';
 import 'react';
 import '../../@types/Align.js';
 import '../../@types/Period.js';
+import '../../@types/PermissionAttr.js';
 import '../../internals/types.js';
 import '../../@types/Position.js';
 import '../types.js';

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

@@ -1,9 +1,9 @@
 import { IBaseNumberProps } from './types.js';
-import '../../@types/PermissionAttr.js';
 import '../base/types.js';
 import 'react';
 import '../../@types/Align.js';
 import '../../@types/Period.js';
+import '../../@types/PermissionAttr.js';
 import '../../internals/types.js';
 import '../../@types/Position.js';
 import '../types.js';

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

@@ -1,11 +1,11 @@
 export { default as CurrencyField } from './Currency.js';
 export { default as DecimalField } from './Decimal.js';
 import { INumberFieldProps } from './types.js';
-import '../../@types/PermissionAttr.js';
 import '../base/types.js';
 import 'react';
 import '../../@types/Align.js';
 import '../../@types/Period.js';
+import '../../@types/PermissionAttr.js';
 import '../../internals/types.js';
 import '../../@types/Position.js';
 import '../types.js';

package/lib/inputs/number/index.js

@@ -28,12 +28,10 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 const NumberField = props => {
   const {
     textAlign = 'left',
-    value = '',
-    themePopover = 'light',
-    popoverAlign = 'left',
-    removeZeroLeft = true,
     min,
-    max
+    max,
+    value = '',
+    removeZeroLeft = true
   } = props;
   const [numberValue, setNumberValue] = (0, _react.useState)();
   const onChange = event => {
@@ -55,8 +53,6 @@ const NumberField = props => {
   return /*#__PURE__*/_react.default.createElement(_InputTextBase.default, _extends({}, props, {
     value: numberValue,
     textAlign: textAlign,
-    themePopover: themePopover,
-    popoverAlign: popoverAlign,
     onChange: onChange,
     type: "number"
   }));

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

@@ -1,9 +1,9 @@
-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 '../../@types/PermissionAttr.js';
 import '../../internals/types.js';
 import '../../@types/Position.js';
 import '../../@types/DataCombo.js';
@@ -12,16 +12,8 @@ import '../../@types/Icon.js';
 import '../../icons/helper.js';
 
 interface INumberFieldProps extends IMaskHOCProps {
-    value?: string;
-    permissionAttr?: PermissionAttr;
-    disabled?: boolean;
-    hint?: string | string[];
-    hintPosition?: 'below' | 'onLabelRight';
-    themePopover?: 'light' | 'dark';
-    popoverAlign?: 'right' | 'left';
     onChange?: (e?: CustomInputEvent) => void;
     removeZeroLeft?: boolean;
-    textAlign?: TextAlign;
 }
 interface IBaseNumberProps extends IMaskHOCProps {
     returnFormattedValueOnBlur?: boolean;
@@ -30,10 +22,6 @@ interface IBaseNumberProps extends IMaskHOCProps {
 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/period/Dialog.d.ts

@@ -9,6 +9,6 @@ import '../../@types/Align.js';
 import '../../internals/types.js';
 import '../../@types/Position.js';
 
-declare const Dialog: ({ onOpenChange, children, dialogSize }: IDialogProps) => JSX.Element;
+declare const Dialog: ({ onOpenChange, handlerClose, children, dialogSize }: IDialogProps) => JSX.Element;
 
 export { Dialog as default };

package/lib/inputs/period/Dialog.js

@@ -10,16 +10,18 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 const Dialog = _ref => {
   let {
     onOpenChange,
+    handlerClose,
     children,
     dialogSize
   } = _ref;
   return /*#__PURE__*/_react.default.createElement(_base.default, {
+    closeOnOutsideClick: true,
+    closeOnEsc: true,
+    wrapperClassName: "",
     width: dialogSize.width,
     height: dialogSize.height,
     onOpenChange: onOpenChange,
-    closeOnOutsideClick: true,
-    closeOnEsc: true,
-    wrapperClassName: ""
+    handlerClose: () => handlerClose(false)
   }, children);
 };
 var _default = exports.default = Dialog;

package/lib/inputs/period/Dropdown.js

@@ -6,23 +6,34 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = require("react");
 var _reactDom = _interopRequireDefault(require("react-dom"));
-var _helper = _interopRequireDefault(require("./helper"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const body = document.getElementsByTagName('body')[0];
+const CALENDAR_MIN_WIDTH = 250;
 const Dropdown = props => {
+  const {
+    children,
+    dropdownRef,
+    containerRef,
+    inputDimensions
+  } = props;
   const elementRef = (0, _react.useRef)(document.createElement('div'));
+  const width = inputDimensions && inputDimensions.width || CALENDAR_MIN_WIDTH;
   (0, _react.useEffect)(() => {
+    var _containerRef$current;
     elementRef.current.className = 'datepicker-component';
-    elementRef.current.setAttribute('style', (0, _helper.default)(props));
-    body.appendChild(elementRef.current);
-    props.dropdownRef(elementRef.current);
+    elementRef.current.style.width = String(width).concat('px');
+    elementRef.current.style.top = String(inputDimensions === null || inputDimensions === void 0 ? void 0 : inputDimensions.bottom).concat('px');
+    (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.appendChild(elementRef.current);
+    dropdownRef(elementRef.current);
     return () => {
-      body.removeChild(elementRef.current);
+      var _containerRef$current2;
+      (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.removeChild(elementRef.current);
     };
   }, []);
   (0, _react.useEffect)(() => {
-    elementRef.current.setAttribute('style', (0, _helper.default)(props));
+    var _props$inputDimension;
+    elementRef.current.style.width = String(width).concat('px');
+    elementRef.current.style.top = String((_props$inputDimension = props.inputDimensions) === null || _props$inputDimension === void 0 ? void 0 : _props$inputDimension.bottom).concat('px');
   }, [props]);
-  return /*#__PURE__*/_reactDom.default.createPortal(props.children, elementRef.current);
+  return /*#__PURE__*/_reactDom.default.createPortal(children, elementRef.current);
 };
 var _default = exports.default = Dropdown;