@instructure/ui-calendar 11.7.3-snapshot-7 → 11.7.3-snapshot-26

package/CHANGELOG.md

@@ -3,9 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [11.7.3-snapshot-7](https://github.com/instructure/instructure-ui/compare/v11.7.2...v11.7.3-snapshot-7) (2026-04-29)
+## [11.7.3-snapshot-26](https://github.com/instructure/instructure-ui/compare/v11.7.2...v11.7.3-snapshot-26) (2026-05-05)
 
-**Note:** Version bump only for package @instructure/ui-calendar
+
+### Bug Fixes
+
+* **many:** update dependencies, remove lots of Babel plugins, remove Webpack 4 support ([f916fca](https://github.com/instructure/instructure-ui/commit/f916fcafdddcb2d7de401f93e8ff92cfdfa47bba))
 
 
 

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

@@ -1,6 +1,4 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["children", "label", "interaction", "isOutsideMonth", "isSelected", "isToday", "onClick", "onKeyDown", "as", "styles"];
-var _dec, _class, _Day;
+var _dec, _class;
 /*
  * The MIT License (MIT)
  *
@@ -40,45 +38,22 @@ parent: Calendar
 id: Calendar.Day
 ---
  **/
-let Day = (_dec = withStyle(generateStyle, generateComponentTheme), _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);
-      }
-    };
-  }
+let Day = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = class Day extends Component {
+  static displayName = "Day";
+  static componentId = 'Calendar.Day';
+  static allowedProps = allowedProps;
+  static defaultProps = {
+    interaction: 'enabled',
+    isSelected: false,
+    isToday: false,
+    isOutsideMonth: false
+  };
+  ref = null;
   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);
+    this.props.makeStyles?.(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);
+    this.props.makeStyles?.(this.makeStylesVariables);
   }
   get makeStylesVariables() {
     return {
@@ -86,37 +61,77 @@ let Day = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
     };
   }
   get isDisabled() {
-    const interaction = this.props.interaction;
+    const {
+      interaction
+    } = this.props;
     return interaction === 'disabled';
   }
   get elementType() {
-    const as = this.props.as;
+    const {
+      as
+    } = this.props;
     return as || getElementType(Day, this.props);
   }
   shouldApplyAriaSelected() {
-    const role = this.props.role;
+    const {
+      role
+    } = this.props;
     return !!role && ['option', 'gridcell'].indexOf(role) > -1;
   }
+  handleClick = event => {
+    const {
+      onClick,
+      date
+    } = this.props;
+    if (typeof onClick === 'function') {
+      onClick(event, {
+        date
+      });
+    }
+  };
+  handleKeyDown = event => {
+    const {
+      onKeyDown,
+      date
+    } = this.props;
+    if (typeof onKeyDown === 'function') {
+      onKeyDown(event, {
+        date
+      });
+    }
+  };
+  handleElementRef = el => {
+    const {
+      elementRef
+    } = this.props;
+    this.ref = el;
+    if (typeof elementRef === 'function') {
+      elementRef(el);
+    }
+  };
   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 {
+      children,
+      label,
+      interaction,
+      isOutsideMonth,
+      isSelected,
+      isToday,
+      onClick,
+      onKeyDown,
+      as,
+      styles,
+      ...props
+    } = this.props;
+    const {
+      elementType,
+      isDisabled
+    } = this;
     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,
+      css: styles?.calendarDay,
       display: "inline-block",
       margin: "xxx-small",
       borderWidth: "none",
@@ -124,14 +139,14 @@ let Day = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
       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,
+      "aria-current": isToday ? 'date' : undefined,
+      "aria-selected": this.shouldApplyAriaSelected() ? isSelected ? 'true' : 'false' : undefined,
       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,
+        css: styles?.day,
         children: _jsx(AccessibleContent, {
           alt: label,
           children: callRenderProp(children)
@@ -139,11 +154,6 @@ let Day = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
       })
     });
   }
-}, _Day.displayName = "Day", _Day.componentId = 'Calendar.Day', _Day.allowedProps = allowedProps, _Day.defaultProps = {
-  interaction: 'enabled',
-  isSelected: false,
-  isToday: false,
-  isOutsideMonth: false
-}, _Day)) || _class);
+}) || _class);
 export default Day;
 export { Day };

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

