@pingux/astro 2.70.0-alpha.2 → 2.70.0

package/lib/components/RangeCalendar/RangeCalendar.mdx

@@ -0,0 +1,39 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Experimental/RangeCalendar/RangeCalendar" />
+
+# RangeCalendar
+
+The RangeCalendar component displays months in two grid-like views and gives users the ability to quickly to select a contiguous range of dates.
+
+This component is built on [useRangeCalendar](https://react-spectrum.adobe.com/react-aria/useRangeCalendar.html), [useCalendarGrid](https://react-spectrum.adobe.com/react-aria/useCalendar.html#usecalendargrid), and 
+[useCalendarCell](https://react-spectrum.adobe.com/react-aria/useCalendar.html#usecalendarcell) from React Aria, and [useRangeCalendarState](https://react-spectrum.adobe.com/react-stately/useRangeCalendarState.html) from React Stately.
+
+### Required components 
+
+This component can be used independently and does not require additional components. 
+
+### Accessibility
+
+#### Keyboard Navigation
+
+These keys provide additional functionality to the component.
+
+| Keys | Functions |
+| ---- | --------- |
+| Space or Enter | Selects the start and end dates when a date is focused, and navigates to the calendar pages when the navigational buttons are focused. |
+| Tab | Components in the calendar are focusable and follow the page tab sequence. |
+| Shift + Tab | Moves focus to the previous focusable component. |
+| Pressing Home:(Fn + Right Arrow Key) Or Control or Command + Home | Shifts the focus to the first calendar date of the currently focused month. |
+| Pressing End:(Fn + left Arrow Key) Or Control or Command + End | Shifts the focus to the last calendar date of the currently focused month. |
+| Arrow key | Navigates up, down, right, and left across the calendar. If at the end of the current calendar, the right arrow key navigates to the next calendar. If at the beginning of the current calendar, the left arrow key navigates to the previous calendar. |
+| Page up | Changes focus to the same date in the previous month. |
+| Page down | Changes focus to the same date in the next month. |
+| Shift + page up | Changes the grid of dates to the same months in the previous year. |
+| Shift+ page down | Changes the grid of dates to the same months in the next year. |
+
+#### Screen Readers
+
+This component uses the following attributes to assist screen readers:
+- The **`aria-label`** attribute is used to provide an accessible name.
+- In each data cell, the **`aria-selected`** attribute is set to “true” for all dates within the selected range, and **`aria-disabled`** is set to “false” by default.

package/lib/components/RangeCalendar/RangeCalendar.stories.js

@@ -0,0 +1,112 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _someInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/some";
+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; }
+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; }
+import React, { useState } from 'react';
+import { parseDate } from '@internationalized/date';
+import DocsLayout from '../../../.storybook/storybookDocsLayout';
+import { RangeCalendar } from '../../index';
+import { ariaAttributeBaseArgTypes } from '../../utils/docUtils/ariaAttributes';
+import RangeCalendarReadme from './RangeCalendar.mdx';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Experimental/RangeCalendar',
+  component: RangeCalendar,
+  parameters: {
+    actions: {
+      argTypesRegex: '^on.*'
+    },
+    source: {
+      type: 'code'
+    },
+    docs: {
+      page: function page() {
+        return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(RangeCalendarReadme, null), ___EmotionJSX(DocsLayout, null));
+      }
+    }
+  },
+  argTypes: _objectSpread({}, ariaAttributeBaseArgTypes),
+  args: {
+    defaultFocusedValue: '2030-01-15'
+  }
+};
+export var Default = function Default(args) {
+  return ___EmotionJSX(RangeCalendar, _extends({}, args, {
+    "aria-label": "range-calendar"
+  }));
+};
+export var DefaultValue = function DefaultValue() {
+  return ___EmotionJSX(RangeCalendar, {
+    "aria-label": "calendar-with-default-vaue",
+    defaultValue: {
+      start: '2030-01-15',
+      end: '2030-01-22'
+    }
+  });
+};
+export var Disabled = function Disabled(args) {
+  return ___EmotionJSX(RangeCalendar, _extends({}, args, {
+    "aria-label": "calendar--range-component-disabled",
+    isDisabled: true
+  }));
+};
+export var UnavailableDates = function UnavailableDates() {
+  var unavailableRanges = [['2030-07-28', '2030-08-03'], ['2030-08-11', '2030-08-17'], ['2030-08-25', '2030-08-31']];
+  var isDateUnavailable = function isDateUnavailable(date) {
+    return _someInstanceProperty(unavailableRanges).call(unavailableRanges, function (interval) {
+      return date.compare(parseDate(interval[0])) >= 0 && date.compare(parseDate(interval[1])) <= 0;
+    });
+  };
+  return ___EmotionJSX(RangeCalendar, {
+    "aria-label": "Trip dates",
+    defaultValue: {
+      start: '2030-08-07',
+      end: '2030-08-09'
+    },
+    isDateUnavailable: isDateUnavailable
+  });
+};
+export var MinimumDate = function MinimumDate() {
+  return ___EmotionJSX(RangeCalendar, {
+    "aria-label": "range-calendar-component-min-date",
+    minValue: "2030-01-15",
+    defaultValue: {
+      start: '2030-01-15',
+      end: '2030-01-20'
+    }
+  });
+};
+export var MaximumDate = function MaximumDate() {
+  return ___EmotionJSX(RangeCalendar, {
+    "aria-label": "range-calendar-component-max-date",
+    defaultValue: {
+      start: '2030-01-12',
+      end: '2030-01-15'
+    },
+    maxValue: "2030-01-17"
+  });
+};
+export var Controlled = function Controlled(args) {
+  var _useState = useState({
+      start: '2030-01-12',
+      end: '2030-01-15'
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    range = _useState2[0],
+    setRange = _useState2[1];
+  return ___EmotionJSX(RangeCalendar, _extends({}, args, {
+    "aria-label": "calendar-component-controlled",
+    value: range,
+    onChange: setRange
+  }));
+};

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

@@ -0,0 +1,110 @@
+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'
+};
+export default {
+  calendarBody: calendarBody,
+  calendarButton: calendarButton,
+  calendarCell: calendarCell,
+  calendarContainer: calendarContainer,
+  calendarHeader: calendarHeader,
+  calendarHeaderContainer: calendarHeaderContainer,
+  columnHeader: columnHeader
+};

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

@@ -0,0 +1,208 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import React from 'react';
+import { CalendarDate, getLocalTimeZone, today } from '@internationalized/date';
+import userEvent from '@testing-library/user-event';
+import { isDateWithinRanges } from '../../utils/devUtils/props/isDateWithinRanges';
+import { act, fireEvent, render, screen } from '../../utils/testUtils/testWrapper';
+import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
+import RangeCalendar, { parseDateIfString, parseDateRangeIfString } from './RangeCalendar';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var unavailableRanges = [['2022-08-10', '2022-08-15']];
+var defaultProps = {
+  defaultValue: {
+    start: new CalendarDate(2022, 8, 1),
+    end: new CalendarDate(2022, 8, 7)
+  }
+};
+var isDateUnavailable = function isDateUnavailable(date) {
+  return isDateWithinRanges(date, unavailableRanges);
+};
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(RangeCalendar, _extends({}, defaultProps, props, {
+    "aria-label": "Calendar Range"
+  })));
+};
+
+// Needs to be added to each components test file.
+universalComponentTests({
+  renderComponent: function renderComponent(props) {
+    return ___EmotionJSX(RangeCalendar, _extends({}, defaultProps, props, {
+      "aria-label": "Calendar Range"
+    }));
+  }
+});
+test('renders calendar range component', function () {
+  getComponent();
+  var calendarContainer = screen.getByRole('group');
+  expect(calendarContainer).toBeInTheDocument();
+  expect(calendarContainer).toHaveTextContent('Calendar Range, August to September 2022');
+  var buttons = screen.getAllByRole('button');
+  expect(buttons[0]).toHaveAttribute('aria-label', 'Previous month navigation');
+  expect(buttons[1]).toHaveAttribute('aria-label', 'Next month navigation');
+  var calendarGrids = screen.getAllByRole('grid');
+  expect(calendarGrids).toHaveLength(2);
+  var calendarHeaders = screen.getAllByRole('columnheader', {
+    hidden: true
+  });
+  expect(calendarHeaders).toHaveLength(14);
+  var calendarCells = screen.queryAllByRole('gridcell');
+  expect(calendarCells).toHaveLength(70);
+});
+test('should able to navigate to previous and next month', function () {
+  getComponent();
+  var buttons = screen.getAllByRole('button');
+  var heading = screen.getByRole('group');
+  expect(heading).toHaveTextContent('Calendar Range, August to September 2022');
+
+  // navigation to previous month
+  userEvent.click(buttons[0]);
+  expect(heading).toHaveTextContent('Calendar Range, July to August 2022');
+
+  // navigation to next month
+  userEvent.click(buttons[1]);
+  expect(heading).toHaveTextContent('Calendar Range, August to September 2022');
+
+  // navigation to next month
+  userEvent.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 = screen.queryAllByRole('gridcell');
+  var startCell = calendarCells[7];
+  var endCell = calendarCells[13];
+  userEvent.click(startCell);
+  userEvent.click(endCell);
+  var selectedCells = screen.getAllByRole('gridcell', {
+    selected: true
+  });
+  expect(selectedCells).toHaveLength(7);
+});
+test('should disable unavailable dates', function () {
+  getComponent({
+    isDateUnavailable: isDateUnavailable
+  });
+  var calendarCells = screen.queryAllByRole('gridcell');
+  var unavailableCells = _sliceInstanceProperty(calendarCells).call(calendarCells, 10, 16);
+  _forEachInstanceProperty(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 = screen.queryAllByRole('button');
+  act(function () {
+    buttons[4].focus();
+  });
+  expect(buttons[4]).toHaveFocus();
+  fireEvent.keyDown(buttons[4], {
+    key: 'ArrowRight'
+  });
+  expect(buttons[5]).toHaveFocus();
+  fireEvent.keyDown(buttons[5], {
+    key: 'ArrowLeft'
+  });
+  expect(buttons[4]).toHaveFocus();
+  fireEvent.keyDown(buttons[4], {
+    key: 'ArrowDown'
+  });
+  expect(buttons[11]).toHaveFocus();
+  fireEvent.keyDown(buttons[11], {
+    key: 'ArrowUp'
+  });
+  expect(buttons[4]).toHaveFocus();
+  fireEvent.keyDown(buttons[4], {
+    key: 'Enter'
+  });
+  fireEvent.keyUp(buttons[4], {
+    key: 'Enter'
+  });
+  expect(buttons[5]).toHaveFocus();
+});
+test('readonly calendar', function () {
+  getComponent({
+    isReadOnly: true
+  });
+  var calendars = screen.queryAllByRole('grid');
+  expect(calendars).toHaveLength(2);
+  _forEachInstanceProperty(calendars).call(calendars, function (calendar) {
+    expect(calendar).toHaveAttribute('aria-readonly', 'true');
+  });
+  var buttons = screen.queryAllByRole('button');
+  userEvent.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 = screen.queryAllByRole('button');
+  userEvent.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 CalendarDate(2022, 8, 10),
+    end: new CalendarDate(2022, 8, 15)
+  };
+  getComponent({
+    onChange: onChange,
+    maxValue: '2022-08-20',
+    defaultValue: defaultValue
+  });
+  var buttons = screen.queryAllByRole('button');
+  userEvent.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 = today(getLocalTimeZone());
+  var day = dateToday.day;
+  var focusedDay = _filterInstanceProperty(_context = 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 CalendarDate(2022, 8, 10),
+    end: new CalendarDate(2022, 8, 15)
+  };
+  var result1 = parseDateRangeIfString(value1);
+  var result2 = parseDateRangeIfString(value2);
+  expect(result1.start).toEqual(new CalendarDate(2022, 8, 1));
+  expect(result1.end).toEqual(new CalendarDate(2022, 8, 7));
+  expect(result2.start).toEqual(new CalendarDate(2022, 8, 10));
+  expect(result2.end).toEqual(new CalendarDate(2022, 8, 15));
+});
+test('parseDateIfString should correctly parse string or DateValue inputs', function () {
+  var value1 = '2022-08-01';
+  var value2 = new CalendarDate(2022, 8, 10);
+  var result1 = parseDateIfString(value1);
+  var result2 = parseDateIfString(value2);
+  expect(result1).toEqual(new CalendarDate(2022, 8, 1));
+  expect(result2).toEqual(new CalendarDate(2022, 8, 10));
+});

