@primer/components 0.0.0-20219253356 → 0.0.0-202192543046

package/CHANGELOG.md

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

package/lib/DatePicker/DatePicker.js

@@ -23,6 +23,8 @@ const DatePicker = ({
   confirmation,
   focusTrapSettings,
   focusZoneSettings,
+  maxDate,
+  minDate,
   onOpen: onOpenExternal,
   onClose: onCloseExternal,
   open,
@@ -30,15 +32,19 @@ const DatePicker = ({
   renderAnchor,
   selection,
   value,
-  view
+  view,
+  weekStartsOn
 }) => {
   const buttonRef = (0, _react.useRef)(null);
   const [isOpen, setIsOpen] = (0, _react.useState)(false);
   const datePickerConfiguration = {
     anchorVariant,
     confirmation,
+    maxDate,
+    minDate,
     selection,
-    view
+    view,
+    weekStartsOn
   };
 
   const onOpen = gesture => {

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/DatePicker/Month.js

@@ -19,6 +19,8 @@ var _constants = require("../constants");
 
 var _Day = require("./Day");
 
+var _useDatePicker = _interopRequireDefault(require("./useDatePicker"));
+
 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); }
@@ -42,17 +44,23 @@ const Month = ({
   month,
   year
 }) => {
+  const {
+    configuration
+  } = (0, _useDatePicker.default)();
   const [selectedDay, setSelectedDay] = (0, _react.useState)(null);
   const getTitle = (0, _react.useMemo)(() => `${(0, _dateFns.format)(new Date(year, month), 'MMMM yyyy')}`, [month, year]);
   const weekdayHeaders = (0, _react.useMemo)(() => {
     const now = new Date(year, month);
+    const weekOptions = {
+      weekStartsOn: configuration.weekStartsOn === 'Sunday' ? 0 : 1
+    };
     return (0, _dateFns.eachDayOfInterval)({
-      start: (0, _dateFns.startOfWeek)(now),
-      end: (0, _dateFns.endOfWeek)(now)
+      start: (0, _dateFns.startOfWeek)(now, weekOptions),
+      end: (0, _dateFns.endOfWeek)(now, weekOptions)
     }).map(d => /*#__PURE__*/_react.default.createElement(WeekdayHeader, {
       key: `weekday-${d}-header`
     }, (0, _dateFns.format)(d, 'EEEEEE')));
-  }, [month, year]);
+  }, [configuration.weekStartsOn, month, year]);
 
   const dayAction = date => {
     setSelectedDay(date);
@@ -61,8 +69,9 @@ const Month = ({
   const dayComponents = (0, _react.useMemo)(() => {
     const components = [];
     const firstDay = new Date(year, month, 1);
+    const preBlanks = configuration.weekStartsOn === 'Sunday' ? firstDay.getDay() : (firstDay.getDay() + 6) % 7;
 
-    for (let i = 0; i < firstDay.getDay(); i++) {
+    for (let i = 0; i < preBlanks; i++) {
       components.push( /*#__PURE__*/_react.default.createElement(_Day.BlankDay, {
         key: `month-pre-blank-${i}`
       }));
@@ -79,15 +88,16 @@ const Month = ({
     }
 
     const lastDay = (0, _dateFns.lastDayOfMonth)(firstDay);
+    const postBlanks = configuration.weekStartsOn === 'Sunday' ? lastDay.getDay() : (lastDay.getDay() + 6) % 7;
 
-    for (let i = 6; i > lastDay.getDay(); i--) {
+    for (let i = 6; i > postBlanks; i--) {
       components.push( /*#__PURE__*/_react.default.createElement(_Day.BlankDay, {
         key: `month-post-blank-${i}`
       }));
     }
 
     return components;
-  }, [month, selectedDay, year]);
+  }, [configuration.weekStartsOn, month, selectedDay, year]);
   return /*#__PURE__*/_react.default.createElement(MonthComponent, {
     role: "grid"
   }, /*#__PURE__*/_react.default.createElement(MonthTitle, null, getTitle), weekdayHeaders, dayComponents);

package/lib/DatePicker/useDatePicker.d.ts

@@ -15,6 +15,7 @@ export interface DatePickerConfiguration {
     rangeIncrement?: number;
     selection?: SelectionVariant;
     view?: '1-month' | '2-month';
+    weekStartsOn?: 'Sunday' | 'Monday';
 }
 export declare type RangeSelection = {
     from: Date;

package/lib/DatePicker/useDatePicker.js

@@ -166,7 +166,8 @@ const defaultConfiguration = {
   dimWeekends: false,
   placeholder: 'Select a Date...',
   selection: 'single',
-  view: '2-month'
+  view: '2-month',
+  weekStartsOn: 'Sunday'
 };
 
 const DatePickerProvider = ({

package/lib-esm/DatePicker/DatePicker.js

@@ -8,6 +8,8 @@ export const DatePicker = ({
   confirmation,
   focusTrapSettings,
   focusZoneSettings,
+  maxDate,
+  minDate,
   onOpen: onOpenExternal,
   onClose: onCloseExternal,
   open,
@@ -15,15 +17,19 @@ export const DatePicker = ({
   renderAnchor,
   selection,
   value,
-  view
+  view,
+  weekStartsOn
 }) => {
   const buttonRef = useRef(null);
   const [isOpen, setIsOpen] = useState(false);
   const datePickerConfiguration = {
     anchorVariant,
     confirmation,
+    maxDate,
+    minDate,
     selection,
-    view
+    view,
+    weekStartsOn
   };
 
   const onOpen = gesture => {

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/lib-esm/DatePicker/Month.js

@@ -5,6 +5,7 @@ import Box from '../Box';
 import Text from '../Text';
 import { get } from '../constants';
 import { BlankDay, Day } from './Day';
+import useDatePicker from './useDatePicker';
 const MonthComponent = styled(Box).withConfig({
   displayName: "Month__MonthComponent",
   componentId: "l6j7o0-0"
@@ -21,17 +22,23 @@ export const Month = ({
   month,
   year
 }) => {
+  const {
+    configuration
+  } = useDatePicker();
   const [selectedDay, setSelectedDay] = useState(null);
   const getTitle = useMemo(() => `${format(new Date(year, month), 'MMMM yyyy')}`, [month, year]);
   const weekdayHeaders = useMemo(() => {
     const now = new Date(year, month);
+    const weekOptions = {
+      weekStartsOn: configuration.weekStartsOn === 'Sunday' ? 0 : 1
+    };
     return eachDayOfInterval({
-      start: startOfWeek(now),
-      end: endOfWeek(now)
+      start: startOfWeek(now, weekOptions),
+      end: endOfWeek(now, weekOptions)
     }).map(d => /*#__PURE__*/React.createElement(WeekdayHeader, {
       key: `weekday-${d}-header`
     }, format(d, 'EEEEEE')));
-  }, [month, year]);
+  }, [configuration.weekStartsOn, month, year]);
 
   const dayAction = date => {
     setSelectedDay(date);
@@ -40,8 +47,9 @@ export const Month = ({
   const dayComponents = useMemo(() => {
     const components = [];
     const firstDay = new Date(year, month, 1);
+    const preBlanks = configuration.weekStartsOn === 'Sunday' ? firstDay.getDay() : (firstDay.getDay() + 6) % 7;
 
-    for (let i = 0; i < firstDay.getDay(); i++) {
+    for (let i = 0; i < preBlanks; i++) {
       components.push( /*#__PURE__*/React.createElement(BlankDay, {
         key: `month-pre-blank-${i}`
       }));
@@ -58,15 +66,16 @@ export const Month = ({
     }
 
     const lastDay = lastDayOfMonth(firstDay);
+    const postBlanks = configuration.weekStartsOn === 'Sunday' ? lastDay.getDay() : (lastDay.getDay() + 6) % 7;
 
-    for (let i = 6; i > lastDay.getDay(); i--) {
+    for (let i = 6; i > postBlanks; i--) {
       components.push( /*#__PURE__*/React.createElement(BlankDay, {
         key: `month-post-blank-${i}`
       }));
     }
 
     return components;
-  }, [month, selectedDay, year]);
+  }, [configuration.weekStartsOn, month, selectedDay, year]);
   return /*#__PURE__*/React.createElement(MonthComponent, {
     role: "grid"
   }, /*#__PURE__*/React.createElement(MonthTitle, null, getTitle), weekdayHeaders, dayComponents);

package/lib-esm/DatePicker/useDatePicker.d.ts

@@ -15,6 +15,7 @@ export interface DatePickerConfiguration {
     rangeIncrement?: number;
     selection?: SelectionVariant;
     view?: '1-month' | '2-month';
+    weekStartsOn?: 'Sunday' | 'Monday';
 }
 export declare type RangeSelection = {
     from: Date;

package/lib-esm/DatePicker/useDatePicker.js

@@ -141,7 +141,8 @@ const defaultConfiguration = {
   dimWeekends: false,
   placeholder: 'Select a Date...',
   selection: 'single',
-  view: '2-month'
+  view: '2-month',
+  weekStartsOn: 'Sunday'
 };
 export const DatePickerProvider = ({
   configuration: externalConfig = {},

package/package.json

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