@instructure/ui-calendar 11.0.1-snapshot-1 → 11.0.1-snapshot-2

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [11.0.1-snapshot-1](https://github.com/instructure/instructure-ui/compare/v11.0.0...v11.0.1-snapshot-1) (2025-10-08)
+## [11.0.1-snapshot-2](https://github.com/instructure/instructure-ui/compare/v11.0.0...v11.0.1-snapshot-2) (2025-10-10)
 
 **Note:** Version bump only for package @instructure/ui-calendar
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-calendar",
-  "version": "11.0.1-snapshot-1",
+  "version": "11.0.1-snapshot-2",
   "description": "A calendar component.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,9 +23,9 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "11.0.1-snapshot-1",
-    "@instructure/ui-color-utils": "11.0.1-snapshot-1",
-    "@instructure/ui-themes": "11.0.1-snapshot-1",
+    "@instructure/ui-babel-preset": "11.0.1-snapshot-2",
+    "@instructure/ui-color-utils": "11.0.1-snapshot-2",
+    "@instructure/ui-themes": "11.0.1-snapshot-2",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "@testing-library/user-event": "^14.6.1",
@@ -33,18 +33,18 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.27.6",
-    "@instructure/console": "11.0.1-snapshot-1",
-    "@instructure/emotion": "11.0.1-snapshot-1",
-    "@instructure/shared-types": "11.0.1-snapshot-1",
-    "@instructure/ui-a11y-content": "11.0.1-snapshot-1",
-    "@instructure/ui-buttons": "11.0.1-snapshot-1",
-    "@instructure/ui-i18n": "11.0.1-snapshot-1",
-    "@instructure/ui-icons": "11.0.1-snapshot-1",
-    "@instructure/ui-react-utils": "11.0.1-snapshot-1",
-    "@instructure/ui-simple-select": "11.0.1-snapshot-1",
-    "@instructure/ui-utils": "11.0.1-snapshot-1",
-    "@instructure/ui-view": "11.0.1-snapshot-1",
-    "@instructure/uid": "11.0.1-snapshot-1"
+    "@instructure/console": "11.0.1-snapshot-2",
+    "@instructure/emotion": "11.0.1-snapshot-2",
+    "@instructure/shared-types": "11.0.1-snapshot-2",
+    "@instructure/ui-a11y-content": "11.0.1-snapshot-2",
+    "@instructure/ui-buttons": "11.0.1-snapshot-2",
+    "@instructure/ui-i18n": "11.0.1-snapshot-2",
+    "@instructure/ui-icons": "11.0.1-snapshot-2",
+    "@instructure/ui-react-utils": "11.0.1-snapshot-2",
+    "@instructure/ui-simple-select": "11.0.1-snapshot-2",
+    "@instructure/ui-utils": "11.0.1-snapshot-2",
+    "@instructure/ui-view": "11.0.1-snapshot-2",
+    "@instructure/uid": "11.0.1-snapshot-2"
   },
   "peerDependencies": {
     "react": ">=18 <=19"

package/src/Calendar/README.md

@@ -19,35 +19,10 @@ type: example
 
 ### Default config with additional props
 
-- ```js
-  class Example extends React.Component {
-    state = {
-      selectedDate: '',
-      visibleMonth: '2025-05'
-    }
-
-    render = () => (
-      <Calendar
-        visibleMonth={this.state.visibleMonth}
-        currentDate="2023-12-15"
-        disabledDates={['2023-12-22', '2023-12-12', '2023-12-11']}
-        selectedDate={this.state.selectedDate}
-        onRequestRenderNextMonth={(_e, requestedMonth) =>
-          this.setState({ visibleMonth: requestedMonth })
-        }
-        onRequestRenderPrevMonth={(_e, requestedMonth) =>
-          this.setState({ visibleMonth: requestedMonth })
-        }
-        onDateSelected={(date) => {
-          this.setState({ selectedDate: date })
-        }}
-      />
-    )
-  }
-  render(<Example />)
-  ```
-
-- ```js
+```js
+---
+type: example
+---
   const Example = () => {
     const [selectedDate, setSelectedDate] = useState('')
     const [visibleMonth, setVisibleMonth] = useState('2025-05')
@@ -71,45 +46,14 @@ type: example
     )
   }
   render(<Example />)
-  ```
+```
 
 ### With year picker
 
