@khanacademy/wonder-blocks-birthday-picker 3.3.9 → 4.0.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @khanacademy/wonder-blocks-birthday-picker
 
+## 4.0.0
+
+### Major Changes
+
+- 422505e: Removed moment.js and replaced it with Temporal polyfill
+
+## 3.3.10
+
+### Patch Changes
+
+- Updated dependencies [e63adea]
+- Updated dependencies [e63adea]
+    - @khanacademy/wonder-blocks-tokens@8.0.0
+    - @khanacademy/wonder-blocks-dropdown@10.0.2
+    - @khanacademy/wonder-blocks-layout@3.1.8
+
 ## 3.3.9
 
 ### Patch Changes

package/dist/components/birthday-picker.d.ts

@@ -1,3 +1,4 @@
+import { Temporal } from "temporal-polyfill";
 import * as React from "react";
 import { StyleType } from "@khanacademy/wonder-blocks-core";
 export type Labels = {
@@ -89,6 +90,13 @@ export default class BirthdayPicker extends React.Component<Props, State> {
      * Calculates the initial state values based on the default value.
      */
     getStateFromDefault(): State;
+    /**
+     * Determines whether a given date is in the future.
+     *
+     * @param date - The Temporal.PlainDate to check.
+     * @returns True if the provided date comes after today's date, false otherwise.
+     */
+    isFutureDate(date: Temporal.PlainDate): boolean;
     lastChangeValue: string | null | undefined;
     /**
      * Report changes back to the calling component, but only if the value
@@ -108,6 +116,7 @@ export default class BirthdayPicker extends React.Component<Props, State> {
     handleDayChange: (day: string) => void;
     handleYearChange: (year: string) => void;
     maybeRenderError(): React.ReactNode | null | undefined;
+    monthsShort(): string[];
     renderMonth(): React.ReactNode;
     maybeRenderDay(): React.ReactNode | null | undefined;
     getMonthYearWidth(monthYearOnly: boolean | undefined): number;

package/dist/es/index.js

@@ -1,5 +1,5 @@
 import _extends from '@babel/runtime/helpers/extends';
-import moment from 'moment';
+import { Temporal } from 'temporal-polyfill';
 import * as React from 'react';
 import { StyleSheet } from 'aphrodite';
 import { View } from '@khanacademy/wonder-blocks-core';
@@ -65,11 +65,31 @@ class BirthdayPicker extends React.Component {
         this.reportChange(null);
         return;
       }
-      let date = moment(dateFields);
-      if (monthYearOnly) {
-        date = date.endOf("month");
+      let date;
+      try {
+        if (monthYearOnly) {
+          date = Temporal.PlainDate.from({
+            year: Number(year),
+            month: Number(month),
+            day: 31
+          });
+        } else {
+          date = Temporal.PlainDate.from({
+            year: Number(year),
+            month: Number(month),
+            day: Number(day)
+          }, {
+            overflow: "reject"
+          });
+        }
+      } catch (err) {
+        this.setState({
+          error: this.labels.errorMessage
+        });
+        this.reportChange(null);
+        return;
       }
-      if (date.isAfter() || !date.isValid()) {
+      if (this.isFutureDate(date)) {
         this.setState({
           error: this.labels.errorMessage
         });
@@ -78,7 +98,7 @@ class BirthdayPicker extends React.Component {
         this.setState({
           error: null
         });
-        this.reportChange(date.locale("en").format("YYYY-MM-DD"));
+        this.reportChange(date.toString());
       }
     };
     this.handleMonthChange = month => {
@@ -112,21 +132,30 @@ class BirthdayPicker extends React.Component {
     };
     this.labels = _extends({}, defaultLabels, this.props.labels);
     if (defaultValue) {
-      let date = moment(defaultValue);
-      if (date.isValid()) {
-        if (monthYearOnly) {
-          date = date.endOf("month");
-        }
-        initialState.month = String(date.month());
-        initialState.day = String(date.date());
-        initialState.year = String(date.year());
+      let date = null;
+      try {
+        date = Temporal.PlainDate.from(defaultValue);
+      } catch (err) {
+        initialState.error = this.labels.errorMessage;
+        return initialState;
+      }
+      if (monthYearOnly) {
+        date = date.with({
+          day: date.daysInMonth
+        });
       }
-      if (date.isAfter() || !date.isValid()) {
+      initialState.month = String(date.month);
+      initialState.day = String(date.day);
+      initialState.year = String(date.year);
+      if (this.isFutureDate(date)) {
         initialState.error = this.labels.errorMessage;
       }
     }
     return initialState;
   }
+  isFutureDate(date) {
+    return Temporal.PlainDate.compare(date, Temporal.Now.plainDateISO()) === 1;
+  }
   maybeRenderError() {
     const {
       error
@@ -155,6 +184,12 @@ class BirthdayPicker extends React.Component {
       }
     }, error)));
   }
+  monthsShort() {
+    const format = new Intl.DateTimeFormat(navigator.language, {
+      month: "short"
+    }).format;
+    return [...Array(12).keys()].map(m => format(new Date(2021, m, 15)));
+  }
   renderMonth() {
     const {
       disabled,
@@ -177,10 +212,10 @@ class BirthdayPicker extends React.Component {
         minWidth
       }, defaultStyles.input, dropdownStyle],
       testId: "birthday-picker-month"
-    }, moment.monthsShort().map((month, i) => React.createElement(OptionItem, {
-      key: month,
-      label: month,
-      value: String(i)
+    }, this.monthsShort().map((monthShort, i) => React.createElement(OptionItem, {
+      key: monthShort,
+      label: monthShort,
+      value: String(i + 1)
     })));
   }
   maybeRenderDay() {

package/dist/index.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var _extends = require('@babel/runtime/helpers/extends');
-var moment = require('moment');
+var temporalPolyfill = require('temporal-polyfill');
 var React = require('react');
 var aphrodite = require('aphrodite');
 var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
@@ -33,7 +33,6 @@ function _interopNamespace(e) {
 }
 
 var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
-var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var infoIcon__default = /*#__PURE__*/_interopDefaultLegacy(infoIcon);
 
@@ -92,11 +91,31 @@ class BirthdayPicker extends React__namespace.Component {
         this.reportChange(null);
         return;
       }
-      let date = moment__default["default"](dateFields);
-      if (monthYearOnly) {
-        date = date.endOf("month");
+      let date;
+      try {
+        if (monthYearOnly) {
+          date = temporalPolyfill.Temporal.PlainDate.from({
+            year: Number(year),
+            month: Number(month),
+            day: 31
+          });
+        } else {
+          date = temporalPolyfill.Temporal.PlainDate.from({
+            year: Number(year),
+            month: Number(month),
+            day: Number(day)
+          }, {
+            overflow: "reject"
+          });
+        }
+      } catch (err) {
+        this.setState({
+          error: this.labels.errorMessage
+        });
+        this.reportChange(null);
+        return;
       }
-      if (date.isAfter() || !date.isValid()) {
+      if (this.isFutureDate(date)) {
         this.setState({
           error: this.labels.errorMessage
         });
@@ -105,7 +124,7 @@ class BirthdayPicker extends React__namespace.Component {
         this.setState({
           error: null
         });
-        this.reportChange(date.locale("en").format("YYYY-MM-DD"));
+        this.reportChange(date.toString());
       }
     };
     this.handleMonthChange = month => {
@@ -139,21 +158,30 @@ class BirthdayPicker extends React__namespace.Component {
     };
     this.labels = _extends__default["default"]({}, defaultLabels, this.props.labels);
     if (defaultValue) {
-      let date = moment__default["default"](defaultValue);
-      if (date.isValid()) {
-        if (monthYearOnly) {
-          date = date.endOf("month");
-        }
-        initialState.month = String(date.month());
-        initialState.day = String(date.date());
-        initialState.year = String(date.year());
+      let date = null;
+      try {
+        date = temporalPolyfill.Temporal.PlainDate.from(defaultValue);
+      } catch (err) {
+        initialState.error = this.labels.errorMessage;
+        return initialState;
+      }
+      if (monthYearOnly) {
+        date = date.with({
+          day: date.daysInMonth
+        });
       }
-      if (date.isAfter() || !date.isValid()) {
+      initialState.month = String(date.month);
+      initialState.day = String(date.day);
+      initialState.year = String(date.year);
+      if (this.isFutureDate(date)) {
         initialState.error = this.labels.errorMessage;
       }
     }
     return initialState;
   }
+  isFutureDate(date) {
+    return temporalPolyfill.Temporal.PlainDate.compare(date, temporalPolyfill.Temporal.Now.plainDateISO()) === 1;
+  }
   maybeRenderError() {
     const {
       error
@@ -182,6 +210,12 @@ class BirthdayPicker extends React__namespace.Component {
       }
     }, error)));
   }
+  monthsShort() {
+    const format = new Intl.DateTimeFormat(navigator.language, {
+      month: "short"
+    }).format;
+    return [...Array(12).keys()].map(m => format(new Date(2021, m, 15)));
+  }
   renderMonth() {
     const {
       disabled,
@@ -204,10 +238,10 @@ class BirthdayPicker extends React__namespace.Component {
         minWidth
       }, defaultStyles.input, dropdownStyle],
       testId: "birthday-picker-month"
-    }, moment__default["default"].monthsShort().map((month, i) => React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
-      key: month,
-      label: month,
-      value: String(i)
+    }, this.monthsShort().map((monthShort, i) => React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
+      key: monthShort,
+      label: monthShort,
+      value: String(i + 1)
     })));
   }
   maybeRenderDay() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-birthday-picker",
-  "version": "3.3.9",
+  "version": "4.0.0",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -12,16 +12,16 @@
   "dependencies": {
     "@babel/runtime": "^7.24.5",
     "@khanacademy/wonder-blocks-core": "12.2.1",
-    "@khanacademy/wonder-blocks-dropdown": "10.0.1",
+    "@khanacademy/wonder-blocks-dropdown": "10.0.2",
     "@khanacademy/wonder-blocks-icon": "5.1.3",
-    "@khanacademy/wonder-blocks-layout": "3.1.7",
-    "@khanacademy/wonder-blocks-tokens": "7.0.0",
+    "@khanacademy/wonder-blocks-layout": "3.1.8",
+    "@khanacademy/wonder-blocks-tokens": "8.0.0",
     "@khanacademy/wonder-blocks-typography": "3.1.3"
   },
   "peerDependencies": {
     "@phosphor-icons/core": "^2.0.2",
     "aphrodite": "^1.2.5",
-    "moment": "2.29.4",
+    "temporal-polyfill": "^0.3.0",
     "react": "18.2.0"
   },
   "devDependencies": {