@pingux/astro 2.70.0-alpha.2 → 2.70.0

package/lib/cjs/components/RangeCalendar/RangeCalendar.styles.js

@@ -0,0 +1,118 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var calendarBody = {
+  pb: 'sm',
+  borderTop: '1px solid',
+  borderTopColor: 'neutral.80',
+  '& > tr:nth-of-type(odd) ': {
+    backgroundColor: 'white'
+  }
+};
+var calendarButton = {
+  justifyContent: 'center',
+  alignItems: 'center',
+  fontSize: 'sm',
+  fontWeight: 1,
+  color: 'neutral.10',
+  lineHeight: '16px',
+  width: '40px',
+  height: '40px',
+  outline: 'none',
+  '&.is-hovered': {
+    bg: 'accent.99',
+    cursor: 'pointer'
+  },
+  '&.is-selected': {
+    bg: 'accent.99',
+    '&.is-hovered': {
+      bg: 'active',
+      color: 'white'
+    }
+  },
+  '&.is-range-ends': {
+    bg: 'active',
+    color: 'white',
+    outline: 'none',
+    boxShadow: 'none'
+  },
+  '&.is-selection-start': {
+    borderRadius: '6px 0 0 6px'
+  },
+  '&.is-selection-end': {
+    borderRadius: '0 6px 6px 0'
+  },
+  '&.is-start-and-end': {
+    borderRadius: '0'
+  },
+  '&.is-focused': {
+    outline: '1px',
+    outlineStyle: 'solid',
+    outlineColor: 'focus',
+    outlineOffset: '-1px'
+  },
+  '&.is-unavailable': {
+    backgroundColor: 'neutral.80'
+  },
+  '&:not(.is-outside-visible-range)&.is-extreme&:not(.is-completely-disabled)': {
+    backgroundColor: 'neutral.80',
+    color: 'neutral.10',
+    opacity: 1
+  },
+  '&.is-disabled': {
+    '&.is-hovered': {
+      backgroundColor: 'unset'
+    }
+  }
+};
+var calendarCell = {
+  cursor: 'default',
+  textAlign: 'center',
+  position: 'relative',
+  color: '#333',
+  padding: '0',
+  width: '40px',
+  height: '40px'
+};
+var columnHeader = {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  color: 'text.primary',
+  fontSize: 'sm',
+  fontWeight: 1,
+  width: '40px',
+  height: '40px'
+};
+var calendarHeaderContainer = {
+  justifyContent: 'space-between',
+  mt: 'sm',
+  alignItems: 'center',
+  width: '586px',
+  height: '31px'
+};
+var calendarHeader = {
+  position: 'relative',
+  justifyContent: 'center',
+  alignItems: 'center',
+  width: '280px',
+  height: '100%'
+};
+var calendarContainer = {
+  width: '586px',
+  textAlign: 'center'
+};
+var _default = {
+  calendarBody: calendarBody,
+  calendarButton: calendarButton,
+  calendarCell: calendarCell,
+  calendarContainer: calendarContainer,
+  calendarHeader: calendarHeader,
+  calendarHeaderContainer: calendarHeaderContainer,
+  columnHeader: columnHeader
+};
+exports["default"] = _default;

package/lib/cjs/components/RangeCalendar/RangeCalendar.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/cjs/components/RangeCalendar/RangeCalendar.test.js