package/lib/components/RangeCalendar/RangeCalendarCell.js

@@ -0,0 +1,82 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["state", "date", "currentMonth", "className"];
+import React, { forwardRef } from 'react';
+import { isSameDay, isSameMonth } from '@internationalized/date';
+import { useCalendarCell } from '@react-aria/calendar';
+import { useFocusRing } from '@react-aria/focus';
+import { useHover, usePress } from '@react-aria/interactions';
+import { mergeProps } from '@react-aria/utils';
+import { useLocalOrForwardRef, useStatusClasses } from '../../hooks';
+import { Box, TableCell } from '../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var RangeCalendarCell = /*#__PURE__*/forwardRef(function (props, ref) {
+  var state = props.state,
+    date = props.date,
+    currentMonth = props.currentMonth,
+    className = props.className,
+    others = _objectWithoutProperties(props, _excluded);
+  var cellRef = useLocalOrForwardRef(ref);
+  var _useCalendarCell = 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 = !isSameMonth(currentMonth, date);
+
+  // The start and end date of the selected range will have
+  // an emphasized appearance.
+  var isSelectionStart = highlightedRange ? isSameDay(date, highlightedRange.start) : isSelected;
+  var isSelectionEnd = highlightedRange ? isSameDay(date, highlightedRange.end) : isSelected;
+  var _useHover = useHover({}),
+    hoverProps = _useHover.hoverProps,
+    isHovered = _useHover.isHovered;
+  var _usePress = usePress({
+      ref: cellRef
+    }),
+    pressProps = _usePress.pressProps,
+    isPressed = _usePress.isPressed;
+  var _useFocusRing = useFocusRing({
+      within: true
+    }),
+    focusWithinProps = _useFocusRing.focusProps,
+    isFocusVisible = _useFocusRing.isFocusVisible;
+  var mergedProps = mergeProps(cellProps, hoverProps, pressProps, focusWithinProps);
+  var _useStatusClasses = 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 ___EmotionJSX(TableCell, _extends({}, mergedProps, {
+    variant: "rangeCalendar.calendarCell"
+  }), ___EmotionJSX(Box, {
+    style: {
+      display: isOutsideMonth ? 'none' : 'flex'
+    }
+  }, ___EmotionJSX(Box, _extends({
+    variant: "rangeCalendar.calendarButton",
+    ref: cellRef
+  }, mergeProps(buttonProps, others), {
+    isSelected: isSelected,
+    isDisabled: isDisabled,
+    isUnavailable: isUnavailable,
+    className: classNames
+  }), formattedDate)));
+});
+export default RangeCalendarCell;

