primereact 9.4.0 → 9.6.0

package/calendar/calendar.js

@@ -1,5 +1,5 @@
 this.primereact = this.primereact || {};
-this.primereact.calendar = (function (exports, React, PrimeReact, button, hooks, calendar, chevrondown, chevronleft, chevronright, chevronup, inputtext, overlayservice, ripple, utils, csstransition, portal) {
+this.primereact.calendar = (function (exports, React, PrimeReact, button, hooks, calendar, chevrondown, chevronleft, chevronright, chevronup, inputtext, overlayservice, ripple, utils, componentbase, csstransition, portal) {
   'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -25,6 +25,21 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, hooks,
   var React__namespace = /*#__PURE__*/_interopNamespace(React);
   var PrimeReact__default = /*#__PURE__*/_interopDefaultLegacy(PrimeReact);
 
+  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";
 
@@ -66,21 +81,6 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, hooks,
     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];
@@ -152,12 +152,13 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, hooks,
     return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray$1(arr, i) || _nonIterableRest();
   }
 
-  var CalendarBase = {
+  var CalendarBase = componentbase.ComponentBase.extend({
     defaultProps: {
       __TYPE: 'Calendar',
       appendTo: null,
       ariaLabelledBy: null,
       autoZIndex: true,
+      autoFocus: false,
       baseZIndex: 0,
       className: null,
       clearButtonClassName: 'p-button-secondary',
@@ -245,17 +246,18 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, hooks,
       yearNavigatorTemplate: null,
       yearRange: null,
       children: undefined
-    },
-    getProps: function getProps(props) {
-      return utils.ObjectUtils.getMergedProps(props, CalendarBase.defaultProps);
-    },
-    getOtherProps: function getOtherProps(props) {
-      return utils.ObjectUtils.getDiffProps(props, CalendarBase.defaultProps);
     }
-  };
+  });
 
   var CalendarPanel = /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
     var createElement = function createElement() {
+      var panelProps = utils.mergeProps({
+        ref: ref,
+        className: props.className,
+        style: props.style,
+        onClick: props.onClick,
+        onMouseUp: props.onMouseUp
+      }, props.ptm('panel'));
       return /*#__PURE__*/React__namespace.createElement(csstransition.CSSTransition, {
         nodeRef: ref,
         classNames: "p-connected-overlay",
@@ -270,13 +272,7 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, hooks,
         onEntered: props.onEntered,
         onExit: props.onExit,
         onExited: props.onExited
-      }, /*#__PURE__*/React__namespace.createElement("div", {
-        ref: ref,
-        className: props.className,
-        style: props.style,
-        onClick: props.onClick,
-        onMouseUp: props.onMouseUp
-      }, props.children));
+      }, /*#__PURE__*/React__namespace.createElement("div", panelProps, props.children));
     };
     var element = createElement();
     return props.inline ? element : /*#__PURE__*/React__namespace.createElement(portal.Portal, {
@@ -286,12 +282,15 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, hooks,
   });
   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__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
     var _classNames;
-    var props = CalendarBase.getProps(inProps);
+    var context = React__namespace.useContext(PrimeReact.PrimeReactContext);
+    var props = CalendarBase.getProps(inProps, context);
     var _React$useState = React__namespace.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       focusedState = _React$useState2[0],
@@ -304,6 +303,15 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, hooks,
       _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__namespace.useRef(null);
     var overlayRef = React__namespace.useRef(null);
     var inputRef = React__namespace.useRef(props.inputRef);
@@ -1079,7 +1087,7 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, hooks,
       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 = utils.DomHandler.findSingle(overlayRef.current, '.p-datepicker-prev');
@@ -1097,7 +1105,7 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, hooks,
           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);
@@ -1498,7 +1506,7 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, hooks,
     var onOverlayEnter = function onOverlayEnter() {
       if (props.autoZIndex) {
         var key = props.touchUI ? 'modal' : 'overlay';
-        utils.ZIndexUtils.set(key, overlayRef.current, PrimeReact__default["default"].autoZIndex, props.baseZIndex || PrimeReact__default["default"].zIndex[key]);
+        utils.ZIndexUtils.set(key, overlayRef.current, context && context.autoZIndex || PrimeReact__default["default"].autoZIndex, props.baseZIndex || context && context.zIndex[key] || PrimeReact__default["default"].zIndex[key]);
       }
       alignOverlay();
     };
@@ -1520,7 +1528,7 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, hooks,
       if (props.touchUI) {
         enableModality();
       } else if (overlayRef && overlayRef.current && inputRef && inputRef.current) {
-        utils.DomHandler.alignOverlay(overlayRef.current, inputRef.current, props.appendTo || PrimeReact__default["default"].appendTo);
+        utils.DomHandler.alignOverlay(overlayRef.current, inputRef.current, props.appendTo || context && context.appendTo || PrimeReact__default["default"].appendTo);
         if (appendDisabled()) {
           utils.DomHandler.relativePosition(overlayRef.current, inputRef.current);
         } else {
@@ -1748,9 +1756,9 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, hooks,
         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;
             }
@@ -1761,9 +1769,9 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, hooks,
         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;
             }
@@ -1773,7 +1781,7 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, hooks,
       if (props.disabledDates) {
         validDate = !isDateDisabled(day, month, year);
       }
