@primer/components 0.0.0-2021931194230 → 0.0.0-202193121134

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # @primer/components
 
-## 0.0.0-2021931194230
+## 0.0.0-202193121134
 
 ### Patch Changes
 

package/lib/DatePicker/DatePicker.js

@@ -85,6 +85,7 @@ const DatePicker = ({
 
   return /*#__PURE__*/_react.default.createElement(_useDatePicker.DatePickerProvider, {
     configuration: datePickerConfiguration,
+    isOpen: isOpen,
     value: value,
     closePicker: () => setIsOpen(false)
   }, /*#__PURE__*/_react.default.createElement(_DatePickerAnchor.DatePickerAnchor, {

package/lib/DatePicker/DatePickerOverlay.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.DatePickerOverlay = void 0;
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
 var _useDatePicker = _interopRequireDefault(require("./useDatePicker"));
 
@@ -15,10 +15,6 @@ var _DatePickerPanel = require("./DatePickerPanel");
 
 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 _extends() { _extends = Object.assign || 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); }
 
 const DatePickerOverlay = ({
@@ -26,15 +22,16 @@ const DatePickerOverlay = ({
   ...rest
 }) => {
   const {
-    onClose: onDatePickerClose
+    dialogOpen,
+    onClose: onDatePickerClose,
+    setDialogOpen
   } = (0, _useDatePicker.default)();
-  const [suspendFocusTrap, setSuspendFocusTrap] = (0, _react.useState)(false);
 
   const onOverlayClose = async gesture => {
-    if (!suspendFocusTrap) {
-      setSuspendFocusTrap(true);
+    if (!dialogOpen) {
+      setDialogOpen(true);
       await onDatePickerClose();
-      setSuspendFocusTrap(false);
+      setDialogOpen(false);
       onClose === null || onClose === void 0 ? void 0 : onClose(gesture);
     }
   };

package/lib/DatePicker/Day.d.ts

@@ -6,6 +6,7 @@ import { DaySelection } from './useDatePicker';
 export declare type DayProps = {
     blocked?: boolean;
     disabled?: boolean;
+    focused?: boolean;
     onAction?: (date: Date, event?: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => void;
     selected?: DaySelection;
     date: Date;

package/lib/DatePicker/Day.js

@@ -90,15 +90,12 @@ const getStateStyles = (props, prop, state) => {
   const {
     blocked,
     disabled,
+    focused,
     selected,
     today
   } = props;
 
-  if (blocked) {
-    return states.blocked[prop];
-  } else if (disabled) {
-    return states.disabled[prop];
-  } else if (selected) {
+  if (selected) {
     switch (selected) {
       case 'start':
         return today && prop === 'color' ? states.selected.start['todayColor'] : states.selected.start[prop];
@@ -112,6 +109,12 @@ const getStateStyles = (props, prop, state) => {
       default:
         return today && prop === 'color' ? states.selected.default['todayColor'] : states.selected.default[prop];
     }
+  } else if (blocked) {
+    return states.blocked[prop];
+  } else if (disabled) {
+    return states.disabled[prop];
+  } else if (focused) {
+    return states.default.hover[prop];
   } else {
     return today && prop === 'color' ? states.default[state]['todayColor'] : states.default[state][prop];
   }
@@ -128,7 +131,7 @@ const DayComponent = (0, _styledComponents.default)(DayBaseComponent).attrs(prop
 })).withConfig({
   displayName: "Day__DayComponent",
   componentId: "sc-1japneh-1"
-})(["background-color:", ";border-radius:", ";transition:0.1s background-color ease;& ", "{align-self:center;color:", ";display:flex;font-family:", ";font-size:", ";justify-self:center;user-select:none;transition:0.1s color ease;}&:hover{background-color:", ";cursor:pointer;transition:0.05s background-color ease;& ", "{color:", ";transition:0.1s color ease;}}&:active{background-color:", ";box-shadow:inset ", ";transition:0.1s background-color ease,0.1s box-shadow ease,0.1s color ease;& ", "{color:", ";transition:0.1s color ease;}}"], props => props.background, props => props.borderRadius, _Text.default, props => props.textColor, (0, _constants.get)('fonts.mono'), (0, _constants.get)('fontSizes.0'), props => props.backgroundHover, _Text.default, props => props.textColorHover, props => props.backgroundPressed, (0, _constants.get)('shadows.shadow.medium'), _Text.default, props => props.textColorPressed);
+})(["background-color:", ";border-radius:", ";opacity:", ";transition:0.1s background-color ease;& ", "{align-self:center;color:", ";display:flex;font-family:", ";font-size:", ";justify-self:center;user-select:none;transition:0.1s color ease;}&:hover{background-color:", ";cursor:pointer;transition:0.05s background-color ease;& ", "{color:", ";transition:0.1s color ease;}}&:active{background-color:", ";box-shadow:inset ", ";transition:0.1s background-color ease,0.1s box-shadow ease,0.1s color ease;& ", "{color:", ";transition:0.1s color ease;}}"], props => props.background, props => props.borderRadius, props => props.disabled ? 0.5 : 1, _Text.default, props => props.textColor, (0, _constants.get)('fonts.mono'), (0, _constants.get)('fontSizes.0'), props => props.backgroundHover, _Text.default, props => props.textColorHover, props => props.backgroundPressed, (0, _constants.get)('shadows.shadow.medium'), _Text.default, props => props.textColorPressed);
 
 const Day = ({
   date,
@@ -139,6 +142,7 @@ const Day = ({
     onSelection,
     disabled,
     blocked,
+    focused,
     selected,
     today
   } = (0, _useDatePicker.default)(date);
@@ -172,6 +176,7 @@ const Day = ({
     "aria-selected": selected !== false,
     blocked: blocked,
     disabled: disabled,
+    focused: focused,
     selected: selected,
     today: today,
     onClick: clickHandler,

package/lib/DatePicker/useDatePicker.d.ts

@@ -33,6 +33,8 @@ export interface DatePickerContext {
     disabled?: boolean;
     configuration: DatePickerConfiguration;
     currentViewingDate: Date;
+    dialogOpen: boolean;
+    focusDate: Date;
     goToMonth: (date: Date) => void;
     hoverRange?: RangeSelection | null;
     selection?: Selection;
@@ -47,6 +49,7 @@ export interface DatePickerContext {
     previousMonth: () => void;
     revertValue: () => void;
     saveValue: (selection?: Selection) => void;
+    setDialogOpen: React.Dispatch<React.SetStateAction<boolean>>;
 }
 export declare type Selection = Date | Array<Date> | RangeSelection | null;
 export declare type StringSelection = string | Array<string> | {
@@ -56,11 +59,14 @@ export declare type StringSelection = string | Array<string> | {
 export declare type DaySelection = boolean | 'start' | 'middle' | 'end';
 declare const useDatePicker: (date?: Date | undefined) => {
     blocked: boolean | undefined;
-    disabled: boolean;
+    disabled: boolean | undefined;
+    focused: boolean;
     selected: DaySelection;
     today: boolean;
     configuration: DatePickerConfiguration;
     currentViewingDate: Date;
+    dialogOpen: boolean;
+    focusDate: Date;
     goToMonth: (date: Date) => void;
     hoverRange?: RangeSelection | null | undefined;
     selection?: Selection | undefined;
@@ -75,11 +81,13 @@ declare const useDatePicker: (date?: Date | undefined) => {
     previousMonth: () => void;
     revertValue: () => void;
     saveValue: (selection?: Selection | undefined) => void;
+    setDialogOpen: React.Dispatch<React.SetStateAction<boolean>>;
 };
 export default useDatePicker;
 export interface DatePickerProviderProps {
     closePicker?: () => void;
     configuration?: DatePickerConfiguration;
+    isOpen?: boolean;
     value?: Selection | StringSelection;
 }
 export declare function isSingleSelection(selection: Selection): selection is Date;

package/lib/DatePicker/useDatePicker.js

@@ -13,6 +13,8 @@ var _octiconsReact = require("@primer/octicons-react");
 
 var _dateFns = require("date-fns");
 
+var _esm = require("date-fns/esm");
+
 var _deepmerge = _interopRequireDefault(require("deepmerge"));
 
 var _react = _interopRequireWildcard(require("react"));
@@ -30,65 +32,69 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const DatePickerContext = /*#__PURE__*/(0, _react.createContext)(null);
 
 const useDatePicker = date => {
-  const value = (0, _react.useContext)(DatePickerContext);
+  const dateCtx = (0, _react.useContext)(DatePickerContext);
   const [selected, setSelected] = (0, _react.useState)(false);
   const today = date ? (0, _dateFns.isToday)(date) : false;
 
-  if (!value) {
+  if (!dateCtx) {
     throw new Error('useDatePicker must be used inside a DatePickerProvider');
   }
 
   (0, _react.useEffect)(() => {
     if (date) {
-      if (value.hoverRange) {
-        if (isRangeSelection(value.hoverRange)) {
-          if ((0, _dateFns.isEqual)(date, value.hoverRange.from)) {
+      if (dateCtx.hoverRange) {
+        if (isRangeSelection(dateCtx.hoverRange)) {
+          if ((0, _dateFns.isEqual)(date, dateCtx.hoverRange.from)) {
             setSelected('start');
-          } else if (value.hoverRange.to && (0, _dateFns.isEqual)(date, value.hoverRange.to)) {
+          } else if (dateCtx.hoverRange.to && (0, _dateFns.isEqual)(date, dateCtx.hoverRange.to)) {
             setSelected('end');
-          } else if ((0, _dateFns.isAfter)(date, value.hoverRange.from) && value.hoverRange.to && (0, _dateFns.isBefore)(date, value.hoverRange.to)) {
+          } else if ((0, _dateFns.isAfter)(date, dateCtx.hoverRange.from) && dateCtx.hoverRange.to && (0, _dateFns.isBefore)(date, dateCtx.hoverRange.to)) {
             setSelected('middle');
           } else {
             setSelected(false);
           }
         }
-      } else if (value.selection) {
-        if (isMultiSelection(value.selection)) {
-          setSelected(!!value.selection.find(d => (0, _dateFns.isEqual)(d, date)));
-        } else if (isRangeSelection(value.selection)) {
-          if ((0, _dateFns.isEqual)(date, value.selection.from)) {
+      } else if (dateCtx.selection) {
+        if (isMultiSelection(dateCtx.selection)) {
+          setSelected(!!dateCtx.selection.find(d => (0, _dateFns.isEqual)(d, date)));
+        } else if (isRangeSelection(dateCtx.selection)) {
+          if ((0, _dateFns.isEqual)(date, dateCtx.selection.from)) {
             setSelected('start');
-          } else if (value.selection.to && (0, _dateFns.isEqual)(date, value.selection.to)) {
+          } else if (dateCtx.selection.to && (0, _dateFns.isEqual)(date, dateCtx.selection.to)) {
             setSelected('end');
-          } else if ((0, _dateFns.isAfter)(date, value.selection.from) && value.selection.to && (0, _dateFns.isBefore)(date, value.selection.to)) {
+          } else if ((0, _dateFns.isAfter)(date, dateCtx.selection.from) && dateCtx.selection.to && (0, _dateFns.isBefore)(date, dateCtx.selection.to)) {
             setSelected('middle');
           } else {
             setSelected(false);
           }
         } else {
-          setSelected((0, _dateFns.isEqual)(date, value.selection));
+          setSelected((0, _dateFns.isEqual)(date, dateCtx.selection));
         }
       }
     }
-  }, [date, value.hoverRange, value.selection, today]);
+  }, [date, dateCtx.hoverRange, dateCtx.selection, today]);
   let blocked,
-      disabled = false;
+      disabled,
+      focused = false;
 
   if (date) {
-    // Determine if date is blocked out
-    if (value.configuration.blockedDates) {
-      blocked = !!value.configuration.blockedDates.find(d => (0, _dateFns.isEqual)(d, date));
+    // Determine if date is focused
+    if ((0, _dateFns.isEqual)(dateCtx.focusDate, date)) focused = true; // Determine if date is blocked out
+
+    if (dateCtx.configuration.blockedDates) {
+      blocked = !!dateCtx.configuration.blockedDates.find(d => (0, _dateFns.isEqual)(d, date));
     } // Determine if date is disabled
 
 
-    if (value.configuration.minDate || value.configuration.maxDate || value.configuration.disableWeekends) {
-      disabled = (value.configuration.minDate ? (0, _dateFns.isBefore)(date, value.configuration.minDate) : false) || (value.configuration.maxDate ? (0, _dateFns.isAfter)(date, value.configuration.maxDate) : false) || (value.configuration.disableWeekends ? (0, _dateFns.isWeekend)(date) : false);
+    if (dateCtx.configuration.minDate || dateCtx.configuration.maxDate || dateCtx.configuration.disableWeekends) {
+      disabled = (dateCtx.configuration.minDate ? (0, _dateFns.isBefore)(date, dateCtx.configuration.minDate) : false) || (dateCtx.configuration.maxDate ? (0, _dateFns.isAfter)(date, dateCtx.configuration.maxDate) : false) || (dateCtx.configuration.disableWeekends ? (0, _dateFns.isWeekend)(date) : false);
     }
   }
 
-  return { ...value,
+  return { ...dateCtx,
     blocked,
     disabled,
+    focused,
     selected,
     today
   };
@@ -167,6 +173,20 @@ function parseSelection(selection, variant) {
   }
 }
 
+const getInitialFocusDate = selection => {
+  if (!selection) return new Date();
+
+  if (selection instanceof Date) {
+    return selection;
+  } else if (Array.isArray(selection)) {
+    return selection[0];
+  } else if (isRangeSelection(selection)) {
+    return selection.from;
+  } else {
+    return new Date();
+  }
+};
+
 const defaultConfiguration = {
   anchorVariant: 'button',
   confirmation: false,
@@ -184,6 +204,7 @@ const DatePickerProvider = ({
   configuration: externalConfig = {},
   children,
   closePicker,
+  isOpen = false,
   value
 }) => {
   const [configuration, setConfiguration] = (0, _react.useState)((0, _deepmerge.default)(defaultConfiguration, externalConfig));
@@ -193,6 +214,8 @@ const DatePickerProvider = ({
   const [hoverRange, setHoverRange] = (0, _react.useState)(null);
   const [currentViewingDate, setCurrentViewingDate] = (0, _react.useState)(new Date());
   const confirm = (0, _.useConfirm)();
+  const [dialogOpen, setDialogOpen] = (0, _react.useState)(false);
+  const [focusDate, setFocusDate] = (0, _react.useState)(getInitialFocusDate(selection));
   (0, _react.useEffect)(() => {
     setConfiguration((0, _deepmerge.default)(defaultConfiguration, externalConfig));
     setSelection(parseSelection(selection, configuration.variant)); // Don't want this to run every time selection gets updated
@@ -330,6 +353,67 @@ const DatePickerProvider = ({
         }
     }
   }, [configuration]);
+  const handleKeyDown = (0, _react.useCallback)(async e => {
+    const key = e.key;
+
+    switch (key) {
+      case 'ArrowRight':
+        {
+          // Increase selection by 1 day
+          setFocusDate((0, _dateFns.addDays)(focusDate, 1));
+          break;
+        }
+
+      case 'ArrowLeft':
+        {
+          // Decrease selection by 1 day
+          setFocusDate((0, _dateFns.subDays)(focusDate, 1));
+          break;
+        }
+
+      case 'ArrowUp':
+        {
+          // Decrease selection by 1 week
+          setFocusDate((0, _dateFns.subWeeks)(focusDate, 1));
+          break;
+        }
+
+      case 'ArrowDown':
+        {
+          // Decrease selection by 1 week
+          setFocusDate((0, _dateFns.addWeeks)(focusDate, 1));
+          break;
+        }
+
+      case 'Enter':
+        {
+          // Start Selection
+          break;
+        }
+
+      case 'Esc':
+        {
+          // Cancel Selection if started, reset if not? or close
+          break;
+        }
+
+      default:
+        {
+          break;
+        }
+    }
+  }, [focusDate]);
+  (0, _react.useEffect)(() => {
+    if (isOpen) {
+      window.addEventListener('keydown', handleKeyDown);
+    } else {
+      window.removeEventListener('keydown', handleKeyDown);
+    }
+
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [handleKeyDown, isOpen]);
   const selectionHandler = (0, _react.useCallback)(date => {
     setIsDirty(true);
 
@@ -389,6 +473,7 @@ const DatePickerProvider = ({
       minDate,
       maxDate,
       maxRangeSize,
+      disableWeekends,
       variant
     } = configuration;
 
@@ -401,6 +486,10 @@ const DatePickerProvider = ({
         hoverDate = (0, _dateFns.isBefore)(hoverDate, selection.from) ? (0, _dateFns.subDays)(selection.from, configuration.maxRangeSize - 1) : (0, _dateFns.addDays)(selection.from, configuration.maxRangeSize - 1);
       }
 
+      if (disableWeekends && (0, _dateFns.isWeekend)(hoverDate)) {
+        hoverDate = (0, _esm.previousFriday)(hoverDate);
+      }
+
       setHoverRange((0, _dateFns.isBefore)(hoverDate, selection.from) ? {
         from: hoverDate,
         to: selection.from
@@ -415,9 +504,11 @@ const DatePickerProvider = ({
       configuration,
       currentViewingDate,
       disabled: false,
+      focusDate,
       formattedDate: getFormattedDate,
       goToMonth,
       hoverRange,
+      dialogOpen,
       nextMonth,
       onClose: handleClose,
       onDateInput: inputHandler,
@@ -427,9 +518,10 @@ const DatePickerProvider = ({
       revertValue,
       saveValue,
       selectionActive: false,
-      selection
+      selection,
+      setDialogOpen
     };
-  }, [configuration, currentViewingDate, focusHnadler, getFormattedDate, goToMonth, handleClose, hoverRange, inputHandler, nextMonth, previousMonth, revertValue, saveValue, selection, selectionHandler]);
+  }, [configuration, currentViewingDate, dialogOpen, focusDate, focusHnadler, getFormattedDate, goToMonth, handleClose, hoverRange, inputHandler, nextMonth, previousMonth, revertValue, saveValue, selection, selectionHandler]);
   return /*#__PURE__*/_react.default.createElement(DatePickerContext.Provider, {
     value: datePickerCtx
   }, children);

package/lib-esm/DatePicker/DatePicker.js

@@ -70,6 +70,7 @@ export const DatePicker = ({
 
   return /*#__PURE__*/React.createElement(DatePickerProvider, {
     configuration: datePickerConfiguration,
+    isOpen: isOpen,
     value: value,
     closePicker: () => setIsOpen(false)
   }, /*#__PURE__*/React.createElement(DatePickerAnchor, {

package/lib-esm/DatePicker/DatePickerOverlay.js

@@ -1,6 +1,6 @@
 function _extends() { _extends = Object.assign || 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); }
 
-import React, { useState } from 'react';
+import React from 'react';
 import useDatePicker from './useDatePicker';
 import { AnchoredOverlay } from '../AnchoredOverlay';
 import { DatePickerPanel } from './DatePickerPanel';
@@ -9,15 +9,16 @@ export const DatePickerOverlay = ({
   ...rest
 }) => {
   const {
-    onClose: onDatePickerClose
+    dialogOpen,
+    onClose: onDatePickerClose,
+    setDialogOpen
   } = useDatePicker();
-  const [suspendFocusTrap, setSuspendFocusTrap] = useState(false);
 
   const onOverlayClose = async gesture => {
-    if (!suspendFocusTrap) {
-      setSuspendFocusTrap(true);
+    if (!dialogOpen) {
+      setDialogOpen(true);
       await onDatePickerClose();
-      setSuspendFocusTrap(false);
+      setDialogOpen(false);
       onClose === null || onClose === void 0 ? void 0 : onClose(gesture);
     }
   };

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

@@ -6,6 +6,7 @@ import { DaySelection } from './useDatePicker';
 export declare type DayProps = {
     blocked?: boolean;
     disabled?: boolean;
+    focused?: boolean;
     onAction?: (date: Date, event?: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => void;
     selected?: DaySelection;
     date: Date;

package/lib-esm/DatePicker/Day.js

@@ -71,15 +71,12 @@ const getStateStyles = (props, prop, state) => {
   const {
     blocked,
     disabled,
+    focused,
     selected,
     today
   } = props;
 
-  if (blocked) {
-    return states.blocked[prop];
-  } else if (disabled) {
-    return states.disabled[prop];
-  } else if (selected) {
+  if (selected) {
     switch (selected) {
       case 'start':
         return today && prop === 'color' ? states.selected.start['todayColor'] : states.selected.start[prop];
@@ -93,6 +90,12 @@ const getStateStyles = (props, prop, state) => {
       default:
         return today && prop === 'color' ? states.selected.default['todayColor'] : states.selected.default[prop];
     }
+  } else if (blocked) {
+    return states.blocked[prop];
+  } else if (disabled) {
+    return states.disabled[prop];
+  } else if (focused) {
+    return states.default.hover[prop];
   } else {
     return today && prop === 'color' ? states.default[state]['todayColor'] : states.default[state][prop];
   }
@@ -109,7 +112,7 @@ const DayComponent = styled(DayBaseComponent).attrs(props => ({
 })).withConfig({
   displayName: "Day__DayComponent",
   componentId: "sc-1japneh-1"
-})(["background-color:", ";border-radius:", ";transition:0.1s background-color ease;& ", "{align-self:center;color:", ";display:flex;font-family:", ";font-size:", ";justify-self:center;user-select:none;transition:0.1s color ease;}&:hover{background-color:", ";cursor:pointer;transition:0.05s background-color ease;& ", "{color:", ";transition:0.1s color ease;}}&:active{background-color:", ";box-shadow:inset ", ";transition:0.1s background-color ease,0.1s box-shadow ease,0.1s color ease;& ", "{color:", ";transition:0.1s color ease;}}"], props => props.background, props => props.borderRadius, Text, props => props.textColor, get('fonts.mono'), get('fontSizes.0'), props => props.backgroundHover, Text, props => props.textColorHover, props => props.backgroundPressed, get('shadows.shadow.medium'), Text, props => props.textColorPressed);
+})(["background-color:", ";border-radius:", ";opacity:", ";transition:0.1s background-color ease;& ", "{align-self:center;color:", ";display:flex;font-family:", ";font-size:", ";justify-self:center;user-select:none;transition:0.1s color ease;}&:hover{background-color:", ";cursor:pointer;transition:0.05s background-color ease;& ", "{color:", ";transition:0.1s color ease;}}&:active{background-color:", ";box-shadow:inset ", ";transition:0.1s background-color ease,0.1s box-shadow ease,0.1s color ease;& ", "{color:", ";transition:0.1s color ease;}}"], props => props.background, props => props.borderRadius, props => props.disabled ? 0.5 : 1, Text, props => props.textColor, get('fonts.mono'), get('fontSizes.0'), props => props.backgroundHover, Text, props => props.textColorHover, props => props.backgroundPressed, get('shadows.shadow.medium'), Text, props => props.textColorPressed);
 export const Day = ({
   date,
   onAction
@@ -119,6 +122,7 @@ export const Day = ({
     onSelection,
     disabled,
     blocked,
+    focused,
     selected,
     today
   } = useDatePicker(date);
@@ -152,6 +156,7 @@ export const Day = ({
     "aria-selected": selected !== false,
     blocked: blocked,
     disabled: disabled,
+    focused: focused,
     selected: selected,
     today: today,
     onClick: clickHandler,

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

@@ -33,6 +33,8 @@ export interface DatePickerContext {
     disabled?: boolean;
     configuration: DatePickerConfiguration;
     currentViewingDate: Date;
+    dialogOpen: boolean;
+    focusDate: Date;
     goToMonth: (date: Date) => void;
     hoverRange?: RangeSelection | null;
     selection?: Selection;
@@ -47,6 +49,7 @@ export interface DatePickerContext {
     previousMonth: () => void;
     revertValue: () => void;
     saveValue: (selection?: Selection) => void;
+    setDialogOpen: React.Dispatch<React.SetStateAction<boolean>>;
 }
 export declare type Selection = Date | Array<Date> | RangeSelection | null;
 export declare type StringSelection = string | Array<string> | {
@@ -56,11 +59,14 @@ export declare type StringSelection = string | Array<string> | {
 export declare type DaySelection = boolean | 'start' | 'middle' | 'end';
 declare const useDatePicker: (date?: Date | undefined) => {
     blocked: boolean | undefined;
-    disabled: boolean;
+    disabled: boolean | undefined;
+    focused: boolean;
     selected: DaySelection;
     today: boolean;
     configuration: DatePickerConfiguration;
     currentViewingDate: Date;
+    dialogOpen: boolean;
+    focusDate: Date;
     goToMonth: (date: Date) => void;
     hoverRange?: RangeSelection | null | undefined;
     selection?: Selection | undefined;
@@ -75,11 +81,13 @@ declare const useDatePicker: (date?: Date | undefined) => {
     previousMonth: () => void;
     revertValue: () => void;
     saveValue: (selection?: Selection | undefined) => void;
+    setDialogOpen: React.Dispatch<React.SetStateAction<boolean>>;
 };
 export default useDatePicker;
 export interface DatePickerProviderProps {
     closePicker?: () => void;
     configuration?: DatePickerConfiguration;
+    isOpen?: boolean;
     value?: Selection | StringSelection;
 }
 export declare function isSingleSelection(selection: Selection): selection is Date;

package/lib-esm/DatePicker/useDatePicker.js

@@ -1,5 +1,6 @@
 import { CheckIcon, TrashIcon } from '@primer/octicons-react';
-import { isEqual, isAfter, isBefore, addMonths, subMonths, isToday, isWeekend, differenceInDays, addDays, subDays } from 'date-fns';
+import { isEqual, isAfter, isBefore, addMonths, subMonths, isToday, isWeekend, differenceInDays, addDays, subDays, addWeeks, subWeeks } from 'date-fns';
+import { previousFriday } from 'date-fns/esm';
 import deepmerge from 'deepmerge';
 import React, { createContext, useCallback, useContext, useMemo, useEffect, useState } from 'react';
 import { Text, useConfirm } from '..';
@@ -7,65 +8,69 @@ import { formatDate } from './dateParser';
 const DatePickerContext = /*#__PURE__*/createContext(null);
 
 const useDatePicker = date => {
-  const value = useContext(DatePickerContext);
+  const dateCtx = useContext(DatePickerContext);
   const [selected, setSelected] = useState(false);
   const today = date ? isToday(date) : false;
 
-  if (!value) {
+  if (!dateCtx) {
     throw new Error('useDatePicker must be used inside a DatePickerProvider');
   }
 
   useEffect(() => {
     if (date) {
-      if (value.hoverRange) {
-        if (isRangeSelection(value.hoverRange)) {
-          if (isEqual(date, value.hoverRange.from)) {
+      if (dateCtx.hoverRange) {
+        if (isRangeSelection(dateCtx.hoverRange)) {
+          if (isEqual(date, dateCtx.hoverRange.from)) {
             setSelected('start');
-          } else if (value.hoverRange.to && isEqual(date, value.hoverRange.to)) {
+          } else if (dateCtx.hoverRange.to && isEqual(date, dateCtx.hoverRange.to)) {
             setSelected('end');
-          } else if (isAfter(date, value.hoverRange.from) && value.hoverRange.to && isBefore(date, value.hoverRange.to)) {
+          } else if (isAfter(date, dateCtx.hoverRange.from) && dateCtx.hoverRange.to && isBefore(date, dateCtx.hoverRange.to)) {
             setSelected('middle');
           } else {
             setSelected(false);
           }
         }
-      } else if (value.selection) {
-        if (isMultiSelection(value.selection)) {
-          setSelected(!!value.selection.find(d => isEqual(d, date)));
-        } else if (isRangeSelection(value.selection)) {
-          if (isEqual(date, value.selection.from)) {
+      } else if (dateCtx.selection) {
+        if (isMultiSelection(dateCtx.selection)) {
+          setSelected(!!dateCtx.selection.find(d => isEqual(d, date)));
+        } else if (isRangeSelection(dateCtx.selection)) {
+          if (isEqual(date, dateCtx.selection.from)) {
             setSelected('start');
-          } else if (value.selection.to && isEqual(date, value.selection.to)) {
+          } else if (dateCtx.selection.to && isEqual(date, dateCtx.selection.to)) {
             setSelected('end');
-          } else if (isAfter(date, value.selection.from) && value.selection.to && isBefore(date, value.selection.to)) {
+          } else if (isAfter(date, dateCtx.selection.from) && dateCtx.selection.to && isBefore(date, dateCtx.selection.to)) {
             setSelected('middle');
           } else {
             setSelected(false);
           }
         } else {
-          setSelected(isEqual(date, value.selection));
+          setSelected(isEqual(date, dateCtx.selection));
         }
       }
     }
-  }, [date, value.hoverRange, value.selection, today]);
+  }, [date, dateCtx.hoverRange, dateCtx.selection, today]);
   let blocked,
-      disabled = false;
+      disabled,
+      focused = false;
 
   if (date) {
-    // Determine if date is blocked out
-    if (value.configuration.blockedDates) {
-      blocked = !!value.configuration.blockedDates.find(d => isEqual(d, date));
+    // Determine if date is focused
+    if (isEqual(dateCtx.focusDate, date)) focused = true; // Determine if date is blocked out
+
+    if (dateCtx.configuration.blockedDates) {
+      blocked = !!dateCtx.configuration.blockedDates.find(d => isEqual(d, date));
     } // Determine if date is disabled
 
 
-    if (value.configuration.minDate || value.configuration.maxDate || value.configuration.disableWeekends) {
-      disabled = (value.configuration.minDate ? isBefore(date, value.configuration.minDate) : false) || (value.configuration.maxDate ? isAfter(date, value.configuration.maxDate) : false) || (value.configuration.disableWeekends ? isWeekend(date) : false);
+    if (dateCtx.configuration.minDate || dateCtx.configuration.maxDate || dateCtx.configuration.disableWeekends) {
+      disabled = (dateCtx.configuration.minDate ? isBefore(date, dateCtx.configuration.minDate) : false) || (dateCtx.configuration.maxDate ? isAfter(date, dateCtx.configuration.maxDate) : false) || (dateCtx.configuration.disableWeekends ? isWeekend(date) : false);
     }
   }
 
-  return { ...value,
+  return { ...dateCtx,
     blocked,
     disabled,
+    focused,
     selected,
     today
   };
@@ -139,6 +144,20 @@ function parseSelection(selection, variant) {
   }
 }
 
+const getInitialFocusDate = selection => {
+  if (!selection) return new Date();
+
+  if (selection instanceof Date) {
+    return selection;
+  } else if (Array.isArray(selection)) {
+    return selection[0];
+  } else if (isRangeSelection(selection)) {
+    return selection.from;
+  } else {
+    return new Date();
+  }
+};
+
 const defaultConfiguration = {
   anchorVariant: 'button',
   confirmation: false,
@@ -155,6 +174,7 @@ export const DatePickerProvider = ({
   configuration: externalConfig = {},
   children,
   closePicker,
+  isOpen = false,
   value
 }) => {
   const [configuration, setConfiguration] = useState(deepmerge(defaultConfiguration, externalConfig));
@@ -164,6 +184,8 @@ export const DatePickerProvider = ({
   const [hoverRange, setHoverRange] = useState(null);
   const [currentViewingDate, setCurrentViewingDate] = useState(new Date());
   const confirm = useConfirm();
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [focusDate, setFocusDate] = useState(getInitialFocusDate(selection));
   useEffect(() => {
     setConfiguration(deepmerge(defaultConfiguration, externalConfig));
     setSelection(parseSelection(selection, configuration.variant)); // Don't want this to run every time selection gets updated
@@ -301,6 +323,67 @@ export const DatePickerProvider = ({
         }
     }
   }, [configuration]);
+  const handleKeyDown = useCallback(async e => {
+    const key = e.key;
+
+    switch (key) {
+      case 'ArrowRight':
+        {
+          // Increase selection by 1 day
+          setFocusDate(addDays(focusDate, 1));
+          break;
+        }
+
+      case 'ArrowLeft':
+        {
+          // Decrease selection by 1 day
+          setFocusDate(subDays(focusDate, 1));
+          break;
+        }
+
+      case 'ArrowUp':
+        {
+          // Decrease selection by 1 week
+          setFocusDate(subWeeks(focusDate, 1));
+          break;
+        }
+
+      case 'ArrowDown':
+        {
+          // Decrease selection by 1 week
+          setFocusDate(addWeeks(focusDate, 1));
+          break;
+        }
+
+      case 'Enter':
+        {
+          // Start Selection
+          break;
+        }
+
+      case 'Esc':
+        {
+          // Cancel Selection if started, reset if not? or close
+          break;
+        }
+
+      default:
+        {
+          break;
+        }
+    }
+  }, [focusDate]);
+  useEffect(() => {
+    if (isOpen) {
+      window.addEventListener('keydown', handleKeyDown);
+    } else {
+      window.removeEventListener('keydown', handleKeyDown);
+    }
+
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [handleKeyDown, isOpen]);
   const selectionHandler = useCallback(date => {
     setIsDirty(true);
 
@@ -360,6 +443,7 @@ export const DatePickerProvider = ({
       minDate,
       maxDate,
       maxRangeSize,
+      disableWeekends,
       variant
     } = configuration;
 
@@ -372,6 +456,10 @@ export const DatePickerProvider = ({
         hoverDate = isBefore(hoverDate, selection.from) ? subDays(selection.from, configuration.maxRangeSize - 1) : addDays(selection.from, configuration.maxRangeSize - 1);
       }
 
+      if (disableWeekends && isWeekend(hoverDate)) {
+        hoverDate = previousFriday(hoverDate);
+      }
+
       setHoverRange(isBefore(hoverDate, selection.from) ? {
         from: hoverDate,
         to: selection.from
@@ -386,9 +474,11 @@ export const DatePickerProvider = ({
       configuration,
       currentViewingDate,
       disabled: false,
+      focusDate,
       formattedDate: getFormattedDate,
       goToMonth,
       hoverRange,
+      dialogOpen,
       nextMonth,
       onClose: handleClose,
       onDateInput: inputHandler,
@@ -398,9 +488,10 @@ export const DatePickerProvider = ({
       revertValue,
       saveValue,
       selectionActive: false,
-      selection
+      selection,
+      setDialogOpen
     };
-  }, [configuration, currentViewingDate, focusHnadler, getFormattedDate, goToMonth, handleClose, hoverRange, inputHandler, nextMonth, previousMonth, revertValue, saveValue, selection, selectionHandler]);
+  }, [configuration, currentViewingDate, dialogOpen, focusDate, focusHnadler, getFormattedDate, goToMonth, handleClose, hoverRange, inputHandler, nextMonth, previousMonth, revertValue, saveValue, selection, selectionHandler]);
   return /*#__PURE__*/React.createElement(DatePickerContext.Provider, {
     value: datePickerCtx
   }, children);

package/package.json

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