@pingux/astro 2.16.0-alpha.1 → 2.16.0-alpha.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/lib/cjs/components/Calendar/Calendar.js +37 -30
  2. package/lib/components/Calendar/Calendar.js +38 -31
  3. package/package.json +1 -1
package/lib/cjs/components/Calendar/Calendar.js CHANGED
@@ -64,51 +64,62 @@ var Calendar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
64
64
  prevButtonProps = _useCalendar.prevButtonProps,
65
65
  nextButtonProps = _useCalendar.nextButtonProps,
66
66
  title = _useCalendar.title;
67
-
68
- /**
69
- * Grabs the currently displayed date for yearly navigation.
70
- */
71
-
72
- var _useState = (0, _react.useState)(),
67
+ var _useState = (0, _react.useState)(null),
73
68
  _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
74
- currentDate = _useState2[0],
75
- setCurrentDate = _useState2[1];
76
- var todayDate = (0, _react.useMemo)(function () {
77
- setCurrentDate(state.visibleRange.start);
78
- }, [state.visibleRange.start]);
69
+ yearChangeDirection = _useState2[0],
70
+ setYearChangeDirection = _useState2[1];
71
+ var previousYearRef = (0, _react.useRef)(null);
72
+ var nextYearRef = (0, _react.useRef)(null);
79
73
  var nav = {
80
74
  NEXT: 'next',
81
75
  PREVIOUS: 'previous'
82
76
  };
83
77
 
84
- /**
85
- * Function handles the navigation to previous and next year
86
- * based on the currently displayed date.
87
- */
78
+ // after updating visible year, reapplies focus to corresponding year buttons
79
+ (0, _react.useEffect)(function () {
80
+ if (yearChangeDirection === nav.NEXT) {
81
+ nextYearRef.current.focus();
82
+ }
83
+ if (yearChangeDirection === nav.PREVIOUS) {
84
+ previousYearRef.current.focus();
85
+ }
86
+ setYearChangeDirection(null);
87
+ }, [nav.NEXT, nav.PREVIOUS, yearChangeDirection]);
88
88
 