@@ -33,10 +33,14 @@
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (componentTheme, props, state) => {
-  const isOutsideMonth = props.isOutsideMonth,
-    isSelected = props.isSelected,
-    isToday = props.isToday;
-  const isDisabled = state.isDisabled;
+  const {
+    isOutsideMonth,
+    isSelected,
+    isToday
+  } = props;
+  const {
+    isDisabled
+  } = state;
   return {
     calendarDay: {
       label: 'calendarDay',

package/es/Calendar/v1/Day/theme.js

@@ -28,13 +28,14 @@
  * @return {Object} The final theme object with the overrides and component variables
  */
 const generateComponentTheme = theme => {
-  var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$contrasts4, _colors$contrasts5, _colors$contrasts6, _colors$contrasts7;
-  const borders = theme.borders,
-    colors = theme.colors,
-    typography = theme.typography,
-    spacing = theme.spacing,
-    forms = theme.forms,
-    themeName = theme.key;
+  const {
+    borders,
+    colors,
+    typography,
+    spacing,
+    forms,
+    key: themeName
+  } = theme;
   const themeSpecificStyle = {
     canvas: {
       color: theme['ic-brand-font-color-dark'],
@@ -42,19 +43,19 @@ const generateComponentTheme = theme => {
     }
   };
   const componentVariables = {
-    color: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.grey125125,
-    background: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.white1010,
-    fontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
-    padding: spacing === null || spacing === void 0 ? void 0 : spacing.xxSmall,
-    height: forms === null || forms === void 0 ? void 0 : forms.inputHeightSmall,
-    minWidth: forms === null || forms === void 0 ? void 0 : forms.inputHeightSmall,
-    outsideMonthColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.grey4570,
-    selectedBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.green4570,
-    selectedColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.white1010,
-    selectedBorderRadius: borders === null || borders === void 0 ? void 0 : borders.radiusMedium,
-    todayBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts6 = colors.contrasts) === null || _colors$contrasts6 === void 0 ? void 0 : _colors$contrasts6.blue4570,
-    todayColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts7 = colors.contrasts) === null || _colors$contrasts7 === void 0 ? void 0 : _colors$contrasts7.white1010,
-    todayBorderRadius: forms === null || forms === void 0 ? void 0 : forms.inputHeightSmall
+    color: colors?.contrasts?.grey125125,
+    background: colors?.contrasts?.white1010,
+    fontSize: typography?.fontSizeMedium,
+    padding: spacing?.xxSmall,
+    height: forms?.inputHeightSmall,
+    minWidth: forms?.inputHeightSmall,
+    outsideMonthColor: colors?.contrasts?.grey4570,
+    selectedBackground: colors?.contrasts?.green4570,
+    selectedColor: colors?.contrasts?.white1010,
+    selectedBorderRadius: borders?.radiusMedium,
+    todayBackground: colors?.contrasts?.blue4570,
+    todayColor: colors?.contrasts?.white1010,
+    todayBorderRadius: forms?.inputHeightSmall
   };
   return {
     ...componentVariables,

package/es/Calendar/v1/index.js

@@ -1,4 +1,4 @@
-var _dec, _dec2, _class, _Calendar, _IconButton, _IconButton2;
+var _dec, _dec2, _class;
 /*
  * The MIT License (MIT)
  *
@@ -45,106 +45,22 @@ category: components
 ---
 **/
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-let Calendar = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, generateComponentTheme), _dec(_class = _dec2(_class = (_Calendar = class Calendar extends Component {
+let Calendar = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, generateComponentTheme), _dec(_class = _dec2(_class = class Calendar extends Component {
+  static displayName = "Calendar";
+  static componentId = 'Calendar';
+  static contextType = ApplyLocaleContext;
+  static Day = Day;
+  static DAY_COUNT = 42; // 6 weeks visible
+
+  static allowedProps = allowedProps;
+  static defaultProps = {
+    as: 'span',
+    role: 'table'
+  };
+  ref = null;
+  _weekdayHeaderIds;
   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(IconArrowOpenStartSolid, {
-            color: "primary"
-          }),
-          screenReaderLabel: "Previous month"
-        })),
-        nextButton: renderNextMonthButton ? callRenderProp(renderNextMonthButton) : _IconButton2 || (_IconButton2 = _jsx(IconButton, {
-          size: "small",
-          withBackground: false,
-          withBorder: false,
-          renderIcon: _jsx(IconArrowOpenEndSolid, {
-            color: "primary"
-          }),
-          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,
@@ -153,13 +69,14 @@ let Calendar = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
     }, {});
     this.state = this.calculateState(this.locale(), this.timezone(), props.currentDate);
   }
+  handleRef = el => {
+    this.ref = 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.props.makeStyles?.();
   }
   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);
+    this.props.makeStyles?.();
     const isUpdated = prevProps.locale !== this.props.locale || prevProps.timezone !== this.props.timezone || prevProps.visibleMonth !== this.props.visibleMonth;
     if (isUpdated) {
       this.setState(() => {
@@ -169,8 +86,15 @@ let Calendar = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
       });
     }
   }
+  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)
+    };
+  };
   get role() {
-    return this.props.role === 'listbox' ? this.props.role : void 0;
+    return this.props.role === 'listbox' ? this.props.role : undefined;
   }
   get hasPrevMonth() {
     // this is needed for locales that doesn't use the latin script for numbers e.g.: arabic
@@ -186,23 +110,113 @@ let Calendar = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
     }).format('YYYY'));
     return !this.props.withYearPicker || this.props.withYearPicker && yearNumber <= this.props.withYearPicker.endYear;
   }
