@primer/components 0.0.0-2021101163942 → 0.0.0-2021101165346

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # @primer/components
 
-## 0.0.0-2021101163942
+## 0.0.0-2021101165346
 
 ### Patch Changes
 

package/lib/DatePicker/DatePickerAnchor.js

@@ -211,7 +211,8 @@ const DatePickerAnchor = /*#__PURE__*/_react.default.forwardRef(({
     ref: ref
   }, /*#__PURE__*/_react.default.createElement(DatePickerAnchorButton, {
     onClick: clickHandler,
-    onKeyPress: keyPressHandler
+    onKeyPress: keyPressHandler,
+    "aria-label": formattedDate
   }, iconPlacement === 'start' && calendarIcon(), anchorVariant !== 'icon-only' && /*#__PURE__*/_react.default.createElement(_Text.default, {
     sx: {
       overflow: 'hidden',

package/lib/DatePicker/DatePickerOverlay.js

@@ -24,7 +24,8 @@ const DatePickerOverlay = ({
   const {
     dialogOpen,
     onClose: onDatePickerClose,
-    setDialogOpen
+    setDialogOpen,
+    currentViewingDate
   } = (0, _useDatePicker.default)();
 
   const onOverlayClose = async gesture => {
@@ -38,7 +39,11 @@ const DatePickerOverlay = ({
 
   return /*#__PURE__*/_react.default.createElement(_AnchoredOverlay.AnchoredOverlay, _extends({
     onClose: onOverlayClose
-  }, rest), /*#__PURE__*/_react.default.createElement(_DatePickerPanel.DatePickerPanel, null));
+  }, rest, {
+    "aria-modal": "true",
+    "aria-labelledby": `${currentViewingDate.getMonth()} ${currentViewingDate.getFullYear()}`,
+    "aria-live": "polite"
+  }), /*#__PURE__*/_react.default.createElement(_DatePickerPanel.DatePickerPanel, null));
 };
 
 exports.DatePickerOverlay = DatePickerOverlay;

package/lib/DatePicker/DatePickerPanel.js

@@ -106,21 +106,23 @@ const DatePickerPanel = () => {
     variant: "small",
     side: "left",
     onClick: previousMonth,
-    disabled: previousDisabled
+    disabled: previousDisabled,
+    "aria-label": "Previous Month",
+    "aria-live": "polite"
   }, /*#__PURE__*/_react.default.createElement(_StyledOcticon.default, {
     icon: _octiconsReact.ChevronLeftIcon,
     color: "fg.muted"
   })), /*#__PURE__*/_react.default.createElement(_Month.Month, {
-    month: currentViewingDate.getMonth(),
-    year: currentViewingDate.getFullYear()
+    date: currentViewingDate
   }), configuration.view === '2-month' && multiMonthSupport && /*#__PURE__*/_react.default.createElement(_Month.Month, {
-    month: (0, _dateFns.addMonths)(currentViewingDate, 1).getMonth(),
-    year: (0, _dateFns.addMonths)(currentViewingDate, 1).getFullYear()
+    date: (0, _dateFns.addMonths)(currentViewingDate, 1)
   }), /*#__PURE__*/_react.default.createElement(ArrowButton, {
     variant: "small",
     side: "right",
     onClick: nextMonth,
-    disabled: nextDisabled
+    disabled: nextDisabled,
+    "aria-label": "Next Month",
+    "aria-live": "polite"
   }, /*#__PURE__*/_react.default.createElement(_StyledOcticon.default, {
     icon: _octiconsReact.ChevronRightIcon,
     color: "fg.muted"
@@ -129,13 +131,19 @@ const DatePickerPanel = () => {
     sx: {
       mr: 1
     },
-    onClick: () => revertValue()
+    onClick: () => revertValue(),
+    "aria-label": "Reset Selection",
+    "aria-live": "polite"
   }, "Reset"), /*#__PURE__*/_react.default.createElement(_Button.default, {
     variant: "small",
-    onClick: () => goToMonth(new Date())
+    onClick: () => goToMonth(new Date()),
+    "aria-label": "Go to Today",
+    "aria-live": "polite"
   }, "Today")), configuration.confirmation && /*#__PURE__*/_react.default.createElement(_Button.ButtonPrimary, {
     variant: "small",
-    onClick: () => saveValue()
+    onClick: () => saveValue(),
+    "aria-label": "Apply Selection",
+    "aria-live": "polite"
   }, "Apply")));
 };
 

package/lib/DatePicker/Month.d.ts

@@ -3,7 +3,6 @@ import { FontSizeProps } from 'styled-system';
 import { SystemCommonProps, SystemLayoutProps } from '../constants';
 import { SxProp } from '../sx';
 export interface MonthProps extends FontSizeProps, SystemCommonProps, SxProp, SystemLayoutProps {
-    month: number;
-    year: number;
+    date: Date;
 }
 export declare const Month: React.FC<MonthProps>;

package/lib/DatePicker/Month.js

@@ -50,18 +50,17 @@ const WeekdayHeader = (0, _styledComponents.default)(_Text.default).withConfig({
 })(["color:", ";font-family:", ";font-size:", ";justify-self:center;padding:", " 0 ", ";"], (0, _constants.get)('colors.fg.subtle'), (0, _constants.get)('fonts.mono'), (0, _constants.get)('fontSizes.0'), (0, _constants.get)('space.3'), (0, _constants.get)('space.2'));
 
 const Month = ({
-  month,
-  year
+  date
 }) => {
   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 getTitle = (0, _react.useMemo)(() => `${(0, _dateFns.format)(new Date(date), 'MMMM yyyy')}`, [date]);
   const weekdayHeaders = (0, _react.useMemo)(() => {
     var _configuration$weekSt;
 
-    const now = new Date(year, month);
+    const now = new Date(date);
     const weekOptions = {
       weekStartsOn: weekdayEnum[(_configuration$weekSt = configuration.weekStartsOn) !== null && _configuration$weekSt !== void 0 ? _configuration$weekSt : 'Sunday']
     };
@@ -71,17 +70,17 @@ const Month = ({
     }).map(d => /*#__PURE__*/_react.default.createElement(WeekdayHeader, {
       key: `weekday-${d}-header`
     }, (0, _dateFns.format)(d, 'EEEEEE')));
-  }, [configuration.weekStartsOn, month, year]);
+  }, [configuration.weekStartsOn, date]);
 
-  const dayAction = date => {
-    setSelectedDay(date);
+  const dayAction = day => {
+    setSelectedDay(day);
   };
 
   const dayComponents = (0, _react.useMemo)(() => {
     var _configuration$weekSt2, _configuration$weekSt3;
 
     const components = [];
-    const firstDay = new Date(year, month, 1);
+    const firstDay = new Date(date.getFullYear(), date.getMonth(), 1);
     const preBlanks = (firstDay.getDay() + (7 - weekdayEnum[(_configuration$weekSt2 = configuration.weekStartsOn) !== null && _configuration$weekSt2 !== void 0 ? _configuration$weekSt2 : 'Sunday'])) % 7;
 
     for (let i = 0; i < preBlanks; i++) {
@@ -91,11 +90,11 @@ const Month = ({
     }
 
     for (let i = 1; i <= (0, _dateFns.getDaysInMonth)(firstDay); i++) {
-      const date = new Date(year, month, i);
+      const day = new Date(date.getFullYear(), date.getMonth(), i);
       components.push( /*#__PURE__*/_react.default.createElement(_Day.Day, {
-        key: `day-component-${date.toString()}`,
-        date: date,
-        selected: selectedDay ? (0, _dateFns.isEqual)(date, selectedDay) : false,
+        key: `day-component-${day.toString()}`,
+        date: day,
+        selected: selectedDay ? (0, _dateFns.isEqual)(day, selectedDay) : false,
         onAction: dayAction
       }));
     }
@@ -110,9 +109,10 @@ const Month = ({
     }
 
     return components;
-  }, [configuration.weekStartsOn, month, selectedDay, year]);
+  }, [configuration.weekStartsOn, date, selectedDay]);
   return /*#__PURE__*/_react.default.createElement(MonthComponent, {
-    role: "grid"
+    role: "grid",
+    "aria-labelledby": `${date.getMonth()}`
   }, /*#__PURE__*/_react.default.createElement(MonthTitle, {
     "aria-live": "polite"
   }, getTitle), weekdayHeaders, dayComponents);

package/lib/DatePicker/useDatePicker.js

@@ -197,7 +197,7 @@ const defaultConfiguration = {
   confirmUnsavedClose: false,
   disableWeekends: false,
   iconPlacement: 'start',
-  placeholder: 'Select a Date...',
+  placeholder: 'Choose Date...',
   showInputPrompt: false,
   variant: 'single',
   view: '2-month',

package/lib-esm/DatePicker/DatePickerAnchor.js

@@ -186,7 +186,8 @@ export const DatePickerAnchor = /*#__PURE__*/React.forwardRef(({
     ref: ref
   }, /*#__PURE__*/React.createElement(DatePickerAnchorButton, {
     onClick: clickHandler,
-    onKeyPress: keyPressHandler
+    onKeyPress: keyPressHandler,
+    "aria-label": formattedDate
   }, iconPlacement === 'start' && calendarIcon(), anchorVariant !== 'icon-only' && /*#__PURE__*/React.createElement(Text, {
     sx: {
       overflow: 'hidden',

package/lib-esm/DatePicker/DatePickerOverlay.js

@@ -11,7 +11,8 @@ export const DatePickerOverlay = ({
   const {
     dialogOpen,
     onClose: onDatePickerClose,
-    setDialogOpen
+    setDialogOpen,
+    currentViewingDate
   } = useDatePicker();
 
   const onOverlayClose = async gesture => {
@@ -25,6 +26,10 @@ export const DatePickerOverlay = ({
 
   return /*#__PURE__*/React.createElement(AnchoredOverlay, _extends({
     onClose: onOverlayClose
-  }, rest), /*#__PURE__*/React.createElement(DatePickerPanel, null));
+  }, rest, {
+    "aria-modal": "true",
+    "aria-labelledby": `${currentViewingDate.getMonth()} ${currentViewingDate.getFullYear()}`,
+    "aria-live": "polite"
+  }), /*#__PURE__*/React.createElement(DatePickerPanel, null));
 };
 DatePickerOverlay.displayName = "DatePickerOverlay";

package/lib-esm/DatePicker/DatePickerPanel.js

@@ -81,21 +81,23 @@ export const DatePickerPanel = () => {
     variant: "small",
     side: "left",
     onClick: previousMonth,
-    disabled: previousDisabled
+    disabled: previousDisabled,
+    "aria-label": "Previous Month",
+    "aria-live": "polite"
   }, /*#__PURE__*/React.createElement(StyledOcticon, {
     icon: ChevronLeftIcon,
     color: "fg.muted"
   })), /*#__PURE__*/React.createElement(Month, {
-    month: currentViewingDate.getMonth(),
-    year: currentViewingDate.getFullYear()
+    date: currentViewingDate
   }), configuration.view === '2-month' && multiMonthSupport && /*#__PURE__*/React.createElement(Month, {
-    month: addMonths(currentViewingDate, 1).getMonth(),
-    year: addMonths(currentViewingDate, 1).getFullYear()
+    date: addMonths(currentViewingDate, 1)
   }), /*#__PURE__*/React.createElement(ArrowButton, {
     variant: "small",
     side: "right",
     onClick: nextMonth,
-    disabled: nextDisabled
+    disabled: nextDisabled,
+    "aria-label": "Next Month",
+    "aria-live": "polite"
   }, /*#__PURE__*/React.createElement(StyledOcticon, {
     icon: ChevronRightIcon,
     color: "fg.muted"
@@ -104,13 +106,19 @@ export const DatePickerPanel = () => {
     sx: {
       mr: 1
     },
-    onClick: () => revertValue()
+    onClick: () => revertValue(),
+    "aria-label": "Reset Selection",
+    "aria-live": "polite"
   }, "Reset"), /*#__PURE__*/React.createElement(Button, {
     variant: "small",
-    onClick: () => goToMonth(new Date())
+    onClick: () => goToMonth(new Date()),
+    "aria-label": "Go to Today",
+    "aria-live": "polite"
   }, "Today")), configuration.confirmation && /*#__PURE__*/React.createElement(ButtonPrimary, {
     variant: "small",
-    onClick: () => saveValue()
+    onClick: () => saveValue(),
+    "aria-label": "Apply Selection",
+    "aria-live": "polite"
   }, "Apply")));
 };
 DatePickerPanel.displayName = "DatePickerPanel";

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

@@ -3,7 +3,6 @@ import { FontSizeProps } from 'styled-system';
 import { SystemCommonProps, SystemLayoutProps } from '../constants';
 import { SxProp } from '../sx';
 export interface MonthProps extends FontSizeProps, SystemCommonProps, SxProp, SystemLayoutProps {
-    month: number;
-    year: number;
+    date: Date;
 }
 export declare const Month: React.FC<MonthProps>;

package/lib-esm/DatePicker/Month.js

@@ -28,18 +28,17 @@ const WeekdayHeader = styled(Text).withConfig({
   componentId: "l6j7o0-2"
 })(["color:", ";font-family:", ";font-size:", ";justify-self:center;padding:", " 0 ", ";"], get('colors.fg.subtle'), get('fonts.mono'), get('fontSizes.0'), get('space.3'), get('space.2'));
 export const Month = ({
-  month,
-  year
+  date
 }) => {
   const {
     configuration
   } = useDatePicker();
   const [selectedDay, setSelectedDay] = useState(null);
-  const getTitle = useMemo(() => `${format(new Date(year, month), 'MMMM yyyy')}`, [month, year]);
+  const getTitle = useMemo(() => `${format(new Date(date), 'MMMM yyyy')}`, [date]);
   const weekdayHeaders = useMemo(() => {
     var _configuration$weekSt;
 
-    const now = new Date(year, month);
+    const now = new Date(date);
     const weekOptions = {
       weekStartsOn: weekdayEnum[(_configuration$weekSt = configuration.weekStartsOn) !== null && _configuration$weekSt !== void 0 ? _configuration$weekSt : 'Sunday']
     };
@@ -49,17 +48,17 @@ export const Month = ({
     }).map(d => /*#__PURE__*/React.createElement(WeekdayHeader, {
       key: `weekday-${d}-header`
     }, format(d, 'EEEEEE')));
-  }, [configuration.weekStartsOn, month, year]);
+  }, [configuration.weekStartsOn, date]);
 
-  const dayAction = date => {
-    setSelectedDay(date);
+  const dayAction = day => {
+    setSelectedDay(day);
   };
 
   const dayComponents = useMemo(() => {
     var _configuration$weekSt2, _configuration$weekSt3;
 
     const components = [];
-    const firstDay = new Date(year, month, 1);
+    const firstDay = new Date(date.getFullYear(), date.getMonth(), 1);
     const preBlanks = (firstDay.getDay() + (7 - weekdayEnum[(_configuration$weekSt2 = configuration.weekStartsOn) !== null && _configuration$weekSt2 !== void 0 ? _configuration$weekSt2 : 'Sunday'])) % 7;
 
     for (let i = 0; i < preBlanks; i++) {
@@ -69,11 +68,11 @@ export const Month = ({
     }
 
     for (let i = 1; i <= getDaysInMonth(firstDay); i++) {
-      const date = new Date(year, month, i);
+      const day = new Date(date.getFullYear(), date.getMonth(), i);
       components.push( /*#__PURE__*/React.createElement(Day, {
-        key: `day-component-${date.toString()}`,
-        date: date,
-        selected: selectedDay ? isEqual(date, selectedDay) : false,
+        key: `day-component-${day.toString()}`,
+        date: day,
+        selected: selectedDay ? isEqual(day, selectedDay) : false,
         onAction: dayAction
       }));
     }
@@ -88,9 +87,10 @@ export const Month = ({
     }
 
     return components;
-  }, [configuration.weekStartsOn, month, selectedDay, year]);
+  }, [configuration.weekStartsOn, date, selectedDay]);
   return /*#__PURE__*/React.createElement(MonthComponent, {
-    role: "grid"
+    role: "grid",
+    "aria-labelledby": `${date.getMonth()}`
   }, /*#__PURE__*/React.createElement(MonthTitle, {
     "aria-live": "polite"
   }, getTitle), weekdayHeaders, dayComponents);

package/lib-esm/DatePicker/useDatePicker.js

@@ -169,7 +169,7 @@ const defaultConfiguration = {
   confirmUnsavedClose: false,
   disableWeekends: false,
   iconPlacement: 'start',
-  placeholder: 'Select a Date...',
+  placeholder: 'Choose Date...',
   showInputPrompt: false,
   variant: 'single',
   view: '2-month',

package/package.json

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