@khanacademy/wonder-blocks-birthday-picker 4.0.2 → 4.0.3

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @khanacademy/wonder-blocks-birthday-picker
 
+## 4.0.3
+
+### Patch Changes
+
+- Updated dependencies [b9e4946]
+- Updated dependencies [b9e4946]
+    - @khanacademy/wonder-blocks-tokens@10.0.0
+    - @khanacademy/wonder-blocks-typography@3.2.0
+    - @khanacademy/wonder-blocks-dropdown@10.0.5
+    - @khanacademy/wonder-blocks-layout@3.1.10
+    - @khanacademy/wonder-blocks-core@12.2.1
+    - @khanacademy/wonder-blocks-icon@5.1.3
+
 ## 4.0.2
 
 ### Patch Changes

package/dist/es/index.js

@@ -1,4 +1,4 @@
-import _extends from '@babel/runtime/helpers/extends';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { Temporal } from 'temporal-polyfill';
 import * as React from 'react';
 import { StyleSheet } from 'aphrodite';
@@ -10,291 +10,6 @@ import { PhosphorIcon } from '@khanacademy/wonder-blocks-icon';
 import { SingleSelect, OptionItem } from '@khanacademy/wonder-blocks-dropdown';
 import infoIcon from '@phosphor-icons/core/bold/info-bold.svg';
 