-- ```js
-  class Example extends React.Component {
-    state = {
-      selectedDate: '',
-      visibleMonth: '2024-02'
-    }
-
-    render = () => (
-      <Calendar
-        visibleMonth={this.state.visibleMonth}
-        currentDate="2024-02-29"
-        disabledDates={['2023-12-22', '2023-12-12', '2023-12-11']}
-        selectedDate={this.state.selectedDate}
-        onRequestRenderNextMonth={(_e, requestedMonth) =>
-          this.setState({ visibleMonth: requestedMonth })
-        }
-        onRequestRenderPrevMonth={(_e, requestedMonth) =>
-          this.setState({ visibleMonth: requestedMonth })
-        }
-        onDateSelected={(date) => {
-          this.setState({ selectedDate: date })
-        }}
-        withYearPicker={{
-          screenReaderLabel: 'Year picker',
-          startYear: 1999,
-          endYear: 2024,
-          maxHeight: '200px'
-        }}
-      />
-    )
-  }
-  render(<Example />)
-  ```
-
-- ```js
+```js
+---
+type: example
+---
   const Example = () => {
     const [selectedDate, setSelectedDate] = useState('')
     const [visibleMonth, setVisibleMonth] = useState('2024-02')
@@ -139,7 +83,7 @@ type: example
     )
   }
   render(<Example />)
-  ```
+```
 
 ### Composing a Calendar in your Application
 
@@ -148,134 +92,10 @@ formats you use in your application. The following example demonstrates how a
 basic `Calendar` might be created using utilities from
 [Moment.js](https://momentjs.com/docs/#/parsing/).
 
-- ```js
-  class Example extends React.Component {
-    state = {
-      todayDate: parseDate('2019-08-16').toISOString(),
-      renderedDate: parseDate('2019-08-02').toISOString()
-    }
-
-    generateMonth = () => {
-      const date = parseDate(this.state.renderedDate)
-        .startOf('month')
-        .startOf('week')
-
-      return Array.apply(null, Array(Calendar.DAY_COUNT)).map(() => {
-        const currentDate = date.clone()
-        date.add({ days: 1 })
-
-        // 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 (currentDate.clone().format('HH') === '23') {
-          return currentDate.clone().add({ hours: 1 })
-        }
-
-        return currentDate.clone()
-      })
-    }
-
-    renderWeekdayLabels = () => {
-      const date = parseDate(this.state.renderedDate).startOf('week')
-
-      return Array.apply(null, Array(7)).map(() => {
-        const currentDate = date.clone()
-        date.add(1, 'day')
-
-        return (
-          <AccessibleContent alt={currentDate.format('dddd')}>
-            {currentDate.format('dd')}
-          </AccessibleContent>
-        )
-      })
-    }
-
-    handleRenderNextMonth = (event) => {
-      this.modifyRenderedMonth(1)
-    }
-
-    handleRenderPrevMonth = (event) => {
-      this.modifyRenderedMonth(-1)
-    }
-
-    modifyRenderedMonth = (step) => {
-      this.setState(({ renderedDate }) => {
-        const date = parseDate(renderedDate)
-        date.add(step, 'month')
-        return { renderedDate: date.toISOString() }
-      })
-    }
-
-    renderDay(date) {
-      const { renderedDate, todayDate } = this.state
-
-      return (
-        <Calendar.Day
-          key={date.toISOString()}
-          date={date.toISOString()}
-          isOutsideMonth={!date.isSame(renderedDate, 'month')}
-          isToday={date.isSame(todayDate, 'day')}
-          label={`${date.format('D')} ${date.format('MMMM')} ${date.format(
-            'YYYY'
-          )}`}
-        >
-          {date.format('D')}
-        </Calendar.Day>
-      )
-    }
-
-    render() {
-      const date = parseDate(this.state.renderedDate)
-
-      const buttonProps = (type = 'prev') => ({
-        size: 'small',
-        withBackground: false,
-        withBorder: false,
-        renderIcon:
-          type === 'prev' ? (
-            <IconArrowOpenStartSolid color="primary" />
-          ) : (
-            <IconArrowOpenEndSolid color="primary" />
-          ),
-        screenReaderLabel: type === 'prev' ? 'Previous month' : 'Next month'
-      })
-
-      return (
-        <Calendar
-          renderPrevMonthButton={<IconButton {...buttonProps('prev')} />}
-          renderNextMonthButton={<IconButton {...buttonProps('next')} />}
-          renderNavigationLabel={
-            <span>
-              <div>{date.format('MMMM')}</div>
-              <div>{date.format('YYYY')}</div>
-            </span>
-          }
-          renderWeekdayLabels={this.renderWeekdayLabels()}
-          onRequestRenderNextMonth={this.handleRenderNextMonth}
-          onRequestRenderPrevMonth={this.handleRenderPrevMonth}
-        >
-          {this.generateMonth().map((date) => this.renderDay(date))}
-        </Calendar>
-      )
-    }
-  }
-
-  const locale = 'en-us'
-  const timezone = 'America/Denver'
-
-  const parseDate = (dateStr) => {
-    return moment.tz(dateStr, [moment.ISO_8601], locale, timezone)
-  }
-
-  render(<Example />)
-  ```
-
-- ```js
+```js
+---
+type: example
+---
   const Example = () => {
     const [renderedDate, setRenderedDate] = useState(
       parseDate('2019-08-02').toISOString()
@@ -392,7 +212,7 @@ basic `Calendar` might be created using utilities from
   }
 
   render(<Example />)
-  ```
+```
 
 #### Some dates to keep track of