@patternfly/react-core 4.202.18 → 4.202.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.202.18",
+  "version": "4.202.19",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -34,9 +34,9 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.53.18",
-    "@patternfly/react-styles": "^4.52.18",
-    "@patternfly/react-tokens": "^4.54.18",
+    "@patternfly/react-icons": "^4.53.19",
+    "@patternfly/react-styles": "^4.52.19",
+    "@patternfly/react-tokens": "^4.54.19",
     "focus-trap": "6.2.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
@@ -60,5 +60,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "fd2bf430267635cb2473b40153f591fa853b47ad"
+  "gitHead": "9e9d16ac392a83a7141cd1720079d46bc6bd796b"
 }

package/src/components/CalendarMonth/CalendarMonth.tsx

@@ -113,7 +113,11 @@ export const CalendarMonth = ({
   // eslint-disable-next-line prefer-const
   let [focusedDate, setFocusedDate] = React.useState(new Date(dateProp));
   if (!isValidDate(focusedDate)) {
-    focusedDate = today;
+    if (isValidDate(rangeStart)) {
+      focusedDate = rangeStart;
+    } else {
+      focusedDate = today;
+    }
   }
   const [hoveredDate, setHoveredDate] = React.useState(new Date(focusedDate));
   const focusRef = React.useRef<HTMLButtonElement>();
@@ -279,13 +283,15 @@ export const CalendarMonth = ({
                 const isSelected = isValidDate(dateProp) && isSameDate(date, dateProp);
                 const isFocused = isSameDate(date, focusedDate);
                 const isAdjacentMonth = date.getMonth() !== focusedDate.getMonth();
+                const isRangeStart = isValidDate(rangeStart) && isSameDate(date, rangeStart);
                 let isInRange = false;
-                let isRangeStart = false;
                 let isRangeEnd = false;
-                if (isValidDate(rangeStart) && isHoveredDateValid) {
+                if (isValidDate(rangeStart) && isValidDate(dateProp)) {
+                  isInRange = date > rangeStart && date < dateProp;
+                  isRangeEnd = isSameDate(date, dateProp);
+                } else if (isValidDate(rangeStart) && isHoveredDateValid) {
                   if (hoveredDate > rangeStart || isSameDate(hoveredDate, rangeStart)) {
                     isInRange = date > rangeStart && date < hoveredDate;
-                    isRangeStart = isSameDate(date, rangeStart);
                     isRangeEnd = isSameDate(date, hoveredDate);
                   }
                   // Don't handle focused dates before start dates for now.

package/src/components/CalendarMonth/examples/CalendarMonth.md

@@ -17,3 +17,12 @@ beta: true
 
 ```ts file="./CalendarMonthSelectableDate.tsx"
 ```
+
+### Date range
+
+In this example, there are 2 dates selected: a range start date (via the `rangeStart` prop) and a range end date (via the `date` prop). Additionally, any dates prior to the range start date are disabled by passing in an array of functions to the `validators` prop. In this case a single function is passed in, which checks whether a date is greater than or equal to the range start date.
+
+For this example, these dates are static and cannot be updated. For an interactive demo, see our [Date picker demos](https://www.patternfly.org/v4/components/date-picker/react-demos).
+
+```ts file="./CalendarMonthDateRange.tsx"
+```

package/src/components/CalendarMonth/examples/CalendarMonthDateRange.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { CalendarMonth } from '@patternfly/react-core';
+
+export const CalendarMonthDateRange: React.FunctionComponent = () => {
+  const startDate = new Date(2020, 10, 11);
+  const endDate = new Date(2020, 10, 24);
+  const disablePreStartDates = (date: Date) => date >= startDate;
+
+  return <CalendarMonth validators={[disablePreStartDates]} date={endDate} rangeStart={startDate} />;
+};