@@ -0,0 +1,217 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+var _slice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/slice"));
+var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _date = require("@internationalized/date");
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+var _isDateWithinRanges = require("../../utils/devUtils/props/isDateWithinRanges");
+var _testWrapper = require("../../utils/testUtils/testWrapper");
+var _universalComponentTest = require("../../utils/testUtils/universalComponentTest");
+var _RangeCalendar = _interopRequireWildcard(require("./RangeCalendar"));
+var _react2 = require("@emotion/react");
+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); }
+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; }
+var unavailableRanges = [['2022-08-10', '2022-08-15']];
+var defaultProps = {
+  defaultValue: {
+    start: new _date.CalendarDate(2022, 8, 1),
+    end: new _date.CalendarDate(2022, 8, 7)
+  }
+};
+var isDateUnavailable = function isDateUnavailable(date) {
+  return (0, _isDateWithinRanges.isDateWithinRanges)(date, unavailableRanges);
+};
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (0, _testWrapper.render)((0, _react2.jsx)(_RangeCalendar["default"], (0, _extends2["default"])({}, defaultProps, props, {
+    "aria-label": "Calendar Range"
+  })));
+};
+
+// Needs to be added to each components test file.
+(0, _universalComponentTest.universalComponentTests)({
+  renderComponent: function renderComponent(props) {
+    return (0, _react2.jsx)(_RangeCalendar["default"], (0, _extends2["default"])({}, defaultProps, props, {
+      "aria-label": "Calendar Range"
+    }));
+  }
+});
+test('renders calendar range component', function () {
+  getComponent();
+  var calendarContainer = _testWrapper.screen.getByRole('group');
+  expect(calendarContainer).toBeInTheDocument();
+  expect(calendarContainer).toHaveTextContent('Calendar Range, August to September 2022');
+  var buttons = _testWrapper.screen.getAllByRole('button');
+  expect(buttons[0]).toHaveAttribute('aria-label', 'Previous month navigation');
+  expect(buttons[1]).toHaveAttribute('aria-label', 'Next month navigation');
+  var calendarGrids = _testWrapper.screen.getAllByRole('grid');
+  expect(calendarGrids).toHaveLength(2);
+  var calendarHeaders = _testWrapper.screen.getAllByRole('columnheader', {
+    hidden: true
+  });
+  expect(calendarHeaders).toHaveLength(14);
+  var calendarCells = _testWrapper.screen.queryAllByRole('gridcell');
+  expect(calendarCells).toHaveLength(70);
+});
+test('should able to navigate to previous and next month', function () {
+  getComponent();
+  var buttons = _testWrapper.screen.getAllByRole('button');
+  var heading = _testWrapper.screen.getByRole('group');
+  expect(heading).toHaveTextContent('Calendar Range, August to September 2022');
+
+  // navigation to previous month
+  _userEvent["default"].click(buttons[0]);
+  expect(heading).toHaveTextContent('Calendar Range, July to August 2022');
+
+  // navigation to next month
+  _userEvent["default"].click(buttons[1]);
+  expect(heading).toHaveTextContent('Calendar Range, August to September 2022');
+
+  // navigation to next month
+  _userEvent["default"].click(buttons[1]);
+  expect(heading).toHaveTextContent('Calendar Range, September to October 2022');
+});
+test('should be able to select a range of dates', function () {
+  getComponent();
+  var calendarCells = _testWrapper.screen.queryAllByRole('gridcell');
+  var startCell = calendarCells[7];
+  var endCell = calendarCells[13];
+  _userEvent["default"].click(startCell);
+  _userEvent["default"].click(endCell);
+  var selectedCells = _testWrapper.screen.getAllByRole('gridcell', {
+    selected: true
+  });
+  expect(selectedCells).toHaveLength(7);
+});
+test('should disable unavailable dates', function () {
+  getComponent({
+    isDateUnavailable: isDateUnavailable
+  });
+  var calendarCells = _testWrapper.screen.queryAllByRole('gridcell');
+  var unavailableCells = (0, _slice["default"])(calendarCells).call(calendarCells, 10, 16);
+  (0, _forEach["default"])(unavailableCells).call(unavailableCells, function (cell) {
+    expect(cell).toHaveAttribute('aria-disabled', 'true');
+  });
+});
+test('allows users to select and navigate through calendar items', function () {
+  getComponent();
+  var buttons = _testWrapper.screen.queryAllByRole('button');
+  (0, _testWrapper.act)(function () {
+    buttons[4].focus();
+  });
+  expect(buttons[4]).toHaveFocus();
+  _testWrapper.fireEvent.keyDown(buttons[4], {
+    key: 'ArrowRight'
+  });
+  expect(buttons[5]).toHaveFocus();
+  _testWrapper.fireEvent.keyDown(buttons[5], {
+    key: 'ArrowLeft'
+  });
+  expect(buttons[4]).toHaveFocus();
+  _testWrapper.fireEvent.keyDown(buttons[4], {
+    key: 'ArrowDown'
+  });
+  expect(buttons[11]).toHaveFocus();
+  _testWrapper.fireEvent.keyDown(buttons[11], {
+    key: 'ArrowUp'
+  });
+  expect(buttons[4]).toHaveFocus();
+  _testWrapper.fireEvent.keyDown(buttons[4], {
+    key: 'Enter'
+  });
+  _testWrapper.fireEvent.keyUp(buttons[4], {
+    key: 'Enter'
+  });
+  expect(buttons[5]).toHaveFocus();
+});
+test('readonly calendar', function () {
+  getComponent({
+    isReadOnly: true
+  });
+  var calendars = _testWrapper.screen.queryAllByRole('grid');
+  expect(calendars).toHaveLength(2);
+  (0, _forEach["default"])(calendars).call(calendars, function (calendar) {
+    expect(calendar).toHaveAttribute('aria-readonly', 'true');
+  });
+  var buttons = _testWrapper.screen.queryAllByRole('button');
+  _userEvent["default"].click(buttons[12]);
+  expect(buttons[12]).not.toHaveClass('is-selected');
+});
+test('dates before minimum date cannot be selected', function () {
+  var onChange = jest.fn();
+  var defaultValue = {
+    start: '2022-08-10',
+    end: '2022-08-15'
+  };
+  getComponent({
+    onChange: onChange,
+    minValue: '2022-08-06',
+    defaultValue: defaultValue
+  });
+  var buttons = _testWrapper.screen.queryAllByRole('button');
+  _userEvent["default"].click(buttons[2]);
+  expect(buttons[2]).not.toHaveClass('is-selected');
+  expect(onChange).not.toHaveBeenCalled();
+});
+test('dates past maxiumum date cannot be selected', function () {
+  var onChange = jest.fn();
+  var defaultValue = {
+    start: new _date.CalendarDate(2022, 8, 10),
+    end: new _date.CalendarDate(2022, 8, 15)
+  };
+  getComponent({
+    onChange: onChange,
+    maxValue: '2022-08-20',
+    defaultValue: defaultValue
+  });
+  var buttons = _testWrapper.screen.queryAllByRole('button');
+  _userEvent["default"].click(buttons[55]);
+  expect(buttons[55]).not.toHaveClass('is-selected');
+  expect(onChange).not.toHaveBeenCalled();
+});
+test('should autofocus on current day with hasAutoFocus', function () {
+  var _context;
+  getComponent({
+    hasAutoFocus: true,
+    defaultValue: null
+  });
+  var dateToday = (0, _date.today)((0, _date.getLocalTimeZone)());
+  var day = dateToday.day;
+  var focusedDay = (0, _filter["default"])(_context = _testWrapper.screen.queryAllByText(day)).call(_context, function (cell) {
+    return cell.getAttribute('aria-disabled') !== 'true';
+  });
+  expect(focusedDay[0]).toHaveTextContent(day.toString());
+  expect(focusedDay[0]).toHaveFocus();
+});
+test('parseDateRangeIfString should correctly parse string or DateValue inputs', function () {
+  var value1 = {
+    start: '2022-08-01',
+    end: '2022-08-07'
+  };
+  var value2 = {
+    start: new _date.CalendarDate(2022, 8, 10),
+    end: new _date.CalendarDate(2022, 8, 15)
+  };
+  var result1 = (0, _RangeCalendar.parseDateRangeIfString)(value1);
+  var result2 = (0, _RangeCalendar.parseDateRangeIfString)(value2);
+  expect(result1.start).toEqual(new _date.CalendarDate(2022, 8, 1));
+  expect(result1.end).toEqual(new _date.CalendarDate(2022, 8, 7));
+  expect(result2.start).toEqual(new _date.CalendarDate(2022, 8, 10));
+  expect(result2.end).toEqual(new _date.CalendarDate(2022, 8, 15));
+});
+test('parseDateIfString should correctly parse string or DateValue inputs', function () {
+  var value1 = '2022-08-01';
+  var value2 = new _date.CalendarDate(2022, 8, 10);
+  var result1 = (0, _RangeCalendar.parseDateIfString)(value1);
+  var result2 = (0, _RangeCalendar.parseDateIfString)(value2);
+  expect(result1).toEqual(new _date.CalendarDate(2022, 8, 1));
+  expect(result2).toEqual(new _date.CalendarDate(2022, 8, 10));
+});

