@instructure/ui-calendar 11.6.0 → 11.6.1-snapshot-129

package/es/Calendar/v2/Day/index.js

@@ -0,0 +1,148 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["children", "label", "interaction", "isOutsideMonth", "isSelected", "isToday", "onClick", "onKeyDown", "as", "styles"];
+var _dec, _class, _Day;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { Component } from 'react';
+import { View } from '@instructure/ui-view/latest';
+import { AccessibleContent } from '@instructure/ui-a11y-content';
+import { omitProps, callRenderProp, getElementType } from '@instructure/ui-react-utils';
+import { withStyle } from '@instructure/emotion';
+import generateStyle from "./styles.js";
+import { allowedProps } from "./props.js";
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+/**
+---
+parent: Calendar
+id: Calendar.Day
+---
+ **/
+let Day = (_dec = withStyle(generateStyle), _dec(_class = (_Day = class Day extends Component {
+  constructor(...args) {
+    super(...args);
+    this.ref = null;
+    this.handleClick = event => {
+      const _this$props = this.props,
+        onClick = _this$props.onClick,
+        date = _this$props.date;
+      if (typeof onClick === 'function') {
+        onClick(event, {
+          date
+        });
+      }
+    };
+    this.handleKeyDown = event => {
+      const _this$props2 = this.props,
+        onKeyDown = _this$props2.onKeyDown,
+        date = _this$props2.date;
+      if (typeof onKeyDown === 'function') {
+        onKeyDown(event, {
+          date
+        });
+      }
+    };
+    this.handleElementRef = el => {
+      const elementRef = this.props.elementRef;
+      this.ref = el;
+      if (typeof elementRef === 'function') {
+        elementRef(el);
+      }
+    };
+  }
+  componentDidMount() {
+    var _this$props$makeStyle, _this$props3;
+    (_this$props$makeStyle = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props3, this.makeStylesVariables);
+  }
+  componentDidUpdate() {
+    var _this$props$makeStyle2, _this$props4;
+    (_this$props$makeStyle2 = (_this$props4 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props4, this.makeStylesVariables);
+  }
+  get makeStylesVariables() {
+    return {
+      isDisabled: this.isDisabled
+    };
+  }
+  get isDisabled() {
+    const interaction = this.props.interaction;
+    return interaction === 'disabled';
+  }
+  get elementType() {
+    const as = this.props.as;
+    return as || getElementType(Day, this.props);
+  }
+  shouldApplyAriaSelected() {
+    const role = this.props.role;
+    return !!role && ['option', 'gridcell'].indexOf(role) > -1;
+  }
+  render() {
+    const _this$props5 = this.props,
+      children = _this$props5.children,
+      label = _this$props5.label,
+      interaction = _this$props5.interaction,
+      isOutsideMonth = _this$props5.isOutsideMonth,
+      isSelected = _this$props5.isSelected,
+      isToday = _this$props5.isToday,
+      onClick = _this$props5.onClick,
+      onKeyDown = _this$props5.onKeyDown,
+      as = _this$props5.as,
+      styles = _this$props5.styles,
+      props = _objectWithoutProperties(_this$props5, _excluded);
+    const elementType = this.elementType,
+      isDisabled = this.isDisabled;
+    const passthroughProps = View.omitViewProps(omitProps(props, Day.allowedProps), Day);
+    return _jsx(View, {
+      ...passthroughProps,
+      as: elementType,
+      css: styles === null || styles === void 0 ? void 0 : styles.calendarDay,
+      display: "inline-block",
+      margin: "xxx-small",
+      borderWidth: "none",
+      borderColor: "transparent",
+      background: "transparent",
+      cursor: elementType === 'button' || elementType === 'a' ? isDisabled ? 'not-allowed' : 'pointer' : 'auto',
+      disabled: isDisabled,
+      "aria-current": isToday ? 'date' : void 0,
+      "aria-selected": this.shouldApplyAriaSelected() ? isSelected ? 'true' : 'false' : void 0,
+      onClick: onClick && this.handleClick,
+      onKeyDown: onKeyDown && this.handleKeyDown,
+      elementRef: this.handleElementRef,
+      "data-cid": "Calendar.Day",
+      children: _jsx("span", {
+        css: styles === null || styles === void 0 ? void 0 : styles.day,
+        children: _jsx(AccessibleContent, {
+          alt: label,
+          children: callRenderProp(children)
+        })
+      })
+    });
+  }
+}, _Day.displayName = "Day", _Day.componentId = 'Calendar.Day', _Day.allowedProps = allowedProps, _Day.defaultProps = {
+  interaction: 'enabled',
+  isSelected: false,
+  isToday: false,
+  isOutsideMonth: false
+}, _Day)) || _class);
+export default Day;
+export { Day };

package/{src/index.ts → es/Calendar/v2/Day/props.js}

@@ -21,8 +21,6 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-export { Calendar } from './Calendar'
-export { Day as CalendarDay } from './Calendar/Day'
 
-export type { CalendarProps } from './Calendar/props'
-export type { CalendarDayProps } from './Calendar/Day/props'
+const allowedProps = ['children', 'date', 'label', 'interaction', 'isSelected', 'isToday', 'isOutsideMonth', 'onClick', 'onKeyDown', 'elementRef', 'as'];
+export { allowedProps };

package/es/Calendar/v2/Day/styles.js

@@ -0,0 +1,78 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param  {Object} componentTheme The theme variable object.
+ * @param  {Object} props the props of the component, the style is applied to
+ * @param  {Object} state the state of the component, the style is applied to
+ * @return {Object} The final style object, which will be used in the component
+ */
+const generateStyle = (componentTheme, props, _sharedTokens, state) => {
+  const isOutsideMonth = props.isOutsideMonth,
+    isSelected = props.isSelected,
+    isToday = props.isToday;
+  const isDisabled = state.isDisabled;
+  return {
+    calendarDay: {
+      label: 'calendarDay',
+      padding: 0
+    },
+    day: {
+      label: 'calendarDay__day',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      background: componentTheme.background,
+      color: componentTheme.color,
+      fontSize: componentTheme.fontSize,
+      textDecoration: 'none',
+      lineHeight: 1,
+      height: componentTheme.height,
+      minWidth: componentTheme.minWidth,
+      border: 'none',
+      margin: 0,
+      ...(isOutsideMonth && {
+        color: componentTheme.outsideMonthColor
+      }),
+      ...(isSelected && {
+        background: componentTheme.selectedBackground,
+        borderRadius: componentTheme.selectedBorderRadius,
+        color: componentTheme.selectedColor
+      }),
+      ...(isToday && !isSelected && {
+        background: componentTheme.todayBackground,
+        borderRadius: componentTheme.todayBorderRadius,
+        color: componentTheme.todayColor
+      }),
+      ...(isDisabled && {
+        opacity: 0.5
+      })
+    }
+  };
+};
+export default generateStyle;

package/es/Calendar/v2/index.js

@@ -0,0 +1,407 @@
+var _dec, _dec2, _class, _Calendar, _IconButton, _IconButton2;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { Children, Component } from 'react';
+import { View } from '@instructure/ui-view/latest';
+import { safeCloneElement, callRenderProp, omitProps, withDeterministicId } from '@instructure/ui-react-utils';
+import { createChainedFunction } from '@instructure/ui-utils';
+import { logError as error } from '@instructure/console';
+import { AccessibleContent } from '@instructure/ui-a11y-content';
+import { withStyle } from '@instructure/emotion';
+import { Locale, DateTime, ApplyLocaleContext } from '@instructure/ui-i18n';
+import generateStyle from "./styles.js";
+import { Day } from "./Day/index.js";
+import { allowedProps } from "./props.js";
+import { IconButton } from '@instructure/ui-buttons/latest';
+import { ChevronLeftInstUIIcon, ChevronRightInstUIIcon } from '@instructure/ui-icons';
+import { SimpleSelect } from '@instructure/ui-simple-select/latest';
+
+/**
+---
+category: components
+---
+**/
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+let Calendar = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle), _dec(_class = _dec2(_class = (_Calendar = class Calendar extends Component {
+  constructor(props) {
+    super(props);
+    this.ref = null;
+    this._weekdayHeaderIds = void 0;
+    this.handleRef = el => {
+      this.ref = el;
+    };
+    this.calculateState = (locale, timezone, currentDate) => {
+      const visibleMonth = this.props.visibleMonth || currentDate;
+      return {
+        visibleMonth: visibleMonth ? DateTime.parse(visibleMonth, locale, timezone) : DateTime.now(locale, timezone),
+        today: currentDate ? DateTime.parse(currentDate, locale, timezone) : DateTime.now(locale, timezone)
+      };
+    };
+    this.renderMonthNavigationButtons = () => {
+      const _this$props = this.props,
+        renderNextMonthButton = _this$props.renderNextMonthButton,
+        renderPrevMonthButton = _this$props.renderPrevMonthButton;
+      return {
+        prevButton: renderPrevMonthButton ? callRenderProp(renderPrevMonthButton) : _IconButton || (_IconButton = _jsx(IconButton, {
+          size: "small",
+          withBackground: false,
+          withBorder: false,
+          renderIcon: _jsx(ChevronLeftInstUIIcon, {
+            color: "baseColor"
+          }),
+          screenReaderLabel: "Previous month"
+        })),
+        nextButton: renderNextMonthButton ? callRenderProp(renderNextMonthButton) : _IconButton2 || (_IconButton2 = _jsx(IconButton, {
+          size: "small",
+          withBackground: false,
+          withBorder: false,
+          renderIcon: _jsx(ChevronRightInstUIIcon, {
+            color: "baseColor"
+          }),
+          screenReaderLabel: "Next month"
+        }))
+      };
+    };
+    this.handleMonthChange = direction => e => {
+      const _this$props2 = this.props,
+        onRequestRenderNextMonth = _this$props2.onRequestRenderNextMonth,
+        onRequestRenderPrevMonth = _this$props2.onRequestRenderPrevMonth;
+      const visibleMonth = this.state.visibleMonth;
+      const newDate = visibleMonth.clone();
+      if (direction === 'prev') {
+        if (!this.hasPrevMonth) {
+          return;
+        }
+        if (onRequestRenderPrevMonth) {
+          onRequestRenderPrevMonth(e, newDate.subtract({
+            months: 1
+          }).format('YYYY-MM'));
+          return;
+        }
+        newDate.subtract({
+          months: 1
+        });
+      } else {
+        if (!this.hasNextMonth) {
+          return;
+        }
+        if (onRequestRenderNextMonth) {
+          onRequestRenderNextMonth(e, newDate.add({
+            months: 1
+          }).format('YYYY-MM'));
+          return;
+        }
+        newDate.add({
+          months: 1
+        });
+      }
+      this.setState({
+        visibleMonth: newDate
+      });
+    };
+    this.handleYearChange = (e, year) => {
+      const withYearPicker = this.props.withYearPicker;
+      const visibleMonth = this.state.visibleMonth;
+      const yearNumber = Number(DateTime.parse(year, this.locale(), this.timezone()).locale('en').format('YYYY'));
+      const newDate = visibleMonth.clone();
+      if (withYearPicker !== null && withYearPicker !== void 0 && withYearPicker.onRequestYearChange) {
+        withYearPicker.onRequestYearChange(e, yearNumber);
+        return;
+      }
+      newDate.year(yearNumber);
+      this.setState({
+        visibleMonth: newDate
+      });
+    };
+    // date is returned as an ISO string, like 2021-09-14T22:00:00.000Z
+    this.handleDayClick = (event, {
+      date
+    }) => {
+      if (this.props.onDateSelected) {
+        const parsedDate = DateTime.parse(date, this.locale(), this.timezone());
+        this.props.onDateSelected(parsedDate.toISOString(), parsedDate, event);
+      }
+    };
+    this._weekdayHeaderIds = (this.props.renderWeekdayLabels || this.defaultWeekdays).reduce((ids, _label, i) => {
+      return {
+        ...ids,
+        [i]: this.props.deterministicId('weekday-header')
+      };
+    }, {});
+    this.state = this.calculateState(this.locale(), this.timezone(), props.currentDate);
+  }
+  componentDidMount() {
+    var _this$props$makeStyle, _this$props3;
+    (_this$props$makeStyle = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props3);
+  }
+  componentDidUpdate(prevProps) {
+    var _this$props$makeStyle2, _this$props4;
+    (_this$props$makeStyle2 = (_this$props4 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props4);
+    const isUpdated = prevProps.locale !== this.props.locale || prevProps.timezone !== this.props.timezone || prevProps.visibleMonth !== this.props.visibleMonth;
+    if (isUpdated) {
+      this.setState(() => {
+        return {
+          ...this.calculateState(this.locale(), this.timezone(), this.props.currentDate)
+        };
+      });
+    }
+  }
+  get role() {
+    return this.props.role === 'listbox' ? this.props.role : void 0;
+  }
+  get hasPrevMonth() {
+    // this is needed for locales that doesn't use the latin script for numbers e.g.: arabic
+    const yearNumber = Number(this.state.visibleMonth.clone().locale('en').subtract({
+      months: 1
+    }).format('YYYY'));
+    return !this.props.withYearPicker || this.props.withYearPicker && yearNumber >= this.props.withYearPicker.startYear;
+  }
+  get hasNextMonth() {
+    // this is needed for locales that doesn't use the latin script for numbers e.g.: arabic
+    const yearNumber = Number(this.state.visibleMonth.clone().locale('en').add({
+      months: 1
+    }).format('YYYY'));
+    return !this.props.withYearPicker || this.props.withYearPicker && yearNumber <= this.props.withYearPicker.endYear;
+  }
+  renderHeader() {
+    const _this$props5 = this.props,
+      renderNavigationLabel = _this$props5.renderNavigationLabel,
+      styles = _this$props5.styles,
+      withYearPicker = _this$props5.withYearPicker;
+    const visibleMonth = this.state.visibleMonth;
+    const _this$renderMonthNavi = this.renderMonthNavigationButtons(),
+      prevButton = _this$renderMonthNavi.prevButton,
+      nextButton = _this$renderMonthNavi.nextButton;
+    const cloneButton = (button, onClick) => safeCloneElement(button, {
+      onClick: createChainedFunction(button.props.onClick, onClick)
+    });
+    const style = [styles === null || styles === void 0 ? void 0 : styles.navigation, ...(prevButton || nextButton ? [styles === null || styles === void 0 ? void 0 : styles.navigationWithButtons] : [])];
+    const yearList = [];
+    if (withYearPicker) {
+      const startYear = withYearPicker.startYear,
+        endYear = withYearPicker.endYear;
+      for (let year = endYear; year >= startYear; year--) {
+        // add the years to the list with the correct locale
+        yearList.push(DateTime.parse(year.toString(), this.locale(), this.timezone()).format('YYYY'));
+      }
+    }
+    return _jsxs("div", {
+      children: [_jsxs("div", {
+        css: style,
+        children: [prevButton && cloneButton(prevButton, this.handleMonthChange('prev')), renderNavigationLabel ? callRenderProp(renderNavigationLabel) : _jsxs("span", {
+          children: [_jsx("div", {
+            children: visibleMonth.format('MMMM')
+          }), !withYearPicker ? _jsx("div", {
+            children: visibleMonth.format('YYYY')
+          }) : null]
+        }), nextButton && cloneButton(nextButton, this.handleMonthChange('next'))]
+      }), withYearPicker ? _jsx("div", {
+        css: styles === null || styles === void 0 ? void 0 : styles.yearPicker,
+        children: _jsx(SimpleSelect, {
+          width: "90px",
+          renderLabel: "",
+          placeholder: "--",
+          assistiveText: withYearPicker.screenReaderLabel,
+          value: visibleMonth.format('YYYY'),
+          onChange: (e, {
+            value
+          }) => this.handleYearChange(e, `${value}`),
+          children: yearList.map(year => _jsx(SimpleSelect.Option, {
+            id: `opt-${year}`,
+            value: year,
+            children: `${year}`
+          }, year))
+        })
+      }) : null]
+    });
+  }
+  renderBody() {
+    return _jsxs("table", {
+      role: this.role,
+      children: [_jsx("thead", {
+        children: this.renderWeekdayHeaders()
+      }), _jsx("tbody", {
+        children: this.renderDays()
+      })]
+    });
+  }
+  renderWeekdayHeaders() {
+    const styles = this.props.styles;
+    const renderWeekdayLabels = this.props.renderWeekdayLabels || this.defaultWeekdays;
+    const length = renderWeekdayLabels.length;
+    error(length === 7, `[Calendar] \`renderWeekdayLabels\` should be an array with 7 labels (one for each weekday). ${length} provided.`);
+    return _jsx("tr", {
+      children: renderWeekdayLabels.map((label, i) => {
+        return _jsx("th", {
+          scope: "col",
+          css: styles === null || styles === void 0 ? void 0 : styles.weekdayHeader,
+          id: this._weekdayHeaderIds[i],
+          children: callRenderProp(label)
+        }, i);
+      })
+    });
+  }
+  get defaultWeekdays() {
+    const shortDayNames = DateTime.getLocalDayNamesOfTheWeek(this.locale(), 'short');
+    const longDayNames = DateTime.getLocalDayNamesOfTheWeek(this.locale(), 'long');
+    return [_jsx(AccessibleContent, {
+      alt: longDayNames[0],
+      children: shortDayNames[0]
+    }, 1), _jsx(AccessibleContent, {
+      alt: longDayNames[1],
+      children: shortDayNames[1]
+    }, 2), _jsx(AccessibleContent, {
+      alt: longDayNames[2],
+      children: shortDayNames[2]
+    }, 3), _jsx(AccessibleContent, {
+      alt: longDayNames[3],
+      children: shortDayNames[3]
+    }, 4), _jsx(AccessibleContent, {
+      alt: longDayNames[4],
+      children: shortDayNames[4]
+    }, 5), _jsx(AccessibleContent, {
+      alt: longDayNames[5],
+      children: shortDayNames[5]
+    }, 6), _jsx(AccessibleContent, {
+      alt: longDayNames[6],
+      children: shortDayNames[6]
+    }, 7)];
+  }
+  renderDays() {
+    const children = this.props.children;
+    const childrenArr = Children.toArray(children ? children : this.renderDefaultdays());
+    const length = childrenArr.length;
+    const role = this.role === 'listbox' ? 'presentation' : void 0;
+    error(length === Calendar.DAY_COUNT, `[Calendar] should have exactly ${Calendar.DAY_COUNT} children. ${length} provided.`);
+    return childrenArr.reduce((days, day, i) => {
+      const index = Math.floor(i / 7);
+      if (!days[index]) days.push([]);
+      days[index].push(day);
+      return days; // 7xN 2D array of `Day`s
+    }, []).map(row => _jsx("tr", {
+      role: role,
+      children: row.map((day, i) => _jsx("td", {
+        role: role,
+        children: role === 'presentation' ? safeCloneElement(day, {
+          'aria-describedby': this._weekdayHeaderIds[i]
+        }) : day
+      }, day.props.date))
+    }, `row${row[0].props.date}`));
+  }
+  locale() {
+    if (this.props.locale) {
+      return this.props.locale;
+    } else if (this.context && this.context.locale) {
+      return this.context.locale;
+    }
+    return Locale.browserLocale();
+  }
+  timezone() {
+    if (this.props.timezone) {
+      return this.props.timezone;
+    } else if (this.context && this.context.timezone) {
+      return this.context.timezone;
+    }
+    return DateTime.browserTimeZone();
+  }
+  isDisabledDate(date) {
+    const disabledDates = this.props.disabledDates;
+    if (!disabledDates) {
+      return false;
+    }
+    if (Array.isArray(disabledDates)) {
+      for (const aDisabledDate of disabledDates) {
+        if (date.isSame(aDisabledDate, 'day')) {
+          return true;
+        }
+      }
+      return false;
+    }
+    return disabledDates(date.toISOString());
+  }
+  renderDefaultdays() {
+    const selectedDate = this.props.selectedDate;
+    const _this$state = this.state,
+      visibleMonth = _this$state.visibleMonth,
+      today = _this$state.today;
+    // Sets it to the first local day of the week counting back from the start of the month.
+    // Note that first day depends on the locale, e.g. it's Sunday in the US and
+    // Monday in most of the EU.
+    const currDate = DateTime.getFirstDayOfWeek(visibleMonth.clone().startOf('month'));
+    const arr = [];
+    for (let i = 0; i < Calendar.DAY_COUNT; i++) {
+      // This workaround is needed because moment's `.add({days: 1})` function has a bug that happens when the date added lands perfectly onto the DST cutoff,
+      // in these cases adding 1 day results in 23 hours added instead,
+      // so `moment.tz('2024-09-07T00:00:00', 'America/Santiago').add({days: 1})` results
+      // in "Sat Sep 07 2024 23:00:00 GMT-0400" instead of "Sun Sep 08 2024 00:00:00 GMT-0400".
+      // which would cause duplicate dates in the calendar.
+      // More info on the bug: https://github.com/moment/moment/issues/4743
+      // Please note that this causes one hour of time difference in the affected timezones/dates and to
+      // fully solve this bug we need to change to something like luxon which handles this properly
+      if (currDate.clone().format('HH') === '23') {
+        arr.push(currDate.clone().add({
+          hours: 1
+        }));
+      } else {
+        arr.push(currDate.clone());
+      }
+      currDate.add({
+        days: 1
+      });
+    }
+    return arr.map(date => {
+      const dateStr = date.toISOString();
+      return _jsx(Calendar.Day, {
+        date: dateStr,
+        isSelected: selectedDate ? date.isSame(selectedDate, 'day') : false,
+        isToday: date.isSame(today, 'day'),
+        isOutsideMonth: !date.isSame(visibleMonth, 'month'),
+        label: date.format('D MMMM YYYY') // used by screen readers
+        ,
+        onClick: this.handleDayClick,
+        interaction: this.isDisabledDate(date) ? 'disabled' : 'enabled',
+        children: date.format('DD')
+      }, dateStr);
+    });
+  }
+  render() {
+    const passthroughProps = View.omitViewProps(omitProps(this.props, Calendar.allowedProps), Calendar);
+    return _jsxs(View, {
+      ...passthroughProps,
+      as: this.props.as,
+      display: "inline-block",
+      padding: "small",
+      background: "primary",
+      elementRef: this.handleRef,
+      "data-cid": "Calendar",
+      children: [this.renderHeader(), this.renderBody()]
+    });
+  }
+}, _Calendar.displayName = "Calendar", _Calendar.componentId = 'Calendar', _Calendar.contextType = ApplyLocaleContext, _Calendar.Day = Day, _Calendar.DAY_COUNT = 42, _Calendar.allowedProps = allowedProps, _Calendar.defaultProps = {
+  as: 'span',
+  role: 'table'
+}, _Calendar)) || _class) || _class);
+export default Calendar;
+export { Calendar };

package/es/Calendar/v2/props.js

@@ -0,0 +1,26 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+const allowedProps = ['as', 'children', 'currentDate', 'disabledDates', 'locale', 'onDateSelected', 'onRequestRenderNextMonth', 'onRequestRenderPrevMonth', 'renderNavigationLabel', 'renderNextMonthButton', 'renderPrevMonthButton', 'renderWeekdayLabels', 'role', 'selectedDate', 'timezone', 'visibleMonth'];
+export { allowedProps };