package/lib/components/RangeCalendar/RangeCalendarGrid.js

@@ -0,0 +1,61 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
+import _keysInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/keys";
+import React from 'react';
+import { endOfMonth, getWeeksInMonth } from '@internationalized/date';
+import { useCalendarGrid } from '@react-aria/calendar';
+import { useLocale } from '@react-aria/i18n';
+import { Table, TableBody, TableCell, TableHead, TableRow } from '../../index';
+import RangeCalendarCell from './RangeCalendarCell';
+import { jsx as ___EmotionJSX } from "@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 = useLocale(),
+    locale = _useLocale.locale;
+  var startDate = visibleRange.start.add(offset);
+  var endDate = endOfMonth(startDate);
+  var _useCalendarGrid = useCalendarGrid({
+      startDate: startDate,
+      endDate: endDate
+    }, state),
+    gridProps = _useCalendarGrid.gridProps,
+    headerProps = _useCalendarGrid.headerProps,
+    weekDays = _useCalendarGrid.weekDays;
+  var weeksInMonth = getWeeksInMonth(startDate, locale);
+  var getKey = function getKey(day, index) {
+    var _context;
+    return _concatInstanceProperty(_context = "".concat(day, "-")).call(_context, index);
+  };
+  return ___EmotionJSX(Table, _extends({}, gridProps, {
+    role: "grid"
+  }), ___EmotionJSX(TableHead, headerProps, ___EmotionJSX(TableRow, null, _mapInstanceProperty(weekDays).call(weekDays, function (day, index) {
+    return ___EmotionJSX(TableCell, {
+      isHeading: true,
+      variant: "rangeCalendar.columnHeader",
+      key: getKey(day, index),
+      role: "columnheader"
+    }, day);
+  }))), ___EmotionJSX(TableBody, {
+    variant: "rangeCalendar.calendarBody"
+  }, _mapInstanceProperty(_context2 = _Array$from(_keysInstanceProperty(_context3 = Array(weeksInMonth)).call(_context3))).call(_context2, function (weekIndex) {
+    var _context4;
+    return ___EmotionJSX(TableRow, {
+      key: weekIndex
+    }, _mapInstanceProperty(_context4 = getDatesInWeek(weekIndex, startDate)).call(_context4, function (date) {
+      return (date === null || date === void 0 ? void 0 : date.day) && ___EmotionJSX(RangeCalendarCell, {
+        key: date.toString(),
+        state: state,
+        date: date,
+        currentMonth: startDate
+      });
+    }));
+  })));
+};
+export default RangeCalendarGrid;