@pedidopago/ui 1.3.27 → 1.4.0

package/dist/components/DateInput/components/ModalWrapper/types.d.ts

@@ -1,14 +1,16 @@
-import { HTMLAttributes } from 'react';
-export interface ModalWrapperProps extends HTMLAttributes<HTMLDivElement> {
-    /** If the modal is open or not. */
-    open: boolean;
-    /** Optional. Sets the left position where the modal will be shown. */
-    left?: string;
-    /** Optional. Sets the top position where the modal will be shown. */
-    top?: string;
-    /** Optional. Offsets the Modal horizontally. */
-    offsetX?: string;
-    /** The max width of the Modal. */
-    maxWidth?: string | number;
-}
+import { HTMLAttributes } from 'react';
+export interface ModalWrapperProps extends HTMLAttributes<HTMLDivElement> {
+    /** If the modal is open or not. */
+    open: boolean;
+    /** Optional. Sets the left position where the modal will be shown. */
+    left?: string;
+    /** Optional. Sets the right position where the modal will be shown. */
+    right?: string;
+    /** Optional. Sets the top position where the modal will be shown. */
+    top?: string;
+    /** Optional. Offsets the Modal horizontally. */
+    offsetX?: string;
+    /** The max width of the Modal. */
+    maxWidth?: string | number;
+}
 //# sourceMappingURL=types.d.ts.map

package/dist/components/DateInput/components/ModalWrapper/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/DateInput/components/ModalWrapper/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,iBAAkB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACvE,mCAAmC;IACnC,IAAI,EAAE,OAAO,CAAC;IAEd,sEAAsE;IACtE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qEAAqE;IACrE,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,gDAAgD;IAChD,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC5B"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/DateInput/components/ModalWrapper/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,iBAAkB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACvE,mCAAmC;IACnC,IAAI,EAAE,OAAO,CAAC;IAEd,sEAAsE;IACtE,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,uEAAuE;IACvE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qEAAqE;IACrE,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,gDAAgD;IAChD,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC5B"}

package/dist/components/DateInput/dateInput.test.d.ts

@@ -1,2 +1,2 @@
-import '@testing-library/jest-dom';
+import '@testing-library/jest-dom';
 //# sourceMappingURL=dateInput.test.d.ts.map

package/dist/components/DateInput/index.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-import { DateInputProps } from './types';
-export declare function DateInput({ label, placeholder, alert, helperText, value, locales, localeOptions, minDate, maxDate, onChange, disabled, ...rest }: DateInputProps): JSX.Element;
+/// <reference types="react" />
+import { DateInputProps } from './types';
+export declare function DateInput({ label, placeholder, alert, helperText, value, locales, localeOptions, minDate, maxDate, onChange, disabled, datePickerPosition, disableWeekendDays, ...rest }: DateInputProps): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/DateInput/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DateInput/index.tsx"],"names":[],"mappings":";AAeA,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAEzC,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,WAAW,EACX,KAAK,EACL,UAAU,EACV,KAAK,EACL,OAAO,EACP,aAAa,EACb,OAAO,EACP,OAAO,EACP,QAAQ,EACR,QAAgB,EAChB,GAAG,IAAI,EACR,EAAE,cAAc,eA0FhB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DateInput/index.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAGzC,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,WAAW,EACX,KAAK,EACL,UAAU,EACV,KAAK,EACL,OAAO,EACP,aAAa,EACb,OAAO,EACP,OAAO,EACP,QAAQ,EACR,QAAgB,EAChB,kBAA2B,EAC3B,kBAAkB,EAClB,GAAG,IAAI,EACR,EAAE,cAAc,eAsEhB"}

package/dist/components/DateInput/index.js

@@ -13,17 +13,15 @@ var _Icon = _interopRequireDefault(require("../Icon"));
 
 var _Input = _interopRequireDefault(require("../Input"));
 
-var _ReactPortal = require("../ReactPortal");
-
 var _DatePicker = _interopRequireDefault(require("../DatePicker"));
 
-var _ModalWrapper = require("./components/ModalWrapper");
-
 var _useDisableBodyScroll = require("../../shared/hooks/useDisableBodyScroll");
 