-      if (props.disabledDays) {
+      if (props.disabledDays && currentView !== 'month') {
         validDay = !isDayDisabled(day, month, year);
       }
       if (props.selectOtherMonths === false && otherMonth) {
@@ -2325,7 +2333,6 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, hooks,
       utils.ObjectUtils.combinedRefs(inputRef, props.inputRef);
     }, [inputRef, props.inputRef]);
     hooks.useMountEffect(function () {
-      var unbindMaskEvents = null;
       var viewDate = getViewDate(props.viewDate);
       validateDate(viewDate);
       setViewDateState(viewDate);
@@ -2340,7 +2347,21 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, hooks,
             overlayRef.current.style.width = utils.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 utils.DomHandler.focus(inputRef.current, props.autoFocus);
+        }, 200);
+      }
+    });
+    hooks.useUpdateEffect(function () {
+      var unbindMaskEvents = null;
+      if (props.mask) {
         unbindMaskEvents = utils.mask(inputRef.current, {
           mask: props.mask,
           readOnly: props.readOnlyInput || props.disabled,
@@ -2353,14 +2374,10 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, hooks,
           }
         }).unbindEvents;
       }
-      if (props.value) {
-        updateInputfield(props.value);
-        setValue(props.value);
-      }
       return function () {
         props.mask && unbindMaskEvents && unbindMaskEvents();
       };
-    });
+    }, [props.mask]);
     hooks.useUpdateEffect(function () {
       setCurrentView(props.view);
     }, [props.view]);
@@ -2462,18 +2479,18 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, hooks,
         }
       };
       var iconClassName = 'p-datepicker-prev-icon';