-const CUR_YEAR = new Date().getYear() + 1900;
-const defaultLabels = Object.freeze({
-  errorMessage: "Please select a valid birthdate.",
-  month: "Month",
-  year: "Year",
-  day: "Day"
-});
-const FIELD_MIN_WIDTH_FULL = 110;
-const FIELD_MIN_WIDTH_MONTH_YEAR = 167;
-const FIELD_MIN_WIDTH_DAY = 100;
-const xsMin = "520px";
-const screenSizes = {
-  small: `@media (max-width: ${xsMin})`
-};
-const defaultStyles = StyleSheet.create({
-  wrapper: {
-    flexDirection: "row",
-    [screenSizes.small]: {
-      flexDirection: "column"
-    }
-  },
-  input: {
-    [screenSizes.small]: {
-      minWidth: "100%"
-    }
-  }
-});
-class BirthdayPicker extends React.Component {
-  constructor(props) {
-    super(props);
-    this.labels = void 0;
-    this.lastChangeValue = null;
-    this.reportChange = value => {
-      if (value !== this.lastChangeValue) {
-        this.lastChangeValue = value;
-        this.props.onChange(value);
-      }
-    };
-    this.handleChange = () => {
-      const {
-        month,
-        day,
-        year
-      } = this.state;
-      const {
-        monthYearOnly
-      } = this.props;
-      const dateFields = [year, month];
-      if (!monthYearOnly) {
-        dateFields.push(day);
-      }
-      if (dateFields.some(field => field === null)) {
-        this.reportChange(null);
-        return;
-      }
-      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 (this.isFutureDate(date)) {
-        this.setState({
-          error: this.labels.errorMessage
-        });
-        this.reportChange(null);
-      } else {
-        this.setState({
-          error: null
-        });
-        this.reportChange(date.toString());
-      }
-    };
-    this.handleMonthChange = month => {
-      this.setState({
-        month
-      }, this.handleChange);
-    };
-    this.handleDayChange = day => {
-      this.setState({
-        day
-      }, this.handleChange);
-    };
-    this.handleYearChange = year => {
-      this.setState({
-        year
-      }, this.handleChange);
-    };
-    this.lastChangeValue = props.defaultValue || null;
-    this.state = this.getStateFromDefault();
-  }
-  getStateFromDefault() {
-    const {
-      defaultValue,
-      monthYearOnly
-    } = this.props;
-    const initialState = {
-      month: null,
-      day: monthYearOnly ? "1" : null,
-      year: null,
-      error: null
-    };
-    this.labels = _extends({}, defaultLabels, this.props.labels);
-    if (defaultValue) {
-      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
-        });
-      }
-      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
-    } = this.state;
-    if (!error) {
-      return null;
-    }
-    return React.createElement(React.Fragment, null, React.createElement(Strut, {
-      size: spacing.xxxSmall_4
-    }), React.createElement(View, {
-      style: {
-        flexDirection: "row",
-        placeItems: "center"
-      },
-      role: "alert"
-    }, React.createElement(PhosphorIcon, {
-      size: "small",
-      icon: infoIcon,
-      color: semanticColor.icon.destructive,
-      "aria-hidden": "true"
-    }), React.createElement(Strut, {
-      size: spacing.xxxSmall_4
-    }), React.createElement(Body, {
-      style: {
-        color: semanticColor.status.critical.foreground
-      }
-    }, 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,
-      monthYearOnly,
-      dropdownStyle
-    } = this.props;
-    const {
-      month
-    } = this.state;
-    const minWidth = this.getMonthYearWidth(monthYearOnly);
-    return React.createElement(SingleSelect, {
-      "aria-label": this.labels.month,
-      "aria-invalid": !!this.state.error,
-      error: !!this.state.error,
-      disabled: disabled,
-      placeholder: this.labels.month,
-      onChange: this.handleMonthChange,
-      selectedValue: month,
-      style: [{
-        minWidth
-      }, defaultStyles.input, dropdownStyle],
-      testId: "birthday-picker-month"
-    }, this.monthsShort().map((monthShort, i) => React.createElement(OptionItem, {
-      key: monthShort,
-      label: monthShort,
-      value: String(i + 1)
-    })));
-  }
-  maybeRenderDay() {
-    const {
-      disabled,
-      monthYearOnly,
-      dropdownStyle
-    } = this.props;
-    const {
-      day
-    } = this.state;
-    if (monthYearOnly) {
-      return null;
-    }
-    return React.createElement(React.Fragment, null, React.createElement(Strut, {
-      size: spacing.xSmall_8
-    }), React.createElement(SingleSelect, {
-      "aria-label": this.labels.day,
-      "aria-invalid": !!this.state.error,
-      error: !!this.state.error,
-      disabled: disabled,
-      placeholder: this.labels.day,
-      onChange: this.handleDayChange,
-      selectedValue: day,
-      style: [{
-        minWidth: FIELD_MIN_WIDTH_DAY
-      }, defaultStyles.input, dropdownStyle],
-      testId: "birthday-picker-day"
-    }, Array.from(Array(31)).map((_, day) => React.createElement(OptionItem, {
-      key: String(day + 1),
-      label: String(day + 1),
-      value: String(day + 1)
-    }))));
-  }
-  getMonthYearWidth(monthYearOnly) {
-    return monthYearOnly ? FIELD_MIN_WIDTH_MONTH_YEAR : FIELD_MIN_WIDTH_FULL;
-  }
-  renderYear() {
-    const {
-      disabled,
-      monthYearOnly,
-      dropdownStyle
-    } = this.props;
-    const {
-      year
-    } = this.state;
-    const minWidth = this.getMonthYearWidth(monthYearOnly);
-    return React.createElement(SingleSelect, {
-      "aria-label": this.labels.year,
-      "aria-invalid": !!this.state.error,
-      error: !!this.state.error,
-      disabled: disabled,
-      placeholder: this.labels.year,
-      onChange: this.handleYearChange,
-      selectedValue: year,
-      style: [{
-        minWidth
-      }, defaultStyles.input, dropdownStyle],
-      dropdownStyle: {
-        minWidth: 150
-      },
-      testId: "birthday-picker-year"
-    }, Array.from(Array(120)).map((_, yearOffset) => React.createElement(OptionItem, {
-      key: String(CUR_YEAR - yearOffset),
-      label: String(CUR_YEAR - yearOffset),
-      value: String(CUR_YEAR - yearOffset)
-    })));
-  }
-  render() {
-    const {
-      style
-    } = this.props;
-    return React.createElement(React.Fragment, null, React.createElement(View, {
-      testId: "birthday-picker",
-      style: [defaultStyles.wrapper, style]
-    }, this.renderMonth(), this.maybeRenderDay(), React.createElement(Strut, {
-      size: spacing.xSmall_8
-    }), this.renderYear()), this.maybeRenderError());
-  }
-}
+const CUR_YEAR=new Date().getYear()+1900;const defaultLabels=Object.freeze({errorMessage:"Please select a valid birthdate.",month:"Month",year:"Year",day:"Day"});const FIELD_MIN_WIDTH_FULL=110;const FIELD_MIN_WIDTH_MONTH_YEAR=167;const FIELD_MIN_WIDTH_DAY=100;const xsMin="520px";const screenSizes={small:`@media (max-width: ${xsMin})`};const defaultStyles=StyleSheet.create({wrapper:{flexDirection:"row",[screenSizes.small]:{flexDirection:"column"}},input:{[screenSizes.small]:{minWidth:"100%"}}});class BirthdayPicker extends React.Component{getStateFromDefault(){const{defaultValue,monthYearOnly}=this.props;const initialState={month:null,day:monthYearOnly?"1":null,year:null,error:null};this.labels={...defaultLabels,...this.props.labels};if(defaultValue){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});}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}=this.state;if(!error){return null}return jsxs(Fragment,{children:[jsx(Strut,{size:spacing.xxxSmall_4}),jsxs(View,{style:{flexDirection:"row",placeItems:"center"},role:"alert",children:[jsx(PhosphorIcon,{size:"small",icon:infoIcon,color:semanticColor.icon.destructive,"aria-hidden":"true"}),jsx(Strut,{size:spacing.xxxSmall_4}),jsx(Body,{style:{color:semanticColor.status.critical.foreground},children: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,monthYearOnly,dropdownStyle}=this.props;const{month}=this.state;const minWidth=this.getMonthYearWidth(monthYearOnly);return jsx(SingleSelect,{"aria-label":this.labels.month,"aria-invalid":!!this.state.error,error:!!this.state.error,disabled:disabled,placeholder:this.labels.month,onChange:this.handleMonthChange,selectedValue:month,style:[{minWidth},defaultStyles.input,dropdownStyle],testId:"birthday-picker-month",children:this.monthsShort().map((monthShort,i)=>jsx(OptionItem,{label:monthShort,value:String(i+1)},monthShort))})}maybeRenderDay(){const{disabled,monthYearOnly,dropdownStyle}=this.props;const{day}=this.state;if(monthYearOnly){return null}return jsxs(Fragment,{children:[jsx(Strut,{size:spacing.xSmall_8}),jsx(SingleSelect,{"aria-label":this.labels.day,"aria-invalid":!!this.state.error,error:!!this.state.error,disabled:disabled,placeholder:this.labels.day,onChange:this.handleDayChange,selectedValue:day,style:[{minWidth:FIELD_MIN_WIDTH_DAY},defaultStyles.input,dropdownStyle],testId:"birthday-picker-day",children:Array.from(Array(31)).map((_,day)=>jsx(OptionItem,{label:String(day+1),value:String(day+1)},String(day+1)))})]})}getMonthYearWidth(monthYearOnly){return monthYearOnly?FIELD_MIN_WIDTH_MONTH_YEAR:FIELD_MIN_WIDTH_FULL}renderYear(){const{disabled,monthYearOnly,dropdownStyle}=this.props;const{year}=this.state;const minWidth=this.getMonthYearWidth(monthYearOnly);return jsx(SingleSelect,{"aria-label":this.labels.year,"aria-invalid":!!this.state.error,error:!!this.state.error,disabled:disabled,placeholder:this.labels.year,onChange:this.handleYearChange,selectedValue:year,style:[{minWidth},defaultStyles.input,dropdownStyle],dropdownStyle:{minWidth:150},testId:"birthday-picker-year",children:Array.from(Array(120)).map((_,yearOffset)=>jsx(OptionItem,{label:String(CUR_YEAR-yearOffset),value:String(CUR_YEAR-yearOffset)},String(CUR_YEAR-yearOffset)))})}render(){const{style}=this.props;return jsxs(Fragment,{children:[jsxs(View,{testId:"birthday-picker",style:[defaultStyles.wrapper,style],children:[this.renderMonth(),this.maybeRenderDay(),jsx(Strut,{size:spacing.xSmall_8}),this.renderYear()]}),this.maybeRenderError()]})}constructor(props){super(props),this.lastChangeValue=null,this.reportChange=value=>{if(value!==this.lastChangeValue){this.lastChangeValue=value;this.props.onChange(value);}},this.handleChange=()=>{const{month,day,year}=this.state;const{monthYearOnly}=this.props;const dateFields=[year,month];if(!monthYearOnly){dateFields.push(day);}if(dateFields.some(field=>field===null)){this.reportChange(null);return}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(this.isFutureDate(date)){this.setState({error:this.labels.errorMessage});this.reportChange(null);}else {this.setState({error:null});this.reportChange(date.toString());}},this.handleMonthChange=month=>{this.setState({month},this.handleChange);},this.handleDayChange=day=>{this.setState({day},this.handleChange);},this.handleYearChange=year=>{this.setState({year},this.handleChange);};this.lastChangeValue=props.defaultValue||null;this.state=this.getStateFromDefault();}}
 
 export { BirthdayPicker as default };

package/dist/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var _extends = require('@babel/runtime/helpers/extends');
+var jsxRuntime = require('react/jsx-runtime');
 var temporalPolyfill = require('temporal-polyfill');
 var React = require('react');
 var aphrodite = require('aphrodite');
@@ -32,295 +32,9 @@ function _interopNamespace(e) {
     return Object.freeze(n);
 }
 
-var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var infoIcon__default = /*#__PURE__*/_interopDefaultLegacy(infoIcon);
 
-const CUR_YEAR = new Date().getYear() + 1900;
-const defaultLabels = Object.freeze({
-  errorMessage: "Please select a valid birthdate.",
-  month: "Month",
-  year: "Year",
-  day: "Day"
-});
-const FIELD_MIN_WIDTH_FULL = 110;
-const FIELD_MIN_WIDTH_MONTH_YEAR = 167;
-const FIELD_MIN_WIDTH_DAY = 100;
-const xsMin = "520px";
-const screenSizes = {
-  small: `@media (max-width: ${xsMin})`
-};
-const defaultStyles = aphrodite.StyleSheet.create({
-  wrapper: {
-    flexDirection: "row",
-    [screenSizes.small]: {
-      flexDirection: "column"
-    }
-  },
-  input: {
-    [screenSizes.small]: {
-      minWidth: "100%"
-    }
-  }
-});
-class BirthdayPicker extends React__namespace.Component {
-  constructor(props) {
-    super(props);
-    this.labels = void 0;
-    this.lastChangeValue = null;
-    this.reportChange = value => {
-      if (value !== this.lastChangeValue) {
-        this.lastChangeValue = value;
-        this.props.onChange(value);
-      }
-    };
-    this.handleChange = () => {
-      const {
-        month,
-        day,
-        year
-      } = this.state;
-      const {
-        monthYearOnly
-      } = this.props;
-      const dateFields = [year, month];
-      if (!monthYearOnly) {
-        dateFields.push(day);
-      }
-      if (dateFields.some(field => field === null)) {
-        this.reportChange(null);
-        return;
-      }
-      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 (this.isFutureDate(date)) {
-        this.setState({
-          error: this.labels.errorMessage
-        });
-        this.reportChange(null);
-      } else {
-        this.setState({
-          error: null
-        });
-        this.reportChange(date.toString());
-      }
-    };
-    this.handleMonthChange = month => {
-      this.setState({
-        month
-      }, this.handleChange);
-    };
-    this.handleDayChange = day => {
-      this.setState({
-        day
-      }, this.handleChange);
-    };
-    this.handleYearChange = year => {
-      this.setState({
-        year
-      }, this.handleChange);
-    };
-    this.lastChangeValue = props.defaultValue || null;
-    this.state = this.getStateFromDefault();
-  }
-  getStateFromDefault() {
-    const {
-      defaultValue,
-      monthYearOnly
-    } = this.props;
-    const initialState = {
-      month: null,
-      day: monthYearOnly ? "1" : null,
-      year: null,
-      error: null
-    };
-    this.labels = _extends__default["default"]({}, defaultLabels, this.props.labels);
-    if (defaultValue) {
-      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
-        });
-      }
-      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
-    } = this.state;
-    if (!error) {
-      return null;
-    }
-    return React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement(wonderBlocksLayout.Strut, {
-      size: wonderBlocksTokens.spacing.xxxSmall_4
-    }), React__namespace.createElement(wonderBlocksCore.View, {
-      style: {
-        flexDirection: "row",
-        placeItems: "center"
-      },
-      role: "alert"
-    }, React__namespace.createElement(wonderBlocksIcon.PhosphorIcon, {
-      size: "small",
-      icon: infoIcon__default["default"],
-      color: wonderBlocksTokens.semanticColor.icon.destructive,
-      "aria-hidden": "true"
-    }), React__namespace.createElement(wonderBlocksLayout.Strut, {
-      size: wonderBlocksTokens.spacing.xxxSmall_4
-    }), React__namespace.createElement(wonderBlocksTypography.Body, {
-      style: {
-        color: wonderBlocksTokens.semanticColor.status.critical.foreground
-      }
-    }, 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,
-      monthYearOnly,
-      dropdownStyle
-    } = this.props;
-    const {
-      month
-    } = this.state;
-    const minWidth = this.getMonthYearWidth(monthYearOnly);
-    return React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
-      "aria-label": this.labels.month,
-      "aria-invalid": !!this.state.error,
-      error: !!this.state.error,
-      disabled: disabled,
-      placeholder: this.labels.month,
-      onChange: this.handleMonthChange,
-      selectedValue: month,
-      style: [{
-        minWidth
-      }, defaultStyles.input, dropdownStyle],
-      testId: "birthday-picker-month"
-    }, this.monthsShort().map((monthShort, i) => React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
-      key: monthShort,
-      label: monthShort,
-      value: String(i + 1)
-    })));
-  }
-  maybeRenderDay() {
-    const {
-      disabled,
-      monthYearOnly,
-      dropdownStyle
-    } = this.props;
-    const {
-      day
-    } = this.state;
-    if (monthYearOnly) {
-      return null;
-    }
-    return React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement(wonderBlocksLayout.Strut, {
-      size: wonderBlocksTokens.spacing.xSmall_8
-    }), React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
-      "aria-label": this.labels.day,
-      "aria-invalid": !!this.state.error,
-      error: !!this.state.error,
-      disabled: disabled,
-      placeholder: this.labels.day,
-      onChange: this.handleDayChange,
-      selectedValue: day,
-      style: [{
-        minWidth: FIELD_MIN_WIDTH_DAY
-      }, defaultStyles.input, dropdownStyle],
-      testId: "birthday-picker-day"
-    }, Array.from(Array(31)).map((_, day) => React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
-      key: String(day + 1),
-      label: String(day + 1),
-      value: String(day + 1)
-    }))));
-  }
-  getMonthYearWidth(monthYearOnly) {
-    return monthYearOnly ? FIELD_MIN_WIDTH_MONTH_YEAR : FIELD_MIN_WIDTH_FULL;
-  }
-  renderYear() {
-    const {
-      disabled,
-      monthYearOnly,
-      dropdownStyle
-    } = this.props;
-    const {
-      year
-    } = this.state;
-    const minWidth = this.getMonthYearWidth(monthYearOnly);
-    return React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
-      "aria-label": this.labels.year,
-      "aria-invalid": !!this.state.error,
-      error: !!this.state.error,
-      disabled: disabled,
-      placeholder: this.labels.year,
-      onChange: this.handleYearChange,
-      selectedValue: year,
-      style: [{
-        minWidth
-      }, defaultStyles.input, dropdownStyle],
-      dropdownStyle: {
-        minWidth: 150
-      },
-      testId: "birthday-picker-year"
-    }, Array.from(Array(120)).map((_, yearOffset) => React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
-      key: String(CUR_YEAR - yearOffset),
-      label: String(CUR_YEAR - yearOffset),
-      value: String(CUR_YEAR - yearOffset)
-    })));
-  }
-  render() {
-    const {
-      style
-    } = this.props;
-    return React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement(wonderBlocksCore.View, {
-      testId: "birthday-picker",
-      style: [defaultStyles.wrapper, style]
-    }, this.renderMonth(), this.maybeRenderDay(), React__namespace.createElement(wonderBlocksLayout.Strut, {
-      size: wonderBlocksTokens.spacing.xSmall_8
-    }), this.renderYear()), this.maybeRenderError());
-  }
-}
+const CUR_YEAR=new Date().getYear()+1900;const defaultLabels=Object.freeze({errorMessage:"Please select a valid birthdate.",month:"Month",year:"Year",day:"Day"});const FIELD_MIN_WIDTH_FULL=110;const FIELD_MIN_WIDTH_MONTH_YEAR=167;const FIELD_MIN_WIDTH_DAY=100;const xsMin="520px";const screenSizes={small:`@media (max-width: ${xsMin})`};const defaultStyles=aphrodite.StyleSheet.create({wrapper:{flexDirection:"row",[screenSizes.small]:{flexDirection:"column"}},input:{[screenSizes.small]:{minWidth:"100%"}}});class BirthdayPicker extends React__namespace.Component{getStateFromDefault(){const{defaultValue,monthYearOnly}=this.props;const initialState={month:null,day:monthYearOnly?"1":null,year:null,error:null};this.labels={...defaultLabels,...this.props.labels};if(defaultValue){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});}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}=this.state;if(!error){return null}return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.xxxSmall_4}),jsxRuntime.jsxs(wonderBlocksCore.View,{style:{flexDirection:"row",placeItems:"center"},role:"alert",children:[jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{size:"small",icon:infoIcon__default["default"],color:wonderBlocksTokens.semanticColor.icon.destructive,"aria-hidden":"true"}),jsxRuntime.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.xxxSmall_4}),jsxRuntime.jsx(wonderBlocksTypography.Body,{style:{color:wonderBlocksTokens.semanticColor.status.critical.foreground},children: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,monthYearOnly,dropdownStyle}=this.props;const{month}=this.state;const minWidth=this.getMonthYearWidth(monthYearOnly);return jsxRuntime.jsx(wonderBlocksDropdown.SingleSelect,{"aria-label":this.labels.month,"aria-invalid":!!this.state.error,error:!!this.state.error,disabled:disabled,placeholder:this.labels.month,onChange:this.handleMonthChange,selectedValue:month,style:[{minWidth},defaultStyles.input,dropdownStyle],testId:"birthday-picker-month",children:this.monthsShort().map((monthShort,i)=>jsxRuntime.jsx(wonderBlocksDropdown.OptionItem,{label:monthShort,value:String(i+1)},monthShort))})}maybeRenderDay(){const{disabled,monthYearOnly,dropdownStyle}=this.props;const{day}=this.state;if(monthYearOnly){return null}return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.xSmall_8}),jsxRuntime.jsx(wonderBlocksDropdown.SingleSelect,{"aria-label":this.labels.day,"aria-invalid":!!this.state.error,error:!!this.state.error,disabled:disabled,placeholder:this.labels.day,onChange:this.handleDayChange,selectedValue:day,style:[{minWidth:FIELD_MIN_WIDTH_DAY},defaultStyles.input,dropdownStyle],testId:"birthday-picker-day",children:Array.from(Array(31)).map((_,day)=>jsxRuntime.jsx(wonderBlocksDropdown.OptionItem,{label:String(day+1),value:String(day+1)},String(day+1)))})]})}getMonthYearWidth(monthYearOnly){return monthYearOnly?FIELD_MIN_WIDTH_MONTH_YEAR:FIELD_MIN_WIDTH_FULL}renderYear(){const{disabled,monthYearOnly,dropdownStyle}=this.props;const{year}=this.state;const minWidth=this.getMonthYearWidth(monthYearOnly);return jsxRuntime.jsx(wonderBlocksDropdown.SingleSelect,{"aria-label":this.labels.year,"aria-invalid":!!this.state.error,error:!!this.state.error,disabled:disabled,placeholder:this.labels.year,onChange:this.handleYearChange,selectedValue:year,style:[{minWidth},defaultStyles.input,dropdownStyle],dropdownStyle:{minWidth:150},testId:"birthday-picker-year",children:Array.from(Array(120)).map((_,yearOffset)=>jsxRuntime.jsx(wonderBlocksDropdown.OptionItem,{label:String(CUR_YEAR-yearOffset),value:String(CUR_YEAR-yearOffset)},String(CUR_YEAR-yearOffset)))})}render(){const{style}=this.props;return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsxs(wonderBlocksCore.View,{testId:"birthday-picker",style:[defaultStyles.wrapper,style],children:[this.renderMonth(),this.maybeRenderDay(),jsxRuntime.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.xSmall_8}),this.renderYear()]}),this.maybeRenderError()]})}constructor(props){super(props),this.lastChangeValue=null,this.reportChange=value=>{if(value!==this.lastChangeValue){this.lastChangeValue=value;this.props.onChange(value);}},this.handleChange=()=>{const{month,day,year}=this.state;const{monthYearOnly}=this.props;const dateFields=[year,month];if(!monthYearOnly){dateFields.push(day);}if(dateFields.some(field=>field===null)){this.reportChange(null);return}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(this.isFutureDate(date)){this.setState({error:this.labels.errorMessage});this.reportChange(null);}else {this.setState({error:null});this.reportChange(date.toString());}},this.handleMonthChange=month=>{this.setState({month},this.handleChange);},this.handleDayChange=day=>{this.setState({day},this.handleChange);},this.handleYearChange=year=>{this.setState({year},this.handleChange);};this.lastChangeValue=props.defaultValue||null;this.state=this.getStateFromDefault();}}
 
 module.exports = BirthdayPicker;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-birthday-picker",