+var _Modal = require("../Modal");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
-var _excluded = ["label", "placeholder", "alert", "helperText", "value", "locales", "localeOptions", "minDate", "maxDate", "onChange", "disabled"];
+var _excluded = ["label", "placeholder", "alert", "helperText", "value", "locales", "localeOptions", "minDate", "maxDate", "onChange", "disabled", "datePickerPosition", "disableWeekendDays"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -50,8 +48,6 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
 function DateInput(_ref) {
-  var _containerRef$current, _containerRef$current3, _containerRef$current4, _containerRef$current5;
-
   var label = _ref.label,
       placeholder = _ref.placeholder,
       alert = _ref.alert,
@@ -64,25 +60,22 @@ function DateInput(_ref) {
       onChange = _ref.onChange,
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      _ref$datePickerPositi = _ref.datePickerPosition,
+      datePickerPosition = _ref$datePickerPositi === void 0 ? 'left' : _ref$datePickerPositi,
+      disableWeekendDays = _ref.disableWeekendDays,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var containerRef = (0, _react.useRef)(null);
-  var optionsModalRef = (0, _react.useRef)(null);
 
-  var _useState = (0, _react.useState)((_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.getBoundingClientRect().top),
+  var _useState = (0, _react.useState)(),
       _useState2 = _slicedToArray(_useState, 2),
-      positionContainer = _useState2[0],
-      setPositionContainer = _useState2[1];
+      currentValue = _useState2[0],
+      setCurrentValue = _useState2[1];
 
-  var _useState3 = (0, _react.useState)(),
+  var _useState3 = (0, _react.useState)(false),
       _useState4 = _slicedToArray(_useState3, 2),
-      currentValue = _useState4[0],
-      setCurrentValue = _useState4[1];
-
-  var _useState5 = (0, _react.useState)(false),
-      _useState6 = _slicedToArray(_useState5, 2),
-      datePickerOpen = _useState6[0],
-      setDatePickerOpen = _useState6[1];
+      datePickerOpen = _useState4[0],
+      setDatePickerOpen = _useState4[1];
 
   function selectDate(value) {
     setCurrentValue(value);
@@ -94,16 +87,8 @@ function DateInput(_ref) {
     setCurrentValue(value);
   }, [value]);
   (0, _useDisableBodyScroll.useDisableBodyScroll)(datePickerOpen, 'child_element');
-
-  function handleRepositionModal() {
-    var _containerRef$current2;
-
-    setPositionContainer((_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.getBoundingClientRect().top);
-  }
-
   var toggleOptionsAreaView = (0, _react.useCallback)(function (event) {
     event.stopPropagation();
-    handleRepositionModal();
     if (!disabled) setDatePickerOpen(!datePickerOpen);
   }, [datePickerOpen, disabled]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.DateInputContainer, {
@@ -118,30 +103,22 @@ function DateInput(_ref) {
       }),
       disabled: disabled,
       tabIndex: disabled ? -1 : 0,
-      value: currentValue ? Array.isArray(currentValue) ? "".concat(currentValue[0].toLocaleDateString(locales, localeOptions), " - ").concat(currentValue[1].toLocaleDateString(locales, localeOptions)) : new Date(currentValue).toLocaleDateString() : '',
-      onClick: toggleOptionsAreaView,
-      onMouseOver: handleRepositionModal
-    }), datePickerOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ReactPortal.ReactPortal, {
-        wrapperId: "portal-root",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Overlay, {
-          onClick: function onClick() {
-            return setDatePickerOpen(false);
-          }
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalWrapper.ModalWrapper, {
-          open: datePickerOpen,
-          left: "".concat((_containerRef$current3 = containerRef.current) === null || _containerRef$current3 === void 0 ? void 0 : _containerRef$current3.getBoundingClientRect().left, "px"),
-          top: Number(positionContainer) < 540 ? "calc(".concat(((_containerRef$current4 = containerRef.current) === null || _containerRef$current4 === void 0 ? void 0 : _containerRef$current4.getBoundingClientRect().bottom) || 0, "px + 10px)") : "calc(".concat(((_containerRef$current5 = containerRef.current) === null || _containerRef$current5 === void 0 ? void 0 : _containerRef$current5.getBoundingClientRect().top) || 0, "px - ", 360, "px)"),
-          ref: optionsModalRef,
-          maxWidth: "auto",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DatePicker.default, _objectSpread({
-            value: currentValue,
-            onChange: selectDate,
-            minDate: minDate,
-            maxDate: maxDate
-          }, rest))
-        })]
-      })
+      value: currentValue ? Array.isArray(currentValue) ? String(currentValue[0]) !== String(currentValue[1]) ? "".concat(currentValue[0].toLocaleDateString(locales, localeOptions), " - ").concat(currentValue[1].toLocaleDateString(locales, localeOptions)) : new Date(currentValue[0]).toLocaleDateString() : new Date(currentValue).toLocaleDateString() : '',
+      onClick: toggleOptionsAreaView
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Modal.Modal, {
+      maxWidth: "max-content",
+      maxHeight: "max-content",
+      onClose: function onClose() {
+        return setDatePickerOpen(false);
+      },
+      open: datePickerOpen,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DatePicker.default, _objectSpread({
+        value: currentValue,
+        onChange: selectDate,
+        minDate: minDate,
+        maxDate: maxDate,
+        disableWeekendDays: disableWeekendDays
+      }, rest))
     })]
   });
 }