package/lib/cjs/components/RangeCalendar/RangeCalendarCell.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { RangeCalendarCellProps } from '../../types';
+declare const RangeCalendarCell: React.ForwardRefExoticComponent<RangeCalendarCellProps & React.RefAttributes<HTMLDivElement>>;
+export default RangeCalendarCell;

package/lib/cjs/components/RangeCalendar/RangeCalendarCell.js

@@ -0,0 +1,96 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _date = require("@internationalized/date");
+var _calendar = require("@react-aria/calendar");
+var _focus = require("@react-aria/focus");
+var _interactions = require("@react-aria/interactions");
+var _utils = require("@react-aria/utils");
+var _hooks = require("../../hooks");
+var _index = require("../../index");
+var _react2 = require("@emotion/react");
+var _excluded = ["state", "date", "currentMonth", "className"];
+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); }
+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; }
+var RangeCalendarCell = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var state = props.state,
+    date = props.date,
+    currentMonth = props.currentMonth,
+    className = props.className,
+    others = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var cellRef = (0, _hooks.useLocalOrForwardRef)(ref);
+  var _useCalendarCell = (0, _calendar.useCalendarCell)({
+      date: date
+    }, state, cellRef),
+    cellProps = _useCalendarCell.cellProps,
+    buttonProps = _useCalendarCell.buttonProps,
+    isSelected = _useCalendarCell.isSelected,
+    isOutsideVisibleRange = _useCalendarCell.isOutsideVisibleRange,
+    isUnavailable = _useCalendarCell.isUnavailable,
+    formattedDate = _useCalendarCell.formattedDate,
+    isDisabled = _useCalendarCell.isDisabled;
+  var highlightedRange = state.highlightedRange;
+  var isOutsideMonth = !(0, _date.isSameMonth)(currentMonth, date);
+
+  // The start and end date of the selected range will have
+  // an emphasized appearance.
+  var isSelectionStart = highlightedRange ? (0, _date.isSameDay)(date, highlightedRange.start) : isSelected;
+  var isSelectionEnd = highlightedRange ? (0, _date.isSameDay)(date, highlightedRange.end) : isSelected;
+  var _useHover = (0, _interactions.useHover)({}),
+    hoverProps = _useHover.hoverProps,
+    isHovered = _useHover.isHovered;
+  var _usePress = (0, _interactions.usePress)({
+      ref: cellRef
+    }),
+    pressProps = _usePress.pressProps,
+    isPressed = _usePress.isPressed;
+  var _useFocusRing = (0, _focus.useFocusRing)({
+      within: true
+    }),
+    focusWithinProps = _useFocusRing.focusProps,
+    isFocusVisible = _useFocusRing.isFocusVisible;
+  var mergedProps = (0, _utils.mergeProps)(cellProps, hoverProps, pressProps, focusWithinProps);
+  var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
+      isSelected: isSelected,
+      isExtreme: isDisabled,
+      isUnavailable: isUnavailable,
+      isPressed: isPressed,
+      isFocused: isFocusVisible,
+      isHovered: isHovered,
+      isOutsideVisibleRange: isOutsideVisibleRange,
+      isCompletelyDisabled: state.isDisabled,
+      isRangeEnds: isSelectionStart || isSelectionEnd,
+      isStartAndEnd: isSelectionStart && isSelectionEnd,
+      isSelectionStart: isSelectionStart,
+      isSelectionEnd: isSelectionEnd
+    }),
+    classNames = _useStatusClasses.classNames;
+  return (0, _react2.jsx)(_index.TableCell, (0, _extends2["default"])({}, mergedProps, {
+    variant: "rangeCalendar.calendarCell"
+  }), (0, _react2.jsx)(_index.Box, {
+    style: {
+      display: isOutsideMonth ? 'none' : 'flex'
+    }
+  }, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
+    variant: "rangeCalendar.calendarButton",
+    ref: cellRef
+  }, (0, _utils.mergeProps)(buttonProps, others), {
+    isSelected: isSelected,
+    isDisabled: isDisabled,
+    isUnavailable: isUnavailable,
+    className: classNames
+  }), formattedDate)));
+});
+var _default = RangeCalendarCell;
+exports["default"] = _default;

