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

package/lib/Calendar/v2/index.js

@@ -0,0 +1,416 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Calendar = void 0;
+var _react = require("react");
+var _latest = require("@instructure/ui-view/latest");
+var _safeCloneElement = require("@instructure/ui-react-utils/lib/safeCloneElement.js");
+var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
+var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
+var _withDeterministicId = require("@instructure/ui-react-utils/lib/DeterministicIdContext/withDeterministicId.js");
+var _createChainedFunction = require("@instructure/ui-utils/lib/createChainedFunction.js");
+var _console = require("@instructure/console");
+var _AccessibleContent = require("@instructure/ui-a11y-content/lib/AccessibleContent");
+var _emotion = require("@instructure/emotion");
+var _Locale = require("@instructure/ui-i18n/lib/Locale.js");
+var _DateTime = require("@instructure/ui-i18n/lib/DateTime.js");
+var _ApplyLocaleContext = require("@instructure/ui-i18n/lib/ApplyLocale/ApplyLocaleContext.js");
+var _styles = _interopRequireDefault(require("./styles"));
+var _Day = require("./Day");
+var _props = require("./props");
+var _latest2 = require("@instructure/ui-buttons/latest");
+var _uiIcons = require("@instructure/ui-icons");
+var _latest3 = require("@instructure/ui-simple-select/latest");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+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.
+ */
+/**
+---
+category: components
+---
+**/
+let Calendar = exports.Calendar = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default), _dec(_class = _dec2(_class = (_Calendar = class Calendar extends _react.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.DateTime.parse(visibleMonth, locale, timezone) : _DateTime.DateTime.now(locale, timezone),
+        today: currentDate ? _DateTime.DateTime.parse(currentDate, locale, timezone) : _DateTime.DateTime.now(locale, timezone)
+      };
+    };
+    this.renderMonthNavigationButtons = () => {
+      const _this$props = this.props,
+        renderNextMonthButton = _this$props.renderNextMonthButton,
+        renderPrevMonthButton = _this$props.renderPrevMonthButton;
+      return {
+        prevButton: renderPrevMonthButton ? (0, _callRenderProp.callRenderProp)(renderPrevMonthButton) : _IconButton || (_IconButton = (0, _jsxRuntime.jsx)(_latest2.IconButton, {
+          size: "small",
+          withBackground: false,
+          withBorder: false,
+          renderIcon: (0, _jsxRuntime.jsx)(_uiIcons.ChevronLeftInstUIIcon, {
+            color: "baseColor"
+          }),
+          screenReaderLabel: "Previous month"
+        })),
+        nextButton: renderNextMonthButton ? (0, _callRenderProp.callRenderProp)(renderNextMonthButton) : _IconButton2 || (_IconButton2 = (0, _jsxRuntime.jsx)(_latest2.IconButton, {
+          size: "small",
+          withBackground: false,
+          withBorder: false,
+          renderIcon: (0, _jsxRuntime.jsx)(_uiIcons.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.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.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) => (0, _safeCloneElement.safeCloneElement)(button, {
+      onClick: (0, _createChainedFunction.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.DateTime.parse(year.toString(), this.locale(), this.timezone()).format('YYYY'));
+      }
+    }
+    return (0, _jsxRuntime.jsxs)("div", {
+      children: [(0, _jsxRuntime.jsxs)("div", {
+        css: style,
+        children: [prevButton && cloneButton(prevButton, this.handleMonthChange('prev')), renderNavigationLabel ? (0, _callRenderProp.callRenderProp)(renderNavigationLabel) : (0, _jsxRuntime.jsxs)("span", {
+          children: [(0, _jsxRuntime.jsx)("div", {
+            children: visibleMonth.format('MMMM')
+          }), !withYearPicker ? (0, _jsxRuntime.jsx)("div", {
+            children: visibleMonth.format('YYYY')
+          }) : null]
+        }), nextButton && cloneButton(nextButton, this.handleMonthChange('next'))]
+      }), withYearPicker ? (0, _jsxRuntime.jsx)("div", {
+        css: styles === null || styles === void 0 ? void 0 : styles.yearPicker,
+        children: (0, _jsxRuntime.jsx)(_latest3.SimpleSelect, {
+          width: "90px",
+          renderLabel: "",
+          placeholder: "--",
+          assistiveText: withYearPicker.screenReaderLabel,
+          value: visibleMonth.format('YYYY'),
+          onChange: (e, {
+            value
+          }) => this.handleYearChange(e, `${value}`),
+          children: yearList.map(year => (0, _jsxRuntime.jsx)(_latest3.SimpleSelect.Option, {
+            id: `opt-${year}`,
+            value: year,
+            children: `${year}`
+          }, year))
+        })
+      }) : null]
+    });
+  }
+  renderBody() {
+    return (0, _jsxRuntime.jsxs)("table", {
+      role: this.role,
+      children: [(0, _jsxRuntime.jsx)("thead", {
+        children: this.renderWeekdayHeaders()
+      }), (0, _jsxRuntime.jsx)("tbody", {
+        children: this.renderDays()
+      })]
+    });
+  }
+  renderWeekdayHeaders() {
+    const styles = this.props.styles;
+    const renderWeekdayLabels = this.props.renderWeekdayLabels || this.defaultWeekdays;
+    const length = renderWeekdayLabels.length;
+    (0, _console.logError)(length === 7, `[Calendar] \`renderWeekdayLabels\` should be an array with 7 labels (one for each weekday). ${length} provided.`);
+    return (0, _jsxRuntime.jsx)("tr", {
+      children: renderWeekdayLabels.map((label, i) => {
+        return (0, _jsxRuntime.jsx)("th", {
+          scope: "col",
+          css: styles === null || styles === void 0 ? void 0 : styles.weekdayHeader,
+          id: this._weekdayHeaderIds[i],
+          children: (0, _callRenderProp.callRenderProp)(label)
+        }, i);
+      })
+    });
+  }
+  get defaultWeekdays() {
+    const shortDayNames = _DateTime.DateTime.getLocalDayNamesOfTheWeek(this.locale(), 'short');
+    const longDayNames = _DateTime.DateTime.getLocalDayNamesOfTheWeek(this.locale(), 'long');
+    return [(0, _jsxRuntime.jsx)(_AccessibleContent.AccessibleContent, {
+      alt: longDayNames[0],
+      children: shortDayNames[0]
+    }, 1), (0, _jsxRuntime.jsx)(_AccessibleContent.AccessibleContent, {
+      alt: longDayNames[1],
+      children: shortDayNames[1]
+    }, 2), (0, _jsxRuntime.jsx)(_AccessibleContent.AccessibleContent, {
+      alt: longDayNames[2],
+      children: shortDayNames[2]
+    }, 3), (0, _jsxRuntime.jsx)(_AccessibleContent.AccessibleContent, {
+      alt: longDayNames[3],
+      children: shortDayNames[3]
+    }, 4), (0, _jsxRuntime.jsx)(_AccessibleContent.AccessibleContent, {
+      alt: longDayNames[4],
+      children: shortDayNames[4]
+    }, 5), (0, _jsxRuntime.jsx)(_AccessibleContent.AccessibleContent, {
+      alt: longDayNames[5],
+      children: shortDayNames[5]
+    }, 6), (0, _jsxRuntime.jsx)(_AccessibleContent.AccessibleContent, {
+      alt: longDayNames[6],
+      children: shortDayNames[6]
+    }, 7)];
+  }
+  renderDays() {
+    const children = this.props.children;
+    const childrenArr = _react.Children.toArray(children ? children : this.renderDefaultdays());
+    const length = childrenArr.length;
+    const role = this.role === 'listbox' ? 'presentation' : void 0;
+    (0, _console.logError)(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 => (0, _jsxRuntime.jsx)("tr", {
+      role: role,
+      children: row.map((day, i) => (0, _jsxRuntime.jsx)("td", {
+        role: role,
+        children: role === 'presentation' ? (0, _safeCloneElement.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.Locale.browserLocale();
+  }
+  timezone() {
+    if (this.props.timezone) {
+      return this.props.timezone;
+    } else if (this.context && this.context.timezone) {
+      return this.context.timezone;
+    }
+    return _DateTime.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.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 (0, _jsxRuntime.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 = _latest.View.omitViewProps((0, _omitProps.omitProps)(this.props, Calendar.allowedProps), Calendar);
+    return (0, _jsxRuntime.jsxs)(_latest.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.ApplyLocaleContext, _Calendar.Day = _Day.Day, _Calendar.DAY_COUNT = 42, _Calendar.allowedProps = _props.allowedProps, _Calendar.defaultProps = {
+  as: 'span',
+  role: 'table'
+}, _Calendar)) || _class) || _class);
+var _default = exports.default = Calendar;

package/lib/Calendar/v2/props.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.allowedProps = void 0;
+/*
+ * 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 = exports.allowedProps = ['as', 'children', 'currentDate', 'disabledDates', 'locale', 'onDateSelected', 'onRequestRenderNextMonth', 'onRequestRenderPrevMonth', 'renderNavigationLabel', 'renderNextMonthButton', 'renderPrevMonthButton', 'renderWeekdayLabels', 'role', 'selectedDate', 'timezone', 'visibleMonth'];

package/lib/Calendar/v2/styles.js

@@ -0,0 +1,72 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+/*
+ * 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.
+ * @return {Object} The final style object, which will be used in the component
+ */
+const generateStyle = (componentTheme, props) => {
+  const withYearPicker = props.withYearPicker;
+  return {
+    navigation: {
+      label: 'calendar__navigation',
+      textAlign: 'center',
+      color: componentTheme.color,
+      background: componentTheme.background,
+      fontFamily: componentTheme.fontFamily,
+      fontSize: componentTheme.fontSize,
+      fontWeight: componentTheme.fontWeight,
+      marginBottom: withYearPicker ? componentTheme.navWithYearMargin : componentTheme.navMargin
+    },
+    navigationWithButtons: {
+      label: 'calendar__navigation--withButtons',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'space-between'
+    },
+    weekdayHeader: {
+      label: 'calendar__weekdayHeader',
+      textAlign: 'center',
+      maxWidth: componentTheme.maxHeaderWidth,
+      lineHeight: componentTheme.lineHeight
+    },
+    yearPicker: {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      marginBottom: componentTheme.yearPickerMargin
+    }
+  };
+};
+var _default = exports.default = generateStyle;

package/lib/{index.js → exports/a.js}

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "Calendar", {
   enumerable: true,
   get: function () {
-    return _Calendar.Calendar;
+    return _v.Calendar;
   }
 });
 Object.defineProperty(exports, "CalendarDay", {
@@ -15,5 +15,5 @@ Object.defineProperty(exports, "CalendarDay", {
     return _Day.Day;
   }
 });
-var _Calendar = require("./Calendar");
-var _Day = require("./Calendar/Day");
+var _v = require("../Calendar/v1");
+var _Day = require("../Calendar/v1/Day");

package/lib/exports/b.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Calendar", {
+  enumerable: true,
+  get: function () {
+    return _v.Calendar;
+  }
+});
+Object.defineProperty(exports, "CalendarDay", {
+  enumerable: true,
+  get: function () {
+    return _Day.Day;
+  }
+});
+var _v = require("../Calendar/v2");
+var _Day = require("../Calendar/v2/Day");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-calendar",
-  "version": "11.6.0",
+  "version": "11.6.1-snapshot-129",
   "description": "A calendar component.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -15,27 +15,27 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.27.6",
-    "@instructure/console": "11.6.0",
-    "@instructure/emotion": "11.6.0",
-    "@instructure/ui-a11y-content": "11.6.0",
-    "@instructure/shared-types": "11.6.0",
-    "@instructure/ui-buttons": "11.6.0",
-    "@instructure/ui-icons": "11.6.0",
-    "@instructure/ui-i18n": "11.6.0",
-    "@instructure/ui-react-utils": "11.6.0",
-    "@instructure/ui-simple-select": "11.6.0",
-    "@instructure/ui-utils": "11.6.0",
-    "@instructure/ui-view": "11.6.0",
-    "@instructure/uid": "11.6.0"
+    "@instructure/console": "11.6.1-snapshot-129",
+    "@instructure/emotion": "11.6.1-snapshot-129",
+    "@instructure/shared-types": "11.6.1-snapshot-129",
+    "@instructure/ui-a11y-content": "11.6.1-snapshot-129",
+    "@instructure/ui-buttons": "11.6.1-snapshot-129",
+    "@instructure/ui-icons": "11.6.1-snapshot-129",
+    "@instructure/ui-react-utils": "11.6.1-snapshot-129",
+    "@instructure/ui-simple-select": "11.6.1-snapshot-129",
+    "@instructure/ui-i18n": "11.6.1-snapshot-129",
+    "@instructure/ui-utils": "11.6.1-snapshot-129",
+    "@instructure/ui-view": "11.6.1-snapshot-129",
+    "@instructure/uid": "11.6.1-snapshot-129"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "@testing-library/user-event": "^14.6.1",
     "vitest": "^3.2.2",
-    "@instructure/ui-babel-preset": "11.6.0",
-    "@instructure/ui-themes": "11.6.0",
-    "@instructure/ui-color-utils": "11.6.0"
+    "@instructure/ui-color-utils": "11.6.1-snapshot-129",
+    "@instructure/ui-babel-preset": "11.6.1-snapshot-129",
+    "@instructure/ui-themes": "11.6.1-snapshot-129"
   },
   "peerDependencies": {
     "react": ">=18 <=19"
@@ -45,17 +45,39 @@
   },
   "sideEffects": false,
   "exports": {
-    ".": {
-      "types": "./types/index.d.ts",
-      "import": "./es/index.js",
-      "require": "./lib/index.js",
-      "default": "./es/index.js"
-    },
     "./lib/*": "./lib/*",
     "./es/*": "./es/*",
     "./types/*": "./types/*",
     "./package.json": "./package.json",
-    "./src/*": "./src/*"
+    "./src/*": "./src/*",
+    ".": {
+      "src": "./src/exports/a.ts",
+      "types": "./types/exports/a.d.ts",
+      "import": "./es/exports/a.js",
+      "require": "./lib/exports/a.js",
+      "default": "./es/exports/a.js"
+    },
+    "./v11_6": {
+      "src": "./src/exports/a.ts",
+      "types": "./types/exports/a.d.ts",
+      "import": "./es/exports/a.js",
+      "require": "./lib/exports/a.js",
+      "default": "./es/exports/a.js"
+    },
+    "./v11_7": {
+      "src": "./src/exports/b.ts",
+      "types": "./types/exports/b.d.ts",
+      "import": "./es/exports/b.js",
+      "require": "./lib/exports/b.js",
+      "default": "./es/exports/b.js"
+    },
+    "./latest": {
+      "src": "./src/exports/b.ts",
+      "types": "./types/exports/b.d.ts",
+      "import": "./es/exports/b.js",
+      "require": "./lib/exports/b.js",
+      "default": "./es/exports/b.js"
+    }
   },
   "scripts": {
     "lint": "ui-scripts lint",

package/src/Calendar/{Day → v1/Day}/index.tsx

@@ -24,8 +24,8 @@
 
 import { Component, MouseEvent, KeyboardEvent } from 'react'
 
-import { View } from '@instructure/ui-view'
-import type { ViewProps } from '@instructure/ui-view'
+import { View } from '@instructure/ui-view/v11_6'
+import type { ViewProps } from '@instructure/ui-view/v11_6'
 import { AccessibleContent } from '@instructure/ui-a11y-content'
 import {
   omitProps,
@@ -33,7 +33,7 @@ import {
   getElementType
 } from '@instructure/ui-react-utils'
 
-import { withStyle } from '@instructure/emotion'
+import { withStyleLegacy as withStyle } from '@instructure/emotion'
 
 import generateStyle from './styles'
 import generateComponentTheme from './theme'