-      var icon = props.prevIcon || /*#__PURE__*/React__namespace.createElement(chevronleft.ChevronLeftIcon, {
+      var previousIconProps = utils.mergeProps({
         className: iconClassName
-      });
-      var backwardNavigatorIcon = utils.IconUtils.getJSXIcon(icon, {
-        className: iconClassName
-      }, {
+      }, ptm('previousIcon'));
+      var icon = props.prevIcon || /*#__PURE__*/React__namespace.createElement(chevronleft.ChevronLeftIcon, previousIconProps);
+      var backwardNavigatorIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread({}, previousIconProps), {
         props: props
       });
-      return /*#__PURE__*/React__namespace.createElement("button", _extends({
-        type: "button",
-        className: "p-datepicker-prev"
-      }, navigatorProps), backwardNavigatorIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
+      var previousButtonProps = utils.mergeProps(_objectSpread({
+        type: 'button',
+        className: 'p-datepicker-prev'
+      }, navigatorProps), ptm('previousButton'));
+      return /*#__PURE__*/React__namespace.createElement("button", previousButtonProps, backwardNavigatorIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
     };
     var createForwardNavigator = function createForwardNavigator(isVisible) {
       var navigatorProps = isVisible ? {
@@ -2487,18 +2504,18 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, hooks,
         }
       };
       var iconClassName = 'p-datepicker-next-icon';
-      var icon = props.nextIcon || /*#__PURE__*/React__namespace.createElement(chevronright.ChevronRightIcon, {
-        className: iconClassName
-      });
-      var forwardNavigatorIcon = utils.IconUtils.getJSXIcon(icon, {
+      var nextIconProps = utils.mergeProps({
         className: iconClassName
-      }, {
+      }, ptm('nextIcon'));
+      var icon = props.nextIcon || /*#__PURE__*/React__namespace.createElement(chevronright.ChevronRightIcon, nextIconProps);
+      var forwardNavigatorIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread({}, nextIconProps), {
         props: props
       });
-      return /*#__PURE__*/React__namespace.createElement("button", _extends({
-        type: "button",
-        className: "p-datepicker-next"
-      }, navigatorProps), forwardNavigatorIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
+      var nextButtonProps = utils.mergeProps(_objectSpread({
+        type: 'button',
+        className: 'p-datepicker-next'
+      }, navigatorProps), ptm('nextButton'));
+      return /*#__PURE__*/React__namespace.createElement("button", nextButtonProps, forwardNavigatorIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
     };
     var createTitleMonthElement = function createTitleMonthElement(month) {
       var monthNames = PrimeReact.localeOption('monthNames', props.locale);
@@ -2517,17 +2534,20 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, hooks,
         var displayedMonthNames = displayedMonthOptions.map(function (option) {
           return option.label;
         });
-        var _content = /*#__PURE__*/React__namespace.createElement("select", {
-          className: "p-datepicker-month",
+        var selectProps = utils.mergeProps({
+          className: 'p-datepicker-month',
           onChange: function onChange(e) {
             return onMonthDropdownChange(e, e.target.value);
           },
           value: viewMonth
-        }, displayedMonthOptions.map(function (option) {
-          return /*#__PURE__*/React__namespace.createElement("option", {
-            key: option.label,
+        }, ptm('select'));
+        var _content = /*#__PURE__*/React__namespace.createElement("select", selectProps, displayedMonthOptions.map(function (option) {
+          var optionProps = utils.mergeProps({
             value: option.value
-          }, option.label);
+          }, ptm('option'));
+          return /*#__PURE__*/React__namespace.createElement("option", _extends({}, optionProps, {
+            key: option.label
+          }), option.label);
         }));
         if (props.monthNavigatorTemplate) {
           var defaultContentOptions = {
@@ -2543,11 +2563,12 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, hooks,
         }
         return _content;
       }
-      return currentView === 'date' && /*#__PURE__*/React__namespace.createElement("button", {
-        className: "p-datepicker-month p-link",
+      var monthTitleProps = utils.mergeProps({
+        className: 'p-datepicker-month p-link',
         onClick: switchToMonthView,
         disabled: switchViewButtonDisabled()
-      }, monthNames[month]);
+      }, ptm('monthTitle'));
+      return currentView === 'date' && /*#__PURE__*/React__namespace.createElement("button", monthTitleProps, monthNames[month]);
     };
     var createTitleYearElement = function createTitleYearElement(metaYear) {
       if (props.yearNavigator) {
@@ -2563,17 +2584,20 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, hooks,
         var displayedYearNames = _yearOptions2.filter(function (year) {
           return !(props.minDate && props.minDate.getFullYear() > year) && !(props.maxDate && props.maxDate.getFullYear() < year);
         });
-        var _content2 = /*#__PURE__*/React__namespace.createElement("select", {
-          className: "p-datepicker-year",
+        var selectProps = utils.mergeProps({
+          className: 'p-datepicker-year',
           onChange: function onChange(e) {
             return onYearDropdownChange(e, e.target.value);
           },
           value: viewYear
-        }, displayedYearNames.map(function (year) {
-          return /*#__PURE__*/React__namespace.createElement("option", {
-            key: year,
+        }, ptm('select'));
+        var _content2 = /*#__PURE__*/React__namespace.createElement("select", selectProps, displayedYearNames.map(function (year) {
+          var optionProps = utils.mergeProps({
             value: year
-          }, year);
+          }, ptm('option'));
+          return /*#__PURE__*/React__namespace.createElement("option", _extends({}, optionProps, {
+            key: year
+          }), year);
         }));
         if (props.yearNavigatorTemplate) {
           var options = displayedYearNames.map(function (name, i) {
@@ -2597,18 +2621,23 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, hooks,
         return _content2;
       }
       var displayYear = props.numberOfMonths > 1 ? metaYear : currentYear;
-      return currentView !== 'year' && /*#__PURE__*/React__namespace.createElement("button", {
-        className: "p-datepicker-year p-link",
-        onClick: switchToYearView,
+      var yearTitleProps = utils.mergeProps({
+        className: 'p-datepicker-year p-link',
+        onClick: function onClick(e) {
+          return switchToYearView(e);
+        },
         disabled: switchViewButtonDisabled()
-      }, displayYear);
+      }, ptm('yearTitle'));
+      return currentView !== 'year' && /*#__PURE__*/React__namespace.createElement("button", yearTitleProps, displayYear);
     };
     var createTitleDecadeElement = function createTitleDecadeElement() {
       var years = yearPickerValues();
+      var decadeTitleProps = utils.mergeProps({
+        className: 'p-datepicker-decade'
+      }, ptm('decadeTitle'));
       if (currentView === 'year') {
-        return /*#__PURE__*/React__namespace.createElement("span", {
-          className: "p-datepicker-decade"
-        }, props.decadeTemplate ? props.decadeTemplate(years) : /*#__PURE__*/React__namespace.createElement("span", null, "".concat(yearPickerValues()[0], " - ").concat(yearPickerValues()[yearPickerValues().length - 1])));
+        var decadeTitleTextProps = utils.mergeProps(ptm('decadeTitleText'));
+        return /*#__PURE__*/React__namespace.createElement("span", decadeTitleProps, props.decadeTemplate ? props.decadeTemplate(years) : /*#__PURE__*/React__namespace.createElement("span", decadeTitleTextProps, "".concat(yearPickerValues()[0], " - ").concat(yearPickerValues()[yearPickerValues().length - 1])));
       }
       return null;
     };
@@ -2616,23 +2645,30 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, hooks,
       var month = createTitleMonthElement(monthMetaData.month);
       var year = createTitleYearElement(monthMetaData.year);
       var decade = createTitleDecadeElement();
-      return /*#__PURE__*/React__namespace.createElement("div", {
-        className: "p-datepicker-title"
-      }, month, year, decade);
+      var titleProps = utils.mergeProps({
+        className: 'p-datepicker-title'
+      }, ptm('title'));
+      return /*#__PURE__*/React__namespace.createElement("div", titleProps, month, year, decade);
     };
     var createDayNames = function createDayNames(weekDays) {
+      var weekDayProps = utils.mergeProps(ptm('weekDay'));
+      var tableHeaderCellProps = utils.mergeProps({
+        scope: 'col'
+      }, ptm(ptm('tableHeaderCell')));
       var dayNames = weekDays.map(function (weekDay, index) {
-        return /*#__PURE__*/React__namespace.createElement("th", {
-          key: "".concat(weekDay, "-").concat(index),
-          scope: "col"
-        }, /*#__PURE__*/React__namespace.createElement("span", null, weekDay));
+        return /*#__PURE__*/React__namespace.createElement("th", _extends({}, tableHeaderCellProps, {
+          key: "".concat(weekDay, "-").concat(index)
+        }), /*#__PURE__*/React__namespace.createElement("span", weekDayProps, weekDay));
       });
       if (props.showWeek) {
-        var weekHeader = /*#__PURE__*/React__namespace.createElement("th", {
-          scope: "col",
-          key: "wn",
-          className: "p-datepicker-weekheader p-disabled"
-        }, /*#__PURE__*/React__namespace.createElement("span", null, PrimeReact.localeOption('weekHeader', props.locale)));
+        var weekHeaderProps = utils.mergeProps({
+          scope: 'col',
+          className: 'p-datepicker-weekheader p-disabled'
+        }, ptm('weekHeader'));
+        var weekLabel = utils.mergeProps(ptm('weekLabel'));
+        var weekHeader = /*#__PURE__*/React__namespace.createElement("th", _extends({}, weekHeaderProps, {
+          key: "wn"
+        }), /*#__PURE__*/React__namespace.createElement("span", weekLabel, PrimeReact.localeOption('weekHeader', props.locale)));
         return [weekHeader].concat(_toConsumableArray(dayNames));
       }
       return dayNames;
@@ -2661,37 +2697,49 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, hooks,
           'p-disabled': !date.selectable
         });
         var content = date.otherMonth && !props.showOtherMonths ? null : createDateCellContent(date, dateClassName, groupIndex);
-        return /*#__PURE__*/React__namespace.createElement("td", {
-          key: date.day,
+        var dayProps = utils.mergeProps({
           className: cellClassName
-        }, content);
+        }, ptm('day'));
+        return /*#__PURE__*/React__namespace.createElement("td", _extends({}, dayProps, {
+          key: date.day
+        }), content);
       });
       if (props.showWeek) {
-        var weekNumberCell = /*#__PURE__*/React__namespace.createElement("td", {
-          key: 'wn' + weekNumber,
-          className: "p-datepicker-weeknumber"
-        }, /*#__PURE__*/React__namespace.createElement("span", {
-          className: "p-disabled"
-        }, weekNumber));
+        var weekNumberProps = utils.mergeProps({
+          className: 'p-datepicker-weeknumber'
+        }, ptm('weekNumber'));
+        var weekLabelContainerProps = utils.mergeProps({
+          className: 'p-disabled'
+        }, ptm('weekLabelContainer'));
+        var weekNumberCell = /*#__PURE__*/React__namespace.createElement("td", _extends({}, weekNumberProps, {
+          key: 'wn' + weekNumber
+        }), /*#__PURE__*/React__namespace.createElement("span", weekLabelContainerProps, weekNumber));
         return [weekNumberCell].concat(_toConsumableArray(week));
       }
       return week;
     };
     var createDates = function createDates(monthMetaData, groupIndex) {
+      var tableBodyRowProps = utils.mergeProps(ptm('tableBodyRowProps'));
       return monthMetaData.dates.map(function (weekDates, index) {
-        return /*#__PURE__*/React__namespace.createElement("tr", {
+        return /*#__PURE__*/React__namespace.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__namespace.createElement("div", {
-        className: "p-datepicker-calendar-container"
-      }, /*#__PURE__*/React__namespace.createElement("table", {
-        className: "p-datepicker-calendar"
-      }, /*#__PURE__*/React__namespace.createElement("thead", null, /*#__PURE__*/React__namespace.createElement("tr", null, dayNames)), /*#__PURE__*/React__namespace.createElement("tbody", null, dates)));
+      var containerProps = utils.mergeProps({
+        className: 'p-datepicker-calendar-container',
+        key: utils.UniqueComponentId('calendar_container_')
+      }, ptm('container'));
+      var tableProps = utils.mergeProps({
+        className: 'p-datepicker-calendar'
+      }, ptm('table'));
+      var tableHeaderProps = utils.mergeProps(ptm('tableHeader'));
+      var tableHeaderRowProps = utils.mergeProps(ptm('tableHeaderRow'));
+      var tableBodyProps = utils.mergeProps(ptm('tableBody'));
+      return currentView === 'date' && /*#__PURE__*/React__namespace.createElement("div", containerProps, /*#__PURE__*/React__namespace.createElement("table", tableProps, /*#__PURE__*/React__namespace.createElement("thead", tableHeaderProps, /*#__PURE__*/React__namespace.createElement("tr", tableHeaderRowProps, dayNames)), /*#__PURE__*/React__namespace.createElement("tbody", tableBodyProps, dates)));
     };
     var createMonth = function createMonth(monthMetaData, index) {
       var weekDays = createWeekDaysMeta();
@@ -2701,12 +2749,16 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, hooks,
       var dateViewGrid = createDateViewGrid(monthMetaData, weekDays, index);
       var header = props.headerTemplate ? props.headerTemplate() : null;
       var monthKey = monthMetaData.month + '-' + monthMetaData.year;
-      return /*#__PURE__*/React__namespace.createElement("div", {
-        key: monthKey,
-        className: "p-datepicker-group"
-      }, /*#__PURE__*/React__namespace.createElement("div", {
-        className: "p-datepicker-header"
-      }, header, backwardNavigator, title, forwardNavigator), dateViewGrid);
+      var groupProps = utils.mergeProps({
+        className: 'p-datepicker-group'
+      }, ptm('group'));
+      var headerProps = utils.mergeProps({
+        className: 'p-datepicker-header',
+        key: index
+      }, ptm('header'));
+      return /*#__PURE__*/React__namespace.createElement("div", _extends({}, groupProps, {
+        key: monthKey
+      }), /*#__PURE__*/React__namespace.createElement("div", headerProps, header, backwardNavigator, title, forwardNavigator), dateViewGrid);
     };
     var createMonths = function createMonths(monthsMetaData) {
       var groups = monthsMetaData.map(createMonth);
@@ -2741,15 +2793,19 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, hooks,
       var forwardNavigator = createForwardNavigator(true);
       var yearElement = createTitleYearElement(getViewDate().getFullYear());
       var decade = createTitleDecadeElement();
-      return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("div", {
-        className: "p-datepicker-group-container"
-      }, /*#__PURE__*/React__namespace.createElement("div", {
-        className: "p-datepicker-group"
-      }, /*#__PURE__*/React__namespace.createElement("div", {
-        className: "p-datepicker-header"
-      }, backwardNavigator, /*#__PURE__*/React__namespace.createElement("div", {
-        className: "p-datepicker-title"
-      }, yearElement, decade), forwardNavigator))));
+      var groupContainerProps = utils.mergeProps({
+        className: 'p-datepicker-group-container'
+      }, ptm('groupContainer'));
+      var groupProps = utils.mergeProps({
+        className: 'p-datepicker-group'
+      }, ptm('group'));
+      var headerProps = utils.mergeProps({
+        className: 'p-datepicker-header'
+      }, ptm('header'));
+      var titleProps = utils.mergeProps({
+        className: 'p-datepicker-title'
+      }, ptm('title'));
+      return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("div", groupContainerProps, /*#__PURE__*/React__namespace.createElement("div", groupProps, /*#__PURE__*/React__namespace.createElement("div", headerProps, backwardNavigator, /*#__PURE__*/React__namespace.createElement("div", titleProps, yearElement, decade), forwardNavigator))));
     };
     var createDatePicker = function createDatePicker() {
       if (!props.timeOnly) {
@@ -2761,10 +2817,12 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, hooks,
       }
       return null;
     };
-    var incrementIcon = utils.IconUtils.getJSXIcon(props.incrementIcon || /*#__PURE__*/React__namespace.createElement(chevronup.ChevronUpIcon, null), undefined, {
+    var incrementIconProps = utils.mergeProps(ptm('incrementIcon'));
+    var decrementIconProps = utils.mergeProps(ptm('decrementIcon'));
+    var incrementIcon = utils.IconUtils.getJSXIcon(props.incrementIcon || /*#__PURE__*/React__namespace.createElement(chevronup.ChevronUpIcon, incrementIconProps), _objectSpread({}, incrementIconProps), {
       props: props
     });
-    var decrementIcon = utils.IconUtils.getJSXIcon(props.decrementIcon || /*#__PURE__*/React__namespace.createElement(chevrondown.ChevronDownIcon, null), undefined, {
+    var decrementIcon = utils.IconUtils.getJSXIcon(props.decrementIcon || /*#__PURE__*/React__namespace.createElement(chevrondown.ChevronDownIcon, decrementIconProps), _objectSpread({}, decrementIconProps), {
       props: props
     });
     var createHourPicker = function createHourPicker() {
@@ -2777,12 +2835,14 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, hooks,
       if (props.hourFormat === '12') {
         if (hour === 0) hour = 12;else if (hour > 11 && hour !== 12) hour = hour - 12;
       }
+      var hourProps = utils.mergeProps(ptm('hour'));
       var hourDisplay = hour < 10 ? '0' + hour : hour;
-      return /*#__PURE__*/React__namespace.createElement("div", {
-        className: "p-hour-picker"
-      }, /*#__PURE__*/React__namespace.createElement("button", {
-        type: "button",
-        className: "p-link",
+      var hourPickerProps = utils.mergeProps({
+        className: 'p-hour-picker'
+      }, ptm('hourPicker'));
+      var incrementButtonProps = utils.mergeProps({
+        type: 'button',
+        className: 'p-link',
         onMouseDown: function onMouseDown(e) {
           return onTimePickerElementMouseDown(e, 0, 1);
         },
@@ -2791,9 +2851,10 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, hooks,
         onKeyDown: function onKeyDown(e) {
           return onContainerButtonKeydown(e);
         }
-      }, incrementIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null)), /*#__PURE__*/React__namespace.createElement("span", null, hourDisplay), /*#__PURE__*/React__namespace.createElement("button", {
-        type: "button",
-        className: "p-link",
+      }, ptm('incrementButton'));
+      var decrementButtonProps = utils.mergeProps({
+        type: 'button',
+        className: 'p-link',
         onMouseDown: function onMouseDown(e) {
           return onTimePickerElementMouseDown(e, 0, -1);
         },
@@ -2802,18 +2863,21 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, hooks,
         onKeyDown: function onKeyDown(e) {
           return onContainerButtonKeydown(e);
         }
-      }, decrementIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null)));
+      }, ptm('decrementButton'));
+      return /*#__PURE__*/React__namespace.createElement("div", hourPickerProps, /*#__PURE__*/React__namespace.createElement("button", incrementButtonProps, incrementIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null)), /*#__PURE__*/React__namespace.createElement("span", hourProps, hourDisplay), /*#__PURE__*/React__namespace.createElement("button", decrementButtonProps, decrementIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null)));
     };
     var createMinutePicker = function createMinutePicker() {
       var currentTime = getCurrentDateTime();
       var minute = doStepMinute(currentTime.getMinutes());
       minute = minute > 59 ? minute - 60 : minute;
+      var minuteProps = utils.mergeProps(ptm('minute'));
       var minuteDisplay = minute < 10 ? '0' + minute : minute;
-      return /*#__PURE__*/React__namespace.createElement("div", {
-        className: "p-minute-picker"
-      }, /*#__PURE__*/React__namespace.createElement("button", {
-        type: "button",
-        className: "p-link",
+      var minutePickerProps = utils.mergeProps({
+        className: 'p-minute-picker'
+      }, ptm('minutePicker'));
+      var incrementButtonProps = utils.mergeProps({
+        type: 'button',
+        className: 'p-link',
         onMouseDown: function onMouseDown(e) {
           return onTimePickerElementMouseDown(e, 1, 1);
         },
@@ -2822,9 +2886,10 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, hooks,
         onKeyDown: function onKeyDown(e) {
           return onContainerButtonKeydown(e);
         }
-      }, incrementIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null)), /*#__PURE__*/React__namespace.createElement("span", null, minuteDisplay), /*#__PURE__*/React__namespace.createElement("button", {
-        type: "button",
-        className: "p-link",
+      }, ptm('incrementButton'));
+      var decrementButtonProps = utils.mergeProps({
+        type: 'button',
+        className: 'p-link',
         onMouseDown: function onMouseDown(e) {
           return onTimePickerElementMouseDown(e, 1, -1);
         },
@@ -2833,18 +2898,21 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, hooks,
         onKeyDown: function onKeyDown(e) {
           return onContainerButtonKeydown(e);
         }
-      }, decrementIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null)));
+      }, ptm('decrementButton'));
+      return /*#__PURE__*/React__namespace.createElement("div", minutePickerProps, /*#__PURE__*/React__namespace.createElement("button", incrementButtonProps, incrementIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null)), /*#__PURE__*/React__namespace.createElement("span", minuteProps, minuteDisplay), /*#__PURE__*/React__namespace.createElement("button", decrementButtonProps, decrementIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null)));
     };
     var createSecondPicker = function createSecondPicker() {
       if (props.showSeconds) {
         var currentTime = getCurrentDateTime();
+        var secondProps = utils.mergeProps(ptm('second'));
         var second = currentTime.getSeconds();
         var secondDisplay = second < 10 ? '0' + second : second;
-        return /*#__PURE__*/React__namespace.createElement("div", {
-          className: "p-second-picker"
-        }, /*#__PURE__*/React__namespace.createElement("button", {
-          type: "button",
-          className: "p-link",
+        var secondPickerProps = utils.mergeProps({
+          className: 'p-second-picker'
+        }, ptm('secondPicker'));
+        var incrementButtonProps = utils.mergeProps({
+          type: 'button',
+          className: 'p-link',
           onMouseDown: function onMouseDown(e) {
             return onTimePickerElementMouseDown(e, 2, 1);
           },
@@ -2853,9 +2921,10 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, hooks,
           onKeyDown: function onKeyDown(e) {
             return onContainerButtonKeydown(e);
           }
-        }, incrementIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null)), /*#__PURE__*/React__namespace.createElement("span", null, secondDisplay), /*#__PURE__*/React__namespace.createElement("button", {
-          type: "button",
-          className: "p-link",
+        }, ptm('incrementButton'));
+        var decrementButtonProps = utils.mergeProps({
+          type: 'button',
+          className: 'p-link',
           onMouseDown: function onMouseDown(e) {
             return onTimePickerElementMouseDown(e, 2, -1);
           },
@@ -2864,20 +2933,23 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, hooks,
           onKeyDown: function onKeyDown(e) {
             return onContainerButtonKeydown(e);
           }
-        }, decrementIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null)));
+        }, ptm('decrementButton'));
+        return /*#__PURE__*/React__namespace.createElement("div", secondPickerProps, /*#__PURE__*/React__namespace.createElement("button", incrementButtonProps, incrementIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null)), /*#__PURE__*/React__namespace.createElement("span", secondProps, secondDisplay), /*#__PURE__*/React__namespace.createElement("button", decrementButtonProps, decrementIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null)));
       }
       return null;
     };
     var createMiliSecondPicker = function createMiliSecondPicker() {
       if (props.showMillisec) {
         var currentTime = getCurrentDateTime();
+        var millisecondProps = utils.mergeProps(ptm('millisecond'));
         var millisecond = currentTime.getMilliseconds();
         var millisecondDisplay = millisecond < 100 ? (millisecond < 10 ? '00' : '0') + millisecond : millisecond;
-        return /*#__PURE__*/React__namespace.createElement("div", {
-          className: "p-millisecond-picker"
-        }, /*#__PURE__*/React__namespace.createElement("button", {
-          type: "button",
-          className: "p-link",
+        var millisecondPickerProps = utils.mergeProps({
+          className: 'p-millisecond-picker'
+        }, ptm('millisecond'));
+        var incrementButtonProps = utils.mergeProps({
+          type: 'button',
+          className: 'p-link',
           onMouseDown: function onMouseDown(e) {
             return onTimePickerElementMouseDown(e, 3, 1);
           },
@@ -2886,9 +2958,10 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, hooks,
           onKeyDown: function onKeyDown(e) {
             return onContainerButtonKeydown(e);
           }
-        }, incrementIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null)), /*#__PURE__*/React__namespace.createElement("span", null, millisecondDisplay), /*#__PURE__*/React__namespace.createElement("button", {
-          type: "button",
-          className: "p-link",
+        }, ptm('incrementButton'));
+        var decrementButtonProps = utils.mergeProps({
+          type: 'button',
+          className: 'p-link',
           onMouseDown: function onMouseDown(e) {
             return onTimePickerElementMouseDown(e, 3, -1);
           },
@@ -2897,7 +2970,8 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, hooks,
           onKeyDown: function onKeyDown(e) {
             return onContainerButtonKeydown(e);
           }
-        }, decrementIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null)));
+        }, ptm('decrementButton'));
+        return /*#__PURE__*/React__namespace.createElement("div", millisecondPickerProps, /*#__PURE__*/React__namespace.createElement("button", incrementButtonProps, incrementIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null)), /*#__PURE__*/React__namespace.createElement("span", millisecondProps, millisecondDisplay), /*#__PURE__*/React__namespace.createElement("button", decrementButtonProps, decrementIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null)));
       }
       return null;
     };
