@pedidopago/ui 1.5.1 → 1.5.3

package/dist/components/DatePicker/components/DateYearPicker.js

@@ -5,10 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.DateYearPicker = void 0;
 
-var _framerMotion = require("framer-motion");
-
 var _react = require("react");
 
+var _framerMotion = require("framer-motion");
+
 var _Icon = _interopRequireDefault(require("../../Icon"));
 
 var _styles = require("../styles");
@@ -33,7 +33,9 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 var DateYearPicker = function DateYearPicker(_ref) {
   var date = _ref.date,
-      handleChangeDate = _ref.handleChangeDate;
+      handleChangeDate = _ref.handleChangeDate,
+      maxDate = _ref.maxDate,
+      minDate = _ref.minDate;
 
   var _useState = (0, _react.useState)(date.getFullYear()),
       _useState2 = _slicedToArray(_useState, 2),
@@ -53,6 +55,8 @@ var DateYearPicker = function DateYearPicker(_ref) {
     handleChangeDate(new Date(year, month, 1));
   };
 
+  var enableToBackYears = String(minDate) !== 'Invalid Date' ? new Date(minDate).getFullYear() < yearsInterval[0] : true;
+  var enableToNextYears = String(maxDate) !== 'Invalid Date' ? new Date(maxDate).getFullYear() > yearsInterval[yearsInterval.length - 1] : true;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_framerMotion.motion.div, {
     initial: {
       opacity: 0
@@ -69,6 +73,7 @@ var DateYearPicker = function DateYearPicker(_ref) {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.DateYearPickerContainer, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.DatePickerHeader, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.DatePickerHeaderButton, {
+          isHidden: !enableToBackYears,
           type: "button",
           onClick: function onClick() {
             setYears(years - 10);
@@ -80,6 +85,7 @@ var DateYearPicker = function DateYearPicker(_ref) {
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.DatePickerHeaderTitle, {
           children: year === 0 ? "".concat(years - 5, "-").concat(years + 14) : year
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.DatePickerHeaderButton, {
+          isHidden: !enableToNextYears,
           type: "button",
           onClick: function onClick() {
             setYears(years + 10);
@@ -90,21 +96,23 @@ var DateYearPicker = function DateYearPicker(_ref) {
           })
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.DateYearPickerBody, {
-        children: year === 0 ? yearsInterval.map(function (y) {
+        children: year === 0 ? yearsInterval.map(function (yearInterval) {
           return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.DateYearPickerCell, {
+            disabled: yearInterval < new Date(minDate).getFullYear() || yearInterval > new Date(maxDate).getFullYear(),
             onClick: function onClick() {
-              return setYear(y);
+              return setYear(yearInterval);
             },
-            isSelected: date.getFullYear() === y,
-            children: y
-          }, y);
+            isSelected: date.getFullYear() === yearInterval,
+            children: yearInterval
+          }, yearInterval);
         }) : new Array(12).fill(0).map(function (_, index) {
           return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.DateYearPickerCell, {
+            disabled: index < new Date(minDate).getMonth() || index > new Date(maxDate).getMonth(),
             onClick: function onClick() {
               return handleSelectMonth(index);
             },
             children: (0, _getMonthName.getMonthName)(index).substring(0, 3).toUpperCase()
-          }, _);
+          }, index);
         })
       })]
     })

package/dist/components/DatePicker/datepicker.test.d.ts

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

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

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-import { DatePickerProps } from './types';
-declare const DatePicker: ({ value, onChange, minDate: minDateProp, maxDate: maxDateProp, variant, color, type, disableWeekendDays, }: DatePickerProps) => JSX.Element;
-export default DatePicker;
+/// <reference types="react" />
+import { DatePickerProps } from './types';
+declare const DatePicker: ({ value, onChange, minDate: minDateProp, maxDate: maxDateProp, variant, color, type, disableWeekendDays, isFirstClickDateInput, setIsFirstClickDateInput, enableYearPicker, }: DatePickerProps) => JSX.Element;
+export default DatePicker;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/index.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE1C,QAAA,MAAM,UAAU,+GASb,eAAe,gBAiNjB,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/index.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE1C,QAAA,MAAM,UAAU,kLAYb,eAAe,gBAqPjB,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/DatePicker/index.js

@@ -47,130 +47,172 @@ var DatePicker = function DatePicker(_ref) {
       color = _ref.color,
       _ref$type = _ref.type,
       type = _ref$type === void 0 ? 'date' : _ref$type,
-      disableWeekendDays = _ref.disableWeekendDays;
+      disableWeekendDays = _ref.disableWeekendDays,
+      isFirstClickDateInput = _ref.isFirstClickDateInput,
+      setIsFirstClickDateInput = _ref.setIsFirstClickDateInput,
+      enableYearPicker = _ref.enableYearPicker;
   var date = (0, _react.useMemo)(function () {
     return new Date();
   }, []);
   var minDate = new Date(minDateProp);
   var maxDate = new Date(maxDateProp);
 
-  var _useState = (0, _react.useState)(function () {
+  var _useState = (0, _react.useState)(isFirstClickDateInput || true),
+      _useState2 = _slicedToArray(_useState, 2),
+      isFirstClick = _useState2[0],
+      setIsFirstClick = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(function () {
     if (value) {
       return Array.isArray(value) ? new Date(value[0]) : new Date(value);
     }
 
     if (maxDateProp && minDateProp) {
-      return maxDate <= date ? new Date(maxDate.getFullYear(), maxDate.getMonth() - 1) : maxDate;
+      return maxDate <= date ? new Date(maxDate.getFullYear(), maxDate.getMonth() - 1) : null;
     }
 
     if (minDateProp) {
-      return minDate > date ? minDate : date;
+      return minDate > date ? minDate : null;
     }
 
     if (maxDateProp) {
-      return maxDate < date ? new Date(maxDate.getFullYear(), maxDate.getMonth() - (variant === 'compact' ? 0 : 1)) : date;
+      return maxDate < date ? new Date(maxDate.getFullYear(), maxDate.getMonth() - (variant === 'compact' ? 0 : 1)) : null;
     }
 
-    return date;
+    return null;
   }),
-      _useState2 = _slicedToArray(_useState, 2),
-      startDate = _useState2[0],
-      setStartDate = _useState2[1];
-
-  var _useState3 = (0, _react.useState)(value ? Array.isArray(value) ? new Date(value[1]) : new Date(value) : startDate),
       _useState4 = _slicedToArray(_useState3, 2),
-      endDate = _useState4[0],
-      setEndDate = _useState4[1];
-
-  var endDateMonth = endDate.getMonth();
-  var startDateMonth = startDate.getMonth();
-
-  var _useState5 = (0, _react.useState)(function () {
-    if (Array.isArray(value) && value !== null && value !== void 0 && value[1]) {
-      if (maxDateProp) {
-        if (startDateMonth === endDateMonth && endDateMonth === maxDate.getMonth()) return endDate;
-        if (startDateMonth === endDateMonth) return new Date(endDate.getFullYear(), endDateMonth + 1);
-        return endDate;
-      } else {
-        return startDateMonth === endDateMonth ? new Date(endDate.getFullYear(), endDateMonth + 1) : endDate;
+      startDate = _useState4[0],
+      setStartDate = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(value ? Array.isArray(value) ? new Date(value[1]) : new Date(value) : startDate),
+      _useState6 = _slicedToArray(_useState5, 2),
+      endDate = _useState6[0],
+      setEndDate = _useState6[1];
+
+  var endDateMonth = endDate ? endDate.getMonth() : null;
+  var startDateMonth = startDate ? startDate.getMonth() : null;
+
+  var _useState7 = (0, _react.useState)(function () {
+    if (endDate && endDateMonth && startDateMonth) {
+      if (Array.isArray(value) && value !== null && value !== void 0 && value[1]) {
+        if (maxDateProp) {
+          if (startDateMonth === endDateMonth && endDateMonth === maxDate.getMonth()) return endDate;
+          if (startDateMonth === endDateMonth) return new Date(endDate.getFullYear(), endDateMonth + 1);
+          return endDate;
+        } else {
+          return startDateMonth === endDateMonth ? new Date(endDate.getFullYear(), endDateMonth + 1) : endDate;
+        }
       }
-    }
 
-    if (maxDateProp) {
-      return maxDate.getMonth() === startDateMonth ? maxDate : new Date(startDate.getFullYear(), startDateMonth + 1, 1);
+      if (maxDateProp && maxDate.getMonth() === startDateMonth) {
+        return maxDate;
+      }
+
+      if (startDate) {
+        return new Date(startDate.getFullYear(), startDateMonth + 1, 1);
+      }
     }
 
-    return new Date(startDate.getFullYear(), startDateMonth + 1, 1);
+    return new Date(new Date().getFullYear(), new Date().getMonth() + 1, 1);
   }),
-      _useState6 = _slicedToArray(_useState5, 2),
-      secondCalendarDate = _useState6[0],
-      setSecondCalendarDate = _useState6[1];
+      _useState8 = _slicedToArray(_useState7, 2),
+      secondCalendarDate = _useState8[0],
+      setSecondCalendarDate = _useState8[1];
 
-  var _useState7 = (0, _react.useState)(function () {
-    if (variant === 'extended' && secondCalendarDate.getMonth() === maxDate.getMonth()) {
+  var _useState9 = (0, _react.useState)(function () {
+    if (secondCalendarDate && variant === 'extended' && secondCalendarDate.getMonth() === maxDate.getMonth()) {
       return Array.isArray(value) && startDateMonth !== endDateMonth ? startDate : new Date(secondCalendarDate.getFullYear(), secondCalendarDate.getMonth() - 1);
-    } else {
-      return new Date(startDate.getFullYear(), startDateMonth);
     }
-  }),
-      _useState8 = _slicedToArray(_useState7, 2),
-      firstCalendarDate = _useState8[0],
-      setFirstCalendarDate = _useState8[1];
 
-  var _useState9 = (0, _react.useState)(false),
+    if (startDate) {
+      return startDateMonth && new Date(startDate.getFullYear(), startDateMonth);
+    }
+
+    return new Date();
+  }),
       _useState10 = _slicedToArray(_useState9, 2),
-      openYearPicker = _useState10[0],
-      setOpenYearPicker = _useState10[1];
+      firstCalendarDate = _useState10[0],
+      setFirstCalendarDate = _useState10[1];
+
+  var _useState11 = (0, _react.useState)(false),
+      _useState12 = _slicedToArray(_useState11, 2),
+      openYearPicker = _useState12[0],
+      setOpenYearPicker = _useState12[1];
 
   var isInTheRange = function isInTheRange(currentDate) {
-    var start = startDate.getTime();
-    var end = endDate.getTime();
-    var current = currentDate.getTime();
-    return current > start && current < end;
+    if (startDate && endDate) {
+      var start = startDate.getTime();
+      var end = endDate.getTime();
+      var current = currentDate && currentDate.getTime();
+      return current > start && current < end;
+    }
+
+    return false;
   };
 
   var handleMouseOver = function handleMouseOver(currentDate) {
-    var tableRows = document.querySelectorAll('tbody tr[role="row"]');
-    tableRows.forEach(function (row) {
-      var rowCells = row.querySelectorAll('td');
-      rowCells.forEach(function (cell) {
-        var cellDate = new Date(String(cell.getAttribute('data-date')));
-        var isCurrentOverCell = cellDate.toLocaleString() === currentDate.toLocaleString();
-        var isBiggerThanStartDate = cellDate.getTime() >= startDate.getTime();
-        var isSmallerThanCurrentDate = cellDate.getTime() < currentDate.getTime();
-        cell.classList.remove('is-hover');
-
-        if (endDate.getTime() === startDate.getTime()) {
-          if (isBiggerThanStartDate && (isSmallerThanCurrentDate || isCurrentOverCell)) {
-            cell.classList.add('is-hover');
-            isCurrentOverCell ? cell.classList.add('is-current') : cell.classList.remove('is-current');
+    if (startDate) {
+      var tableRows = document.querySelectorAll('tbody tr[role="row"]');
+      tableRows.forEach(function (row) {
+        var rowCells = row.querySelectorAll('td');
+        rowCells.forEach(function (cell) {
+          var cellDate = new Date(String(cell.getAttribute('data-date')));
+
+          if (cellDate.getTime() === currentDate.setHours(0, 0, 0, 0) && Number(cellDate) > Number(endDate)) {
+            cell.classList.add('is-current');
           } else {
             cell.classList.remove('is-current');
           }
-        }
+
+          if (cellDate <= currentDate && cellDate > startDate && !endDate) {
+            cell.classList.add('is-hover');
+          } else {
+            cell.classList.remove('is-hover');
+          }
+        });
       });
-    });
+    }
   };
 
+  function resetFirstClick(value) {
+    setIsFirstClick(value);
+    setIsFirstClickDateInput === null || setIsFirstClickDateInput === void 0 ? void 0 : setIsFirstClickDateInput(value);
+  }
+
   var handleChange = function handleChange(newDate) {
     if (type === 'date') {
       setStartDate(newDate);
       onChange === null || onChange === void 0 ? void 0 : onChange(newDate);
-    } else {
-      var startDateTime = startDate.getTime();
-      var currentDateTime = newDate.getTime();
-
-      if (currentDateTime >= startDateTime && !isInTheRange(newDate)) {
-        setEndDate(newDate);
-        onChange === null || onChange === void 0 ? void 0 : onChange([startDate, newDate]);
-      } else {
-        setEndDate(newDate);
-        setStartDate(newDate);
-      }
+      return resetFirstClick(false);
+    }
+
+    if (isFirstClick) {
+      setStartDate(newDate);
+      setEndDate(null);
+      return resetFirstClick(false);
+    }
+
+    if (startDate) {
+      if (newDate < startDate) return setStartDate(newDate);
+      setEndDate(newDate);
+      onChange === null || onChange === void 0 ? void 0 : onChange([startDate, newDate]);
+      setIsFirstClick(true);
+    }
+  };
+
+  (0, _react.useEffect)(function () {
+    if (isFirstClick && !startDate) {
+      setStartDate(null);
+      setEndDate(null);
     }
+  }, [isFirstClick]);
+  var firstCalendarLimit = secondCalendarDate && new Date(secondCalendarDate.getFullYear(), secondCalendarDate.getMonth(), 0);
+
+  var handleToggleYearPicker = function handleToggleYearPicker() {
+    setOpenYearPicker(!openYearPicker);
   };
 
-  var firstCalendarLimit = new Date(secondCalendarDate.getFullYear(), secondCalendarDate.getMonth(), 0);
   var DatePickerContentProps = {
     variant: variant,
     type: type,
@@ -180,13 +222,11 @@ var DatePicker = function DatePicker(_ref) {
     handleMouseOver: handleMouseOver,
     handleChange: handleChange,
     minDate: minDate && new Date(minDate),
-    maxDate: maxDate && new Date(maxDate)
+    maxDate: maxDate && new Date(maxDate),
+    showSelectedDate: !isFirstClickDateInput,
+    handleToggleYearPicker: handleToggleYearPicker,
+    enableYearPicker: enableYearPicker
   };
-
-  var handleToggleYearPicker = function handleToggleYearPicker() {
-    setOpenYearPicker(!openYearPicker);
-  };
-
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.ThemeProvider, {
     theme: {
       colorSelected: color || 'primary.default'
@@ -196,13 +236,10 @@ var DatePicker = function DatePicker(_ref) {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_framerMotion.AnimatePresence, {
         exitBeforeEnter: true,
         children: !openYearPicker ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_DatePickerContent.DatePickerContent, _objectSpread(_objectSpread(_objectSpread({}, DatePickerContentProps), variant !== 'extended' && {
-            handleToggleYearPicker: handleToggleYearPicker,
-            enableYearPicker: !maxDate && !minDate
-          }), {}, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_DatePickerContent.DatePickerContent, _objectSpread(_objectSpread({}, DatePickerContentProps), {}, {
             date: firstCalendarDate,
             minDate: DatePickerContentProps.minDate,
-            maxDate: variant === 'extended' && !maxDate ? firstCalendarLimit : variant === 'extended' ? maxDate && new Date(maxDate).getTime() < firstCalendarLimit.getTime() ? DatePickerContentProps.maxDate : firstCalendarLimit : DatePickerContentProps.maxDate,
+            maxDate: variant === 'extended' && !maxDate ? firstCalendarLimit : variant === 'extended' ? maxDate && firstCalendarLimit && new Date(maxDate).getTime() < firstCalendarLimit.getTime() ? DatePickerContentProps.maxDate : firstCalendarLimit : DatePickerContentProps.maxDate,
             disableWeekendDays: disableWeekendDays,
             handleChangeDate: function handleChangeDate(newDate) {
               return setFirstCalendarDate(newDate);
@@ -214,11 +251,19 @@ var DatePicker = function DatePicker(_ref) {
             handleChangeDate: function handleChangeDate(newDate) {
               setSecondCalendarDate(newDate);
             },
-            hidePrevMonthButton: secondCalendarDate.getMonth() - 1 === firstCalendarDate.getMonth() || secondCalendarDate.getMonth() === 0 && firstCalendarDate.getMonth() === 11,
+            hidePrevMonthButton: function () {
+              if (firstCalendarDate && secondCalendarDate) {
+                return (secondCalendarDate === null || secondCalendarDate === void 0 ? void 0 : secondCalendarDate.getMonth()) - 1 === (firstCalendarDate === null || firstCalendarDate === void 0 ? void 0 : firstCalendarDate.getMonth()) || (secondCalendarDate === null || secondCalendarDate === void 0 ? void 0 : secondCalendarDate.getMonth()) === 0 && (firstCalendarDate === null || firstCalendarDate === void 0 ? void 0 : firstCalendarDate.getMonth()) === 11;
+              }
+
+              return false;
+            }(),
             disableWeekendDays: disableWeekendDays
           }))]
         }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_DateYearPicker.DateYearPicker, {
           date: firstCalendarDate,
+          minDate: minDate,
+          maxDate: maxDate,
           handleChangeDate: function handleChangeDate(newDate) {
             setFirstCalendarDate(function () {
               return new Date(newDate.getFullYear(), newDate.getMonth(), 1);

package/dist/components/DatePicker/styles.d.ts

@@ -1,76 +1,78 @@
-/// <reference types="react" />
-import { GenericStyledProps } from './types';
-export declare const DatePickerContentContainer: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & {
-    isExtended: boolean;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const DatePickerContainer: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const DatePickerHeader: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const DatePickerHeaderTitle: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & GenericStyledProps & {
-    enableYearPicker?: boolean | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const DatePickerHeaderButton: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & GenericStyledProps & {
-    isHidden?: boolean | undefined;
-}, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
-export declare const DatePickerBody: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const DatePickerBodyTable: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & GenericStyledProps, import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, {}>;
-export declare const DatePickerTableRow: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & GenericStyledProps & {
-    isRange?: boolean | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, {}>;
-export declare const DatePickerTableCell: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & GenericStyledProps & {
-    isPrevNextMonth?: boolean | undefined;
-    isSelected?: boolean | undefined;
-    isToday?: boolean | undefined;
-    isInTheRange?: boolean | undefined;
-    isEndDateOfRange?: boolean | undefined;
-    isStartDateOfRange?: boolean | undefined;
-    isFirstDayOfMonth?: boolean | undefined;
-    isLastDayOfMonth?: boolean | undefined;
-    isTheSameDate?: boolean | undefined;
-    disabled?: boolean | undefined;
-}, import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, {}>;
-export declare const DatePickerTableCellSpan: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & GenericStyledProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-export declare const DateYearPickerContainer: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const DateYearPickerBody: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const DateYearPickerCell: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & GenericStyledProps & {
-    isSelected?: boolean | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+/// <reference types="react" />
+import { GenericStyledProps } from './types';
+export declare const DatePickerContentContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    isExtended: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const DatePickerContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const DatePickerHeader: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const DatePickerHeaderTitle: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & GenericStyledProps & {
+    enableYearPicker?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const DatePickerHeaderButton: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & GenericStyledProps & {
+    isHidden?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+export declare const DatePickerBody: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const DatePickerBodyTable: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & GenericStyledProps, import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, {}>;
+export declare const DatePickerTableRow: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & GenericStyledProps & {
+    isRange?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, {}>;
+export declare const DatePickerTableCell: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & GenericStyledProps & {
+    isPrevNextMonth?: boolean | undefined;
+    isSelected?: boolean | undefined;
+    isToday?: boolean | undefined;
+    isInTheRange?: boolean | undefined;
+    isEndDateOfRange?: boolean | undefined;
+    isStartDateOfRange?: boolean | undefined;
+    isFirstDayOfMonth?: boolean | undefined;
+    isLastDayOfMonth?: boolean | undefined;
+    isTheSameDate?: boolean | undefined;
+    disabled?: boolean | undefined;
+    showSelectedDate?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, {}>;
+export declare const DatePickerTableCellSpan: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & GenericStyledProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const DateYearPickerContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const DateYearPickerBody: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const DateYearPickerCell: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & GenericStyledProps & {
+    isSelected?: boolean | undefined;
+    disabled?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 //# sourceMappingURL=styles.d.ts.map

package/dist/components/DatePicker/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/styles.ts"],"names":[],"mappings":";AAOA,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAE7C,eAAO,MAAM,0BAA0B;;;;gBACzB,OAAO;yGAkBpB,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;yGAG/B,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;yGAM5B,CAAC;AAEF,eAAO,MAAM,qBAAqB;;;;;yGAqBjC,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;;;qHAqBlC,CAAC;AAEF,eAAO,MAAM,cAAc;;;yGAE1B,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;uIAc/B,CAAC;AACF,eAAO,MAAM,kBAAkB;;;;;mHAkB9B,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;+HAsJ/B,CAAC;AAEF,eAAO,MAAM,uBAAuB;;;gIAGnC,CAAC;AAEF,eAAO,MAAM,uBAAuB;;;yGAGnC,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;yGAG9B,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;;;yGA+B9B,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/styles.ts"],"names":[],"mappings":";AAOA,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAE7C,eAAO,MAAM,0BAA0B;;;;gBACzB,OAAO;yGAkBpB,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;yGAG/B,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;yGAM5B,CAAC;AAEF,eAAO,MAAM,qBAAqB;;;;;yGAsBjC,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;;;qHAqBlC,CAAC;AAEF,eAAO,MAAM,cAAc;;;yGAE1B,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;uIAc/B,CAAC;AACF,eAAO,MAAM,kBAAkB;;;;;mHAkB9B,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;+HA8J/B,CAAC;AAEF,eAAO,MAAM,uBAAuB;;;gIAGnC,CAAC;AAEF,eAAO,MAAM,uBAAuB;;;yGAGnC,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;yGAG9B,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;;;;yGAsC9B,CAAC"}

package/dist/components/DatePicker/styles.js

@@ -37,7 +37,7 @@ var DatePickerHeader = _styled.default.div(_templateObject3 || (_templateObject3
 
 exports.DatePickerHeader = DatePickerHeader;
 
-var DatePickerHeaderTitle = _styled.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  font-family: inherit;\n  font-size: 0.875rem;\n  font-weight: 600;\n  gap: 0.875rem;\n  line-height: 1rem;\n  color: ", ";\n\n  ", "\n\n  user-select: none;\n"])), function (_ref3) {
+var DatePickerHeaderTitle = _styled.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  font-family: inherit;\n  font-size: 0.875rem;\n  font-weight: 600;\n  gap: 0.875rem;\n  line-height: 1rem;\n\n  color: ", ";\n\n  ", "\n\n  user-select: none;\n"])), function (_ref3) {
   var colors = _ref3.theme.colors;
   return colors.neutral.black;
 }, function (props) {
@@ -74,9 +74,9 @@ var DatePickerTableRow = _styled.default.tr(_templateObject8 || (_templateObject
 exports.DatePickerTableRow = DatePickerTableRow;
 
 var DatePickerTableCell = _styled.default.td(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  position: relative;\n  height: 0;\n  padding: 12px;\n  text-align: center;\n  font-family: inherit;\n  font-size: 0.75rem;\n  font-weight: 600;\n  border-radius: 50%;\n  cursor: pointer;\n  background-color: ", ";\n\n  color: ", ";\n\n  user-select: none;\n\n  transition: background 150ms ease;\n\n  ", "\n\n  ", "\n\n  ", "\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  ", "\n\n  &.is-current[aria-selected='false']:before {\n    border-radius: 0 50% 50% 0 !important;\n  }\n\n  &.is-current[aria-selected='true']:before {\n    display: none;\n  }\n"])), function (props) {
-  return !props.isPrevNextMonth && !props.disabled && (props.isSelected || props.isEndDateOfRange) ? (0, _getColorValue.getColorValue)(props.theme.colorSelected, props.theme) : 'transparent';
+  return !props.isPrevNextMonth && !props.disabled && props.showSelectedDate && (props.isSelected || props.isEndDateOfRange) ? (0, _getColorValue.getColorValue)(props.theme.colorSelected, props.theme) : 'transparent';
 }, function (props) {
-  return props.isPrevNextMonth ? props.theme.colors.neutral.neutral2 : props.isSelected || props.isEndDateOfRange ? props.theme.colors.body.light : props['aria-selected'] ? (0, _getColorValue.getColorValue)(props.theme.colorSelected, props.theme) : props.theme.colors.neutral.black;
+  return props.isPrevNextMonth ? props.theme.colors.neutral.neutral2 : props.isSelected || props.isEndDateOfRange ? !props.showSelectedDate ? props.theme.colors.neutral.black : props.theme.colors.body.light : props['aria-selected'] ? (0, _getColorValue.getColorValue)(props.theme.colorSelected, props.theme) : props.theme.colors.neutral.black;
 }, function (props) {
   return props.disabled && "\n    pointer-events: none;\n    cursor: default;\n    color: ".concat(props.theme.colors.neutral.neutral1, ";\n  ");
 }, function (props) {
@@ -86,7 +86,7 @@ var DatePickerTableCell = _styled.default.td(_templateObject9 || (_templateObjec
 }, function (props) {
   return !props.isSelected && !props.isEndDateOfRange && (0, _colorCheck.parseHslColorToString)((0, _colorToGray.convertColor)((0, _getColorValue.getColorValue)(props.theme.colorSelected, props.theme)).neutral1);
 }, function (props) {
-  return (props['aria-selected'] !== 'true' || props.isStartDateOfRange || props.isFirstDayOfMonth || props.isSelected || props.isLastDayOfMonth) && "\n      &.is-hover {\n          &:before {\n            content: '';\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            width: 100%;\n            border-radius: ".concat(props.isStartDateOfRange && props.isSelected ? '50% 0 0 50% !important' : props.isFirstDayOfMonth ? '4px 0 0 4px' : props.isLastDayOfMonth ? '0 4px 4px 0' : '0', ";\n            height: 96%;\n            background-color: ").concat(!props.isPrevNextMonth && !props.disabled && (0, _colorCheck.parseHexColorToRgba)((0, _getColorValue.getColorValue)(props.theme.colorSelected, props.theme), 0.1), "; \n            transform: translate(-50%, -50%);\n          }\n        }\n      }");
+  return (props['aria-selected'] !== 'true' || props.isStartDateOfRange || props.isFirstDayOfMonth || props.isSelected || props.isLastDayOfMonth) && "\n      &.is-hover {\n          &:before {\n            content: '';\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            width: 100%;\n            border-radius: ".concat(props.isStartDateOfRange ? '50% 0 0 50% !important' : props.isEndDateOfRange ? '50%' : props.isFirstDayOfMonth ? '4px 0 0 4px' : props.isLastDayOfMonth ? '0 4px 4px 0' : '0', ";\n            height: 96%;\n            background-color: ").concat(!props.isPrevNextMonth && !props.disabled && (0, _colorCheck.parseHexColorToRgba)((0, _getColorValue.getColorValue)(props.theme.colorSelected, props.theme), 0.1), "; \n            transform: translate(-50%, -50%);\n          }\n        }\n      }");
 });
 
 exports.DatePickerTableCell = DatePickerTableCell;
@@ -105,12 +105,18 @@ var DateYearPickerBody = _styled.default.div(_templateObject12 || (_templateObje
 
 exports.DateYearPickerBody = DateYearPickerBody;
 
-var DateYearPickerCell = _styled.default.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: 0.75rem 0;\n  font-family: inherit;\n  font-size: 0.875rem;\n  font-weight: 500;\n  cursor: pointer;\n  border-radius: 4px;\n  color: ", ";\n\n  transition: background 150ms ease;\n\n  ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n"])), function (props) {
-  return props.theme.colors.neutral.black;
+var DateYearPickerCell = _styled.default.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: 0.75rem 0;\n  font-family: inherit;\n  font-size: 0.875rem;\n  font-weight: 500;\n  cursor: pointer;\n  border-radius: 4px;\n  color: ", ";\n  pointer-events: ", ";\n  transition: background 150ms ease;\n\n  ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n"])), function (_ref7) {
+  var isSelected = _ref7.isSelected,
+      theme = _ref7.theme,
+      disabled = _ref7.disabled;
+  return isSelected ? theme.colors.neutral.white : disabled ? theme.colors.neutral.neutral2 : theme.colors.neutral.black;
+}, function (_ref8) {
+  var disabled = _ref8.disabled;
+  return disabled && 'none';
 }, function (props) {
   return props.isSelected && "\n    background-color: ".concat((0, _getColorValue.getColorValue)(props.theme.colorSelected, props.theme), ";\n    color: white;\n  ");
 }, function (props) {
-  return (0, _colorCheck.parseHslColorToString)((0, _colorToGray.convertColor)((0, _getColorValue.getColorValue)(props.theme.colorSelected, props.theme)).neutral1);
+  return !props.isSelected && (0, _colorCheck.parseHslColorToString)((0, _colorToGray.convertColor)((0, _getColorValue.getColorValue)(props.theme.colorSelected, props.theme)).neutral1);
 });
 
 exports.DateYearPickerCell = DateYearPickerCell;