package/lib/cjs/components/RangeCalendar/RangeCalendarGrid.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { RangeCalendarGridProps } from '../../types/calendar';
+declare const RangeCalendarGrid: (props: RangeCalendarGridProps) => React.JSX.Element;
+export default RangeCalendarGrid;

package/lib/cjs/components/RangeCalendar/RangeCalendarGrid.js

@@ -0,0 +1,70 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+var _from = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/from"));
+var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/keys"));
+var _react = _interopRequireDefault(require("react"));
+var _date = require("@internationalized/date");
+var _calendar = require("@react-aria/calendar");
+var _i18n = require("@react-aria/i18n");
+var _index = require("../../index");
+var _RangeCalendarCell = _interopRequireDefault(require("./RangeCalendarCell"));
+var _react2 = require("@emotion/react");
+var RangeCalendarGrid = function RangeCalendarGrid(props) {
+  var _context2, _context3;
+  var state = props.state,
+    _props$offset = props.offset,
+    offset = _props$offset === void 0 ? {} : _props$offset;
+  var visibleRange = state.visibleRange,
+    getDatesInWeek = state.getDatesInWeek;
+  var _useLocale = (0, _i18n.useLocale)(),
+    locale = _useLocale.locale;
+  var startDate = visibleRange.start.add(offset);
+  var endDate = (0, _date.endOfMonth)(startDate);
+  var _useCalendarGrid = (0, _calendar.useCalendarGrid)({
+      startDate: startDate,
+      endDate: endDate
+    }, state),
+    gridProps = _useCalendarGrid.gridProps,
+    headerProps = _useCalendarGrid.headerProps,
+    weekDays = _useCalendarGrid.weekDays;
+  var weeksInMonth = (0, _date.getWeeksInMonth)(startDate, locale);
+  var getKey = function getKey(day, index) {
+    var _context;
+    return (0, _concat["default"])(_context = "".concat(day, "-")).call(_context, index);
+  };
+  return (0, _react2.jsx)(_index.Table, (0, _extends2["default"])({}, gridProps, {
+    role: "grid"
+  }), (0, _react2.jsx)(_index.TableHead, headerProps, (0, _react2.jsx)(_index.TableRow, null, (0, _map["default"])(weekDays).call(weekDays, function (day, index) {
+    return (0, _react2.jsx)(_index.TableCell, {
+      isHeading: true,
+      variant: "rangeCalendar.columnHeader",
+      key: getKey(day, index),
+      role: "columnheader"
+    }, day);
+  }))), (0, _react2.jsx)(_index.TableBody, {
+    variant: "rangeCalendar.calendarBody"
+  }, (0, _map["default"])(_context2 = (0, _from["default"])((0, _keys["default"])(_context3 = Array(weeksInMonth)).call(_context3))).call(_context2, function (weekIndex) {
+    var _context4;
+    return (0, _react2.jsx)(_index.TableRow, {
+      key: weekIndex
+    }, (0, _map["default"])(_context4 = getDatesInWeek(weekIndex, startDate)).call(_context4, function (date) {
+      return (date === null || date === void 0 ? void 0 : date.day) && (0, _react2.jsx)(_RangeCalendarCell["default"], {
+        key: date.toString(),
+        state: state,
+        date: date,
+        currentMonth: startDate
+      });
+    }));
+  })));
+};
+var _default = RangeCalendarGrid;
+exports["default"] = _default;