@@ -2906,30 +2980,41 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, hooks,
         var currentTime = getCurrentDateTime();
         var hour = currentTime.getHours();
         var display = hour > 11 ? 'PM' : 'AM';
-        return /*#__PURE__*/React__namespace.createElement("div", {
-          className: "p-ampm-picker"
-        }, /*#__PURE__*/React__namespace.createElement("button", {
-          type: "button",
-          className: "p-link",
-          onClick: toggleAmPm
-        }, incrementIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null)), /*#__PURE__*/React__namespace.createElement("span", null, display), /*#__PURE__*/React__namespace.createElement("button", {
-          type: "button",
-          className: "p-link",
-          onClick: toggleAmPm
-        }, decrementIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null)));
+        var ampmProps = utils.mergeProps(ptm('ampm'));
+        var ampmPickerProps = utils.mergeProps({
+          className: 'p-ampm-picker'
+        }, ptm('ampmPicker'));
+        var incrementButtonProps = utils.mergeProps({
+          type: 'button',
+          className: 'p-link',
+          onClick: function onClick(e) {
+            return toggleAmPm(e);
+          }
+        }, ptm('incrementButton'));
+        var decrementButtonProps = utils.mergeProps({
+          type: 'button',
+          className: 'p-link',
+          onClick: function onClick(e) {
+            return toggleAmPm(e);
+          }
+        }, ptm('decrementButton'));
+        return /*#__PURE__*/React__namespace.createElement("div", ampmPickerProps, /*#__PURE__*/React__namespace.createElement("button", incrementButtonProps, incrementIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null)), /*#__PURE__*/React__namespace.createElement("span", ampmProps, display), /*#__PURE__*/React__namespace.createElement("button", decrementButtonProps, decrementIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null)));
       }
       return null;
     };
     var createSeparator = function createSeparator(separator) {
-      return /*#__PURE__*/React__namespace.createElement("div", {
-        className: "p-separator"
-      }, /*#__PURE__*/React__namespace.createElement("span", null, separator));
+      var separatorContainerProps = utils.mergeProps({
+        className: 'p-separator'
+      }, ptm('separatorContainer'));
+      var separatorProps = utils.mergeProps(ptm('separator'));
+      return /*#__PURE__*/React__namespace.createElement("div", separatorContainerProps, /*#__PURE__*/React__namespace.createElement("span", separatorProps, separator));
     };
     var createTimePicker = function createTimePicker() {
       if ((props.showTime || props.timeOnly) && currentView === 'date') {
-        return /*#__PURE__*/React__namespace.createElement("div", {
-          className: "p-timepicker"
-        }, createHourPicker(), createSeparator(':'), createMinutePicker(), props.showSeconds && createSeparator(':'), createSecondPicker(), props.showMillisec && createSeparator('.'), createMiliSecondPicker(), props.hourFormat === '12' && createSeparator(':'), createAmPmPicker());
+        var timePickerProps = utils.mergeProps({
+          className: 'p-timepicker'
+        }, ptm('timePicker'));
+        return /*#__PURE__*/React__namespace.createElement("div", timePickerProps, createHourPicker(), createSeparator(':'), createMinutePicker(), props.showSeconds && createSeparator(':'), createSecondPicker(), props.showMillisec && createSeparator('.'), createMiliSecondPicker(), props.hourFormat === '12' && createSeparator(':'), createAmPmPicker());
       }
       return null;
     };
