primereact 9.5.0 → 9.6.1

package/calendar/calendar.esm.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import PrimeReact, { localeOptions, localeOption } from 'primereact/api';
+import PrimeReact, { PrimeReactContext, localeOptions, localeOption } from 'primereact/api';
 import { Button } from 'primereact/button';
 import { usePrevious, useOverlayListener, useMountEffect, useUpdateEffect, useUnmountEffect } from 'primereact/hooks';
 import { CalendarIcon } from 'primereact/icons/calendar';
@@ -10,10 +10,26 @@ import { ChevronUpIcon } from 'primereact/icons/chevronup';
 import { InputText } from 'primereact/inputtext';
 import { OverlayService } from 'primereact/overlayservice';
 import { Ripple } from 'primereact/ripple';
-import { ObjectUtils, UniqueComponentId, DomHandler, mask, ZIndexUtils, IconUtils, classNames } from 'primereact/utils';
+import { mergeProps, UniqueComponentId, DomHandler, ObjectUtils, mask, ZIndexUtils, IconUtils, classNames } from 'primereact/utils';
+import { ComponentBase } from 'primereact/componentbase';
 import { CSSTransition } from 'primereact/csstransition';
 import { Portal } from 'primereact/portal';
 
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+
 function _typeof(obj) {
   "@babel/helpers - typeof";
 
@@ -55,21 +71,6 @@ function _defineProperty(obj, key, value) {
   return obj;
 }
 
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-
 function _arrayLikeToArray$1(arr, len) {
   if (len == null || len > arr.length) len = arr.length;
   for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
@@ -141,7 +142,7 @@ function _slicedToArray(arr, i) {
   return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray$1(arr, i) || _nonIterableRest();
 }
 
-var CalendarBase = {
+var CalendarBase = ComponentBase.extend({
   defaultProps: {
     __TYPE: 'Calendar',
     appendTo: null,
@@ -235,17 +236,18 @@ var CalendarBase = {
     yearNavigatorTemplate: null,
     yearRange: null,
     children: undefined
-  },
-  getProps: function getProps(props) {
-    return ObjectUtils.getMergedProps(props, CalendarBase.defaultProps);
-  },
-  getOtherProps: function getOtherProps(props) {
-    return ObjectUtils.getDiffProps(props, CalendarBase.defaultProps);
   }
-};
+});
 
 var CalendarPanel = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var createElement = function createElement() {
+    var panelProps = mergeProps({
+      ref: ref,
+      className: props.className,
+      style: props.style,
+      onClick: props.onClick,
+      onMouseUp: props.onMouseUp
+    }, props.ptm('panel'));
     return /*#__PURE__*/React.createElement(CSSTransition, {
       nodeRef: ref,
       classNames: "p-connected-overlay",
@@ -260,13 +262,7 @@ var CalendarPanel = /*#__PURE__*/React.forwardRef(function (props, ref) {
       onEntered: props.onEntered,
       onExit: props.onExit,
       onExited: props.onExited
-    }, /*#__PURE__*/React.createElement("div", {
-      ref: ref,
-      className: props.className,
-      style: props.style,
-      onClick: props.onClick,
-      onMouseUp: props.onMouseUp
-    }, props.children));
+    }, /*#__PURE__*/React.createElement("div", panelProps, props.children));
   };
   var element = createElement();
   return props.inline ? element : /*#__PURE__*/React.createElement(Portal, {
@@ -276,12 +272,15 @@ var CalendarPanel = /*#__PURE__*/React.forwardRef(function (props, ref) {
 });
 CalendarPanel.displayName = 'CalendarPanel';
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
   var _classNames;
-  var props = CalendarBase.getProps(inProps);
+  var context = React.useContext(PrimeReactContext);
+  var props = CalendarBase.getProps(inProps, context);
   var _React$useState = React.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     focusedState = _React$useState2[0],
@@ -294,6 +293,15 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     _React$useState6 = _slicedToArray(_React$useState5, 2),
     viewDateState = _React$useState6[0],
     setViewDateState = _React$useState6[1];
+  var _CalendarBase$setMeta = CalendarBase.setMetaData({
+      props: props,
+      state: {
+        focused: focusedState,
+        overlayVisible: overlayVisibleState,
+        viewDate: viewDateState
+      }
+    }),
+    ptm = _CalendarBase$setMeta.ptm;
   var elementRef = React.useRef(null);
   var overlayRef = React.useRef(null);
   var inputRef = React.useRef(props.inputRef);
@@ -1069,7 +1077,7 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     setCurrentYear(value.getFullYear());
   };
   var setNavigationState = function setNavigationState(newViewDate) {
-    if (!props.showMinMaxRange || props.view !== 'date' || !overlayRef.current) {
+    if (!newViewDate || !props.showMinMaxRange || props.view !== 'date' || !overlayRef.current) {
       return;
     }
     var navPrev = DomHandler.findSingle(overlayRef.current, '.p-datepicker-prev');
@@ -1087,7 +1095,7 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
         firstDayOfMonth.setMonth(11, 1);
         firstDayOfMonth.setFullYear(firstDayOfMonth.getFullYear() - 1);
       } else {
-        firstDayOfMonth.setMonth(firstDayOfMonth.getMonth() - 1, 1);
+        firstDayOfMonth.setMonth(firstDayOfMonth.getMonth(), 1);
       }
       firstDayOfMonth.setHours(0);
       firstDayOfMonth.setMinutes(0);
@@ -1488,7 +1496,7 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
   var onOverlayEnter = function onOverlayEnter() {
     if (props.autoZIndex) {
       var key = props.touchUI ? 'modal' : 'overlay';
-      ZIndexUtils.set(key, overlayRef.current, PrimeReact.autoZIndex, props.baseZIndex || PrimeReact.zIndex[key]);
+      ZIndexUtils.set(key, overlayRef.current, context && context.autoZIndex || PrimeReact.autoZIndex, props.baseZIndex || context && context.zIndex[key] || PrimeReact.zIndex[key]);
     }
     alignOverlay();
   };
@@ -1510,7 +1518,7 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     if (props.touchUI) {
       enableModality();
     } else if (overlayRef && overlayRef.current && inputRef && inputRef.current) {
-      DomHandler.alignOverlay(overlayRef.current, inputRef.current, props.appendTo || PrimeReact.appendTo);
+      DomHandler.alignOverlay(overlayRef.current, inputRef.current, props.appendTo || context && context.appendTo || PrimeReact.appendTo);
       if (appendDisabled()) {
         DomHandler.relativePosition(overlayRef.current, inputRef.current);
       } else {
@@ -1738,9 +1746,9 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
       if (props.minDate.getFullYear() > year) {
         validMin = false;
       } else if (props.minDate.getFullYear() === year) {
-        if (props.minDate.getMonth() > month) {
+        if (month > -1 && props.minDate.getMonth() > month) {
           validMin = false;
-        } else if (props.minDate.getMonth() === month) {
+        } else if (month > -1 && props.minDate.getMonth() === month) {
           if (day > 0 && props.minDate.getDate() > day) {
             validMin = false;
           }
@@ -1751,9 +1759,9 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
       if (props.maxDate.getFullYear() < year) {
         validMax = false;
       } else if (props.maxDate.getFullYear() === year) {
-        if (props.maxDate.getMonth() < month) {
+        if (month > -1 && props.maxDate.getMonth() < month) {
           validMax = false;
-        } else if (props.maxDate.getMonth() === month) {
+        } else if (month > -1 && props.maxDate.getMonth() === month) {
           if (day > 0 && props.maxDate.getDate() < day) {
             validMax = false;
           }
@@ -2315,7 +2323,6 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     ObjectUtils.combinedRefs(inputRef, props.inputRef);
   }, [inputRef, props.inputRef]);
   useMountEffect(function () {
-    var unbindMaskEvents = null;
     var viewDate = getViewDate(props.viewDate);
     validateDate(viewDate);
     setViewDateState(viewDate);
@@ -2330,7 +2337,21 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
           overlayRef.current.style.width = DomHandler.getOuterWidth(overlayRef.current) + 'px';
         }
       }
-    } else if (props.mask) {
+    }
+    if (props.value) {
+      updateInputfield(props.value);
+      setValue(props.value);
+    }
+    if (props.autoFocus) {
+      // delay showing until rendered so `alignPanel()` method aligns the popup in the right location
+      setTimeout(function () {
+        return DomHandler.focus(inputRef.current, props.autoFocus);
+      }, 200);
+    }
+  });
+  useUpdateEffect(function () {
+    var unbindMaskEvents = null;
+    if (props.mask) {
       unbindMaskEvents = mask(inputRef.current, {
         mask: props.mask,
         readOnly: props.readOnlyInput || props.disabled,
@@ -2343,20 +2364,10 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
         }
       }).unbindEvents;
     }
-    if (props.value) {
-      updateInputfield(props.value);
-      setValue(props.value);
-    }
-    if (props.autoFocus) {
-      // delay showing until rendered so `alignPanel()` method aligns the popup in the right location
-      setTimeout(function () {
-        return DomHandler.focus(inputRef.current, props.autoFocus);
-      }, 200);
-    }
     return function () {
       props.mask && unbindMaskEvents && unbindMaskEvents();
     };
-  });
+  }, [props.mask]);
   useUpdateEffect(function () {
     setCurrentView(props.view);
   }, [props.view]);
@@ -2458,18 +2469,18 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
       }
     };
     var iconClassName = 'p-datepicker-prev-icon';
-    var icon = props.prevIcon || /*#__PURE__*/React.createElement(ChevronLeftIcon, {
-      className: iconClassName
-    });
-    var backwardNavigatorIcon = IconUtils.getJSXIcon(icon, {
+    var previousIconProps = mergeProps({
       className: iconClassName
-    }, {
+    }, ptm('previousIcon'));
+    var icon = props.prevIcon || /*#__PURE__*/React.createElement(ChevronLeftIcon, previousIconProps);
+    var backwardNavigatorIcon = IconUtils.getJSXIcon(icon, _objectSpread({}, previousIconProps), {
       props: props
     });
-    return /*#__PURE__*/React.createElement("button", _extends({
-      type: "button",
-      className: "p-datepicker-prev"
-    }, navigatorProps), backwardNavigatorIcon, /*#__PURE__*/React.createElement(Ripple, null));
+    var previousButtonProps = mergeProps(_objectSpread({
+      type: 'button',
+      className: 'p-datepicker-prev'
+    }, navigatorProps), ptm('previousButton'));
+    return /*#__PURE__*/React.createElement("button", previousButtonProps, backwardNavigatorIcon, /*#__PURE__*/React.createElement(Ripple, null));
   };
   var createForwardNavigator = function createForwardNavigator(isVisible) {
     var navigatorProps = isVisible ? {
@@ -2483,18 +2494,18 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
       }
     };
     var iconClassName = 'p-datepicker-next-icon';
-    var icon = props.nextIcon || /*#__PURE__*/React.createElement(ChevronRightIcon, {
-      className: iconClassName
-    });
-    var forwardNavigatorIcon = IconUtils.getJSXIcon(icon, {
+    var nextIconProps = mergeProps({
       className: iconClassName
-    }, {
+    }, ptm('nextIcon'));
+    var icon = props.nextIcon || /*#__PURE__*/React.createElement(ChevronRightIcon, nextIconProps);
+    var forwardNavigatorIcon = IconUtils.getJSXIcon(icon, _objectSpread({}, nextIconProps), {
       props: props
     });
-    return /*#__PURE__*/React.createElement("button", _extends({
-      type: "button",
-      className: "p-datepicker-next"
-    }, navigatorProps), forwardNavigatorIcon, /*#__PURE__*/React.createElement(Ripple, null));
+    var nextButtonProps = mergeProps(_objectSpread({
+      type: 'button',
+      className: 'p-datepicker-next'
+    }, navigatorProps), ptm('nextButton'));
+    return /*#__PURE__*/React.createElement("button", nextButtonProps, forwardNavigatorIcon, /*#__PURE__*/React.createElement(Ripple, null));
   };
   var createTitleMonthElement = function createTitleMonthElement(month) {
     var monthNames = localeOption('monthNames', props.locale);
@@ -2513,17 +2524,20 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
       var displayedMonthNames = displayedMonthOptions.map(function (option) {
         return option.label;
       });
-      var _content = /*#__PURE__*/React.createElement("select", {
-        className: "p-datepicker-month",
+      var selectProps = mergeProps({
+        className: 'p-datepicker-month',
         onChange: function onChange(e) {
           return onMonthDropdownChange(e, e.target.value);
         },
         value: viewMonth
-      }, displayedMonthOptions.map(function (option) {
-        return /*#__PURE__*/React.createElement("option", {
-          key: option.label,
+      }, ptm('select'));
+      var _content = /*#__PURE__*/React.createElement("select", selectProps, displayedMonthOptions.map(function (option) {
+        var optionProps = mergeProps({
           value: option.value
-        }, option.label);
+        }, ptm('option'));
+        return /*#__PURE__*/React.createElement("option", _extends({}, optionProps, {
+          key: option.label
+        }), option.label);
       }));
       if (props.monthNavigatorTemplate) {
         var defaultContentOptions = {
@@ -2539,11 +2553,12 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
       }
       return _content;
     }
-    return currentView === 'date' && /*#__PURE__*/React.createElement("button", {
-      className: "p-datepicker-month p-link",
+    var monthTitleProps = mergeProps({
+      className: 'p-datepicker-month p-link',
       onClick: switchToMonthView,
       disabled: switchViewButtonDisabled()
-    }, monthNames[month]);
+    }, ptm('monthTitle'));
+    return currentView === 'date' && /*#__PURE__*/React.createElement("button", monthTitleProps, monthNames[month]);
   };
   var createTitleYearElement = function createTitleYearElement(metaYear) {
     if (props.yearNavigator) {
@@ -2559,17 +2574,20 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
       var displayedYearNames = _yearOptions2.filter(function (year) {
         return !(props.minDate && props.minDate.getFullYear() > year) && !(props.maxDate && props.maxDate.getFullYear() < year);
       });
-      var _content2 = /*#__PURE__*/React.createElement("select", {
-        className: "p-datepicker-year",
+      var selectProps = mergeProps({
+        className: 'p-datepicker-year',
         onChange: function onChange(e) {
           return onYearDropdownChange(e, e.target.value);
         },
         value: viewYear
-      }, displayedYearNames.map(function (year) {
-        return /*#__PURE__*/React.createElement("option", {
-          key: year,
+      }, ptm('select'));
+      var _content2 = /*#__PURE__*/React.createElement("select", selectProps, displayedYearNames.map(function (year) {
+        var optionProps = mergeProps({
           value: year
-        }, year);
+        }, ptm('option'));
+        return /*#__PURE__*/React.createElement("option", _extends({}, optionProps, {
+          key: year
+        }), year);
       }));
       if (props.yearNavigatorTemplate) {
         var options = displayedYearNames.map(function (name, i) {
@@ -2593,18 +2611,23 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
       return _content2;
     }
     var displayYear = props.numberOfMonths > 1 ? metaYear : currentYear;
-    return currentView !== 'year' && /*#__PURE__*/React.createElement("button", {
-      className: "p-datepicker-year p-link",
-      onClick: switchToYearView,
+    var yearTitleProps = mergeProps({
+      className: 'p-datepicker-year p-link',
+      onClick: function onClick(e) {
+        return switchToYearView(e);
+      },
       disabled: switchViewButtonDisabled()
-    }, displayYear);
+    }, ptm('yearTitle'));
+    return currentView !== 'year' && /*#__PURE__*/React.createElement("button", yearTitleProps, displayYear);
   };
   var createTitleDecadeElement = function createTitleDecadeElement() {
     var years = yearPickerValues();
+    var decadeTitleProps = mergeProps({
+      className: 'p-datepicker-decade'
+    }, ptm('decadeTitle'));
     if (currentView === 'year') {
-      return /*#__PURE__*/React.createElement("span", {
-        className: "p-datepicker-decade"
-      }, props.decadeTemplate ? props.decadeTemplate(years) : /*#__PURE__*/React.createElement("span", null, "".concat(yearPickerValues()[0], " - ").concat(yearPickerValues()[yearPickerValues().length - 1])));
+      var decadeTitleTextProps = mergeProps(ptm('decadeTitleText'));
+      return /*#__PURE__*/React.createElement("span", decadeTitleProps, props.decadeTemplate ? props.decadeTemplate(years) : /*#__PURE__*/React.createElement("span", decadeTitleTextProps, "".concat(yearPickerValues()[0], " - ").concat(yearPickerValues()[yearPickerValues().length - 1])));
     }
     return null;
   };
@@ -2612,23 +2635,30 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     var month = createTitleMonthElement(monthMetaData.month);
     var year = createTitleYearElement(monthMetaData.year);
     var decade = createTitleDecadeElement();
-    return /*#__PURE__*/React.createElement("div", {
-      className: "p-datepicker-title"
-    }, month, year, decade);
+    var titleProps = mergeProps({
+      className: 'p-datepicker-title'
+    }, ptm('title'));
+    return /*#__PURE__*/React.createElement("div", titleProps, month, year, decade);
   };
   var createDayNames = function createDayNames(weekDays) {
+    var weekDayProps = mergeProps(ptm('weekDay'));
+    var tableHeaderCellProps = mergeProps({
+      scope: 'col'
+    }, ptm(ptm('tableHeaderCell')));
     var dayNames = weekDays.map(function (weekDay, index) {
-      return /*#__PURE__*/React.createElement("th", {
-        key: "".concat(weekDay, "-").concat(index),
-        scope: "col"
-      }, /*#__PURE__*/React.createElement("span", null, weekDay));
+      return /*#__PURE__*/React.createElement("th", _extends({}, tableHeaderCellProps, {
+        key: "".concat(weekDay, "-").concat(index)
+      }), /*#__PURE__*/React.createElement("span", weekDayProps, weekDay));
     });
     if (props.showWeek) {
-      var weekHeader = /*#__PURE__*/React.createElement("th", {
-        scope: "col",
-        key: "wn",
-        className: "p-datepicker-weekheader p-disabled"
-      }, /*#__PURE__*/React.createElement("span", null, localeOption('weekHeader', props.locale)));
+      var weekHeaderProps = mergeProps({
+        scope: 'col',
+        className: 'p-datepicker-weekheader p-disabled'
+      }, ptm('weekHeader'));
+      var weekLabel = mergeProps(ptm('weekLabel'));
+      var weekHeader = /*#__PURE__*/React.createElement("th", _extends({}, weekHeaderProps, {
+        key: "wn"
+      }), /*#__PURE__*/React.createElement("span", weekLabel, localeOption('weekHeader', props.locale)));
       return [weekHeader].concat(_toConsumableArray(dayNames));
     }
     return dayNames;
@@ -2657,37 +2687,49 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
         'p-disabled': !date.selectable
       });
       var content = date.otherMonth && !props.showOtherMonths ? null : createDateCellContent(date, dateClassName, groupIndex);
-      return /*#__PURE__*/React.createElement("td", {
-        key: date.day,
+      var dayProps = mergeProps({
         className: cellClassName
-      }, content);
+      }, ptm('day'));
+      return /*#__PURE__*/React.createElement("td", _extends({}, dayProps, {
+        key: date.day
+      }), content);
     });
     if (props.showWeek) {
-      var weekNumberCell = /*#__PURE__*/React.createElement("td", {
-        key: 'wn' + weekNumber,
-        className: "p-datepicker-weeknumber"
-      }, /*#__PURE__*/React.createElement("span", {
-        className: "p-disabled"
-      }, weekNumber));
+      var weekNumberProps = mergeProps({
+        className: 'p-datepicker-weeknumber'
+      }, ptm('weekNumber'));
+      var weekLabelContainerProps = mergeProps({
+        className: 'p-disabled'
+      }, ptm('weekLabelContainer'));
+      var weekNumberCell = /*#__PURE__*/React.createElement("td", _extends({}, weekNumberProps, {
+        key: 'wn' + weekNumber
+      }), /*#__PURE__*/React.createElement("span", weekLabelContainerProps, weekNumber));
       return [weekNumberCell].concat(_toConsumableArray(week));
     }
     return week;
   };
   var createDates = function createDates(monthMetaData, groupIndex) {
+    var tableBodyRowProps = mergeProps(ptm('tableBodyRowProps'));
     return monthMetaData.dates.map(function (weekDates, index) {
-      return /*#__PURE__*/React.createElement("tr", {
+      return /*#__PURE__*/React.createElement("tr", _extends({}, tableBodyRowProps, {
         key: index
-      }, createWeek(weekDates, monthMetaData.weekNumbers[index], groupIndex));
+      }), createWeek(weekDates, monthMetaData.weekNumbers[index], groupIndex));
     });
   };
   var createDateViewGrid = function createDateViewGrid(monthMetaData, weekDays, groupIndex) {
     var dayNames = createDayNames(weekDays);
     var dates = createDates(monthMetaData, groupIndex);
-    return currentView === 'date' && /*#__PURE__*/React.createElement("div", {
-      className: "p-datepicker-calendar-container"
-    }, /*#__PURE__*/React.createElement("table", {
-      className: "p-datepicker-calendar"
-    }, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, dayNames)), /*#__PURE__*/React.createElement("tbody", null, dates)));
+    var containerProps = mergeProps({
+      className: 'p-datepicker-calendar-container',
+      key: UniqueComponentId('calendar_container_')
+    }, ptm('container'));
+    var tableProps = mergeProps({
+      className: 'p-datepicker-calendar'
+    }, ptm('table'));
+    var tableHeaderProps = mergeProps(ptm('tableHeader'));
+    var tableHeaderRowProps = mergeProps(ptm('tableHeaderRow'));
+    var tableBodyProps = mergeProps(ptm('tableBody'));
+    return currentView === 'date' && /*#__PURE__*/React.createElement("div", containerProps, /*#__PURE__*/React.createElement("table", tableProps, /*#__PURE__*/React.createElement("thead", tableHeaderProps, /*#__PURE__*/React.createElement("tr", tableHeaderRowProps, dayNames)), /*#__PURE__*/React.createElement("tbody", tableBodyProps, dates)));
   };
   var createMonth = function createMonth(monthMetaData, index) {
     var weekDays = createWeekDaysMeta();
@@ -2697,12 +2739,16 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     var dateViewGrid = createDateViewGrid(monthMetaData, weekDays, index);
     var header = props.headerTemplate ? props.headerTemplate() : null;
     var monthKey = monthMetaData.month + '-' + monthMetaData.year;
-    return /*#__PURE__*/React.createElement("div", {
-      key: monthKey,
-      className: "p-datepicker-group"
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "p-datepicker-header"
-    }, header, backwardNavigator, title, forwardNavigator), dateViewGrid);
+    var groupProps = mergeProps({
+      className: 'p-datepicker-group'
+    }, ptm('group'));
+    var headerProps = mergeProps({
+      className: 'p-datepicker-header',
+      key: index
+    }, ptm('header'));
+    return /*#__PURE__*/React.createElement("div", _extends({}, groupProps, {
+      key: monthKey
+    }), /*#__PURE__*/React.createElement("div", headerProps, header, backwardNavigator, title, forwardNavigator), dateViewGrid);
   };
   var createMonths = function createMonths(monthsMetaData) {
     var groups = monthsMetaData.map(createMonth);
@@ -2737,15 +2783,19 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     var forwardNavigator = createForwardNavigator(true);
     var yearElement = createTitleYearElement(getViewDate().getFullYear());
     var decade = createTitleDecadeElement();
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-      className: "p-datepicker-group-container"
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "p-datepicker-group"
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "p-datepicker-header"
-    }, backwardNavigator, /*#__PURE__*/React.createElement("div", {
-      className: "p-datepicker-title"
-    }, yearElement, decade), forwardNavigator))));
+    var groupContainerProps = mergeProps({
+      className: 'p-datepicker-group-container'
+    }, ptm('groupContainer'));
+    var groupProps = mergeProps({
+      className: 'p-datepicker-group'
+    }, ptm('group'));
+    var headerProps = mergeProps({
+      className: 'p-datepicker-header'
+    }, ptm('header'));
+    var titleProps = mergeProps({
+      className: 'p-datepicker-title'
+    }, ptm('title'));
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", groupContainerProps, /*#__PURE__*/React.createElement("div", groupProps, /*#__PURE__*/React.createElement("div", headerProps, backwardNavigator, /*#__PURE__*/React.createElement("div", titleProps, yearElement, decade), forwardNavigator))));
   };
   var createDatePicker = function createDatePicker() {
     if (!props.timeOnly) {
@@ -2757,10 +2807,12 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     }
     return null;
   };
-  var incrementIcon = IconUtils.getJSXIcon(props.incrementIcon || /*#__PURE__*/React.createElement(ChevronUpIcon, null), undefined, {
+  var incrementIconProps = mergeProps(ptm('incrementIcon'));
+  var decrementIconProps = mergeProps(ptm('decrementIcon'));
+  var incrementIcon = IconUtils.getJSXIcon(props.incrementIcon || /*#__PURE__*/React.createElement(ChevronUpIcon, incrementIconProps), _objectSpread({}, incrementIconProps), {
     props: props
   });
-  var decrementIcon = IconUtils.getJSXIcon(props.decrementIcon || /*#__PURE__*/React.createElement(ChevronDownIcon, null), undefined, {
+  var decrementIcon = IconUtils.getJSXIcon(props.decrementIcon || /*#__PURE__*/React.createElement(ChevronDownIcon, decrementIconProps), _objectSpread({}, decrementIconProps), {
     props: props
   });
   var createHourPicker = function createHourPicker() {
@@ -2773,12 +2825,14 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     if (props.hourFormat === '12') {
       if (hour === 0) hour = 12;else if (hour > 11 && hour !== 12) hour = hour - 12;
     }
+    var hourProps = mergeProps(ptm('hour'));
     var hourDisplay = hour < 10 ? '0' + hour : hour;
-    return /*#__PURE__*/React.createElement("div", {
-      className: "p-hour-picker"
-    }, /*#__PURE__*/React.createElement("button", {
-      type: "button",
-      className: "p-link",
+    var hourPickerProps = mergeProps({
+      className: 'p-hour-picker'
+    }, ptm('hourPicker'));
+    var incrementButtonProps = mergeProps({
+      type: 'button',
+      className: 'p-link',
       onMouseDown: function onMouseDown(e) {
         return onTimePickerElementMouseDown(e, 0, 1);
       },
@@ -2787,9 +2841,10 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
       onKeyDown: function onKeyDown(e) {
         return onContainerButtonKeydown(e);
       }
-    }, incrementIcon, /*#__PURE__*/React.createElement(Ripple, null)), /*#__PURE__*/React.createElement("span", null, hourDisplay), /*#__PURE__*/React.createElement("button", {
-      type: "button",
-      className: "p-link",
+    }, ptm('incrementButton'));
+    var decrementButtonProps = mergeProps({
+      type: 'button',
+      className: 'p-link',
       onMouseDown: function onMouseDown(e) {
         return onTimePickerElementMouseDown(e, 0, -1);
       },
@@ -2798,18 +2853,21 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
       onKeyDown: function onKeyDown(e) {
         return onContainerButtonKeydown(e);
       }
-    }, decrementIcon, /*#__PURE__*/React.createElement(Ripple, null)));
+    }, ptm('decrementButton'));
+    return /*#__PURE__*/React.createElement("div", hourPickerProps, /*#__PURE__*/React.createElement("button", incrementButtonProps, incrementIcon, /*#__PURE__*/React.createElement(Ripple, null)), /*#__PURE__*/React.createElement("span", hourProps, hourDisplay), /*#__PURE__*/React.createElement("button", decrementButtonProps, decrementIcon, /*#__PURE__*/React.createElement(Ripple, null)));
   };
   var createMinutePicker = function createMinutePicker() {
     var currentTime = getCurrentDateTime();
     var minute = doStepMinute(currentTime.getMinutes());
     minute = minute > 59 ? minute - 60 : minute;
+    var minuteProps = mergeProps(ptm('minute'));
     var minuteDisplay = minute < 10 ? '0' + minute : minute;
-    return /*#__PURE__*/React.createElement("div", {
-      className: "p-minute-picker"
-    }, /*#__PURE__*/React.createElement("button", {
-      type: "button",
-      className: "p-link",
+    var minutePickerProps = mergeProps({
+      className: 'p-minute-picker'
+    }, ptm('minutePicker'));
+    var incrementButtonProps = mergeProps({
+      type: 'button',
+      className: 'p-link',
       onMouseDown: function onMouseDown(e) {
         return onTimePickerElementMouseDown(e, 1, 1);
       },
@@ -2818,9 +2876,10 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
       onKeyDown: function onKeyDown(e) {
         return onContainerButtonKeydown(e);
       }
-    }, incrementIcon, /*#__PURE__*/React.createElement(Ripple, null)), /*#__PURE__*/React.createElement("span", null, minuteDisplay), /*#__PURE__*/React.createElement("button", {
-      type: "button",
-      className: "p-link",
+    }, ptm('incrementButton'));
+    var decrementButtonProps = mergeProps({
+      type: 'button',
+      className: 'p-link',
       onMouseDown: function onMouseDown(e) {
         return onTimePickerElementMouseDown(e, 1, -1);
       },
@@ -2829,18 +2888,21 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
       onKeyDown: function onKeyDown(e) {
         return onContainerButtonKeydown(e);
       }
-    }, decrementIcon, /*#__PURE__*/React.createElement(Ripple, null)));
+    }, ptm('decrementButton'));
+    return /*#__PURE__*/React.createElement("div", minutePickerProps, /*#__PURE__*/React.createElement("button", incrementButtonProps, incrementIcon, /*#__PURE__*/React.createElement(Ripple, null)), /*#__PURE__*/React.createElement("span", minuteProps, minuteDisplay), /*#__PURE__*/React.createElement("button", decrementButtonProps, decrementIcon, /*#__PURE__*/React.createElement(Ripple, null)));
   };
   var createSecondPicker = function createSecondPicker() {
     if (props.showSeconds) {
       var currentTime = getCurrentDateTime();
+      var secondProps = mergeProps(ptm('second'));
       var second = currentTime.getSeconds();
       var secondDisplay = second < 10 ? '0' + second : second;
-      return /*#__PURE__*/React.createElement("div", {
-        className: "p-second-picker"
-      }, /*#__PURE__*/React.createElement("button", {
-        type: "button",
-        className: "p-link",
+      var secondPickerProps = mergeProps({
+        className: 'p-second-picker'
+      }, ptm('secondPicker'));
+      var incrementButtonProps = mergeProps({
+        type: 'button',
+        className: 'p-link',
         onMouseDown: function onMouseDown(e) {
           return onTimePickerElementMouseDown(e, 2, 1);
         },
@@ -2849,9 +2911,10 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
         onKeyDown: function onKeyDown(e) {
           return onContainerButtonKeydown(e);
         }
-      }, incrementIcon, /*#__PURE__*/React.createElement(Ripple, null)), /*#__PURE__*/React.createElement("span", null, secondDisplay), /*#__PURE__*/React.createElement("button", {
-        type: "button",
-        className: "p-link",
+      }, ptm('incrementButton'));
+      var decrementButtonProps = mergeProps({
+        type: 'button',
+        className: 'p-link',
         onMouseDown: function onMouseDown(e) {
           return onTimePickerElementMouseDown(e, 2, -1);
         },
@@ -2860,20 +2923,23 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
         onKeyDown: function onKeyDown(e) {
           return onContainerButtonKeydown(e);
         }
-      }, decrementIcon, /*#__PURE__*/React.createElement(Ripple, null)));
+      }, ptm('decrementButton'));
+      return /*#__PURE__*/React.createElement("div", secondPickerProps, /*#__PURE__*/React.createElement("button", incrementButtonProps, incrementIcon, /*#__PURE__*/React.createElement(Ripple, null)), /*#__PURE__*/React.createElement("span", secondProps, secondDisplay), /*#__PURE__*/React.createElement("button", decrementButtonProps, decrementIcon, /*#__PURE__*/React.createElement(Ripple, null)));
     }
     return null;
   };
   var createMiliSecondPicker = function createMiliSecondPicker() {
     if (props.showMillisec) {
       var currentTime = getCurrentDateTime();
+      var millisecondProps = mergeProps(ptm('millisecond'));
       var millisecond = currentTime.getMilliseconds();
       var millisecondDisplay = millisecond < 100 ? (millisecond < 10 ? '00' : '0') + millisecond : millisecond;
-      return /*#__PURE__*/React.createElement("div", {
-        className: "p-millisecond-picker"
-      }, /*#__PURE__*/React.createElement("button", {
-        type: "button",
-        className: "p-link",
+      var millisecondPickerProps = mergeProps({
+        className: 'p-millisecond-picker'
+      }, ptm('millisecond'));
+      var incrementButtonProps = mergeProps({
+        type: 'button',
+        className: 'p-link',
         onMouseDown: function onMouseDown(e) {
           return onTimePickerElementMouseDown(e, 3, 1);
         },
@@ -2882,9 +2948,10 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
         onKeyDown: function onKeyDown(e) {
           return onContainerButtonKeydown(e);
         }
-      }, incrementIcon, /*#__PURE__*/React.createElement(Ripple, null)), /*#__PURE__*/React.createElement("span", null, millisecondDisplay), /*#__PURE__*/React.createElement("button", {
-        type: "button",
-        className: "p-link",
+      }, ptm('incrementButton'));
+      var decrementButtonProps = mergeProps({
+        type: 'button',
+        className: 'p-link',
         onMouseDown: function onMouseDown(e) {
           return onTimePickerElementMouseDown(e, 3, -1);
         },
@@ -2893,7 +2960,8 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
         onKeyDown: function onKeyDown(e) {
           return onContainerButtonKeydown(e);
         }
-      }, decrementIcon, /*#__PURE__*/React.createElement(Ripple, null)));
+      }, ptm('decrementButton'));
+      return /*#__PURE__*/React.createElement("div", millisecondPickerProps, /*#__PURE__*/React.createElement("button", incrementButtonProps, incrementIcon, /*#__PURE__*/React.createElement(Ripple, null)), /*#__PURE__*/React.createElement("span", millisecondProps, millisecondDisplay), /*#__PURE__*/React.createElement("button", decrementButtonProps, decrementIcon, /*#__PURE__*/React.createElement(Ripple, null)));
     }
     return null;
   };
@@ -2902,30 +2970,41 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
       var currentTime = getCurrentDateTime();
       var hour = currentTime.getHours();
       var display = hour > 11 ? 'PM' : 'AM';
-      return /*#__PURE__*/React.createElement("div", {
-        className: "p-ampm-picker"
-      }, /*#__PURE__*/React.createElement("button", {
-        type: "button",
-        className: "p-link",
-        onClick: toggleAmPm
-      }, incrementIcon, /*#__PURE__*/React.createElement(Ripple, null)), /*#__PURE__*/React.createElement("span", null, display), /*#__PURE__*/React.createElement("button", {
-        type: "button",
-        className: "p-link",
-        onClick: toggleAmPm
-      }, decrementIcon, /*#__PURE__*/React.createElement(Ripple, null)));
+      var ampmProps = mergeProps(ptm('ampm'));
+      var ampmPickerProps = mergeProps({
+        className: 'p-ampm-picker'
+      }, ptm('ampmPicker'));
+      var incrementButtonProps = mergeProps({
+        type: 'button',
+        className: 'p-link',
+        onClick: function onClick(e) {
+          return toggleAmPm(e);
+        }
+      }, ptm('incrementButton'));
+      var decrementButtonProps = mergeProps({
+        type: 'button',
+        className: 'p-link',
+        onClick: function onClick(e) {
+          return toggleAmPm(e);
+        }
+      }, ptm('decrementButton'));
+      return /*#__PURE__*/React.createElement("div", ampmPickerProps, /*#__PURE__*/React.createElement("button", incrementButtonProps, incrementIcon, /*#__PURE__*/React.createElement(Ripple, null)), /*#__PURE__*/React.createElement("span", ampmProps, display), /*#__PURE__*/React.createElement("button", decrementButtonProps, decrementIcon, /*#__PURE__*/React.createElement(Ripple, null)));
     }
     return null;
   };
   var createSeparator = function createSeparator(separator) {
-    return /*#__PURE__*/React.createElement("div", {
-      className: "p-separator"
-    }, /*#__PURE__*/React.createElement("span", null, separator));
+    var separatorContainerProps = mergeProps({
+      className: 'p-separator'
+    }, ptm('separatorContainer'));
+    var separatorProps = mergeProps(ptm('separator'));
+    return /*#__PURE__*/React.createElement("div", separatorContainerProps, /*#__PURE__*/React.createElement("span", separatorProps, separator));
   };
   var createTimePicker = function createTimePicker() {
     if ((props.showTime || props.timeOnly) && currentView === 'date') {
-      return /*#__PURE__*/React.createElement("div", {
-        className: "p-timepicker"
-      }, createHourPicker(), createSeparator(':'), createMinutePicker(), props.showSeconds && createSeparator(':'), createSecondPicker(), props.showMillisec && createSeparator('.'), createMiliSecondPicker(), props.hourFormat === '12' && createSeparator(':'), createAmPmPicker());
+      var timePickerProps = mergeProps({
+        className: 'p-timepicker'
+      }, ptm('timePicker'));
+      return /*#__PURE__*/React.createElement("div", timePickerProps, createHourPicker(), createSeparator(':'), createMinutePicker(), props.showSeconds && createSeparator(':'), createSecondPicker(), props.showMillisec && createSeparator('.'), createMiliSecondPicker(), props.hourFormat === '12' && createSeparator(':'), createAmPmPicker());
     }
     return null;
   };
@@ -2951,7 +3030,8 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
         "aria-labelledby": props.ariaLabelledBy,
         inputMode: props.inputMode,
         tooltip: props.tooltip,
-        tooltipOptions: props.tooltipOptions
+        tooltipOptions: props.tooltipOptions,
+        pt: ptm('input')
       });
     }
     return null;
