@instructure/ui-calendar 10.2.3-snapshot-10 → 10.2.3-snapshot-13

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.
 
-## [10.2.3-snapshot-10](https://github.com/instructure/instructure-ui/compare/v10.2.2...v10.2.3-snapshot-10) (2024-10-01)
+## [10.2.3-snapshot-13](https://github.com/instructure/instructure-ui/compare/v10.2.2...v10.2.3-snapshot-13) (2024-10-02)
 
-**Note:** Version bump only for package @instructure/ui-calendar
+
+### Features
+
+* **ui-calendar,ui-date-input:** update DateInput2 api, add placeholder hint ([ee9dfab](https://github.com/instructure/instructure-ui/commit/ee9dfab8cb5cff76d829bd24163d2052a7da46a9))
 
 
 

package/es/Calendar/index.js

@@ -132,17 +132,18 @@ let Calendar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
     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, year);
+        withYearPicker.onRequestYearChange(e, yearNumber);
         return;
       }
-      newDate.year(year);
+      newDate.year(yearNumber);
       this.setState({
         visibleMonth: newDate
       });
     };
-    // date is returned es a ISO string, like 2021-09-14T22:00:00.000Z
+    // date is returned as an ISO string, like 2021-09-14T22:00:00.000Z
     this.handleDayClick = (event, {
       date
     }) => {
@@ -173,14 +174,18 @@ let Calendar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
     return this.props.role === 'listbox' ? this.props.role : void 0;
   }
   get hasPrevMonth() {
-    return !this.props.withYearPicker || this.props.withYearPicker && Number(this.state.visibleMonth.clone().subtract({
+    // 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')) >= this.props.withYearPicker.startYear;
+    }).format('YYYY'));
+    return !this.props.withYearPicker || this.props.withYearPicker && yearNumber >= this.props.withYearPicker.startYear;
   }
   get hasNextMonth() {
-    return !this.props.withYearPicker || this.props.withYearPicker && Number(this.state.visibleMonth.clone().add({
+    // 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')) <= this.props.withYearPicker.endYear;
+    }).format('YYYY'));
+    return !this.props.withYearPicker || this.props.withYearPicker && yearNumber <= this.props.withYearPicker.endYear;
   }
   renderHeader() {
     const _this$props5 = this.props,
@@ -200,7 +205,8 @@ let Calendar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
       const startYear = withYearPicker.startYear,
         endYear = withYearPicker.endYear;
       for (let year = endYear; year >= startYear; year--) {
-        yearList.push(year);
+        // add the years to the list with the correct locale
+        yearList.push(DateTime.parse(year.toString(), this.locale(), this.timezone()).format('YYYY'));
       }
     }
     return jsx("div", null, jsx("div", {
@@ -210,11 +216,12 @@ let Calendar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
     }, jsx(SimpleSelect, {
       width: "90px",
       renderLabel: "",
+      placeholder: "--",
       assistiveText: withYearPicker.screenReaderLabel,
-      value: Number(visibleMonth.format('YYYY')),
+      value: visibleMonth.format('YYYY'),
       onChange: (e, {
         value
-      }) => this.handleYearChange(e, Number(value))
+      }) => this.handleYearChange(e, `${value}`)
     }, yearList.map(year => jsx(SimpleSelect.Option, {
       key: year,
       id: `opt-${year}`,

package/lib/Calendar/index.js

@@ -143,17 +143,18 @@ let Calendar = exports.Calendar = (_dec = (0, _emotion.withStyle)(_styles.defaul
     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, year);
+        withYearPicker.onRequestYearChange(e, yearNumber);
         return;
       }
-      newDate.year(year);
+      newDate.year(yearNumber);
       this.setState({
         visibleMonth: newDate
       });
     };
-    // date is returned es a ISO string, like 2021-09-14T22:00:00.000Z
+    // date is returned as an ISO string, like 2021-09-14T22:00:00.000Z
     this.handleDayClick = (event, {
       date
     }) => {
@@ -184,14 +185,18 @@ let Calendar = exports.Calendar = (_dec = (0, _emotion.withStyle)(_styles.defaul
     return this.props.role === 'listbox' ? this.props.role : void 0;
   }
   get hasPrevMonth() {
-    return !this.props.withYearPicker || this.props.withYearPicker && Number(this.state.visibleMonth.clone().subtract({
+    // 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')) >= this.props.withYearPicker.startYear;
+    }).format('YYYY'));
+    return !this.props.withYearPicker || this.props.withYearPicker && yearNumber >= this.props.withYearPicker.startYear;
   }
   get hasNextMonth() {
-    return !this.props.withYearPicker || this.props.withYearPicker && Number(this.state.visibleMonth.clone().add({
+    // 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')) <= this.props.withYearPicker.endYear;
+    }).format('YYYY'));
+    return !this.props.withYearPicker || this.props.withYearPicker && yearNumber <= this.props.withYearPicker.endYear;
   }
   renderHeader() {
     const _this$props5 = this.props,
@@ -211,7 +216,8 @@ let Calendar = exports.Calendar = (_dec = (0, _emotion.withStyle)(_styles.defaul
       const startYear = withYearPicker.startYear,
         endYear = withYearPicker.endYear;
       for (let year = endYear; year >= startYear; year--) {
-        yearList.push(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, _emotion.jsx)("div", null, (0, _emotion.jsx)("div", {
@@ -221,11 +227,12 @@ let Calendar = exports.Calendar = (_dec = (0, _emotion.withStyle)(_styles.defaul
     }, (0, _emotion.jsx)(_SimpleSelect.SimpleSelect, {
       width: "90px",
       renderLabel: "",
+      placeholder: "--",
       assistiveText: withYearPicker.screenReaderLabel,
-      value: Number(visibleMonth.format('YYYY')),
+      value: visibleMonth.format('YYYY'),
       onChange: (e, {
         value
-      }) => this.handleYearChange(e, Number(value))
+      }) => this.handleYearChange(e, `${value}`)
     }, yearList.map(year => (0, _emotion.jsx)(_SimpleSelect.SimpleSelect.Option, {
       key: year,
       id: `opt-${year}`,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-calendar",
-  "version": "10.2.3-snapshot-10",
+  "version": "10.2.3-snapshot-13",
   "description": "A calendar component.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,31 +23,31 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "10.2.3-snapshot-10",
-    "@instructure/ui-color-utils": "10.2.3-snapshot-10",
-    "@instructure/ui-test-locator": "10.2.3-snapshot-10",
-    "@instructure/ui-test-utils": "10.2.3-snapshot-10",
-    "@instructure/ui-themes": "10.2.3-snapshot-10",
+    "@instructure/ui-babel-preset": "10.2.3-snapshot-13",
+    "@instructure/ui-color-utils": "10.2.3-snapshot-13",
+    "@instructure/ui-test-locator": "10.2.3-snapshot-13",
+    "@instructure/ui-test-utils": "10.2.3-snapshot-13",
+    "@instructure/ui-themes": "10.2.3-snapshot-13",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^15.0.7",
     "vitest": "^2.0.2"
   },
   "dependencies": {
     "@babel/runtime": "^7.24.5",
-    "@instructure/console": "10.2.3-snapshot-10",
-    "@instructure/emotion": "10.2.3-snapshot-10",
-    "@instructure/shared-types": "10.2.3-snapshot-10",
-    "@instructure/ui-a11y-content": "10.2.3-snapshot-10",
-    "@instructure/ui-buttons": "10.2.3-snapshot-10",
-    "@instructure/ui-i18n": "10.2.3-snapshot-10",
-    "@instructure/ui-icons": "10.2.3-snapshot-10",
-    "@instructure/ui-prop-types": "10.2.3-snapshot-10",
-    "@instructure/ui-react-utils": "10.2.3-snapshot-10",
-    "@instructure/ui-simple-select": "10.2.3-snapshot-10",
-    "@instructure/ui-testable": "10.2.3-snapshot-10",
-    "@instructure/ui-utils": "10.2.3-snapshot-10",
-    "@instructure/ui-view": "10.2.3-snapshot-10",
-    "@instructure/uid": "10.2.3-snapshot-10",
+    "@instructure/console": "10.2.3-snapshot-13",
+    "@instructure/emotion": "10.2.3-snapshot-13",
+    "@instructure/shared-types": "10.2.3-snapshot-13",
+    "@instructure/ui-a11y-content": "10.2.3-snapshot-13",
+    "@instructure/ui-buttons": "10.2.3-snapshot-13",
+    "@instructure/ui-i18n": "10.2.3-snapshot-13",
+    "@instructure/ui-icons": "10.2.3-snapshot-13",
+    "@instructure/ui-prop-types": "10.2.3-snapshot-13",
+    "@instructure/ui-react-utils": "10.2.3-snapshot-13",
+    "@instructure/ui-simple-select": "10.2.3-snapshot-13",
+    "@instructure/ui-testable": "10.2.3-snapshot-13",
+    "@instructure/ui-utils": "10.2.3-snapshot-13",
+    "@instructure/ui-view": "10.2.3-snapshot-13",
+    "@instructure/uid": "10.2.3-snapshot-13",
     "prop-types": "^15.8.1"
   },
   "peerDependencies": {

package/src/Calendar/index.tsx

@@ -145,22 +145,34 @@ class Calendar extends Component<CalendarProps, CalendarState> {
   }
 
   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 &&
-        Number(
-          this.state.visibleMonth.clone().subtract({ months: 1 }).format('YYYY')
-        ) >= this.props.withYearPicker.startYear)
+        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 &&
-        Number(
-          this.state.visibleMonth.clone().add({ months: 1 }).format('YYYY')
-        ) <= this.props.withYearPicker.endYear)
+        yearNumber <= this.props.withYearPicker.endYear)
     )
   }
 
@@ -227,16 +239,21 @@ class Calendar extends Component<CalendarProps, CalendarState> {
 
   handleYearChange = (
     e: React.SyntheticEvent<Element, Event>,
-    year: number
+    year: string
   ) => {
     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, year)
+      withYearPicker.onRequestYearChange(e, yearNumber)
       return
     }
-    newDate.year(year)
+    newDate.year(yearNumber)
     this.setState({ visibleMonth: newDate })
   }
 
@@ -261,12 +278,19 @@ class Calendar extends Component<CalendarProps, CalendarState> {
       ...(prevButton || nextButton ? [styles?.navigationWithButtons] : [])
     ]
 
-    const yearList: number[] = []
+    const yearList: string[] = []
 
     if (withYearPicker) {
       const { startYear, endYear } = withYearPicker
       for (let year = endYear; year >= startYear!; year--) {
-        yearList.push(year)
+        // add the years to the list with the correct locale
+        yearList.push(
+          DateTime.parse(
+            year.toString(),
+            this.locale(),
+            this.timezone()
+          ).format('YYYY')
+        )
       }
     }
 
@@ -294,8 +318,9 @@ class Calendar extends Component<CalendarProps, CalendarState> {
             <SimpleSelect
               width="90px"
               renderLabel=""
+              placeholder="--"
               assistiveText={withYearPicker.screenReaderLabel}
-              value={Number(visibleMonth.format('YYYY'))}
+              value={visibleMonth.format('YYYY')}
               onChange={(
                 e: React.SyntheticEvent<Element, Event>,
                 {
@@ -304,7 +329,7 @@ class Calendar extends Component<CalendarProps, CalendarState> {
                   value?: string | number | undefined
                   id?: string | undefined
                 }
-              ) => this.handleYearChange(e, Number(value))}
+              ) => this.handleYearChange(e, `${value}`)}
             >
               {yearList.map((year) => (
                 <SimpleSelect.Option key={year} id={`opt-${year}`} value={year}>
@@ -441,7 +466,7 @@ class Calendar extends Component<CalendarProps, CalendarState> {
     return DateTime.browserTimeZone()
   }
 
-  // date is returned es a ISO string, like 2021-09-14T22:00:00.000Z
+  // date is returned as an ISO string, like 2021-09-14T22:00:00.000Z
   handleDayClick = (event: MouseEvent<any>, { date }: { date: string }) => {
     if (this.props.onDateSelected) {
       const parsedDate = DateTime.parse(date, this.locale(), this.timezone())