+  renderMonthNavigationButtons = () => {
+    const {
+      renderNextMonthButton,
+      renderPrevMonthButton
+    } = this.props;
+    return {
+      prevButton: renderPrevMonthButton ? callRenderProp(renderPrevMonthButton) : _jsx(IconButton, {
+        size: "small",
+        withBackground: false,
+        withBorder: false,
+        renderIcon: _jsx(IconArrowOpenStartSolid, {
+          color: "primary"
+        }),
+        screenReaderLabel: "Previous month"
+      }),
+      nextButton: renderNextMonthButton ? callRenderProp(renderNextMonthButton) : _jsx(IconButton, {
+        size: "small",
+        withBackground: false,
+        withBorder: false,
+        renderIcon: _jsx(IconArrowOpenEndSolid, {
+          color: "primary"
+        }),
+        screenReaderLabel: "Next month"
+      })
+    };
+  };
+  handleMonthChange = direction => e => {
+    const {
+      onRequestRenderNextMonth,
+      onRequestRenderPrevMonth
+    } = this.props;
+    const {
+      visibleMonth
+    } = this.state;
+    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
+    });
+  };
+  handleYearChange = (e, year) => {
+    const {
+      withYearPicker
+    } = this.props;
+    const {
+      visibleMonth
+    } = this.state;
+    const yearNumber = Number(DateTime.parse(year, this.locale(), this.timezone()).locale('en').format('YYYY'));
+    const newDate = visibleMonth.clone();
+    if (withYearPicker?.onRequestYearChange) {
+      withYearPicker.onRequestYearChange(e, yearNumber);
+      return;
+    }
+    newDate.year(yearNumber);
+    this.setState({
+      visibleMonth: newDate
+    });
+  };
   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 {
+      renderNavigationLabel,
+      styles,
+      withYearPicker
+    } = this.props;
+    const {
+      visibleMonth
+    } = this.state;
+    const {
+      prevButton,
+      nextButton
+    } = this.renderMonthNavigationButtons();
     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 style = [styles?.navigation, ...(prevButton || nextButton ? [styles?.navigationWithButtons] : [])];
     const yearList = [];
     if (withYearPicker) {
-      const startYear = withYearPicker.startYear,
-        endYear = withYearPicker.endYear;
+      const {
+        startYear,
+        endYear
+      } = withYearPicker;
       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'));
@@ -219,7 +233,7 @@ let Calendar = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
           }) : null]
         }), nextButton && cloneButton(nextButton, this.handleMonthChange('next'))]
       }), withYearPicker ? _jsx("div", {
-        css: styles === null || styles === void 0 ? void 0 : styles.yearPicker,
+        css: styles?.yearPicker,
         children: _jsx(SimpleSelect, {
           width: "90px",
           renderLabel: "",
@@ -249,15 +263,19 @@ let Calendar = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
     });
   }
   renderWeekdayHeaders() {
-    const styles = this.props.styles;
+    const {
+      styles
+    } = this.props;
     const renderWeekdayLabels = this.props.renderWeekdayLabels || this.defaultWeekdays;
-    const length = renderWeekdayLabels.length;
+    const {
+      length
+    } = renderWeekdayLabels;
     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,
+          css: styles?.weekdayHeader,
           id: this._weekdayHeaderIds[i],
           children: callRenderProp(label)
         }, i);
@@ -291,10 +309,14 @@ let Calendar = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
     }, 7)];
   }
   renderDays() {
-    const children = this.props.children;
+    const {
+      children
+    } = this.props;
     const childrenArr = Children.toArray(children ? children : this.renderDefaultdays());
-    const length = childrenArr.length;
-    const role = this.role === 'listbox' ? 'presentation' : void 0;
+    const {
+      length
+    } = childrenArr;
+    const role = this.role === 'listbox' ? 'presentation' : undefined;
     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);
@@ -327,6 +349,16 @@ let Calendar = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
     }
     return DateTime.browserTimeZone();
   }
+
+  // date is returned as an ISO string, like 2021-09-14T22:00:00.000Z
+  handleDayClick = (event, {
+    date
+  }) => {
+    if (this.props.onDateSelected) {
+      const parsedDate = DateTime.parse(date, this.locale(), this.timezone());
+      this.props.onDateSelected(parsedDate.toISOString(), parsedDate, event);
+    }
+  };
   isDisabledDate(date) {
     const disabledDates = this.props.disabledDates;
     if (!disabledDates) {
@@ -343,10 +375,13 @@ let Calendar = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
     return disabledDates(date.toISOString());
   }
   renderDefaultdays() {
-    const selectedDate = this.props.selectedDate;
-    const _this$state = this.state,
-      visibleMonth = _this$state.visibleMonth,
-      today = _this$state.today;
+    const {
+      selectedDate
+    } = this.props;
+    const {
+      visibleMonth,
+      today
+    } = this.state;
     // 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.
@@ -400,9 +435,6 @@ let Calendar = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
       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);
+}) || _class) || _class);
 export default Calendar;
 export { Calendar };

package/es/Calendar/v1/styles.js

@@ -31,7 +31,9 @@
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (componentTheme, props) => {
-  const withYearPicker = props.withYearPicker;
+  const {
+    withYearPicker
+  } = props;
   return {
     navigation: {
       label: 'calendar__navigation',