@primer/components 0.0.0-20219253356 → 0.0.0-20219254849

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # @primer/components
 
-## 0.0.0-20219253356
+## 0.0.0-20219254849
 
 ### Patch Changes
 

package/lib/DatePicker/DatePicker.js

@@ -23,6 +23,8 @@ const DatePicker = ({
   confirmation,
   focusTrapSettings,
   focusZoneSettings,
+  maxDate,
+  minDate,
   onOpen: onOpenExternal,
   onClose: onCloseExternal,
   open,
@@ -37,6 +39,8 @@ const DatePicker = ({
   const datePickerConfiguration = {
     anchorVariant,
     confirmation,
+    maxDate,
+    minDate,
     selection,
     view
   };

package/lib/DatePicker/DatePickerPanel.js

@@ -7,7 +7,7 @@ exports.DatePickerPanel = void 0;
 
 var _dateFns = require("date-fns");
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _Box = _interopRequireDefault(require("../Box"));
 
@@ -25,12 +25,12 @@ var _StyledOcticon = _interopRequireDefault(require("../StyledOcticon"));
 
 var _Button = _interopRequireWildcard(require("../Button"));
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 const DatePickerPanelContainer = (0, _styledComponents.default)(_Box.default).withConfig({
   displayName: "DatePickerPanel__DatePickerPanelContainer",
   componentId: "sc-19upxpo-0"
@@ -58,10 +58,38 @@ const DatePickerPanel = () => {
     nextMonth,
     previousMonth
   } = (0, _useDatePicker.default)();
+  const previousDisabled = (0, _react.useMemo)(() => {
+    const {
+      minDate
+    } = configuration;
+    if (!minDate) return false;
+    const previous = (0, _dateFns.subMonths)(currentViewingDate, 1);
+
+    if (minDate.getFullYear() >= previous.getFullYear() && minDate.getMonth() > previous.getMonth()) {
+      return true;
+    }
+
+    return false;
+  }, [configuration, currentViewingDate]);
+  const nextDisabled = (0, _react.useMemo)(() => {
+    const {
+      maxDate,
+      view
+    } = configuration;
+    if (!maxDate) return false;
+    const next = (0, _dateFns.addMonths)(currentViewingDate, view === '2-month' ? 2 : 1);
+
+    if (maxDate.getFullYear() <= next.getFullYear() && maxDate.getMonth() < next.getMonth()) {
+      return true;
+    }
+
+    return false;
+  }, [configuration, currentViewingDate]);
   return /*#__PURE__*/_react.default.createElement(DatePickerPanelContainer, null, /*#__PURE__*/_react.default.createElement(DatePickerPanelMonths, null, /*#__PURE__*/_react.default.createElement(ArrowButton, {
     variant: "small",
     side: "left",
-    onClick: previousMonth
+    onClick: previousMonth,
+    disabled: previousDisabled
   }, /*#__PURE__*/_react.default.createElement(_StyledOcticon.default, {
     icon: _octiconsReact.ChevronLeftIcon,
     color: "fg.muted"
@@ -74,7 +102,8 @@ const DatePickerPanel = () => {
   }), /*#__PURE__*/_react.default.createElement(ArrowButton, {
     variant: "small",
     side: "right",
-    onClick: nextMonth
+    onClick: nextMonth,
+    disabled: nextDisabled
   }, /*#__PURE__*/_react.default.createElement(_StyledOcticon.default, {
     icon: _octiconsReact.ChevronRightIcon,
     color: "fg.muted"

package/lib-esm/DatePicker/DatePicker.js

@@ -8,6 +8,8 @@ export const DatePicker = ({
   confirmation,
   focusTrapSettings,
   focusZoneSettings,
+  maxDate,
+  minDate,
   onOpen: onOpenExternal,
   onClose: onCloseExternal,
   open,
@@ -22,6 +24,8 @@ export const DatePicker = ({
   const datePickerConfiguration = {
     anchorVariant,
     confirmation,
+    maxDate,
+    minDate,
     selection,
     view
   };

package/lib-esm/DatePicker/DatePickerPanel.js

@@ -1,5 +1,5 @@
-import { addMonths } from 'date-fns';
-import React from 'react';
+import { addMonths, subMonths } from 'date-fns';
+import React, { useMemo } from 'react';
 import Box from '../Box';
 import { Month } from './Month';
 import styled from 'styled-components';
@@ -34,10 +34,38 @@ export const DatePickerPanel = () => {
     nextMonth,
     previousMonth
   } = useDatePicker();
+  const previousDisabled = useMemo(() => {
+    const {
+      minDate
+    } = configuration;
+    if (!minDate) return false;
+    const previous = subMonths(currentViewingDate, 1);
+
+    if (minDate.getFullYear() >= previous.getFullYear() && minDate.getMonth() > previous.getMonth()) {
+      return true;
+    }
+
+    return false;
+  }, [configuration, currentViewingDate]);
+  const nextDisabled = useMemo(() => {
+    const {
+      maxDate,
+      view
+    } = configuration;
+    if (!maxDate) return false;
+    const next = addMonths(currentViewingDate, view === '2-month' ? 2 : 1);
+
+    if (maxDate.getFullYear() <= next.getFullYear() && maxDate.getMonth() < next.getMonth()) {
+      return true;
+    }
+
+    return false;
+  }, [configuration, currentViewingDate]);
   return /*#__PURE__*/React.createElement(DatePickerPanelContainer, null, /*#__PURE__*/React.createElement(DatePickerPanelMonths, null, /*#__PURE__*/React.createElement(ArrowButton, {
     variant: "small",
     side: "left",
-    onClick: previousMonth
+    onClick: previousMonth,
+    disabled: previousDisabled
   }, /*#__PURE__*/React.createElement(StyledOcticon, {
     icon: ChevronLeftIcon,
     color: "fg.muted"
@@ -50,7 +78,8 @@ export const DatePickerPanel = () => {
   }), /*#__PURE__*/React.createElement(ArrowButton, {
     variant: "small",
     side: "right",
-    onClick: nextMonth
+    onClick: nextMonth,
+    disabled: nextDisabled
   }, /*#__PURE__*/React.createElement(StyledOcticon, {
     icon: ChevronRightIcon,
     color: "fg.muted"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/components",
-  "version": "0.0.0-20219253356",
+  "version": "0.0.0-20219254849",
   "description": "Primer react components",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",