@khanacademy/wonder-blocks-birthday-picker 3.2.2 → 3.3.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @khanacademy/wonder-blocks-birthday-picker
 
+## 3.3.0
+
+### Minor Changes
+
+- 3ef7032: Updated BirthdayPicker to use last day of month when monthYearOnly is true
+
 ## 3.2.2
 
 ### Patch Changes

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

@@ -36,9 +36,9 @@ type Props = {
     /**
      * Whether we want to hide the day field.
      *
-     * **NOTE:** We will set the day to the _first_ day of the _selected_ month
+     * **NOTE:** We will set the day to the _last_ day of the _selected_ month
      * if the day field is hidden. Please make sure to modify the passed date
-     * value to fit different needs (e.g. if you want to set the _first_ day of
+     * value to fit different needs (e.g. if you want to set the _last_ day of
      * the _following_ month instead).
      */
     monthYearOnly?: boolean;

package/dist/es/index.js

@@ -54,11 +54,21 @@ class BirthdayPicker extends React.Component {
         day,
         year
       } = this.state;
-      if (month === null || day === null || year === null) {
+      const {
+        monthYearOnly
+      } = this.props;
+      const dateFields = [year, month];
+      if (!monthYearOnly) {
+        dateFields.push(day);
+      }
+      if (dateFields.some(field => field === null)) {
         this.reportChange(null);
         return;
       }
-      const date = moment([year, month, day]);
+      let date = moment(dateFields);
+      if (monthYearOnly) {
+        date = date.endOf("month");
+      }
       if (date.isAfter() || !date.isValid()) {
         this.setState({
           error: this.labels.errorMessage
@@ -102,8 +112,11 @@ class BirthdayPicker extends React.Component {
     };
     this.labels = _extends({}, defaultLabels, this.props.labels);
     if (defaultValue) {
-      const date = moment(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());

package/dist/index.js

@@ -81,11 +81,21 @@ class BirthdayPicker extends React__namespace.Component {
         day,
         year
       } = this.state;
-      if (month === null || day === null || year === null) {
+      const {
+        monthYearOnly
+      } = this.props;
+      const dateFields = [year, month];
+      if (!monthYearOnly) {
+        dateFields.push(day);
+      }
+      if (dateFields.some(field => field === null)) {
         this.reportChange(null);
         return;
       }
-      const date = moment__default["default"]([year, month, day]);
+      let date = moment__default["default"](dateFields);
+      if (monthYearOnly) {
+        date = date.endOf("month");
+      }
       if (date.isAfter() || !date.isValid()) {
         this.setState({
           error: this.labels.errorMessage
@@ -129,8 +139,11 @@ class BirthdayPicker extends React__namespace.Component {
     };
     this.labels = _extends__default["default"]({}, defaultLabels, this.props.labels);
     if (defaultValue) {
-      const date = moment__default["default"](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());

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-birthday-picker",
-  "version": "3.2.2",
+  "version": "3.3.0",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -12,11 +12,11 @@
   "dependencies": {
     "@babel/runtime": "^7.24.5",
     "@khanacademy/wonder-blocks-core": "12.2.0",
-    "@khanacademy/wonder-blocks-dropdown": "9.1.2",
     "@khanacademy/wonder-blocks-icon": "5.1.2",
-    "@khanacademy/wonder-blocks-layout": "3.1.2",
     "@khanacademy/wonder-blocks-tokens": "5.0.0",
-    "@khanacademy/wonder-blocks-typography": "3.1.2"
+    "@khanacademy/wonder-blocks-layout": "3.1.2",
+    "@khanacademy/wonder-blocks-typography": "3.1.2",
+    "@khanacademy/wonder-blocks-dropdown": "9.1.2"
   },
   "peerDependencies": {
     "@phosphor-icons/core": "^2.0.2",