package/lib/cjs/components/RangeCalendar/RangeCalendarHeader.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { RangeCalendarHeaderProps } from '../../types';
+declare const RangeCalendarHeader: React.FC<RangeCalendarHeaderProps>;
+export default RangeCalendarHeader;

package/lib/cjs/components/RangeCalendar/RangeCalendarHeader.js

@@ -0,0 +1,85 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _ChevronLeftIcon = _interopRequireDefault(require("@pingux/mdi-react/ChevronLeftIcon"));
+var _ChevronRightIcon = _interopRequireDefault(require("@pingux/mdi-react/ChevronRightIcon"));
+var _i18n = require("@react-aria/i18n");
+var _visuallyHidden = require("@react-aria/visually-hidden");
+var _index = require("../../index");
+var _react2 = require("@emotion/react");
+var RangeCalendarHeader = function RangeCalendarHeader(props) {
+  var state = props.state,
+    calendarProps = props.calendarProps,
+    prevButtonProps = props.prevButtonProps,
+    nextButtonProps = props.nextButtonProps;
+  var monthDateFormatter = (0, _i18n.useDateFormatter)({
+    month: 'long',
+    year: 'numeric',
+    timeZone: state.timeZone
+  });
+
+  // to remove warning for unknown event handler property `onFocusChange`.
+  delete prevButtonProps.onFocusChange;
+  delete nextButtonProps.onFocusChange;
+  return (0, _react2.jsx)(_index.Box, {
+    variant: "rangeCalendar.calendarHeaderContainer",
+    isRow: true
+  }, (0, _react2.jsx)(_visuallyHidden.VisuallyHidden, {
+    "aria-live": "assertive"
+  }, (0, _react2.jsx)(_index.Text, null, calendarProps['aria-label'])), (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    variant: "rangeCalendar.calendarHeader"
+  }, (0, _react2.jsx)(_index.Box, {
+    style: {
+      position: 'absolute',
+      left: '10px'
+    }
+  }, (0, _react2.jsx)(_index.IconButton, (0, _extends2["default"])({}, prevButtonProps, {
+    "aria-label": "Previous month navigation"
+  }), (0, _react2.jsx)(_index.Icon, {
+    icon: _ChevronLeftIcon["default"],
+    size: 25,
+    title: {
+      name: 'Chevron Left Icon'
+    }
+  }))), (0, _react2.jsx)(_index.Text, {
+    "aria-hidden": true,
+    variant: "itemTitle",
+    role: "heading",
+    "aria-level": 3,
+    fontWeight: 3
+  }, monthDateFormatter.format(state.visibleRange.start.toDate(state.timeZone)))), (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    variant: "rangeCalendar.calendarHeader"
+  }, (0, _react2.jsx)(_index.Text, {
+    "aria-hidden": true,
+    variant: "itemTitle",
+    role: "heading",
+    "aria-level": 3,
+    fontWeight: 3
+  }, monthDateFormatter.format(state.visibleRange.start.add({
+    months: 1
+  }).toDate(state.timeZone))), (0, _react2.jsx)(_index.Box, {
+    style: {
+      position: 'absolute',
+      right: '10px'
+    }
+  }, (0, _react2.jsx)(_index.IconButton, (0, _extends2["default"])({}, nextButtonProps, {
+    "aria-label": "Next month navigation"
+  }), (0, _react2.jsx)(_index.Icon, {
+    icon: _ChevronRightIcon["default"],
+    size: 25,
+    title: {
+      name: 'Chevron Right Icon'
+    }
+  })))));
+};
+var _default = RangeCalendarHeader;
+exports["default"] = _default;

package/lib/cjs/components/RangeCalendar/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './RangeCalendar';
+export * from './RangeCalendar';

package/lib/cjs/components/RangeCalendar/index.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _context;
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+_Object$defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _RangeCalendar["default"];
+  }
+});
+var _RangeCalendar = _interopRequireWildcard(require("./RangeCalendar"));
+_forEachInstanceProperty(_context = _Object$keys(_RangeCalendar)).call(_context, function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _RangeCalendar[key]) return;
+  _Object$defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _RangeCalendar[key];
+    }
+  });
+});
+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); }
+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; }

package/lib/cjs/index.d.ts

@@ -130,6 +130,8 @@ export { default as RadioField } from './components/RadioField';
 export * from './components/RadioField';
 export { default as RadioGroupField } from './components/RadioGroupField';
 export * from './components/RadioGroupField';
+export { default as RangeCalendar } from './components/RangeCalendar';
+export * from './components/RangeCalendar';
 export { default as RequirementsList } from './components/RequirementsList';
 export * from './components/RequirementsList';
 export { default as RockerButton } from './components/RockerButton';