-  "version": "4.0.2",
+  "version": "4.0.3",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -10,13 +10,12 @@
   "module": "dist/es/index.js",
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@babel/runtime": "^7.24.5",
     "@khanacademy/wonder-blocks-core": "12.2.1",
-    "@khanacademy/wonder-blocks-dropdown": "10.0.4",
+    "@khanacademy/wonder-blocks-dropdown": "10.0.5",
     "@khanacademy/wonder-blocks-icon": "5.1.3",
-    "@khanacademy/wonder-blocks-layout": "3.1.9",
-    "@khanacademy/wonder-blocks-tokens": "9.0.0",
-    "@khanacademy/wonder-blocks-typography": "3.1.3"
+    "@khanacademy/wonder-blocks-layout": "3.1.10",
+    "@khanacademy/wonder-blocks-tokens": "10.0.0",
+    "@khanacademy/wonder-blocks-typography": "3.2.0"
   },
   "peerDependencies": {
     "@phosphor-icons/core": "^2.0.2",
@@ -25,7 +24,7 @@
     "react": "18.2.0"
   },
   "devDependencies": {
-    "@khanacademy/wb-dev-build-settings": "2.1.1"
+    "@khanacademy/wb-dev-build-settings": "3.0.0"
   },
   "author": "",
   "license": "MIT",