@plusscommunities/pluss-core-web 1.6.4-beta.0 → 1.6.5-beta.0

package/dist/index.cjs.js

@@ -3561,7 +3561,7 @@ var pluss_new = {
 var form = {
 	viewBox: "0 0 256 256",
 	paths: [
-		"M164,152a4,4,0,0,1-4,4H96a4,4,0,0,1,0-8h64A4,4,0,0,1,164,152Zm-4-36H96a4,4,0,0,0,0,8h64a4,4,0,0,0,0-8Zm52-68V216a12,12,0,0,1-12,12H56a12,12,0,0,1-12-12V48A12,12,0,0,1,56,36H94.08a44,44,0,0,1,67.84,0H200A12,12,0,0,1,212,48ZM92,64v4h72V64a36,36,0,0,0-72,0ZM204,48a4,4,0,0,0-4-4H167.17A43.71,43.71,0,0,1,172,64v8a4,4,0,0,1-4,4H88a4,4,0,0,1-4-4V64a43.71,43.71,0,0,1,4.83-20H56a4,4,0,0,0-4,4V216a4,4,0,0,0,4,4H200a4,4,0,0,0,4-4Z"
+		"M200,32H163.74a47.92,47.92,0,0,0-71.48,0H56A16,16,0,0,0,40,48V216a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V48A16,16,0,0,0,200,32Zm-72,0a32,32,0,0,1,32,32H96A32,32,0,0,1,128,32Zm32,128H96a8,8,0,0,1,0-16h64a8,8,0,0,1,0,16Zm0-32H96a8,8,0,0,1,0-16h64a8,8,0,0,1,0,16Z"
 	]
 };
 var icons = {
@@ -4455,7 +4455,13 @@ var DatePicker = /*#__PURE__*/function (_Component) {
   }, {
     key: "onNewProps",
     value: function onNewProps(nextProps, forceUpdate) {
-      if (this.props.multiple && nextProps.selectedDates !== this.props.selectedDates) {
+      if (!!nextProps.shownMonth && nextProps.shownMonth !== this.props.shownMonth) {
+        var shownMonth = new Date(nextProps.shownMonth.getFullYear(), nextProps.shownMonth.getMonth() + 1, 0);
+        this.setState({
+          shownMonth: shownMonth
+        });
+        this.generateGrid(shownMonth);
+      } else if (this.props.multiple && nextProps.selectedDates !== this.props.selectedDates) {
         this.generateGrid(this.state.shownMonth, nextProps.selectedDates);
       } else if (forceUpdate || nextProps.selectedDate !== this.props.selectedDate) {
         var dateToUse = nextProps.selectedDate;
@@ -4468,11 +4474,13 @@ var DatePicker = /*#__PURE__*/function (_Component) {
           dateToUse = new Date();
         }
 
+        var _shownMonth = this.props.shownMonth ? this.state.shownMonth : dateToUse;
+
         this.setState({
-          shownMonth: dateToUse,
+          shownMonth: _shownMonth,
           selectedDate: dateToUse
         });
-        this.generateGrid(dateToUse, dateToUse);
+        this.generateGrid(_shownMonth, dateToUse);
       }
     }
   }, {
@@ -4507,19 +4515,35 @@ var DatePicker = /*#__PURE__*/function (_Component) {
 
       return date.isSame(selectedDate, 'date');
     }
+  }, {
+    key: "isDateEnabled",
+    value: function isDateEnabled(date) {
+      if (this.props.enabledDates) {
+        var found = this.props.enabledDates.find(function (d) {
+          return moment__default['default'](d.day).format('YYYYMMDD') === date.format('YYYYMMDD');
+        });
+        if (found) return found.enabled;
+      }
+
+      return null;
+    }
   }, {
     key: "changeMonth",
     value: function changeMonth(change) {
+      var _this2 = this;
+
       var newShownDate = new Date(this.state.shownMonth.getFullYear(), this.state.shownMonth.getMonth() + 1 + change, 0);
       this.setState({
         shownMonth: newShownDate
+      }, function () {
+        if (_this2.props.changeMonth) _this2.props.changeMonth(_this2.state.shownMonth);
       });
       this.generateGrid(newShownDate);
     }
   }, {
     key: "selectRange",
     value: function selectRange(date) {
-      var _this2 = this;
+      var _this3 = this;
 
       var d1 = moment__default['default'](this.state.lastSelected, 'DD-MM-YYYY');
       var d2 = moment__default['default'](date, 'DD-MM-YYYY');
@@ -4543,7 +4567,7 @@ var DatePicker = /*#__PURE__*/function (_Component) {
       }
 
       if (___default['default'].includes(this.props.selectedDates, d2.format('DD-MM-YYYY')) && !___default['default'].includes(this.props.selectedDates, d1.format('DD-MM-YYYY')) || !___default['default'].some(dateRange, function (d) {
-        return !___default['default'].includes(_this2.props.selectedDates, d);
+        return !___default['default'].includes(_this3.props.selectedDates, d);
       })) {
         // the first clicked date was just de-selected and then clicked on a selected date
         // or every date in the range is already selected, then
@@ -4560,7 +4584,14 @@ var DatePicker = /*#__PURE__*/function (_Component) {
   }, {
     key: "selectDate",
     value: function selectDate(date, e) {
-      console.log('selected a date');
+      var enabled = this.isDateEnabled(date);
+      var isBeforeMinDate = this.props.minDate && moment__default['default'](date).isBefore(this.props.minDate);
+      console.log('selected a date', {
+        date: date,
+        enabled: enabled,
+        isBeforeMinDate: isBeforeMinDate
+      });
+      if (enabled === false || isBeforeMinDate) return;
 
       if (this.props.multiple) {
         var dateKey = moment__default['default'](date).format('DD-MM-YYYY');
@@ -4623,10 +4654,12 @@ var DatePicker = /*#__PURE__*/function (_Component) {
           display: thisDate.date(),
           isFaded: !thisDate.isSame(month, 'month'),
           isToday: thisDate.isSame(moment__default['default'](), 'date'),
-          isSelected: this.isDateSelected(thisDate, selectedDateToUse)
+          isSelected: this.isDateSelected(thisDate, selectedDateToUse),
+          isEnabled: this.isDateEnabled(thisDate)
         });
         dateToModify = dateToModify.add(1, 'day');
-      }
+      } // console.log('generateGrid', JSON.stringify(rows, null, 2));
+
 
       this.setState({
         grid: rows
@@ -4635,7 +4668,7 @@ var DatePicker = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderGrid",
     value: function renderGrid() {
-      var _this3 = this;
+      var _this4 = this;
 
       return this.state.grid.map(function (row, index) {
         return /*#__PURE__*/React__default['default'].createElement("div", {
@@ -4656,13 +4689,17 @@ var DatePicker = /*#__PURE__*/function (_Component) {
             classes += ' datepicker__date--selected';
           }
 
+          if (typeof date.isEnabled === 'boolean') {
+            classes += date.isEnabled ? ' datepicker__date--enabled' : ' datepicker__date--disabled';
+          }
+
           return /*#__PURE__*/React__default['default'].createElement("div", {
             className: classes,
             key: date.dateKey
           }, /*#__PURE__*/React__default['default'].createElement("div", {
             className: "datepicker__date__inner",
             onClick: function onClick(e) {
-              _this3.selectDate(date.date, e);
+              return _this4.selectDate(date.date, e);
             }
           }, date.display));
         }));

package/dist/index.esm.js

@@ -3531,7 +3531,7 @@ var pluss_new = {
 var form = {
 	viewBox: "0 0 256 256",
 	paths: [
-		"M164,152a4,4,0,0,1-4,4H96a4,4,0,0,1,0-8h64A4,4,0,0,1,164,152Zm-4-36H96a4,4,0,0,0,0,8h64a4,4,0,0,0,0-8Zm52-68V216a12,12,0,0,1-12,12H56a12,12,0,0,1-12-12V48A12,12,0,0,1,56,36H94.08a44,44,0,0,1,67.84,0H200A12,12,0,0,1,212,48ZM92,64v4h72V64a36,36,0,0,0-72,0ZM204,48a4,4,0,0,0-4-4H167.17A43.71,43.71,0,0,1,172,64v8a4,4,0,0,1-4,4H88a4,4,0,0,1-4-4V64a43.71,43.71,0,0,1,4.83-20H56a4,4,0,0,0-4,4V216a4,4,0,0,0,4,4H200a4,4,0,0,0,4-4Z"
+		"M200,32H163.74a47.92,47.92,0,0,0-71.48,0H56A16,16,0,0,0,40,48V216a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V48A16,16,0,0,0,200,32Zm-72,0a32,32,0,0,1,32,32H96A32,32,0,0,1,128,32Zm32,128H96a8,8,0,0,1,0-16h64a8,8,0,0,1,0,16Zm0-32H96a8,8,0,0,1,0-16h64a8,8,0,0,1,0,16Z"
 	]
 };
 var icons = {
@@ -4425,7 +4425,13 @@ var DatePicker = /*#__PURE__*/function (_Component) {
   }, {
     key: "onNewProps",
     value: function onNewProps(nextProps, forceUpdate) {
-      if (this.props.multiple && nextProps.selectedDates !== this.props.selectedDates) {
+      if (!!nextProps.shownMonth && nextProps.shownMonth !== this.props.shownMonth) {
+        var shownMonth = new Date(nextProps.shownMonth.getFullYear(), nextProps.shownMonth.getMonth() + 1, 0);
+        this.setState({
+          shownMonth: shownMonth
+        });
+        this.generateGrid(shownMonth);
+      } else if (this.props.multiple && nextProps.selectedDates !== this.props.selectedDates) {
         this.generateGrid(this.state.shownMonth, nextProps.selectedDates);
       } else if (forceUpdate || nextProps.selectedDate !== this.props.selectedDate) {
         var dateToUse = nextProps.selectedDate;
@@ -4438,11 +4444,13 @@ var DatePicker = /*#__PURE__*/function (_Component) {
           dateToUse = new Date();
         }
 
+        var _shownMonth = this.props.shownMonth ? this.state.shownMonth : dateToUse;
+
         this.setState({
-          shownMonth: dateToUse,
+          shownMonth: _shownMonth,
           selectedDate: dateToUse
         });
-        this.generateGrid(dateToUse, dateToUse);
+        this.generateGrid(_shownMonth, dateToUse);
       }
     }
   }, {
@@ -4477,19 +4485,35 @@ var DatePicker = /*#__PURE__*/function (_Component) {
 
       return date.isSame(selectedDate, 'date');
     }
+  }, {
+    key: "isDateEnabled",
+    value: function isDateEnabled(date) {
+      if (this.props.enabledDates) {
+        var found = this.props.enabledDates.find(function (d) {
+          return moment(d.day).format('YYYYMMDD') === date.format('YYYYMMDD');
+        });
+        if (found) return found.enabled;
+      }
+
+      return null;
+    }
   }, {
     key: "changeMonth",
     value: function changeMonth(change) {
+      var _this2 = this;
+
       var newShownDate = new Date(this.state.shownMonth.getFullYear(), this.state.shownMonth.getMonth() + 1 + change, 0);
       this.setState({
         shownMonth: newShownDate
+      }, function () {
+        if (_this2.props.changeMonth) _this2.props.changeMonth(_this2.state.shownMonth);
       });
       this.generateGrid(newShownDate);
     }
   }, {
     key: "selectRange",
     value: function selectRange(date) {
-      var _this2 = this;
+      var _this3 = this;
 
       var d1 = moment(this.state.lastSelected, 'DD-MM-YYYY');
       var d2 = moment(date, 'DD-MM-YYYY');
@@ -4513,7 +4537,7 @@ var DatePicker = /*#__PURE__*/function (_Component) {
       }
 
       if (_.includes(this.props.selectedDates, d2.format('DD-MM-YYYY')) && !_.includes(this.props.selectedDates, d1.format('DD-MM-YYYY')) || !_.some(dateRange, function (d) {
-        return !_.includes(_this2.props.selectedDates, d);
+        return !_.includes(_this3.props.selectedDates, d);
       })) {
         // the first clicked date was just de-selected and then clicked on a selected date
         // or every date in the range is already selected, then
@@ -4530,7 +4554,14 @@ var DatePicker = /*#__PURE__*/function (_Component) {
   }, {
     key: "selectDate",
     value: function selectDate(date, e) {
-      console.log('selected a date');
+      var enabled = this.isDateEnabled(date);
+      var isBeforeMinDate = this.props.minDate && moment(date).isBefore(this.props.minDate);
+      console.log('selected a date', {
+        date: date,
+        enabled: enabled,
+        isBeforeMinDate: isBeforeMinDate
+      });
+      if (enabled === false || isBeforeMinDate) return;
 
       if (this.props.multiple) {
         var dateKey = moment(date).format('DD-MM-YYYY');
@@ -4593,10 +4624,12 @@ var DatePicker = /*#__PURE__*/function (_Component) {
           display: thisDate.date(),
           isFaded: !thisDate.isSame(month, 'month'),
           isToday: thisDate.isSame(moment(), 'date'),
-          isSelected: this.isDateSelected(thisDate, selectedDateToUse)
+          isSelected: this.isDateSelected(thisDate, selectedDateToUse),
+          isEnabled: this.isDateEnabled(thisDate)
         });
         dateToModify = dateToModify.add(1, 'day');
-      }
+      } // console.log('generateGrid', JSON.stringify(rows, null, 2));
+
 
       this.setState({
         grid: rows
@@ -4605,7 +4638,7 @@ var DatePicker = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderGrid",
     value: function renderGrid() {
-      var _this3 = this;
+      var _this4 = this;
 
       return this.state.grid.map(function (row, index) {
         return /*#__PURE__*/React.createElement("div", {
@@ -4626,13 +4659,17 @@ var DatePicker = /*#__PURE__*/function (_Component) {
             classes += ' datepicker__date--selected';
           }
 
+          if (typeof date.isEnabled === 'boolean') {
+            classes += date.isEnabled ? ' datepicker__date--enabled' : ' datepicker__date--disabled';
+          }
+
           return /*#__PURE__*/React.createElement("div", {
             className: classes,
             key: date.dateKey
           }, /*#__PURE__*/React.createElement("div", {
             className: "datepicker__date__inner",
             onClick: function onClick(e) {
-              _this3.selectDate(date.date, e);
+              return _this4.selectDate(date.date, e);
             }
           }, date.display));
         }));

package/dist/index.umd.js

@@ -3529,7 +3529,7 @@
   var form = {
   	viewBox: "0 0 256 256",
   	paths: [
-  		"M164,152a4,4,0,0,1-4,4H96a4,4,0,0,1,0-8h64A4,4,0,0,1,164,152Zm-4-36H96a4,4,0,0,0,0,8h64a4,4,0,0,0,0-8Zm52-68V216a12,12,0,0,1-12,12H56a12,12,0,0,1-12-12V48A12,12,0,0,1,56,36H94.08a44,44,0,0,1,67.84,0H200A12,12,0,0,1,212,48ZM92,64v4h72V64a36,36,0,0,0-72,0ZM204,48a4,4,0,0,0-4-4H167.17A43.71,43.71,0,0,1,172,64v8a4,4,0,0,1-4,4H88a4,4,0,0,1-4-4V64a43.71,43.71,0,0,1,4.83-20H56a4,4,0,0,0-4,4V216a4,4,0,0,0,4,4H200a4,4,0,0,0,4-4Z"
+  		"M200,32H163.74a47.92,47.92,0,0,0-71.48,0H56A16,16,0,0,0,40,48V216a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V48A16,16,0,0,0,200,32Zm-72,0a32,32,0,0,1,32,32H96A32,32,0,0,1,128,32Zm32,128H96a8,8,0,0,1,0-16h64a8,8,0,0,1,0,16Zm0-32H96a8,8,0,0,1,0-16h64a8,8,0,0,1,0,16Z"
   	]
   };
   var icons = {
@@ -4423,7 +4423,13 @@
     }, {
       key: "onNewProps",
       value: function onNewProps(nextProps, forceUpdate) {
-        if (this.props.multiple && nextProps.selectedDates !== this.props.selectedDates) {
+        if (!!nextProps.shownMonth && nextProps.shownMonth !== this.props.shownMonth) {
+          var shownMonth = new Date(nextProps.shownMonth.getFullYear(), nextProps.shownMonth.getMonth() + 1, 0);
+          this.setState({
+            shownMonth: shownMonth
+          });
+          this.generateGrid(shownMonth);
+        } else if (this.props.multiple && nextProps.selectedDates !== this.props.selectedDates) {
           this.generateGrid(this.state.shownMonth, nextProps.selectedDates);
         } else if (forceUpdate || nextProps.selectedDate !== this.props.selectedDate) {
           var dateToUse = nextProps.selectedDate;
@@ -4436,11 +4442,13 @@
             dateToUse = new Date();
           }
 
+          var _shownMonth = this.props.shownMonth ? this.state.shownMonth : dateToUse;
+
           this.setState({
-            shownMonth: dateToUse,
+            shownMonth: _shownMonth,
             selectedDate: dateToUse
           });
-          this.generateGrid(dateToUse, dateToUse);
+          this.generateGrid(_shownMonth, dateToUse);
         }
       }
     }, {
@@ -4475,19 +4483,35 @@
 
         return date.isSame(selectedDate, 'date');
       }
+    }, {
+      key: "isDateEnabled",
+      value: function isDateEnabled(date) {
+        if (this.props.enabledDates) {
+          var found = this.props.enabledDates.find(function (d) {
+            return moment__default['default'](d.day).format('YYYYMMDD') === date.format('YYYYMMDD');
+          });
+          if (found) return found.enabled;
+        }
+
+        return null;
+      }
     }, {
       key: "changeMonth",
       value: function changeMonth(change) {
+        var _this2 = this;
+
         var newShownDate = new Date(this.state.shownMonth.getFullYear(), this.state.shownMonth.getMonth() + 1 + change, 0);
         this.setState({
           shownMonth: newShownDate
+        }, function () {
+          if (_this2.props.changeMonth) _this2.props.changeMonth(_this2.state.shownMonth);
         });
         this.generateGrid(newShownDate);
       }
     }, {
       key: "selectRange",
       value: function selectRange(date) {
-        var _this2 = this;
+        var _this3 = this;
 
         var d1 = moment__default['default'](this.state.lastSelected, 'DD-MM-YYYY');
         var d2 = moment__default['default'](date, 'DD-MM-YYYY');
@@ -4511,7 +4535,7 @@
         }
 
         if (___default['default'].includes(this.props.selectedDates, d2.format('DD-MM-YYYY')) && !___default['default'].includes(this.props.selectedDates, d1.format('DD-MM-YYYY')) || !___default['default'].some(dateRange, function (d) {
-          return !___default['default'].includes(_this2.props.selectedDates, d);
+          return !___default['default'].includes(_this3.props.selectedDates, d);
         })) {
           // the first clicked date was just de-selected and then clicked on a selected date
           // or every date in the range is already selected, then
@@ -4528,7 +4552,14 @@
     }, {
       key: "selectDate",
       value: function selectDate(date, e) {
-        console.log('selected a date');
+        var enabled = this.isDateEnabled(date);
+        var isBeforeMinDate = this.props.minDate && moment__default['default'](date).isBefore(this.props.minDate);
+        console.log('selected a date', {
+          date: date,
+          enabled: enabled,
+          isBeforeMinDate: isBeforeMinDate
+        });
+        if (enabled === false || isBeforeMinDate) return;
 
         if (this.props.multiple) {
           var dateKey = moment__default['default'](date).format('DD-MM-YYYY');
@@ -4591,10 +4622,12 @@
             display: thisDate.date(),
             isFaded: !thisDate.isSame(month, 'month'),
             isToday: thisDate.isSame(moment__default['default'](), 'date'),
-            isSelected: this.isDateSelected(thisDate, selectedDateToUse)
+            isSelected: this.isDateSelected(thisDate, selectedDateToUse),
+            isEnabled: this.isDateEnabled(thisDate)
           });
           dateToModify = dateToModify.add(1, 'day');
-        }
+        } // console.log('generateGrid', JSON.stringify(rows, null, 2));
+
 
         this.setState({
           grid: rows
@@ -4603,7 +4636,7 @@
     }, {
       key: "renderGrid",
       value: function renderGrid() {
-        var _this3 = this;
+        var _this4 = this;
 
         return this.state.grid.map(function (row, index) {
           return /*#__PURE__*/React__default['default'].createElement("div", {
@@ -4624,13 +4657,17 @@
               classes += ' datepicker__date--selected';
             }
 
+            if (typeof date.isEnabled === 'boolean') {
+              classes += date.isEnabled ? ' datepicker__date--enabled' : ' datepicker__date--disabled';
+            }
+
             return /*#__PURE__*/React__default['default'].createElement("div", {
               className: classes,
               key: date.dateKey
             }, /*#__PURE__*/React__default['default'].createElement("div", {
               className: "datepicker__date__inner",
               onClick: function onClick(e) {
-                _this3.selectDate(date.date, e);
+                return _this4.selectDate(date.date, e);
               }
             }, date.display));
           }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plusscommunities/pluss-core-web",
-  "version": "1.6.4-beta.0",
+  "version": "1.6.5-beta.0",
   "description": "Core extension package for Pluss Communities platform",
   "main": "dist/index.cjs.js",
   "scripts": {

package/src/components/DatePicker.js

@@ -18,7 +18,11 @@ class DatePicker extends Component {
   }
 
   onNewProps(nextProps, forceUpdate) {
-    if (this.props.multiple && nextProps.selectedDates !== this.props.selectedDates) {
+    if (!!nextProps.shownMonth && nextProps.shownMonth !== this.props.shownMonth) {
+      const shownMonth = new Date(nextProps.shownMonth.getFullYear(), nextProps.shownMonth.getMonth() + 1, 0);
+      this.setState({ shownMonth });
+      this.generateGrid(shownMonth);
+    } else if (this.props.multiple && nextProps.selectedDates !== this.props.selectedDates) {
       this.generateGrid(this.state.shownMonth, nextProps.selectedDates);
     } else if (forceUpdate || nextProps.selectedDate !== this.props.selectedDate) {
       let dateToUse = nextProps.selectedDate;
@@ -28,11 +32,12 @@ class DatePicker extends Component {
       if (isNaN(dateToUse)) {
         dateToUse = new Date();
       }
+      const shownMonth = this.props.shownMonth ? this.state.shownMonth : dateToUse;
       this.setState({
-        shownMonth: dateToUse,
+        shownMonth: shownMonth,
         selectedDate: dateToUse,
       });
-      this.generateGrid(dateToUse, dateToUse);
+      this.generateGrid(shownMonth, dateToUse);
     }
   }
 
@@ -61,11 +66,24 @@ class DatePicker extends Component {
     return date.isSame(selectedDate, 'date');
   }
 
+  isDateEnabled(date) {
+    if (this.props.enabledDates) {
+      const found = this.props.enabledDates.find((d) => moment(d.day).format('YYYYMMDD') === date.format('YYYYMMDD'));
+      if (found) return found.enabled;
+    }
+    return null;
+  }
+
   changeMonth(change) {
     const newShownDate = new Date(this.state.shownMonth.getFullYear(), this.state.shownMonth.getMonth() + 1 + change, 0);
-    this.setState({
-      shownMonth: newShownDate,
-    });
+    this.setState(
+      {
+        shownMonth: newShownDate,
+      },
+      () => {
+        if (this.props.changeMonth) this.props.changeMonth(this.state.shownMonth);
+      },
+    );
     this.generateGrid(newShownDate);
   }
 
@@ -113,7 +131,11 @@ class DatePicker extends Component {
   }
 
   selectDate(date, e) {
-    console.log('selected a date');
+    const enabled = this.isDateEnabled(date);
+    const isBeforeMinDate = this.props.minDate && moment(date).isBefore(this.props.minDate);
+    console.log('selected a date', { date, enabled, isBeforeMinDate });
+    if (enabled === false || isBeforeMinDate) return;
+
     if (this.props.multiple) {
       const dateKey = moment(date).format('DD-MM-YYYY');
 
@@ -173,11 +195,13 @@ class DatePicker extends Component {
         isFaded: !thisDate.isSame(month, 'month'),
         isToday: thisDate.isSame(moment(), 'date'),
         isSelected: this.isDateSelected(thisDate, selectedDateToUse),
+        isEnabled: this.isDateEnabled(thisDate),
       });
 
       dateToModify = dateToModify.add(1, 'day');
     }
 
+    // console.log('generateGrid', JSON.stringify(rows, null, 2));
     this.setState({
       grid: rows,
     });
@@ -198,14 +222,12 @@ class DatePicker extends Component {
             if (date.isSelected) {
               classes += ' datepicker__date--selected';
             }
+            if (typeof date.isEnabled === 'boolean') {
+              classes += date.isEnabled ? ' datepicker__date--enabled' : ' datepicker__date--disabled';
+            }
             return (
               <div className={classes} key={date.dateKey}>
-                <div
-                  className="datepicker__date__inner"
-                  onClick={(e) => {
-                    this.selectDate(date.date, e);
-                  }}
-                >
+                <div className="datepicker__date__inner" onClick={(e) => this.selectDate(date.date, e)}>
                   {date.display}
                 </div>
               </div>

package/src/components/svg-icons.json

@@ -815,7 +815,7 @@
   "form": {
     "viewBox": "0 0 256 256",
     "paths": [
-      "M164,152a4,4,0,0,1-4,4H96a4,4,0,0,1,0-8h64A4,4,0,0,1,164,152Zm-4-36H96a4,4,0,0,0,0,8h64a4,4,0,0,0,0-8Zm52-68V216a12,12,0,0,1-12,12H56a12,12,0,0,1-12-12V48A12,12,0,0,1,56,36H94.08a44,44,0,0,1,67.84,0H200A12,12,0,0,1,212,48ZM92,64v4h72V64a36,36,0,0,0-72,0ZM204,48a4,4,0,0,0-4-4H167.17A43.71,43.71,0,0,1,172,64v8a4,4,0,0,1-4,4H88a4,4,0,0,1-4-4V64a43.71,43.71,0,0,1,4.83-20H56a4,4,0,0,0-4,4V216a4,4,0,0,0,4,4H200a4,4,0,0,0,4-4Z"
+      "M200,32H163.74a47.92,47.92,0,0,0-71.48,0H56A16,16,0,0,0,40,48V216a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V48A16,16,0,0,0,200,32Zm-72,0a32,32,0,0,1,32,32H96A32,32,0,0,1,128,32Zm32,128H96a8,8,0,0,1,0-16h64a8,8,0,0,1,0,16Zm0-32H96a8,8,0,0,1,0-16h64a8,8,0,0,1,0,16Z"
     ]
   }
 }