@pingux/astro 2.2.0 → 2.3.0-alpha.1

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 (50) hide show
  1. package/lib/cjs/components/Calendar/Calendar.js +202 -0
  2. package/lib/cjs/components/Calendar/Calendar.stories.js +192 -0
  3. package/lib/cjs/components/Calendar/Calendar.styles.js +74 -0
  4. package/lib/cjs/components/Calendar/Calendar.test.js +324 -0
  5. package/lib/cjs/components/Calendar/CalendarCell.js +125 -0
  6. package/lib/cjs/components/Calendar/CalendarGrid.js +77 -0
  7. package/lib/cjs/components/Calendar/index.js +14 -0
  8. package/lib/cjs/components/DatePicker/DateField.js +316 -0
  9. package/lib/cjs/components/DatePicker/DatePicker.js +195 -0
  10. package/lib/cjs/components/DatePicker/DatePicker.stories.js +205 -0
  11. package/lib/cjs/components/DatePicker/DatePicker.styles.js +60 -0
  12. package/lib/cjs/components/DatePicker/DatePicker.test.js +570 -0
  13. package/lib/cjs/components/DatePicker/DateSegment.js +71 -0
  14. package/lib/cjs/components/DatePicker/index.js +14 -0
  15. package/lib/cjs/components/IconButton/IconButton.styles.js +4 -0
  16. package/lib/cjs/components/TextField/TextField.js +6 -2
  17. package/lib/cjs/components/TextField/TextField.stories.js +13 -1
  18. package/lib/cjs/components/TooltipTrigger/Tooltip.js +4 -6
  19. package/lib/cjs/components/TooltipTrigger/Tooltip.styles.js +14 -18
  20. package/lib/cjs/hooks/useOverlayPanelState/useOverlayPanelState.test.js +2 -2
  21. package/lib/cjs/index.js +132 -59
  22. package/lib/cjs/styles/forms/index.js +2 -0
  23. package/lib/cjs/styles/variants/variants.js +4 -2
  24. package/lib/components/Calendar/Calendar.js +190 -0
  25. package/lib/components/Calendar/Calendar.stories.js +171 -0
  26. package/lib/components/Calendar/Calendar.styles.js +66 -0
  27. package/lib/components/Calendar/Calendar.test.js +321 -0
  28. package/lib/components/Calendar/CalendarCell.js +111 -0
  29. package/lib/components/Calendar/CalendarGrid.js +68 -0
  30. package/lib/components/Calendar/index.js +1 -0
  31. package/lib/components/DatePicker/DateField.js +303 -0
  32. package/lib/components/DatePicker/DatePicker.js +183 -0
  33. package/lib/components/DatePicker/DatePicker.stories.js +180 -0
  34. package/lib/components/DatePicker/DatePicker.styles.js +51 -0
  35. package/lib/components/DatePicker/DatePicker.test.js +563 -0
  36. package/lib/components/DatePicker/DateSegment.js +58 -0
  37. package/lib/components/DatePicker/index.js +1 -0
  38. package/lib/components/IconButton/IconButton.styles.js +4 -0
  39. package/lib/components/TextField/TextField.js +6 -2
  40. package/lib/components/TextField/TextField.stories.js +11 -0
  41. package/lib/components/TooltipTrigger/Tooltip.js +4 -6
  42. package/lib/components/TooltipTrigger/Tooltip.styles.js +14 -18
  43. package/lib/hooks/useOverlayPanelState/useOverlayPanelState.test.js +2 -2
  44. package/lib/index.js +8 -0
  45. package/lib/styles/forms/index.js +2 -0
  46. package/lib/styles/variants/variants.js +3 -1
  47. package/package.json +7 -1
  48. package/NOTICE.html +0 -12399
  49. /package/lib/cjs/{styles/variants/callout.js → components/Callout/Callout.styles.js} +0 -0
  50. /package/lib/{styles/variants/callout.js → components/Callout/Callout.styles.js} +0 -0