89
- var handleYearSelection = (0, _react.useCallback)(function (navigation) {
90
- var tempValue;
89
+ // update visible year
90
+ var handleYearSelection = function handleYearSelection(navigation) {
91
91
  if (navigation === nav.PREVIOUS) {
92
- tempValue = currentDate.subtract({
92
+ var previousYear = state.focusedDate.subtract({
93
93
  years: 1
94
94
  });
95
- } else if (navigation === nav.NEXT) {
96
- tempValue = currentDate.add({
95
+ state.setFocusedDate(previousYear);
96
+ }
97
+ if (navigation === nav.NEXT) {
98
+ var nextYear = state.focusedDate.add({
97
99
  years: 1
98
100
  });
101
+ state.setFocusedDate(nextYear);
99
102
  }
100
- state.setFocusedDate(tempValue);
101
- setCurrentDate(tempValue);
102
- }, [currentDate, state, todayDate]);
103
+ setYearChangeDirection(navigation);
104
+ };
105
+ var renderTitle = (0, _react2.jsx)(_index.Text, {
106
+ variant: "itemTitle",
107
+ role: "heading",
108
+ "aria-level": "3",
109
+ fontWeight: 3
110
+ }, title);
103
111
  return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({}, calendarProps, {
104
112
  ref: calenderRef,
105
113
  variant: "calendar.calendarContainer"
106
- }), (0, _react2.jsx)(_index.Box, {
114
+ }), (0, _react2.jsx)(_visuallyHidden.VisuallyHidden, {
115
+ "aria-live": "assertive"
116
+ }, (0, _react2.jsx)(_index.Text, null, title)), (0, _react2.jsx)(_index.Box, {
107
117
  className: "header",
108
118
  isRow: true,
109
119
  variant: "calendar.calendarHeader",
110
120
  verticalAlign: "middle"
111
121
  }, (0, _react2.jsx)(_index.IconButton, {
122
+ ref: previousYearRef,
112
123
  onPress: function onPress() {
113
124
  return handleYearSelection(nav.PREVIOUS);
114
125
  },
@@ -129,12 +140,7 @@ var Calendar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
129
140
  title: {
130
141
  name: 'Chevron Left Icon'
131
142
  }
132
- })), (0, _react2.jsx)(_visuallyHidden.VisuallyHidden, null, (0, _react2.jsx)(_index.Text, null, calendarProps['aria-label'])), (0, _react2.jsx)(_index.Text, {
133
- variant: "itemTitle",
134
- role: "heading",
135
- "aria-level": "3",
136
- fontWeight: 3
137
- }, title), (0, _react2.jsx)(_index.IconButton, (0, _extends2["default"])({}, nextButtonProps, {
143
+ })), renderTitle, (0, _react2.jsx)(_index.IconButton, (0, _extends2["default"])({}, nextButtonProps, {
138
144
  "aria-label": "Next month navigation"
139
145
  }), (0, _react2.jsx)(_index.Icon, {
140
146
  icon: _ChevronRightIcon["default"],
@@ -143,6 +149,7 @@ var Calendar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
143
149
  name: 'Chevron Right Icon'
144
150
  }
145
151
  })), (0, _react2.jsx)(_index.IconButton, {
152
+ ref: nextYearRef,
146
153
  onPress: function onPress() {
147
154
  return handleYearSelection(nav.NEXT);
148
155
  },
package/lib/components/Calendar/Calendar.js CHANGED
@@ -11,7 +11,7 @@ import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
11
11
  import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
12
12
  function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
13
13
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
14
- import React, { forwardRef, useCallback, useImperativeHandle, useMemo, useRef, useState } from 'react';
14
+ import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
15
15
  import { createCalendar, parseDate } from '@internationalized/date';
16
16
  import ChevronDoubleLeftIcon from '@pingux/mdi-react/ChevronDoubleLeftIcon';
17
17
  import ChevronDoubleRightIcon from '@pingux/mdi-react/ChevronDoubleRightIcon';
@@ -53,51 +53,62 @@ var Calendar = /*#__PURE__*/forwardRef(function (props, ref) {
53
53
  prevButtonProps = _useCalendar.prevButtonProps,
54
54
  nextButtonProps = _useCalendar.nextButtonProps,
55
55
  title = _useCalendar.title;
56
-
57
- /**
58
- * Grabs the currently displayed date for yearly navigation.
59
- */
60
-
61
- var _useState = useState(),
56
+ var _useState = useState(null),
62
57
  _useState2 = _slicedToArray(_useState, 2),
63
- currentDate = _useState2[0],
64
- setCurrentDate = _useState2[1];
65
- var todayDate = useMemo(function () {
66
- setCurrentDate(state.visibleRange.start);
67
- }, [state.visibleRange.start]);
58
+ yearChangeDirection = _useState2[0],
59
+ setYearChangeDirection = _useState2[1];
60
+ var previousYearRef = useRef(null);
61
+ var nextYearRef = useRef(null);
68
62
  var nav = {
69
63
  NEXT: 'next',
70
64
  PREVIOUS: 'previous'
71
65
  };
72
66
 
73
- /**
74
- * Function handles the navigation to previous and next year
75
- * based on the currently displayed date.
76
- */
67
+ // after updating visible year, reapplies focus to corresponding year buttons
68
+ useEffect(function () {
69
+ if (yearChangeDirection === nav.NEXT) {
70
+ nextYearRef.current.focus();
71
+ }
72
+ if (yearChangeDirection === nav.PREVIOUS) {
73
+ previousYearRef.current.focus();
74
+ }
75
+ setYearChangeDirection(null);
76
+ }, [nav.NEXT, nav.PREVIOUS, yearChangeDirection]);
77
77
 
78
- var handleYearSelection = useCallback(function (navigation) {
79
- var tempValue;
78
+ // update visible year
79
+ var handleYearSelection = function handleYearSelection(navigation) {
80
80
  if (navigation === nav.PREVIOUS) {
81
- tempValue = currentDate.subtract({
81
+ var previousYear = state.focusedDate.subtract({
82
82
  years: 1
83
83
  });
84
- } else if (navigation === nav.NEXT) {
85
- tempValue = currentDate.add({
84
+ state.setFocusedDate(previousYear);
85
+ }
86
+ if (navigation === nav.NEXT) {
87
+ var nextYear = state.focusedDate.add({
86
88
  years: 1
87
89
  });
90
+ state.setFocusedDate(nextYear);
88
91
  }
89
- state.setFocusedDate(tempValue);
90
- setCurrentDate(tempValue);
91
- }, [currentDate, state, todayDate]);
92
+ setYearChangeDirection(navigation);
93
+ };
94
+ var renderTitle = ___EmotionJSX(Text, {
95
+ variant: "itemTitle",
96
+ role: "heading",
97
+ "aria-level": "3",
98
+ fontWeight: 3
99
+ }, title);
92
100
  return ___EmotionJSX(Box, _extends({}, calendarProps, {
93
101
  ref: calenderRef,
94
102
  variant: "calendar.calendarContainer"
95
- }), ___EmotionJSX(Box, {
103
+ }), ___EmotionJSX(VisuallyHidden, {
104
+ "aria-live": "assertive"
105
+ }, ___EmotionJSX(Text, null, title)), ___EmotionJSX(Box, {
96
106
  className: "header",
97
107
  isRow: true,
98
108
  variant: "calendar.calendarHeader",
99
109
  verticalAlign: "middle"
100
110
  }, ___EmotionJSX(IconButton, {
111
+ ref: previousYearRef,
101
112
  onPress: function onPress() {
102
113
  return handleYearSelection(nav.PREVIOUS);
103
114
  },
@@ -118,12 +129,7 @@ var Calendar = /*#__PURE__*/forwardRef(function (props, ref) {
118
129
  title: {
119
130
  name: 'Chevron Left Icon'
120
131
  }
121
- })), ___EmotionJSX(VisuallyHidden, null, ___EmotionJSX(Text, null, calendarProps['aria-label'])), ___EmotionJSX(Text, {
122
- variant: "itemTitle",
123
- role: "heading",
124
- "aria-level": "3",
125
- fontWeight: 3
126
- }, title), ___EmotionJSX(IconButton, _extends({}, nextButtonProps, {
132
+ })), renderTitle, ___EmotionJSX(IconButton, _extends({}, nextButtonProps, {
127
133
  "aria-label": "Next month navigation"
128
134
  }), ___EmotionJSX(Icon, {
129
135
  icon: ChevronRightIcon,
@@ -132,6 +138,7 @@ var Calendar = /*#__PURE__*/forwardRef(function (props, ref) {
132
138
  name: 'Chevron Right Icon'
133
139
  }
134
140
  })), ___EmotionJSX(IconButton, {
141
+ ref: nextYearRef,
135
142
  onPress: function onPress() {
136
143
  return handleYearSelection(nav.NEXT);
137
144
  },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pingux/astro",
3
- "version": "2.16.0-alpha.1",
3
+ "version": "2.16.0-alpha.2",
4
4
  "description": "React component library for Ping Identity's design system",
5
5
  "repository": {
6
6
  "type": "git",