@@ -2964,7 +3044,8 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
         onClick: onButtonClick,
         tabIndex: "-1",
         disabled: props.disabled,
-        className: "p-datepicker-trigger"
+        className: "p-datepicker-trigger",
+        pt: ptm('dropdownButton')
       });
     }
     return null;
@@ -2984,16 +3065,18 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
       var _localeOptions4 = localeOptions(props.locale),
         today = _localeOptions4.today,
         clear = _localeOptions4.clear;
-      return /*#__PURE__*/React.createElement("div", {
-        className: "p-datepicker-buttonbar"
-      }, /*#__PURE__*/React.createElement(Button, {
+      var buttonbarProps = mergeProps({
+        className: 'p-datepicker-buttonbar'
+      }, ptm('buttonbar'));
+      return /*#__PURE__*/React.createElement("div", buttonbarProps, /*#__PURE__*/React.createElement(Button, {
         type: "button",
         label: today,
         onClick: onTodayButtonClick,
         onKeyDown: function onKeyDown(e) {
           return onContainerButtonKeydown(e);
         },
-        className: todayClassName
+        className: todayClassName,
+        pt: ptm('todayButton')
       }), /*#__PURE__*/React.createElement(Button, {
         type: "button",
         label: clear,
@@ -3001,7 +3084,8 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
         onKeyDown: function onKeyDown(e) {
           return onContainerButtonKeydown(e);
         },
-        className: clearClassName
+        className: clearClassName,
+        pt: ptm('clearButton')
       }));
     }
     return null;
@@ -3009,51 +3093,57 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
   var createFooter = function createFooter() {
     if (props.footerTemplate) {
       var _content3 = props.footerTemplate();
-      return /*#__PURE__*/React.createElement("div", {
-        className: "p-datepicker-footer"
-      }, _content3);
+      var footerProps = mergeProps({
+        className: 'p-datepicker-footer'
+      }, ptm('footer'));
+      return /*#__PURE__*/React.createElement("div", footerProps, _content3);
     }
     return null;
   };
   var createMonthPicker = function createMonthPicker() {
     if (currentView === 'month') {
-      return /*#__PURE__*/React.createElement("div", {
-        className: "p-monthpicker"
-      }, monthPickerValues().map(function (m, i) {
-        return /*#__PURE__*/React.createElement("span", {
-          onClick: function onClick(event) {
-            return onMonthSelect(event, i);
-          },
-          key: "month".concat(i + 1),
+      var monthPickerProps = mergeProps({
+        className: 'p-monthpicker'
+      }, ptm('monthPicker'));
+      return /*#__PURE__*/React.createElement("div", monthPickerProps, monthPickerValues().map(function (m, i) {
+        var monthProps = mergeProps({
           className: classNames('p-monthpicker-month', {
             'p-highlight': isMonthSelected(i),
-            'p-disabled': !isSelectable(1, i, currentYear)
-          })
-        }, m);
+            'p-disabled': !isSelectable(0, i, currentYear)
+          }),
+          onClick: function onClick(event) {
+            return onMonthSelect(event, i);
+          }
+        }, ptm('month'));
+        return /*#__PURE__*/React.createElement("span", _extends({}, monthProps, {
+          key: "month".concat(i + 1)
+        }), m);
       }));
     }
     return null;
   };
   var createYearPicker = function createYearPicker() {
     if (currentView === 'year') {
-      return /*#__PURE__*/React.createElement("div", {
-        className: "p-yearpicker"
-      }, yearPickerValues().map(function (y, i) {
-        return /*#__PURE__*/React.createElement("span", {
-          onClick: function onClick(event) {
-            return onYearSelect(event, y);
-          },
-          key: "year".concat(i + 1),
+      var yearPickerProps = mergeProps({
+        className: 'p-yearpicker'
+      }, ptm('yearPicker'));
+      return /*#__PURE__*/React.createElement("div", yearPickerProps, yearPickerValues().map(function (y, i) {
+        var yearProps = mergeProps({
           className: classNames('p-yearpicker-year', {
             'p-highlight': isYearSelected(y),
-            'p-disabled': !(isSelectable(0, 0, y) || isSelectable(30, 11, y))
-          })
-        }, y);
+            'p-disabled': !isSelectable(0, -1, y)
+          }),
+          onClick: function onClick(event) {
+            return onYearSelect(event, y);
+          }
+        }, ptm('year'));
+        return /*#__PURE__*/React.createElement("span", _extends({}, yearProps, {
+          key: "year".concat(i + 1)
+        }), y);
       }));
     }
     return null;
   };
-  var otherProps = CalendarBase.getOtherProps(props);
   var className = classNames('p-calendar p-component p-inputwrapper', props.className, (_classNames = {}, _defineProperty(_classNames, "p-calendar-w-btn p-calendar-w-btn-".concat(props.iconPos), props.showIcon), _defineProperty(_classNames, 'p-calendar-disabled', props.disabled), _defineProperty(_classNames, 'p-calendar-timeonly', props.timeOnly), _defineProperty(_classNames, 'p-inputwrapper-filled', props.value || DomHandler.hasClass(inputRef.current, 'p-filled') && inputRef.current.value !== ''), _defineProperty(_classNames, 'p-inputwrapper-focus', focusedState), _classNames));
   var panelClassName = classNames('p-datepicker p-component', props.panelClassName, {
     'p-datepicker-inline': props.inline,
@@ -3062,8 +3152,8 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     'p-datepicker-multiple-month': props.numberOfMonths > 1,
     'p-datepicker-monthpicker': currentView === 'month',
     'p-datepicker-touch-ui': props.touchUI,
-    'p-input-filled': PrimeReact.inputStyle === 'filled',
-    'p-ripple-disabled': PrimeReact.ripple === false
+    'p-input-filled': context && context.inputStyle === 'filled' || PrimeReact.inputStyle === 'filled',
+    'p-ripple-disabled': context && context.ripple === false || PrimeReact.ripple === false
   });
   var content = createContent();
   var datePicker = createDatePicker();
@@ -3072,12 +3162,13 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
   var footer = createFooter();
   var monthPicker = createMonthPicker();
   var yearPicker = createYearPicker();
-  return /*#__PURE__*/React.createElement("span", _extends({
+  var rootProps = mergeProps({
     ref: elementRef,
     id: props.id,
     className: className,
     style: props.style
-  }, otherProps), content, /*#__PURE__*/React.createElement(CalendarPanel, {
+  }, CalendarBase.getOtherProps(props), ptm('root'));
+  return /*#__PURE__*/React.createElement("span", rootProps, content, /*#__PURE__*/React.createElement(CalendarPanel, {
     ref: overlayRef,
     className: panelClassName,
     style: props.panelStyle,
@@ -3090,7 +3181,8 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     onEntered: onOverlayEntered,
     onExit: onOverlayExit,
     onExited: onOverlayExited,
-    transitionOptions: props.transitionOptions
+    transitionOptions: props.transitionOptions,
+    ptm: ptm
   }, datePicker, timePicker, monthPicker, yearPicker, buttonBar, footer));
 }));
 Calendar.displayName = 'Calendar';