@@ -0,0 +1,324 @@
1
+ "use strict";
2
+
3
+ var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
4
+ var _Symbol = require("@babel/runtime-corejs3/core-js-stable/symbol");
5
+ var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
6
+ var _Object$create = require("@babel/runtime-corejs3/core-js-stable/object/create");
7
+ var _Object$getPrototypeOf = require("@babel/runtime-corejs3/core-js-stable/object/get-prototype-of");
8
+ var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
9
+ var _Object$setPrototypeOf = require("@babel/runtime-corejs3/core-js-stable/object/set-prototype-of");
10
+ var _Promise = require("@babel/runtime-corejs3/core-js-stable/promise");
11
+ var _reverseInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/reverse");
12
+ var _sliceInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/slice");
13
+ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
14
+ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/asyncToGenerator"));
15
+ var _some = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/some"));
16
+ var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
17
+ var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
18
+ var _react = _interopRequireDefault(require("react"));
19
+ var _date = require("@internationalized/date");
20
+ var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
21
+ var _jestAxe = require("jest-axe");
22
+ var _testWrapper = require("../../utils/testUtils/testWrapper");
23
+ var _Calendar = _interopRequireDefault(require("./Calendar"));
24
+ var _react2 = require("@emotion/react");
25
+ function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return exports; }; var exports = {}, Op = Object.prototype, hasOwn = Op.hasOwnProperty, $Symbol = "function" == typeof _Symbol ? _Symbol : {}, iteratorSymbol = $Symbol.iterator || "@@iterator", asyncIteratorSymbol = $Symbol.asyncIterator || "@@asyncIterator", toStringTagSymbol = $Symbol.toStringTag || "@@toStringTag"; function define(obj, key, value) { return _Object$defineProperty(obj, key, { value: value, enumerable: !0, configurable: !0, writable: !0 }), obj[key]; } try { define({}, ""); } catch (err) { define = function define(obj, key, value) { return obj[key] = value; }; } function wrap(innerFn, outerFn, self, tryLocsList) { var protoGenerator = outerFn && outerFn.prototype instanceof Generator ? outerFn : Generator, generator = _Object$create(protoGenerator.prototype), context = new Context(tryLocsList || []); return generator._invoke = function (innerFn, self, context) { var state = "suspendedStart"; return function (method, arg) { if ("executing" === state) throw new Error("Generator is already running"); if ("completed" === state) { if ("throw" === method) throw arg; return doneResult(); } for (context.method = method, context.arg = arg;;) { var delegate = context.delegate; if (delegate) { var delegateResult = maybeInvokeDelegate(delegate, context); if (delegateResult) { if (delegateResult === ContinueSentinel) continue; return delegateResult; } } if ("next" === context.method) context.sent = context._sent = context.arg;else if ("throw" === context.method) { if ("suspendedStart" === state) throw state = "completed", context.arg; context.dispatchException(context.arg); } else "return" === context.method && context.abrupt("return", context.arg); state = "executing"; var record = tryCatch(innerFn, self, context); if ("normal" === record.type) { if (state = context.done ? "completed" : "suspendedYield", record.arg === ContinueSentinel) continue; return { value: record.arg, done: context.done }; } "throw" === record.type && (state = "completed", context.method = "throw", context.arg = record.arg); } }; }(innerFn, self, context), generator; } function tryCatch(fn, obj, arg) { try { return { type: "normal", arg: fn.call(obj, arg) }; } catch (err) { return { type: "throw", arg: err }; } } exports.wrap = wrap; var ContinueSentinel = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var IteratorPrototype = {}; define(IteratorPrototype, iteratorSymbol, function () { return this; }); var getProto = _Object$getPrototypeOf, NativeIteratorPrototype = getProto && getProto(getProto(values([]))); NativeIteratorPrototype && NativeIteratorPrototype !== Op && hasOwn.call(NativeIteratorPrototype, iteratorSymbol) && (IteratorPrototype = NativeIteratorPrototype); var Gp = GeneratorFunctionPrototype.prototype = Generator.prototype = _Object$create(IteratorPrototype); function defineIteratorMethods(prototype) { var _context9; _forEachInstanceProperty(_context9 = ["next", "throw", "return"]).call(_context9, function (method) { define(prototype, method, function (arg) { return this._invoke(method, arg); }); }); } function AsyncIterator(generator, PromiseImpl) { function invoke(method, arg, resolve, reject) { var record = tryCatch(generator[method], generator, arg); if ("throw" !== record.type) { var result = record.arg, value = result.value; return value && "object" == _typeof(value) && hasOwn.call(value, "__await") ? PromiseImpl.resolve(value.__await).then(function (value) { invoke("next", value, resolve, reject); }, function (err) { invoke("throw", err, resolve, reject); }) : PromiseImpl.resolve(value).then(function (unwrapped) { result.value = unwrapped, resolve(result); }, function (error) { return invoke("throw", error, resolve, reject); }); } reject(record.arg); } var previousPromise; this._invoke = function (method, arg) { function callInvokeWithMethodAndArg() { return new PromiseImpl(function (resolve, reject) { invoke(method, arg, resolve, reject); }); } return previousPromise = previousPromise ? previousPromise.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); }; } function maybeInvokeDelegate(delegate, context) { var method = delegate.iterator[context.method]; if (undefined === method) { if (context.delegate = null, "throw" === context.method) { if (delegate.iterator["return"] && (context.method = "return", context.arg = undefined, maybeInvokeDelegate(delegate, context), "throw" === context.method)) return ContinueSentinel; context.method = "throw", context.arg = new TypeError("The iterator does not provide a 'throw' method"); } return ContinueSentinel; } var record = tryCatch(method, delegate.iterator, context.arg); if ("throw" === record.type) return context.method = "throw", context.arg = record.arg, context.delegate = null, ContinueSentinel; var info = record.arg; return info ? info.done ? (context[delegate.resultName] = info.value, context.next = delegate.nextLoc, "return" !== context.method && (context.method = "next", context.arg = undefined), context.delegate = null, ContinueSentinel) : info : (context.method = "throw", context.arg = new TypeError("iterator result is not an object"), context.delegate = null, ContinueSentinel); } function pushTryEntry(locs) { var entry = { tryLoc: locs[0] }; 1 in locs && (entry.catchLoc = locs[1]), 2 in locs && (entry.finallyLoc = locs[2], entry.afterLoc = locs[3]), this.tryEntries.push(entry); } function resetTryEntry(entry) { var record = entry.completion || {}; record.type = "normal", delete record.arg, entry.completion = record; } function Context(tryLocsList) { this.tryEntries = [{ tryLoc: "root" }], _forEachInstanceProperty(tryLocsList).call(tryLocsList, pushTryEntry, this), this.reset(!0); } function values(iterable) { if (iterable) { var iteratorMethod = iterable[iteratorSymbol]; if (iteratorMethod) return iteratorMethod.call(iterable); if ("function" == typeof iterable.next) return iterable; if (!isNaN(iterable.length)) { var i = -1, next = function next() { for (; ++i < iterable.length;) { if (hasOwn.call(iterable, i)) return next.value = iterable[i], next.done = !1, next; } return next.value = undefined, next.done = !0, next; }; return next.next = next; } } return { next: doneResult }; } function doneResult() { return { value: undefined, done: !0 }; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, define(Gp, "constructor", GeneratorFunctionPrototype), define(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, toStringTagSymbol, "GeneratorFunction"), exports.isGeneratorFunction = function (genFun) { var ctor = "function" == typeof genFun && genFun.constructor; return !!ctor && (ctor === GeneratorFunction || "GeneratorFunction" === (ctor.displayName || ctor.name)); }, exports.mark = function (genFun) { return _Object$setPrototypeOf ? _Object$setPrototypeOf(genFun, GeneratorFunctionPrototype) : (genFun.__proto__ = GeneratorFunctionPrototype, define(genFun, toStringTagSymbol, "GeneratorFunction")), genFun.prototype = _Object$create(Gp), genFun; }, exports.awrap = function (arg) { return { __await: arg }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, asyncIteratorSymbol, function () { return this; }), exports.AsyncIterator = AsyncIterator, exports.async = function (innerFn, outerFn, self, tryLocsList, PromiseImpl) { void 0 === PromiseImpl && (PromiseImpl = _Promise); var iter = new AsyncIterator(wrap(innerFn, outerFn, self, tryLocsList), PromiseImpl); return exports.isGeneratorFunction(outerFn) ? iter : iter.next().then(function (result) { return result.done ? result.value : iter.next(); }); }, defineIteratorMethods(Gp), define(Gp, toStringTagSymbol, "Generator"), define(Gp, iteratorSymbol, function () { return this; }), define(Gp, "toString", function () { return "[object Generator]"; }), exports.keys = function (object) { var keys = []; for (var key in object) { keys.push(key); } return _reverseInstanceProperty(keys).call(keys), function next() { for (; keys.length;) { var key = keys.pop(); if (key in object) return next.value = key, next.done = !1, next; } return next.done = !0, next; }; }, exports.values = values, Context.prototype = { constructor: Context, reset: function reset(skipTempReset) { var _context10; if (this.prev = 0, this.next = 0, this.sent = this._sent = undefined, this.done = !1, this.delegate = null, this.method = "next", this.arg = undefined, _forEachInstanceProperty(_context10 = this.tryEntries).call(_context10, resetTryEntry), !skipTempReset) for (var name in this) { "t" === name.charAt(0) && hasOwn.call(this, name) && !isNaN(+_sliceInstanceProperty(name).call(name, 1)) && (this[name] = undefined); } }, stop: function stop() { this.done = !0; var rootRecord = this.tryEntries[0].completion; if ("throw" === rootRecord.type) throw rootRecord.arg; return this.rval; }, dispatchException: function dispatchException(exception) { if (this.done) throw exception; var context = this; function handle(loc, caught) { return record.type = "throw", record.arg = exception, context.next = loc, caught && (context.method = "next", context.arg = undefined), !!caught; } for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i], record = entry.completion; if ("root" === entry.tryLoc) return handle("end"); if (entry.tryLoc <= this.prev) { var hasCatch = hasOwn.call(entry, "catchLoc"), hasFinally = hasOwn.call(entry, "finallyLoc"); if (hasCatch && hasFinally) { if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); } else if (hasCatch) { if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); } else { if (!hasFinally) throw new Error("try statement without catch or finally"); if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); } } } }, abrupt: function abrupt(type, arg) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.tryLoc <= this.prev && hasOwn.call(entry, "finallyLoc") && this.prev < entry.finallyLoc) { var finallyEntry = entry; break; } } finallyEntry && ("break" === type || "continue" === type) && finallyEntry.tryLoc <= arg && arg <= finallyEntry.finallyLoc && (finallyEntry = null); var record = finallyEntry ? finallyEntry.completion : {}; return record.type = type, record.arg = arg, finallyEntry ? (this.method = "next", this.next = finallyEntry.finallyLoc, ContinueSentinel) : this.complete(record); }, complete: function complete(record, afterLoc) { if ("throw" === record.type) throw record.arg; return "break" === record.type || "continue" === record.type ? this.next = record.arg : "return" === record.type ? (this.rval = this.arg = record.arg, this.method = "return", this.next = "end") : "normal" === record.type && afterLoc && (this.next = afterLoc), ContinueSentinel; }, finish: function finish(finallyLoc) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.finallyLoc === finallyLoc) return this.complete(entry.completion, entry.afterLoc), resetTryEntry(entry), ContinueSentinel; } }, "catch": function _catch(tryLoc) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.tryLoc === tryLoc) { var record = entry.completion; if ("throw" === record.type) { var thrown = record.arg; resetTryEntry(entry); } return thrown; } } throw new Error("illegal catch attempt"); }, delegateYield: function delegateYield(iterable, resultName, nextLoc) { return this.delegate = { iterator: values(iterable), resultName: resultName, nextLoc: nextLoc }, "next" === this.method && (this.arg = undefined), ContinueSentinel; } }, exports; }
26
+ var unavailableRanges = [['2022-08-01', '2022-08-03'], ['2022-08-15', '2022-08-20']];
27
+ // This function is run against each date in the calendar
28
+ var isDateUnavailable = function isDateUnavailable(date) {
29
+ return (0, _some["default"])(unavailableRanges).call(unavailableRanges, function (interval) {
30
+ return date.compare((0, _date.parseDate)(interval[0])) >= 0 && date.compare((0, _date.parseDate)(interval[1])) <= 0;
31
+ });
32
+ };
33
+ var getComponent = function getComponent() {
34
+ var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
35
+ var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
36
+ _ref$renderFn = _ref.renderFn,
37
+ renderFn = _ref$renderFn === void 0 ? _testWrapper.render : _ref$renderFn;
38
+ return renderFn((0, _react2.jsx)(_Calendar["default"], props));
39
+ };
40
+ test('renders calendar component', function () {
41
+ var _context, _context2;
42
+ getComponent({
43
+ defaultValue: '2022-08-10'
44
+ });
45
+ var heading = _testWrapper.screen.queryByRole('heading');
46
+ expect(_testWrapper.screen.queryByRole('group')).toBeInTheDocument();
47
+ expect(heading).toHaveTextContent('August 2022');
48
+ expect(_testWrapper.screen.queryByText('calendar-default, September 2022')).not.toBeInTheDocument();
49
+ var buttons = _testWrapper.screen.queryAllByRole('button');
50
+ var previous = buttons[1];
51
+ var next = buttons[2];
52
+ expect(previous).toHaveAttribute('aria-label', 'Previous');
53
+ expect(next).toHaveAttribute('aria-label', 'Next');
54
+ expect(_testWrapper.screen.queryByRole('grid')).toHaveAttribute('aria-label', 'August 2022');
55
+ var weeksInMonth = _testWrapper.screen.getAllByRole('row');
56
+ expect(weeksInMonth).toHaveLength(5);
57
+ var headers = _testWrapper.screen.queryAllByRole('columnheader', {
58
+ hidden: true
59
+ });
60
+ expect((0, _map["default"])(headers).call(headers, function (h) {
61
+ return h.textContent;
62
+ })).toEqual(['S', 'M', 'T', 'W', 'T', 'F', 'S']);
63
+ var gridCells = (0, _filter["default"])(_context = _testWrapper.screen.queryAllByRole('gridcell')).call(_context, function (cell) {
64
+ return cell.getAttribute('aria-disabled') !== 'true';
65
+ });
66
+ expect(gridCells.length).toBe(31);
67
+ var hiddenButton = (0, _filter["default"])(_context2 = _testWrapper.screen.queryAllByRole('button')).call(_context2, function (button) {
68
+ return button.getAttribute('aria-label') === 'Next';
69
+ })[1];
70
+ expect(hiddenButton).toHaveAttribute('tabindex', '-1');
71
+ _userEvent["default"].click(hiddenButton);
72
+ expect(heading).toHaveTextContent('September 2022');
73
+ });
74
+ test('should able to navigate to previous and next year and month', function () {
75
+ getComponent({
76
+ defaultValue: '2022-08-10'
77
+ });
78
+ var buttons = _testWrapper.screen.queryAllByRole('button');
79
+ var heading = _testWrapper.screen.queryByRole('heading');
80
+ expect(heading).toHaveTextContent('August 2022');
81
+
82
+ // navigation to previous year
83
+ _userEvent["default"].click(buttons[0]);
84
+ expect(heading).toHaveTextContent('August 2021');
85
+
86
+ // navigation to next year
87
+ _userEvent["default"].click(buttons[3]);
88
+ expect(heading).toHaveTextContent('August 2022');
89
+
90
+ // navigation to previous month
91
+ _userEvent["default"].click(buttons[1]);
92
+ expect(heading).toHaveTextContent('July 2022');
93
+
94
+ // navigation to next month
95
+ _userEvent["default"].click(buttons[2]);
96
+ expect(heading).toHaveTextContent('August 2022');
97
+ });
98
+ test('should render disabled previous, disabled next and current date gridcell for a month', function () {
99
+ getComponent({
100
+ defaultValue: '2022-08-10'
101
+ });
102
+ expect(_testWrapper.screen.queryAllByRole('gridcell')).toHaveLength(35);
103
+ var previousDate = _testWrapper.screen.queryAllByText(31);
104
+ expect(previousDate[0]).toHaveAttribute('aria-label', 'Sunday, July 31, 2022');
105
+ expect(previousDate[0]).toHaveAttribute('aria-disabled', 'true');
106
+ var dates = _testWrapper.screen.queryAllByText(1);
107
+ var currentDate = dates[0];
108
+ var nextDate = dates[1];
109
+ expect(currentDate).toHaveAttribute('aria-label', 'Monday, August 1, 2022');
110
+ _userEvent["default"].click(currentDate);
111
+ expect(currentDate).toHaveClass('is-selected');
112
+ expect(nextDate).toHaveAttribute('aria-label', 'Thursday, September 1, 2022');
113
+ expect(nextDate).toHaveAttribute('aria-disabled', 'true');
114
+ });
115
+ test('when a date is selected it should have the class is-selected with controlled value', function () {
116
+ getComponent({
117
+ value: '2022-08-10'
118
+ });
119
+ var selectedDate = _testWrapper.screen.queryByText(10);
120
+ expect(selectedDate).toHaveClass('is-selected');
121
+ });
122
+ test('should be able to select dates', function () {
123
+ getComponent({
124
+ defaultValue: '2022-08-10'
125
+ });
126
+ var dateButtons = _testWrapper.screen.queryAllByRole('button');
127
+ expect(dateButtons).toHaveLength(36);
128
+ expect(dateButtons[4]).toHaveAttribute('aria-label', 'Monday, August 1, 2022');
129
+ _userEvent["default"].click(dateButtons[4]);
130
+ expect(dateButtons[4]).toHaveClass('is-selected');
131
+ });
132
+ test('should be able to navigate and select shown previous month dates', function () {
133
+ var _context3;
134
+ getComponent({
135
+ defaultValue: '2022-08-10'
136
+ });
137
+ var disabledGridCells = (0, _filter["default"])(_context3 = _testWrapper.screen.queryAllByRole('gridcell')).call(_context3, function (cell) {
138
+ return cell.getAttribute('aria-disabled') !== 'false';
139
+ });
140
+ var previousDate = disabledGridCells[0];
141
+ expect((0, _testWrapper.within)(previousDate).getByText(31)).toHaveAttribute('aria-label', 'Sunday, July 31, 2022');
142
+ _userEvent["default"].click(previousDate);
143
+ var selectedDate = _testWrapper.screen.queryByText(31);
144
+ expect(selectedDate).toHaveAttribute('aria-label', 'Sunday, July 31, 2022 selected');
145
+ });
146
+ test('should be able to navigate and select shown next month dates', function () {
147
+ var _context4;
148
+ getComponent({
149
+ defaultValue: '2022-08-10'
150
+ });
151
+ var disabledGridCells = (0, _filter["default"])(_context4 = _testWrapper.screen.queryAllByRole('gridcell')).call(_context4, function (cell) {
152
+ return cell.getAttribute('aria-disabled') !== 'false';
153
+ });
154
+ var NextDate = disabledGridCells[34];
155
+ expect((0, _testWrapper.within)(NextDate).getByText(3)).toHaveAttribute('aria-label', 'Saturday, September 3, 2022');
156
+ _userEvent["default"].click(NextDate);
157
+ var selectedDate = _testWrapper.screen.queryByText(3);
158
+ expect(selectedDate).toHaveAttribute('aria-label', 'Saturday, September 3, 2022 selected');
159
+ });
160
+ test('allows users to open calendar item with enter / space key', function () {
161
+ getComponent({
162
+ defaultValue: '2022-08-10'
163
+ });
164
+ var buttons = _testWrapper.screen.queryAllByRole('button');
165
+ var title = _testWrapper.screen.queryByRole('heading');
166
+ expect(title).toHaveTextContent('August 2022');
167
+ var previousButton = buttons[1];
168
+ var nextButton = buttons[2];
169
+ (0, _testWrapper.act)(function () {
170
+ previousButton.focus();
171
+ });
172
+ _testWrapper.fireEvent.keyDown(previousButton, {
173
+ key: 'Enter'
174
+ });
175
+ _testWrapper.fireEvent.keyUp(previousButton, {
176
+ key: 'Enter'
177
+ });
178
+ expect(title).toHaveTextContent('July 2022');
179
+ (0, _testWrapper.act)(function () {
180
+ nextButton.focus();
181
+ });
182
+ _testWrapper.fireEvent.keyDown(nextButton, {
183
+ key: 'Enter'
184
+ });
185
+ _testWrapper.fireEvent.keyUp(nextButton, {
186
+ key: 'Enter'
187
+ });
188
+ expect(title).toHaveTextContent('August 2022');
189
+ });
190
+ test('allows users to select and navigate through calendar items', function () {
191
+ getComponent();
192
+ var buttons = _testWrapper.screen.queryAllByRole('button');
193
+ (0, _testWrapper.act)(function () {
194
+ buttons[4].focus();
195
+ });
196
+ expect(buttons[4]).toHaveFocus();
197
+ _testWrapper.fireEvent.keyDown(buttons[4], {
198
+ key: 'Enter'
199
+ });
200
+ _testWrapper.fireEvent.keyUp(buttons[4], {
201
+ key: 'Enter'
202
+ });
203
+ _testWrapper.fireEvent.keyDown(buttons[4], {
204
+ key: 'ArrowRight'
205
+ });
206
+ expect(buttons[5]).toHaveFocus();
207
+ _testWrapper.fireEvent.keyDown(buttons[5], {
208
+ key: 'ArrowLeft'
209
+ });
210
+ expect(buttons[4]).toHaveFocus();
211
+ _testWrapper.fireEvent.keyDown(buttons[4], {
212
+ key: 'ArrowDown'
213
+ });
214
+ expect(buttons[11]).toHaveFocus();
215
+ _testWrapper.fireEvent.keyDown(buttons[11], {
216
+ key: 'ArrowUp'
217
+ });
218
+ expect(buttons[4]).toHaveFocus();
219
+ });
220
+ test('readonly calendar', function () {
221
+ getComponent({
222
+ isReadOnly: true,
223
+ defaultValue: '2022-08-10'
224
+ });
225
+ expect(_testWrapper.screen.queryByRole('grid')).toHaveAttribute('aria-readonly', 'true');
226
+ var dateButtons = _testWrapper.screen.queryAllByRole('button');
227
+ _userEvent["default"].click(dateButtons[4]);
228
+ expect(dateButtons[4]).not.toHaveClass('is-selected');
229
+ expect(dateButtons[4]).toHaveFocus();
230
+ expect(dateButtons[4]).toHaveAttribute('tabindex', '0');
231
+ });
232
+ test('disabled calendar date', function () {
233
+ getComponent({
234
+ isDisabled: true
235
+ });
236
+ expect(_testWrapper.screen.queryByRole('grid')).toHaveAttribute('aria-disabled', 'true');
237
+ var dateButtons = _testWrapper.screen.queryAllByRole('button');
238
+ _userEvent["default"].click(dateButtons[4]);
239
+ expect(dateButtons[4]).toHaveAttribute('aria-disabled', 'true');
240
+ expect(dateButtons[4]).toHaveClass('is-disabled');
241
+ });
242
+ test('dates before minimum date cannot be selected', function () {
243
+ var onChange = jest.fn();
244
+ getComponent({
245
+ onChange: onChange,
246
+ minValue: '2022-08-02',
247
+ defaultValue: '2022-08-10'
248
+ });
249
+ var dateButtons = _testWrapper.screen.queryAllByRole('button');
250
+ _userEvent["default"].click(dateButtons[1]);
251
+ expect(_testWrapper.screen.queryByRole('heading')).toHaveTextContent('August 2022');
252
+ _userEvent["default"].click(dateButtons[2]);
253
+ expect(dateButtons[3]).not.toHaveClass('is-selected');
254
+ expect(onChange).not.toHaveBeenCalled();
255
+ });
256
+ test('dates past maximum date cannot be selected', function () {
257
+ var onChange = jest.fn();
258
+ getComponent({
259
+ onChange: onChange,
260
+ maxValue: '2022-08-04',
261
+ defaultValue: '2022-08-03'
262
+ });
263
+ var dateButtons = _testWrapper.screen.queryAllByRole('button');
264
+ _userEvent["default"].click(dateButtons[2]);
265
+ expect(_testWrapper.screen.queryByRole('heading')).toHaveTextContent('August 2022');
266
+ _userEvent["default"].click(dateButtons[10]);
267
+ expect(dateButtons[10]).not.toHaveClass('is-selected');
268
+ expect(onChange).not.toHaveBeenCalled();
269
+ });
270
+ test('unavailable dates cannot be picked', function () {
271
+ var _context5, _context6;
272
+ getComponent({
273
+ isDateUnavailable: isDateUnavailable,
274
+ defaultValue: '2022-08-05'
275
+ });
276
+ var dateButtons = _testWrapper.screen.queryAllByRole('button');
277
+ _userEvent["default"].click(dateButtons[4]);
278
+ expect(dateButtons[4]).not.toHaveClass('is-selected');
279
+ var gridCells = (0, _filter["default"])(_context5 = _testWrapper.screen.getAllByRole('gridcell')).call(_context5, function (cell) {
280
+ return cell.getAttribute('aria-disabled') !== 'true';
281
+ });
282
+ expect(gridCells.length).toBe(22);
283
+ var cells = (0, _filter["default"])(_context6 = _testWrapper.screen.getAllByRole('button')).call(_context6, function (cell) {
284
+ return cell.getAttribute('aria-disabled') === 'true';
285
+ });
286
+ expect(cells.length).toBe(9);
287
+ var disabledDate = _testWrapper.screen.queryByText(16);
288
+ _userEvent["default"].click(disabledDate);
289
+ expect(disabledDate).toHaveAttribute('aria-disabled', 'true');
290
+ expect(disabledDate).not.toHaveClass('is-selected');
291
+ expect(disabledDate).toHaveClass('is-unavailable');
292
+ });
293
+ test('should autofocus on current day with hasAutoFocus', function () {
294
+ var _context7;
295
+ getComponent({
296
+ hasAutoFocus: true
297
+ });
298
+ var dateToday = (0, _date.today)((0, _date.getLocalTimeZone)());
299
+ var day = dateToday.day;
300
+ var focusedDay = (0, _filter["default"])(_context7 = _testWrapper.screen.queryAllByText(day)).call(_context7, function (cell) {
301
+ return cell.getAttribute('aria-disabled') !== 'true';
302
+ });
303
+ expect(focusedDay[0]).toHaveTextContent(day);
304
+ });
305
+ test('should have no accessibility violations', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
306
+ var _getComponent, container, results;
307
+ return _regeneratorRuntime().wrap(function _callee$(_context8) {
308
+ while (1) {
309
+ switch (_context8.prev = _context8.next) {
310
+ case 0:
311
+ jest.useRealTimers();
312
+ _getComponent = getComponent(), container = _getComponent.container;
313
+ _context8.next = 4;
314
+ return (0, _jestAxe.axe)(container);
315
+ case 4:
316
+ results = _context8.sent;
317
+ expect(results).toHaveNoViolations();
318
+ case 6:
319
+ case "end":
320
+ return _context8.stop();
321
+ }
322
+ }
323
+ }, _callee);
324
+ })));
@@ -0,0 +1,125 @@
1
+ "use strict";
2
+
3
+ var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
4
+ var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
5
+ var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
6
+ var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
7
+ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
8
+ _Object$defineProperty(exports, "__esModule", {
9
+ value: true
10
+ });
11
+ exports["default"] = void 0;
12
+ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
13
+ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
14
+ var _react = _interopRequireWildcard(require("react"));
15
+ var _calendar = require("@react-aria/calendar");
16
+ var _focus = require("@react-aria/focus");
17
+ var _interactions = require("@react-aria/interactions");
18
+ var _utils = require("@react-aria/utils");
19
+ var _propTypes = _interopRequireDefault(require("prop-types"));
20
+ var _hooks = require("../../hooks");
21
+ var _index = require("../../index");
22
+ var _react2 = require("@emotion/react");
23
+ var _excluded = ["state", "date", "className"];
24
+ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
25
+ 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; }
26
+ /**
27
+ * Grid cell button element with the formatted day number.
28
+ * Utilizes the useCalendarCell hook to return props for an individual cell,
29
+ * along with states and information.
30
+ */
31
+
32
+ var CalendarCell = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
33
+ var state = props.state,
34
+ date = props.date,
35
+ className = props.className,
36
+ others = (0, _objectWithoutProperties2["default"])(props, _excluded);
37
+ var cellRef = (0, _react.useRef)();
38
+ /* istanbul ignore next */
39
+ (0, _react.useImperativeHandle)(ref, function () {
40
+ return cellRef.current;
41
+ });
42
+ var _useCalendarCell = (0, _calendar.useCalendarCell)({
43
+ date: date
44
+ }, state, cellRef),
45
+ cellProps = _useCalendarCell.cellProps,
46
+ buttonProps = _useCalendarCell.buttonProps,
47
+ isSelected = _useCalendarCell.isSelected,
48
+ isOutsideVisibleRange = _useCalendarCell.isOutsideVisibleRange,
49
+ isUnavailable = _useCalendarCell.isUnavailable,
50
+ formattedDate = _useCalendarCell.formattedDate,
51
+ isDisabled = _useCalendarCell.isDisabled;
52
+ var focusPreviousPage = state.focusPreviousPage,
53
+ setValue = state.setValue,
54
+ focusNextPage = state.focusNextPage;
55
+
56
+ /**
57
+ * Function handles the navigation and adds focus to previous or next month dates
58
+ * from the visibly disabled dates in the current month.
59
+ */
60
+
61
+ var handleDisableClick = (0, _react.useCallback)(function () {
62
+ var _cellRef$current, _cellRef$current2;
63
+ if ((_cellRef$current = cellRef.current) !== null && _cellRef$current !== void 0 && _cellRef$current.hidden && !state.isDisabled && formattedDate > 20) {
64
+ focusPreviousPage();
65
+ setValue(date);
66
+ } else if ((_cellRef$current2 = cellRef.current) !== null && _cellRef$current2 !== void 0 && _cellRef$current2.hidden && !state.isDisabled && formattedDate < 15) {
67
+ focusNextPage();
68
+ setValue(date);
69
+ }
70
+ }, [date, focusNextPage, focusPreviousPage, formattedDate, setValue, state]);
71
+ var _useHover = (0, _interactions.useHover)({}),
72
+ hoverProps = _useHover.hoverProps,
73
+ isHovered = _useHover.isHovered;
74
+ var _usePress = (0, _interactions.usePress)({
75
+ ref: cellRef,
76
+ onPress: handleDisableClick
77
+ }),
78
+ pressProps = _usePress.pressProps,
79
+ isPressed = _usePress.isPressed;
80
+ var _useFocusRing = (0, _focus.useFocusRing)({
81
+ within: true
82
+ }),
83
+ focusWithinProps = _useFocusRing.focusProps,
84
+ isFocusVisible = _useFocusRing.isFocusVisible;
85
+ var mergedProps = (0, _utils.mergeProps)(cellProps, hoverProps, pressProps, focusWithinProps);
86
+ var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
87
+ isSelected: isSelected,
88
+ isExtreme: isDisabled,
89
+ isUnavailable: isUnavailable,
90
+ isPressed: isPressed,
91
+ isFocused: isFocusVisible,
92
+ isHovered: isHovered,
93
+ isOutsideVisibleRange: isOutsideVisibleRange,
94
+ isCompletelyDisabled: state.isDisabled
95
+ }),
96
+ classNames = _useStatusClasses.classNames;
97
+ return (0, _react2.jsx)(_index.TableCell, (0, _extends2["default"])({}, mergedProps, {
98
+ variant: "calendar.calendarCell"
99
+ }), (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
100
+ variant: "calendar.calendarButton",
101
+ ref: cellRef,
102
+ hidden: isOutsideVisibleRange,
103
+ isSelected: isSelected,
104
+ isDisabled: isDisabled,
105
+ isUnavailable: isUnavailable,
106
+ className: classNames
107
+ }, (0, _utils.mergeProps)(buttonProps, others)), formattedDate));
108
+ });
109
+ CalendarCell.propTypes = {
110
+ isSelected: _propTypes["default"].bool,
111
+ isDisabled: _propTypes["default"].bool,
112
+ isOutsideVisibleRange: _propTypes["default"].bool,
113
+ isUnavailable: _propTypes["default"].bool,
114
+ formattedDate: _propTypes["default"].string,
115
+ state: _propTypes["default"].shape({
116
+ focusPreviousPage: _propTypes["default"].func,
117
+ setValue: _propTypes["default"].func,
118
+ focusNextPage: _propTypes["default"].func,
119
+ setFocusedDate: _propTypes["default"].func,
120
+ isDisabled: _propTypes["default"].bool
121
+ }),
122
+ date: _propTypes["default"].shape({})
123
+ };
124
+ var _default = CalendarCell;
125
+ exports["default"] = _default;
@@ -0,0 +1,77 @@
1
+ "use strict";
2
+
3
+ var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
4
+ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
5
+ _Object$defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports["default"] = void 0;
9
+ var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
10
+ var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
11
+ var _from = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/from"));
12
+ var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/keys"));
13
+ var _react = _interopRequireDefault(require("react"));
14
+ var _date = require("@internationalized/date");
15
+ var _calendar = require("@react-aria/calendar");
16
+ var _i18n = require("@react-aria/i18n");
17
+ var _propTypes = _interopRequireDefault(require("prop-types"));
18
+ var _index = require("../../index");
19
+ var _CalendarCell = _interopRequireDefault(require("./CalendarCell"));
20
+ var _react2 = require("@emotion/react");
21
+ /**
22
+ * The calendar body component with column header and calendar cells.
23
+ * Utilizes useCalendarGrid to return props for an individual grid of dates in a month
24
+ * along with formatted weekday names based on the current locale.
25
+ */
26
+
27
+ var CalendarGrid = function CalendarGrid(props) {
28
+ var _context2, _context3, _context4;
29
+ var state = props.state,
30
+ customWeekDays = props.customWeekDays;
31
+ var _useLocale = (0, _i18n.useLocale)(),
32
+ locale = _useLocale.locale;
33
+ var visibleRange = state.visibleRange,
34
+ getDatesInWeek = state.getDatesInWeek;
35
+ var _useCalendarGrid = (0, _calendar.useCalendarGrid)(props, state),
36
+ gridProps = _useCalendarGrid.gridProps,
37
+ headerProps = _useCalendarGrid.headerProps,
38
+ weekDays = _useCalendarGrid.weekDays;
39
+ var weeksInMonth = (0, _date.getWeeksInMonth)(visibleRange.start, locale);
40
+ var getKey = function getKey(day, index) {
41
+ var _context;
42
+ return (0, _concat["default"])(_context = "".concat(day, "-")).call(_context, index);
43
+ };
44
+ return (0, _react2.jsx)(_index.Table, gridProps, (0, _react2.jsx)(_index.TableHead, headerProps, (0, _react2.jsx)(_index.TableRow, null, (0, _map["default"])(_context2 = customWeekDays || weekDays).call(_context2, function (day, index) {
45
+ return (0, _react2.jsx)(_index.TableCell, {
46
+ variant: "calendar.columnHeader",
47
+ key: getKey(day, index),
48
+ role: "columnheader"
49
+ }, day);
50
+ }))), (0, _react2.jsx)(_index.TableBody, {
51
+ variant: "calendar.calendarBody"
52
+ }, (0, _map["default"])(_context3 = (0, _from["default"])((0, _keys["default"])(_context4 = Array(weeksInMonth)).call(_context4))).call(_context3, function (weekIndex) {
53
+ var _context5;
54
+ return (0, _react2.jsx)(_index.TableRow, {
55
+ key: weekIndex
56
+ }, (0, _map["default"])(_context5 = getDatesInWeek(weekIndex)).call(_context5, function (date) {
57
+ return date.day && (0, _react2.jsx)(_CalendarCell["default"], {
58
+ key: date,
59
+ state: state,
60
+ date: date
61
+ });
62
+ }));
63
+ })));
64
+ };
65
+ CalendarGrid.propTypes = {
66
+ /** State object that is passed in from the useCalendar hook */
67
+ state: _propTypes["default"].shape({
68
+ visibleRange: _propTypes["default"].shape({
69
+ start: _propTypes["default"].shape({})
70
+ }),
71
+ getDatesInWeek: _propTypes["default"].func
72
+ }),
73
+ /** Custom week days for other international calendars */
74
+ customWeekDays: _propTypes["default"].arrayOf(_propTypes["default"].string)
75
+ };
76
+ var _default = CalendarGrid;
77
+ exports["default"] = _default;
@@ -0,0 +1,14 @@
1
+ "use strict";
2
+
3
+ var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
4
+ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
5
+ _Object$defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ _Object$defineProperty(exports, "default", {
9
+ enumerable: true,
10
+ get: function get() {
11
+ return _Calendar["default"];
12
+ }
13
+ });
14
+ var _Calendar = _interopRequireDefault(require("./Calendar"));