@@ -2955,7 +3040,8 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, hooks,
           "aria-labelledby": props.ariaLabelledBy,
           inputMode: props.inputMode,
           tooltip: props.tooltip,
-          tooltipOptions: props.tooltipOptions
+          tooltipOptions: props.tooltipOptions,
+          pt: ptm('input')
         });
       }
       return null;
@@ -2968,7 +3054,8 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, hooks,
           onClick: onButtonClick,
           tabIndex: "-1",
           disabled: props.disabled,
-          className: "p-datepicker-trigger"
+          className: "p-datepicker-trigger",
+          pt: ptm('dropdownButton')
         });
       }
       return null;
@@ -2988,16 +3075,18 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, hooks,
         var _localeOptions4 = PrimeReact.localeOptions(props.locale),
           today = _localeOptions4.today,
           clear = _localeOptions4.clear;
-        return /*#__PURE__*/React__namespace.createElement("div", {
-          className: "p-datepicker-buttonbar"
-        }, /*#__PURE__*/React__namespace.createElement(button.Button, {
+        var buttonbarProps = utils.mergeProps({
+          className: 'p-datepicker-buttonbar'
+        }, ptm('buttonbar'));
+        return /*#__PURE__*/React__namespace.createElement("div", buttonbarProps, /*#__PURE__*/React__namespace.createElement(button.Button, {
           type: "button",
           label: today,
           onClick: onTodayButtonClick,
           onKeyDown: function onKeyDown(e) {
             return onContainerButtonKeydown(e);
           },
-          className: todayClassName
+          className: todayClassName,
+          pt: ptm('todayButton')
         }), /*#__PURE__*/React__namespace.createElement(button.Button, {
           type: "button",
           label: clear,
@@ -3005,7 +3094,8 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, hooks,
           onKeyDown: function onKeyDown(e) {
             return onContainerButtonKeydown(e);
           },
-          className: clearClassName
+          className: clearClassName,
+          pt: ptm('clearButton')
         }));
       }
       return null;
@@ -3013,51 +3103,57 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, hooks,
     var createFooter = function createFooter() {
       if (props.footerTemplate) {
         var _content3 = props.footerTemplate();
-        return /*#__PURE__*/React__namespace.createElement("div", {
-          className: "p-datepicker-footer"
-        }, _content3);
+        var footerProps = utils.mergeProps({
+          className: 'p-datepicker-footer'
+        }, ptm('footer'));
+        return /*#__PURE__*/React__namespace.createElement("div", footerProps, _content3);
       }
       return null;
     };
     var createMonthPicker = function createMonthPicker() {
       if (currentView === 'month') {
-        return /*#__PURE__*/React__namespace.createElement("div", {
-          className: "p-monthpicker"
-        }, monthPickerValues().map(function (m, i) {
-          return /*#__PURE__*/React__namespace.createElement("span", {
-            onClick: function onClick(event) {
-              return onMonthSelect(event, i);
-            },
-            key: "month".concat(i + 1),
+        var monthPickerProps = utils.mergeProps({
+          className: 'p-monthpicker'
+        }, ptm('monthPicker'));
+        return /*#__PURE__*/React__namespace.createElement("div", monthPickerProps, monthPickerValues().map(function (m, i) {
+          var monthProps = utils.mergeProps({
             className: utils.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__namespace.createElement("span", _extends({}, monthProps, {
+            key: "month".concat(i + 1)
+          }), m);
         }));
       }
       return null;
     };
     var createYearPicker = function createYearPicker() {
       if (currentView === 'year') {
-        return /*#__PURE__*/React__namespace.createElement("div", {
-          className: "p-yearpicker"
-        }, yearPickerValues().map(function (y, i) {
-          return /*#__PURE__*/React__namespace.createElement("span", {
-            onClick: function onClick(event) {
-              return onYearSelect(event, y);
-            },
-            key: "year".concat(i + 1),
+        var yearPickerProps = utils.mergeProps({
+          className: 'p-yearpicker'
+        }, ptm('yearPicker'));
+        return /*#__PURE__*/React__namespace.createElement("div", yearPickerProps, yearPickerValues().map(function (y, i) {
+          var yearProps = utils.mergeProps({
             className: utils.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__namespace.createElement("span", _extends({}, yearProps, {
+            key: "year".concat(i + 1)
+          }), y);
         }));
       }
       return null;
     };
-    var otherProps = CalendarBase.getOtherProps(props);
     var className = utils.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 || utils.DomHandler.hasClass(inputRef.current, 'p-filled') && inputRef.current.value !== ''), _defineProperty(_classNames, 'p-inputwrapper-focus', focusedState), _classNames));
     var panelClassName = utils.classNames('p-datepicker p-component', props.panelClassName, {
       'p-datepicker-inline': props.inline,
@@ -3066,8 +3162,8 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, hooks,
       'p-datepicker-multiple-month': props.numberOfMonths > 1,
       'p-datepicker-monthpicker': currentView === 'month',
       'p-datepicker-touch-ui': props.touchUI,
-      'p-input-filled': PrimeReact__default["default"].inputStyle === 'filled',
-      'p-ripple-disabled': PrimeReact__default["default"].ripple === false
+      'p-input-filled': context && context.inputStyle === 'filled' || PrimeReact__default["default"].inputStyle === 'filled',
+      'p-ripple-disabled': context && context.ripple === false || PrimeReact__default["default"].ripple === false
     });
     var content = createContent();
     var datePicker = createDatePicker();
@@ -3076,12 +3172,13 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, hooks,
     var footer = createFooter();
     var monthPicker = createMonthPicker();
     var yearPicker = createYearPicker();
-    return /*#__PURE__*/React__namespace.createElement("span", _extends({
+    var rootProps = utils.mergeProps({
       ref: elementRef,
       id: props.id,
       className: className,
       style: props.style
-    }, otherProps), content, /*#__PURE__*/React__namespace.createElement(CalendarPanel, {
+    }, CalendarBase.getOtherProps(props), ptm('root'));
+    return /*#__PURE__*/React__namespace.createElement("span", rootProps, content, /*#__PURE__*/React__namespace.createElement(CalendarPanel, {
       ref: overlayRef,
       className: panelClassName,
       style: props.panelStyle,
@@ -3094,7 +3191,8 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, hooks,
       onEntered: onOverlayEntered,
       onExit: onOverlayExit,
       onExited: onOverlayExited,
-      transitionOptions: props.transitionOptions
+      transitionOptions: props.transitionOptions,
+      ptm: ptm
     }, datePicker, timePicker, monthPicker, yearPicker, buttonBar, footer));
   }));
   Calendar.displayName = 'Calendar';
@@ -3105,4 +3203,4 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, hooks,
 
   return exports;
 
-})({}, React, primereact.api, primereact.button, primereact.hooks, primereact.icons.calendar, primereact.icons.chevrondown, primereact.icons.chevronleft, primereact.icons.chevronright, primereact.icons.chevronup, primereact.inputtext, primereact.overlayservice, primereact.ripple, primereact.utils, primereact.csstransition, primereact.portal);
+})({}, React, primereact.api, primereact.button, primereact.hooks, primereact.icons.calendar, primereact.icons.chevrondown, primereact.icons.chevronleft, primereact.icons.chevronright, primereact.icons.chevronup, primereact.inputtext, primereact.overlayservice, primereact.ripple, primereact.utils, primereact.componentbase, primereact.csstransition, primereact.portal);